@charset "UTF-8";

:root {
    --color-brand-deep: #4568FF;
    --color-brand-light: #DAE1FF;
    --color-gray-bg: #F2F4F7;
    --color-gray-medium: #E0E3E7;
    --color-border: #CDD1D7;
    --color-font: #3D4957;
    --color-font-gray: #858D95;
    --color-red: #FF5358;
    --gradient-light: background: linear-gradient(0deg, #F2F4F7, #F2F4F7),
linear-gradient(0deg, #FFFFFF, #FFFFFF),
radial-gradient(69.39% 182.79% at 50% -35.49%, rgba(69, 104, 255, 0.3) 0%, rgba(69, 255, 224, 0.05) 52.29%, rgba(115, 0, 255, 0.03) 74.52%, rgba(69, 104, 255, 0) 100%),
radial-gradient(141.68% 58.98% at 115.95% 100%, rgba(69, 104, 255, 0.3) 0%, rgba(69, 255, 224, 0.05) 52.29%, rgba(115, 0, 255, 0.03) 74.52%, rgba(69, 104, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    --gradient-deep: background: radial-gradient(201.18% 771.45% at 31.57% 29.61%, #4568FF 0%, rgba(174, 69, 255, 0) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    --gradient_deemed: background: linear-gradient(90deg, #000000 16.83%, rgba(0, 0, 0, 0) 100%);
    --box-shadow: 0 2rem 3.2rem 0 #0000001A;
}

html, body {
    position: relative;
    font-family: "Pretendard";
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#wrap {
    flex: 1
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    text-decoration: none;
    color: var(--color-primary);
}

.sub-section {
    width: 100%;
}

.inner {
    max-width: var(--layout-max-width);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* web font */
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* =========================
   header
========================= */
#header {
    width: 100%;
    min-width: 0;
}

.header__inner {
    border-bottom: 0.1rem solid #F2F4F7;
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.2rem var(--container-padding-x);
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

/* =========================
   logo
========================= */
.header-logo {
    flex: 0 0 auto;
    margin: 0;
}

.header-logo__link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.header-logo__image {
    width: 11.7rem;
    flex: 0 0 auto;
    object-fit: contain;
    display: block;
}

/* =========================
   search
========================= */
.header-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 56rem;
    margin: 0 auto;
}

.header-search__field {
    position: relative;
    width: 100%;
    height: 4.2rem;
    border-radius: 0.8rem;
    background: #ebedf0;
    display: flex;
    align-items: center;
    padding: 0.6rem 1.6rem 0.6rem 4.8rem;
}

.header-search__submit {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-search__icon {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.header-search__input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: Pretendard;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--color-primary-50);
}

.header-search__input::placeholder {
    color: var(--color-primary-50);
    opacity: 1;
}

.header-search__field:focus-within {
    /* outline: 0.2rem solid rgba(59, 130, 246, 0.22);
    outline-offset: 0;
    background: #e6e9ee; */
}

/* =========================
   login button
========================= */
.btn-login {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    color: #2f3947;
    min-height: 4rem;
}

.btn-login__icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.btn-login__icon img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.btn-login__text {
    font-family: Pretendard;
    font-weight: 600;
    font-size: 1.8rem;
    text-align: center;
    color: var(--color-primary)
}

/* =========================
   hover / focus
========================= */
.header-logo__link:focus-visible,
.btn-login:focus-visible,
.header-search__submit:focus-visible,
.header-search__input:focus-visible {
    /* outline: 0.2rem solid rgba(59, 130, 246, 0.35);
    outline-offset: 0.2rem;
    border-radius: 0.6rem; */
}

.btn-login:hover {
    opacity: 0.8;
}


/* =========================
   nav
========================= */
#global-nav {
    width: 100%;
    max-width: 120rem;
    margin: 0 auto;
    border-bottom: 0.1rem solid #F2F4F7;
    /* padding: 0 var(--container-padding-x); */
    box-sizing: border-box;
}
#global-nav ul {
    width: 100%;
    max-width: 84rem;
    /* margin: 0 auto; */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#global-nav ul::-webkit-scrollbar {
    display: none;
}
#global-nav ul li {
    flex: 1;
    flex-shrink: 0;
    min-width: 0;
}
#global-nav li a {
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position:relative;
    border-bottom: 0.16rem solid #0D1C2D29;
    transition: border 0.2s ease;
    font-family: Pretendard;
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
}
#global-nav li.is-active a {
    font-weight: 700;
    border-color: var(--color-point)
}

/* =========================
   responsive
========================= */
@media (max-width: 1024px) {
    .header__inner {
        padding-left: var(--container-padding-x-tablet);
        padding-right: var(--container-padding-x-tablet);
        gap: 1.6rem;
    }

    .header-search {
        max-width: none;
    }

    #global-nav {
        padding-left: var(--container-padding-x-tablet);
        padding-right: var(--container-padding-x-tablet);
    }
}

