@charset "UTF-8";

/* ==========================================================================
   1. 기본 레이아웃 & 배경 애니메이션
   ========================================================================== */
.page-main.page-main-guest { min-height: 100vh; display: flex; flex-direction: column; overflow-y: visible; }
.page-main.page-main-guest::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(120deg, #fcf7ff 0%, #edf6ff 34%, #f4fbfab5 62%, #ffffff 100%); background-size: 100% 100%; animation: pageGradient 18s ease-in-out infinite alternate; }
.page-main.page-main-guest::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("/images/main/bg-pattern.webp"); background-repeat: no-repeat; background-position: center top; background-size: cover; opacity: 0.8; }

@keyframes pageGradient {
    0% { background-position: 0% 45%; }
    50% { background-position: 100% 55%; }
    100% { background-position: 20% 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .page-main.page-main-guest::before { animation: none; }
}

.page-main-guest .main-content { flex: 1; min-height: 0; overflow: hidden; }
.page-main-guest .hero-section { flex: 1; min-height: 0; padding: 3rem 0 1.6rem; }
.container .container-section { margin-top: 1.2rem; }
.page-main-guest .hero-section > .container { height: 100%; display: flex; flex-direction: column; }
.page-main-guest .service-grid { flex: 1; min-height: 0; }

/* ==========================================================================
   2. Hero Section (타이틀, 배너 슬라이더, 인사말)
   ========================================================================== */
.hero-section { padding: 7rem 0 3rem; }
.hero-top { display: flex; justify-content: space-between; margin-bottom: 2rem; align-items: center; }
.hero-copy { max-width: 80rem; width: 100%; }

.hero-slider { flex: 0 0 52rem; height: 27rem; overflow: hidden; padding: 0; border-radius: 2rem; background: #fff; box-shadow: 0 1.1rem 2.1rem rgba(0, 0, 0, 0.12); }
.hero-slider__track { display: flex; height: 100%; padding: 0; margin: 0; list-style: none; transition: transform 0.45s ease; }
.hero-slider__item { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-slider__item img { display: block; width: 100%; height: 100%; object-fit: contain; }

.user-greeting { display: inline-flex; align-items: center; gap: 5px; }
.user-greeting .img_c { background: #eef5ff; padding: 10px; border-radius: 100px; }
.user-greeting strong { color: #1f2a3a; font-size: 1.7rem; }
.user-greeting strong span { color: #143b93; }
.user-greeting > span { color: #455469; font-size: 1.7rem; font-weight: bold; }
.user-greeting b { color: #0d97a1; font-size: 20px; background: #48bebc40; padding: 0 12px; border-radius: 16px; }

.hero-title { white-space: pre-line; word-break: keep-all; font-size: 5.2rem; line-height: 1.3; font-weight: 800; color: #1d2f57; letter-spacing: -1px; }
.hero-title .hero-title__point { color: #EC7204; position: relative; display: inline-block; font-size: 1.2em; font-weight: 800; line-height: 1.2; }
.hero-title.typing::after { content: "|"; display: inline-block; margin-left: 0.125rem; animation: typing-cursor 0.8s steps(1) infinite; }
.hero-title.typing.is-done::after { content: ""; animation: none; }

@keyframes typing-cursor { 50% { opacity: 0; } }

.hero-desc { margin-top: 0.5rem; font-size: 2.2rem; color: #66748b; line-height: 1.5; word-break: keep-all; }

/* ==========================================================================
   3. Service Toolbar V4 (통합형 가로 일렬 배너 시스템)
   ========================================================================== */
.service-toolbar-v4 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 12px 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.service-toolbar-v4 .user-greeting-v3 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.service-toolbar-v4 .user-greeting-v3 .status-icon {
    width: 18px;
    height: 18px;
}
.service-toolbar-v4 .user-greeting-v3 .status-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #334155;
}
.service-toolbar-v4 .user-greeting-v3 .status-count {
    font-size: 14px;
    font-weight: 800;
    color: #1458c7;
    background: #e0f2fe;
    padding: 3px 10px;
    border-radius: 20px;
}

.service-toolbar-v4 .toolbar-right-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-shrink: 0;
}

.service-toolbar-v4 .service-tip-v3 {
    display: flex;
    align-items: center;
    gap: 6px;
}
.service-toolbar-v4 .tip-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: #64748b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 4px;
}
.service-toolbar-v4 .tip-text {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.service-toolbar-v4 .bulk-actions-v3 {
    display: flex;
    gap: 6px;
}
.service-toolbar-v4 .bulk-btn-v4 {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease-in-out;
}
.service-toolbar-v4 .bulk-btn-v4:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #1e293b;
}

.service-toolbar-v4 .action-divider {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #cbd5e1;
    margin: 0 2px;
}

.service-toolbar-v4 .main-help-button-area {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0;
}

.service-toolbar-v4 .guest-welcome-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}
.service-toolbar-v4 .guest-welcome-box .welcome-icon {
    font-size: 16px;
}
.service-toolbar-v4 .guest-welcome-box .welcome-text {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1d2f57;
    font-size: 13.5px;
}
.service-toolbar-v4 .guest-welcome-box .welcome-text strong {
    color: #1458c7;
    font-weight: 800;
}
.service-toolbar-v4 .guest-welcome-box .sub-text {
    display: flex;
    align-items: center;
    color: #64748b;
    font-size: 13px;
}
.service-toolbar-v4 .guest-welcome-box .sub-text::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #e2e8f0;
    margin-right: 10px;
}

/* ==========================================================================
   4. Service Grid & Cards
   ========================================================================== */
.service-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4rem; }
.service-card { min-height: 17rem; background: linear-gradient(145deg, rgb(232 255 252 / 65%) 0%, rgba(255, 255, 255, 0.76) 34%, #dfeeff 100%); padding: 2rem; border-radius: 24px; overflow: hidden; display: flex; box-shadow: 0 8px 20px rgb(45 75 120 / 10%); flex-direction: column; justify-content: space-between; position: relative; --toggle-bg: rgb(0 0 0 / 20%); --toggle-checked-bg: rgb(0 0 0 / 20%); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; cursor: pointer; }
.service-card:not(.is-disabled):hover { transform: translateY(-0.6rem); box-shadow: 0 1.2rem 2.4rem rgb(31 55 90 / 14%); border-color: #bfd3f6; }

.service-card::before { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 72px; background: #fff; border-bottom-left-radius: 45px; z-index: 1; pointer-events: none; }
.service-card::after { content: ""; position: absolute; top: 0; right: 70px; width: 24px; height: 24px; background: #fbfdff; border-top-right-radius: 24px; box-shadow: 10px -10px 0 10px #ffffff; z-index: 1; pointer-events: none; }
.service-card__notch-corner { position: absolute; top: 72px; right: 0; width: 24px; height: 24px; background: #eaf3ff; border-top-right-radius: 24px; box-shadow: 10px -10px 0 10px #ffffff; z-index: 1; pointer-events: none; }
.service-card.is-disabled::after, .service-card.is-disabled .service-card__notch-corner { background: #cbd0d7; }

.service-card__link-area { flex: 1; display: flex; flex-direction: column; justify-content: space-between; color: inherit; text-decoration: none; }
.service-card.is-disabled { background: #cbd0d7 !important; color: #8b939d; box-shadow: inset 0 2px 5px rgb(0 0 0 / 8%); pointer-events: none; }
.service-card.is-disabled .service-card__image, .service-card.is-disabled .service-card__abbr img { opacity: 0.45; filter: grayscale(1); }
.service-card.is-disabled .service-card__abbr { color: #6f7277; }
.service-card.is-disabled .service-card__toggle { pointer-events: auto; }

.service-card__toggle { position: absolute; top: 5px; right: 4px; z-index: 2; width: 5.3rem; height: 5.3rem; border: 0; border-radius: 100%; background-color: var(--toggle-bg); background-image: url('/images/common/plus.webp'); background-repeat: no-repeat; background-position: center; box-shadow: 0px 0px 3px 1px #80808054; cursor: pointer; }
.service-card__toggle.is-checked { background-color: #15A88E; background-image: url('/images/common/check.webp'); background-repeat: no-repeat; background-position: 11px 16px; box-shadow: 0 0px 9px rgb(111 209 192); }
.service-card:not(.is-disabled) .service-card__toggle.is-checked:hover { background-color: #0d8f93; }

.service-card__content { display: flex; flex-direction: column; padding: 1rem 0rem; }
span.service-card__name { font-size: 1.7rem; line-height: 1.25; }
.service-card__abbr { display: grid; grid-template-rows: 3rem 4.4rem; gap: 0.6rem; font-size: 1.7rem; font-weight: 600; color: #231916; }
.service-card__abbr > img { display: block; object-fit: contain; object-position: left center; }
.service-card__abbr-text { min-height: 4.4rem; width: 20rem; }
.service-card__bottom { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1.6rem; }
.service-card__link { width: 5.6rem; height: 5.6rem; border-radius: 50%; box-shadow: 2px 2px 5px #cdcdcd; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.service-card__link img { width: 2rem; height: 2rem; }

.service-card__image { max-width: 15rem; object-fit: contain; }
.service-card__image.lg { max-width: 27rem; max-height: 4rem; }
.service-card__image.mdl { max-width: 27rem; max-height: 3rem; }
.service-card__image.sm { max-width: 27rem; max-height: 2.6rem; }

/* Tones */
.tone-blue { background: #ebf3ff; box-shadow: 0px 3px 8px #c2d1e7; }
.service-card.tone-blue { --toggle-checked-bg: #6f95df; }
.tone-green { background: #e6f2e9; box-shadow: 0px 3px 8px #c0d5c5; }
.service-card.tone-green { --toggle-checked-bg: #78b99c; }
.tone-gray { background: #F5F7FA; box-shadow: 0px 3px 8px #ccd4dd; }
.service-card.tone-gray { --toggle-checked-bg: #b0bccd; }
.tone-purple { background: #ece8f8; box-shadow: 0px 3px 8px #cabbf5; }
.service-card.tone-purple { --toggle-checked-bg: #9b7add; }
.tone-beige { background: #f5ead7; box-shadow: 0px 3px 8px #f1d5a2; }
.service-card.tone-beige { --toggle-checked-bg: #f3d08f; }

/* ==========================================================================
   5. SSO 안내 카드 & 가이드 (비로그인 전용)
   ========================================================================== */
.sso-card { display: flex; align-items: center; gap: 40px; width: 70%; padding: 24px 32px; border: 1px solid #BFD2FF; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,0.04); }
.sso-card__icon { flex-shrink: 0; }
.sso-card__circle { width: 120px; height: 120px; border: 1px dashed #C8D9FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.sso-card__circle::before, .sso-card__circle::after { content: ''; position: absolute; width: 6px; height: 6px; background: #6EA3FF; border-radius: 50%; }
.sso-card__circle::before { top: 18px; left: 18px; }
.sso-card__circle::after { right: 18px; bottom: 18px; }
.sso-card__content h3 { margin: 0 0 14px; font-size: 2.5rem; color: #1E4FBF; line-height: 1.3; font-weight: 700; }
.sso-card__content p { margin: 0 0 24px; line-height: 1.5; color: #555; font-size: 1.5rem; }
.sso-card__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 1px solid #9FBEFF; border-radius: 12px; background: #1e4fbf; color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; width: 100%; transition: .2s ease; }
.sso-card__button:hover { background: #142652; }
.sso-card__button span { font-size: 20px; }

.service-top-container { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 20px 0 15px; }
.service-guide-box { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; }
.service-tip { font-size: 16px; color: #24324b; padding: 0 1.5rem; margin-bottom: 0 !important; }
.tip-icon { display: inline-block; vertical-align: middle; margin-right: 6px; padding: 2px 6px; background-color: #f0f0f0; color: #1458c7; font-size: 1.1rem; font-weight: bold; border-radius: 4px; line-height: 1.4; }
.tip-text { font-size: 14px; line-height: 1.6; }

.service-card.service-card--guest::before, .service-card.service-card--guest::after { content: none; }
.service-card.service-card--guest .service-card__notch-corner { box-shadow: none; }

.btn-expand { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; height: 4.4rem; padding: 0 1.6rem; border: 1px solid #dde3ee; border-radius: 0.8rem; background: #fff; font-size: 1.5rem; color: #9ca7be; box-shadow: 1px 1px 6px #efeff9; }
.btn-expand img { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }

/* ==========================================================================
   6. 전역 반응형 시스템 (Media Queries)
   ========================================================================== */
@media (max-width: 1920px) {
    .hero-section { padding: 2.4rem 0 2rem; }
    .hero-copy { max-width: 84rem; }
    .hero-title { white-space: pre-line; word-break: keep-all; font-size: 3.8rem; line-height: 1.3; font-weight: 800; color: #1d2f57; letter-spacing: -1px; }
    .hero-desc { margin-top: 0.8rem; font-size: 1.55rem; letter-spacing: -0.04em; }
    .service-grid { margin-top: 1.6rem; gap: 1.6rem; }
    .service-card { min-height: 17.8rem; }
    .service-card__content { padding: 2rem 0.6rem; }
    .page-main.page-main-guest { height: fit-content; }
    span.service-card__name { font-size: 1.8rem; line-height: 1.25; }
    .sso-card { gap: 20px; width: 70%; padding: 10px; }
    .sso-card__circle { width: 10rem; height: 10rem; }
    .sso-card__content h3 { margin: 0 0 5px; font-size: 2rem; }
    .sso-card__content p { margin: 0 0 16px; font-size: 1.5rem; }
    .sso-card__button { padding: 10px 24px; font-size: 14px; }
}

@media (max-width: 1240px) {
    .service-toolbar-v4 { flex-wrap: wrap; gap: 12px; }
    .service-toolbar-v4 .toolbar-right-actions { width: 100%; justify-content: flex-end; border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 4px; }
}

@media (max-width: 1200px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .service-card::after { background: #f2f9ff; }
    .service-card__notch-corner { background: #ebf5ff; }
}

@media (max-width: 1024px) {
    .hero-top { margin-bottom: 1rem; }
    .hero-slider { display: none; }
    .hero-copy { max-width: 100%; }
    .hero-section { padding: 5rem 0 3rem; }
    .hero-title { font-size: 4rem; }
    .hero-desc { font-size: 1.8rem; }
    .service-guide-box { flex-direction: column; align-items: start; }
    .user-greeting .img_c { padding: 6px; }
    .service-tip { padding: 0; }
    .user-greeting > span { font-size: 1.5rem; }
    .user-greeting b { font-size: 15px; }
}

@media (max-width: 920px) {
    .sso-card__icon { display: none; }
    .sso-card { width: 430px; text-align: center; }
}

@media (max-width: 820px) {
    .user-greeting strong, .user-greeting > span { font-size: 1.5rem; }
    .hero-title { font-size: 4rem; margin-bottom: 0; }
    .hero-desc { margin-top: 0.5rem; }
    .page-main-guest .hero-section { padding: 3rem 0 1.6rem; }
    .service-card { min-height: auto; height: auto; padding: 2rem; }
    .service-card__content { flex-direction: column-reverse; }
    span.service-card__name { font-size: 1.7rem; letter-spacing: 0px; }
    .service-card__link-area, .service-card__content { justify-content: start; }
    .service-card__bottom { margin-top: 0; }
    .hero-top { flex-direction: column; gap: 20px; align-items: flex-start; }
    .sso-card { width: 100%; gap: 0; flex-direction: column; text-align: center; }
    .sso-card__content h3 { margin: 0; font-size: 1.8rem; width: auto; text-align: left; }
    .sso-card__content p { margin: 0; text-align: left; }
    .sso-card__button { width: auto; }
}

@media screen and (max-width: 768px) {
    .service-top-container { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 2rem; margin-bottom: 1.5rem; }
    .service-guide-box p { text-align: left; font-size: 1.2rem; display: flex; }
    .tip-text { word-break: keep-all; }
    .hero-copy { justify-content: flex-start; text-align: left; }
    .service-tip { align-items: flex-start; }
    .hero-section { padding: 4rem 0 1.8rem; }
}

@media (max-width: 640px) {
    .hero-section { padding: 2rem 0 1rem; }
    .hero-title { font-size: 3rem; }
    .hero-desc { font-size: 1.6rem; }
    .service-grid { grid-template-columns: 1fr; margin-top: 1.5rem; gap: 1.5rem; }
    .service-card { height: 80px; justify-content: center; padding: 2rem; }
    .service-card__bottom { display: none; }
    .service-card__link-area { flex-direction: row-reverse; justify-content: flex-end; flex: inherit; }
    .service-card__abbr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 0.8rem; }
    .service-card::after { background: #ecf4ff; }
    .service-card__notch-corner { background: #e7f2ff; }
    .sso-card { display: none; }
    .service-card__content { flex-direction: column-reverse; }
    .service-card__abbr-text { min-height: 0; width: auto; overflow: hidden; font-size: 1.45rem; line-height: 1.3; word-break: keep-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (max-width: 480px) {
    .page-main-guest .hero-section { padding: 1rem 0 1.6rem; }
    .user-greeting { width: 100%; justify-content: center; }
    .tip-icon { display: none; }
    .tip-text { word-break: keep-all; font-size: 1.3rem; }
    .service-guide-box p { text-align: center; }
    .hero-title { line-height: 1.2; }
    .btn-expand { height: 3.6rem; font-size: 1.3rem; padding: 0 1.2rem; }
    .btn-expand span { display: none; }
    .btn-expand img { width: 1.4rem; height: 1.4rem; }
    .service-grid { gap: 1.5rem; margin-top: 1.5rem; }
    .service-card__link { width: 4.4rem; height: 4.4rem; }
    .service-card__link img { width: 1.6rem; height: 1.6rem; }
    .service-card__image[src*="zeus"] { max-height: 2.5rem; }
    .service-card__image[src*="ezbaro"] { max-height: 4rem; }
}

@media (max-width: 420px) {
    .hero-title { font-size: 22px; line-height: 1.2; }
    .hero-desc { display: none; }
    .service-card { height: 70px; padding: 1rem 1rem; }
    .service-card__link-area { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
    .service-card::after { background: #f1f8ff; }
    .service-card__bottom { justify-content: flex-start; }
    span.service-card__name { font-size: 1.5rem; }
}

@media (max-width: 370px) {
    .hero-title { font-size: 20px; }
}

/* 반응형 대응: 1240px 이하일 때 줄바꿈 및 간격 조절 */
@media (max-width: 1240px) {
    .service-toolbar-v4 {
        flex-wrap: wrap; /* 💡 핵심: 요소들이 넘치면 아래로 자동 배치 */
        gap: 12px;
        padding: 16px;
    }

    .service-toolbar-v4 .toolbar-right-actions {
        width: 100%;
        justify-content: flex-end;
        border-top: 1px solid #e2e8f0;
        padding-top: 12px;
        margin-top: 4px;
        flex-wrap: wrap; /* 💡 내부 요소들도 줄바꿈 허용 */
        gap: 10px;
    }

    /* 팁 문구가 너무 길어 줄바꿈 되는 것을 방지하고 폰트 미세 조정 */
    .service-toolbar-v4 .service-tip-v3 {
        margin-right: auto; /* 팁 문구는 왼쪽으로 밀고 */
        order: -1;          /* 팁을 제일 앞으로 보냄 */
    }
}

/* 아주 작은 모바일(480px 이하) 대응 */
@media (max-width: 480px) {
    .service-toolbar-v4 .tip-text {
        font-size: 11.5px; /* 공간이 부족하면 글자를 살짝 작게 */
    }
    .service-toolbar-v4 .bulk-btn-v4 {
        padding: 0 8px; /* 버튼 패딩 축소 */
    }
}

/* 모바일에서 도움말 버튼을 아예 숨기고 싶을 때 */
@media (max-width: 1240px) {
    #btnMainHelp {
        display: none !important;
    }
    /* 도움말이 사라지면 구분선도 굳이 필요 없으므로 숨김 */
    .service-toolbar-v4 .action-divider {
        display: none !important;
    }
}

@media (max-width: 920px) {
    /* 1. 툴바 전체를 세로 정렬로 변경 */
    .service-toolbar-v4 {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
    }

    /* 2. 로그인 후 상태(왼쪽 요소) 너비 확보 */
    .service-toolbar-v4 .user-greeting-v3 {
        width: 100%;
        margin-bottom: 12px;
    }

    /* 3. 우측 버튼 영역을 다시 플렉스로 정렬하되 줄바꿈 허용 */
    .service-toolbar-v4 .toolbar-right-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; /* 모바일에선 왼쪽 정렬이 더 안정적 */
        margin-left: 0 !important;
        border-top: 1px solid #e2e8f0;
        padding-top: 12px !important;
    }

    /* 4. 팁 문구 공간 확보 */
    .service-toolbar-v4 .service-tip-v3 {
        width: 100%;
        margin-bottom: 8px;
    }

    /* 5. 버튼 크기 조정 */
    .service-toolbar-v4 .bulk-btn-v4 {
        font-size: 12px;
        padding: 0 8px;
    }
}