@charset "utf-8";

/* 홈(index) — 본문 max 1200px, 패널 #F2F4F7·16px, 본문 16px/1.6, 주요 rgba(13,28,45,0.8)·보조 0.5, 포인트 #4568FF */

.main-wrap {
    background: #ffffff;
}

.home-main {
    padding-bottom: var(--section-space-y-mobile);
}

@media (min-width: 769px) {
    .home-main {
        padding-bottom: var(--section-space-y-tablet);
    }
}

@media (min-width: 1025px) {
    .home-main {
        padding-bottom: var(--section-space-y);
    }
}

.home-main .inner {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .home-main .inner {
        padding-left: var(--container-padding-x-tablet);
        padding-right: var(--container-padding-x-tablet);
    }
}

@media (max-width: 768px) {
    .home-main .inner {
        padding-left: var(--container-padding-x-mobile);
        padding-right: var(--container-padding-x-mobile);
    }
}

/* ---------- 히어로 ---------- */
.hero-section {
    padding-top: var(--rspace-32);
    padding-bottom: var(--rspace-24);
}

.hero-con {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

@media (min-width: 900px) {
    .hero-con {
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-24);
    }

    .hero-con > li.left {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero-con > li.right {
        flex: 0 0 38rem;
        max-width: 100%;
    }
}

.hero-con > li.left {
    background: #f2f4f7;
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 1.4rem + 1.4vw, 3.2rem);
    box-sizing: border-box;
}

.hero-con > li.left h2 {
    margin: 0;
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--rfs-24);
    line-height: 1.4;
    color: rgba(13, 28, 45, 0.8);
    font-feature-settings: "ss10" on;
}

.hero-con > li.left h2 p {
    margin: 0;
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-medium);
    font-size: var(--rfs-16);
    line-height: var(--lh-160);
    color: rgba(13, 28, 45, 0.5);
}

.hero-con > li.left h2 p b,
.hero-con > li.left h2 b.user {
    font-weight: var(--fw-bold);
    color: rgba(13, 28, 45, 0.8);
}

.hero-con > li.left h2 > p:first-child {
    margin-bottom: 0.6rem;
}

.hero-con > li.left h2 > p:last-of-type:not(:first-child) {
    margin-top: 1.2rem;
}

/* 히어로 CTA (헤더 .btn-login 과 구분) */
.home-main .hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-24);
    padding: 1.4rem 2.8rem;
    min-height: 4.8rem;
    border-radius: var(--radius-md);
    background: #4568ff;
    color: #ffffff;
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-semibold);
    font-size: var(--rfs-18);
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.home-main .hero-cta:hover {
    opacity: 0.92;
    color: #ffffff;
}

.home-main .hero-cta:focus-visible {
    outline: 0.2rem solid rgba(69, 104, 255, 0.45);
    outline-offset: 0.2rem;
}

/* [hidden]은 .hero-cta의 display보다 특이도가 낮아 무시됨 → 상태별로 명시 */
.home-main.is-guest .hero-cta--profile,
.home-main.is-member-partial .hero-cta--guest,
.home-main.is-loged-in .hero-cta--guest,
.home-main.is-loged-in .hero-cta--profile {
    display: none !important;
}

.home-main.is-member-partial .hero-cta--profile {
    display: inline-flex !important;
}

/* 맞춤 지원금 리스트 (로그인 + 프로필 완료) */
.hero-benefit-list {
    list-style: none;
    margin: var(--space-20) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.hero-benefit-list > li > a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-16);
    background: #ffffff;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    border: 0.1rem solid rgba(13, 28, 45, 0.06);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-benefit-list > li > a:hover {
    border-color: rgba(69, 104, 255, 0.25);
    box-shadow: 0 0.4rem 1.6rem rgba(13, 28, 45, 0.06);
}

.hero-benefit-meta b {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: var(--fs-12);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: #4568ff;
}

.hero-benefit-meta .title {
    margin: 0 0 0.4rem;
    font-size: var(--rfs-18);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    color: rgba(13, 28, 45, 0.8);
}

.hero-benefit-meta .title .icon {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.2rem;
}

.hero-benefit-meta .title .icon img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}

.hero-benefit-meta > span:last-of-type {
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    color: rgba(13, 28, 45, 0.5);
}

.hero-benefit-view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    font-size: var(--fs-14);
    color: rgba(13, 28, 45, 0.5);
}

.hero-benefit-view b {
    font-weight: var(--fw-semibold);
    color: rgba(13, 28, 45, 0.65);
}

.hero-benefit-view .icon img {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
}

/* 맞춤 프로필 미완료(로그인만 된 상태) */
.hero-benefit-list .hero-benefit-placeholder {
    margin: 0;
    padding: var(--space-16);
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 0.1rem solid rgba(13, 28, 45, 0.06);
    box-sizing: border-box;
}

.hero-benefit-placeholder__text {
    margin: 0 0 var(--space-12);
    font-size: var(--rfs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-160);
    color: rgba(13, 28, 45, 0.65);
}

.hero-benefit-placeholder__link {
    display: inline-flex;
    align-items: center;
    font-size: var(--rfs-16);
    font-weight: var(--fw-semibold);
    color: #4568ff;
    text-decoration: none;
}