@media (max-width: 768px) {
    .header__inner {
        min-height: 5.2rem;
        gap: 1.2rem;
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }

    #global-nav {
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }

    .header-search__field {
        height: 4rem;
        padding: 0 1.2rem 0 4.2rem;
    }

    .btn-login__text {
        display: none;
    }

    #global-nav ul {
        justify-content: flex-start;
    }

    #global-nav ul li {
        flex: 0 0 auto;
    }

    #global-nav li a {
        padding: 1.6rem 1.2rem;
        white-space: nowrap;
    }
}

/* =========================
   modal
========================= */
.is-modal-open {
    overflow: hidden;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.6rem;
    gap: 1rem;
    background: rgba(13, 28, 45, 0.6);
}

.modal[hidden] {
    display: none;
}

.modal__dim {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 36.1rem;
    border-radius: 1.6rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0.8rem 2.4rem rgba(13, 28, 45, 0.12);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.modal__body {
    width: 100%;
    padding: 1.6rem 2rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.modal__title {
    width: 100%;
    margin: 0;
    font-family: "Pretendard";
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.4;
    color: rgba(13, 28, 45, 0.8);
    text-align: left;
    word-break: keep-all;
}

.modal__desc {
    width: 100%;
    margin: 0;
    font-family: "Pretendard";
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(13, 28, 45, 0.5);
    word-break: keep-all;
}

.modal__actions {
    width: 100%;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.modal__actions--single .modal-btn {
    width: 100%;
}

.modal__actions--double .modal-btn {
    flex: 1 1 0;
}

.modal-btn {
    min-height: 4.9rem;
    padding: 1.2rem 2.4rem;
    border: 0;
    border-radius: 1.2rem;
    font-family: "Pretendard";
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

.modal-btn--gray {
    background: rgba(13, 28, 45, 0.08);
    color: rgba(13, 28, 45, 0.8);
}

.modal-btn--primary,
.modal-btn--blue {
    background: #4568ff;
    color: #ffffff;
}

.modal-btn--red {
    background: #ff5358;
    color: #ffffff;
}

/* ----- 메인 홈: 비회원/회원 히어로 전환 ----- */
/* 비회원·맞춤 미완료: 마케팅 히어로(1)만 — 맞춤 미완료는 CTA만 마이페이지로 교체(JS) */
.home-main.is-guest .hero-con > li:nth-child(2),
.home-main.is-member-partial .hero-con > li:nth-child(2) {
    display: none;
}

.home-main.is-loged-in .hero-con > li:nth-child(1) {
    display: none;
}

.home-main.is-loged-in #main-section3,
.home-main.is-loged-in #main-section4 {
    display: none;
}

.search-inline-count {
    font-size: 0.85em;
    font-weight: 600;
    margin-left: 0.35em;
    color: rgba(13, 28, 45, 0.65);
}

.sbo-benefits-intro {
    margin-top: 0.6rem;
    font-size: 1.4rem;
    color: rgba(13, 28, 45, 0.72);
}

/* ----- 지원금 상세 ----- */
.subsidy-view-section {
    padding: 2.4rem 0 4rem;
}

.subsidy-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.subsidy-view-tabs a {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: rgba(69, 104, 255, 0.1);
    color: #2a4acb;
    font-weight: 600;
    text-decoration: none;
}

.subsidy-view-article .total_subsidy_badge {
    display: inline-block;
    margin-bottom: 1rem;
}

.subsidy-view-title {
    font-size: 2.4rem;
    line-height: 1.35;
    margin-bottom: 1rem;
}

.subsidy-view-summary {
    font-size: 1.6rem;
    line-height: 1.55;
    color: rgba(13, 28, 45, 0.78);
    margin-bottom: 2rem;
}

.subsidy-view-meta {
    margin: 0 0 1.2rem;
}

.subsidy-view-meta > div {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
}

.subsidy-view-meta dt {
    font-weight: 700;
    min-width: 5rem;
}

.subsidy-view-meta dd {
    margin: 0;
}

.subsidy-view-user-type {
    font-size: 1.4rem;
    color: rgba(13, 28, 45, 0.65);
    margin-bottom: 2rem;
}

.subsidy-view-back a {
    color: #4568ff;
    font-weight: 600;
}

.subsidy-view-empty {
    padding: 2rem;
    background: rgba(13, 28, 45, 0.06);
    border-radius: 1rem;
    margin-bottom: 1.6rem;
}

.mypage-subsidy-section {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(13, 28, 45, 0.08);
}

.mypage-subsidy-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mypage-settings-link {
    font-size: 1.4rem;
    font-weight: 600;
    color: #4568ff;
    text-decoration: none;
}

.mypage-subsidy-hint {
    font-size: 1.4rem;
    color: rgba(13, 28, 45, 0.72);
    margin-bottom: 1rem;
}