.hero-benefit-placeholder__link:hover {
    text-decoration: underline;
}

/* 혜택 바로가기 */
.hero-con > li.right {
    background: #ffffff;
    border: 0.1rem solid rgba(13, 28, 45, 0.06);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 1.4rem + 1.4vw, 2.8rem);
    box-sizing: border-box;
}

.hero-con > li.right h3 {
    margin: 0 0 var(--space-20);
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--rfs-20);
    line-height: 1.4;
    color: rgba(13, 28, 45, 0.8);
}

.hero-con > li.right > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.hero-con > li.right > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-16);
    background: #f2f4f7;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: background var(--transition-fast);
}

.hero-con > li.right > ul > li > a:hover {
    background: #e8ecf1;
}

.hero-con > li.right .cate {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    min-width: 0;
    flex: 1 1 auto;
}

.hero-con > li.right .cate .icon {
    flex: 0 0 auto;
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(69, 104, 255, 0.12);
    border-radius: var(--radius-md);
}

.hero-con > li.right .cate .icon img {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
}

.hero-con > li.right dl {
    margin: 0;
    min-width: 0;
}

.hero-con > li.right dt {
    font-size: var(--rfs-16);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    color: rgba(13, 28, 45, 0.8);
}

.hero-con > li.right dd {
    margin: 0.4rem 0 0;
    font-size: var(--rfs-14);
    font-weight: var(--fw-medium);
    line-height: var(--lh-160);
    color: rgba(13, 28, 45, 0.5);
}

.hero-con > li.right > ul > li > a > .icon img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    opacity: 0.65;
}

/* ---------- 섹션 공통 ---------- */
.home-main .list-section {
    margin-top: clamp(3.2rem, 2.4rem + 2vw, 5.6rem);
}

.home-main .list-section .title {
    margin: 0 0 var(--space-20);
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--rfs-24);
    line-height: 1.4;
    color: rgba(13, 28, 45, 0.8);
}

.home-main .list-wrap {
    width: 100%;
}

/* ---------- 바로 신청 섹션 (헤더 + 탭은 subsidy-card.css 의 탭 컴포넌트 사용) ---------- */
.home-apply-section__head {
    margin-bottom: var(--space-20);
}

.home-apply-section__head-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    width: fit-content;
    text-decoration: none;
}

.home-apply-section__head-inner:hover .home-apply-section__title-chevron {
    color: #4568ff;
}

.home-apply-section__title-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--rfs-24);
    line-height: 1.4;
    color: rgba(13, 28, 45, 0.8);
}

.home-apply-section__title {
    display: inline;
}

.home-apply-section__title-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(13, 28, 45, 0.28);
    line-height: 0;
}

.home-apply-section__title-chevron svg {
    display: block;
}

.home-apply-section__sub {
    margin: 0;
    font-family: Pretendard, var(--font-family-base);
    font-weight: var(--fw-medium);
    font-size: var(--rfs-14);
    line-height: var(--lh-160);
    color: rgba(13, 28, 45, 0.5);
}

/* ---------- 보험 배너 ---------- */
.banner-section {
    margin-top: clamp(3.2rem, 2.4rem + 2vw, 5.6rem);
}

.banner-section > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
    align-items: stretch;
}

@media (min-width: 768px) {
    .banner-section > ul {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-24);
    }
}

.banner-section .left a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 18rem;
    padding: var(--space-24) var(--space-28);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #4568ff 0%, #5a7cff 42%, #7b5cff 100%);
    color: #ffffff;
    box-sizing: border-box;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.banner-section .left a:hover {
    opacity: 0.96;
    color: #ffffff;
}

.banner-section .left h4 {
    margin: 0 0 var(--space-8);
    font-size: var(--rfs-14);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

.banner-section .left p {
    margin: 0 0 var(--space-20);
    font-size: var(--rfs-22);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    color: #ffffff;
    word-break: keep-all;
}

.banner-section .left span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--rfs-16);
    font-weight: var(--fw-semibold);
    color: #ffffff;
}

.banner-section .left span .icon img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
}

.banner-section .right {
    min-height: 14rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #f2f4f7 0%, #e8ecf1 100%);
    border: 0.1rem dashed rgba(13, 28, 45, 0.08);
    box-sizing: border-box;
}

.banner-section .right a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 18rem;
    width: 100%;
    height: 100%;
    padding: var(--space-24) var(--space-28);
    border-radius: inherit;
    color: rgba(13, 28, 45, 0.8);
    box-sizing: border-box;
    text-decoration: none;
}

.banner-section .right h4 {
    margin: 0 0 var(--space-8);
    font-size: var(--rfs-14);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    color: #4568ff;
}

.banner-section .right p {
    margin: 0 0 var(--space-20);
    font-size: var(--rfs-22);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    color: rgba(13, 28, 45, 0.8);
    word-break: keep-all;
}

.banner-section .right span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--rfs-16);
    font-weight: var(--fw-semibold);
    color: rgba(13, 28, 45, 0.65);
}

.banner-section .right span .icon img {
    width: 1.8rem;
    height: 1.8rem;
    object-fit: contain;
}