@charset "utf-8";

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* 하단 탭바의 실제 높이. 이 프로젝트는 전 페이지 footer:false라 실제로는 쓰이지 않지만,
       스켈레톤 계약상 .site-footer 선택자와 함께 정의는 남겨 둔다. */
    --nav-height: calc(
        var(--size-nav-indicator) +
        var(--space-lg) +
        var(--size-icon-md) +
        var(--space-xs) +
        var(--fs-caption) * var(--lh-tight) +
        var(--space-xs)
    );

    /* 하단 고정 CTA 바(.cta-bar, common.css)의 실제 높이.
       border-top(hairline) + 바 padding-top(--space-lg)
       + .btn-primary 높이(상하 padding --space-xl*2 + 텍스트 한 줄 --fs-label*--lh-tight)
       + 바 padding-bottom(max(--space-lg, --safe-bottom)) — .cta-bar 자신의 padding과 정확히 같은 식이어야
       body.has-cta-bar #wrap의 padding-bottom 예약이 버튼 실제 높이와 어긋나지 않는다. */
    --cta-bar-height: calc(
        var(--size-hairline) +
        var(--space-lg) +
        var(--space-xl) * 2 + var(--fs-label) * var(--lh-tight) +
        max(var(--space-lg), var(--safe-bottom))
    );
}

/* ========================================
   공통 레이아웃 골격 (header / wrap / footer)
======================================== */

/* 스티키 푸터: body를 세로 flex로, #wrap이 남는 공간 차지 */
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

/* 좌우 gutter는 #wrap이 아니라 .inner가 갖는다.
   #wrap이 gutter를 가지면 section 배경이 화면 끝까지 가지 못한다. */
#wrap {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
}


/* ========================================
   section / .inner
   - section에는 좌우 gutter를 주지 않는다 (배경이 화면 끝까지 가야 하므로)
   - .inner는 section의 직접 자식으로 정확히 1회. 중첩·반복 금지
======================================== */
section {
    width: 100%;
}

.inner {
    width: 100%;
    max-width: var(--inner-max-width);   /* padding 포함 외곽 768px */
    margin-inline: auto;
    /* 노치 대응 — 세이프 영역이 gutter보다 넓을 때만 그만큼 벌어진다 */
    padding-left: max(var(--inner-padding-x), var(--safe-left));
    padding-right: max(var(--inner-padding-x), var(--safe-right));
}


/* <main class="wrap ..."> — 여러 페이지가 공통으로 쓰는 페이지 컨테이너 */
.wrap { width: 100%; flex: 1; }

.sub-wrap {}

/* <section class="sec ..."> — 모든 페이지의 섹션 공통 래퍼 */
.sec {
    padding-block: var(--space-2xl);
}

.sec--first {
    padding-top: var(--space-2xl);
}

.sec--tight {
    padding-block: var(--space-lg);
}


/* ========================================
   loading
======================================== */

#loading-mask {
    position: fixed;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--color-bg);
}


/* ========================================
   header
======================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    border-bottom: var(--size-hairline) solid var(--color-line);
    background: rgba(255, 248, 237, 0.92);
    padding-top: max(var(--space-lg), var(--safe-top));
    padding-bottom: var(--space-lg);
    backdrop-filter: blur(2rem);
}

body.header-type-default .site-header[data-header-type="default"] {}

body.header-type-logo_only .site-header[data-header-type="logo_only"] {}

/* ── title_only : 본문 흐름의 페이지 헤더 ──────────────────────
   고정 상단바가 아니라 콘텐츠와 함께 스크롤되는 블록이다.

   레이아웃이 두 종류다 (data-header-layout):
   - stack  : 탭 루트(홈). 세로 스택 — eyebrow(작게) → 제목(크게) → 보조문(선택).
   - inline : 서브 화면. 뒤로가기 + 제목이 한 행.
*/
body.header-type-title_only .site-header[data-header-type="title_only"] {
    position: relative;
    top: auto;
    z-index: auto;
    border: 0;
    background: none;
    backdrop-filter: none;
    padding-top: var(--space-3xl);
    padding-bottom: 0;
}

body.header-type-title_only .site-header[data-header-type="title_only"] > .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

body.header-type-title_only .site-header[data-header-layout="inline"] > .inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
}

.site-header__title-row,
.site-header__desc-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.site-header__eyebrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    width: 100%;
    justify-content: center;
    margin-bottom: 3rem;
}

.site-header__eyebrow-text {
    font-size: var(--fs-label);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--color-text-sub);
}

.site-header__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-back);
    height: var(--size-back);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-icon);
}

.site-header__back svg {
    width: 60%;
    height: 60%;
}

.site-header__mark {
    flex: 0 0 auto;
    width: auto;
    height: 2.4rem;
}

.site-header__mark-link {
    display: inline-flex;
    align-items: center;
}

.site-header__page-title {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: var(--fw-regular);
    line-height: var(--lh-snug);
    color: var(--color-text);
}

body.header-type-title_only .site-header[data-header-layout="inline"] .site-header__page-title {
    font-size: var(--fs-nav-title);
}

.site-header__page-desc {
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    color: var(--color-text-sub);
    margin: 0;
}

.site-header[data-header-type] > .inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

body.header-type-default .site-header[data-header-type="default"] > .inner {
    justify-content: space-between;
}

body.header-type-logo_only .site-header[data-header-type="logo_only"] > .inner,
body.header-type-title_only .site-header[data-header-type="title_only"] > .inner {
    justify-content: flex-start;
}

/* 로고 (이 프로젝트는 전 페이지 title_only/result라 실사용 없음 — 계약상 정의만 유지) */
.site-header__logo { flex: 0 0 auto; margin: 0; }
.site-header__logo-link { display: inline-flex; align-items: center; gap: var(--space-sm); }
.site-header__logo-icon { width: 3.2rem; display: block; }
.site-header__logo-text { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-regular); color: var(--color-primary); line-height: 1; }

.site-header__menu-button {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--color-bg-chip);
    cursor: pointer;
}

.site-header__menu-button > span {
    width: 2rem;
    height: 2px;
    border-radius: 999px;
    background: var(--color-text);
    transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}

.site-header--default.is-menu-open .site-header__menu-button > span:nth-child(1) { transform: translateY(0.7rem) rotate(45deg); }
.site-header--default.is-menu-open .site-header__menu-button > span:nth-child(2) { opacity: 0; }
.site-header--default.is-menu-open .site-header__menu-button > span:nth-child(3) { transform: translateY(-0.7rem) rotate(-45deg); }

.site-header__menu {
    position: absolute;
    top: calc(100% + var(--space-lg));
    right: max(var(--inner-padding-x), var(--safe-right));
    width: min(32rem, calc(100vw - 4rem));
    padding: 1.2rem;
    border: var(--size-hairline) solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    box-shadow: var(--shadow-card-strong);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.8rem);
    transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}

.site-header--default.is-menu-open .site-header__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.site-header__menu-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.site-header__menu-item a {
    display: block;
    padding: 1.2rem 1.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-label);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.site-header__menu-item a:hover,
.site-header__menu-item a:focus-visible,
.site-header__menu-item.is-active a {
    background: var(--color-bg-chip);
    color: var(--color-primary);
}

/* custom/result 타입 — 이 프로젝트는 서브 화면 대부분이 이 back-only 헤더를 쓴다. */
body.header-type-custom .custom-header,
.result-header {
    width: 100%;
    padding-top: max(var(--space-lg), var(--safe-top));
}

body.header-type-custom .custom-header > .inner,
.result-header > .inner {
    display: flex;
    align-items: center;
}

.result-header__back {
    width: var(--size-back);
    height: var(--size-back);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-icon);
}

.result-header__back-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.result-header__back-icon svg {
    width: 60%;
    height: 60%;
}


/* ========================================
   footer (모바일 하단 탭바 내비게이션)
   - 이 프로젝트의 화면 8개는 전부 footer:false다(Figma에 탭바가 없다).
   - 선택지로 남겨 두는 스켈레톤 계약 코드라 셀렉터는 정의하되 실사용은 없다.
======================================== */
.site-footer {}

.site-footer > .inner {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

.site-footer__list {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__item { flex: 1 1 0; min-width: 0; }

.site-footer__item a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);
    padding-top: calc(var(--size-nav-indicator) + var(--space-lg));
    padding-bottom: var(--space-xs);
    color: var(--color-icon-nav);
}

.site-footer__item a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: var(--size-nav-indicator);
    background: transparent;
}

.site-footer__item.is-active a::before { background: var(--color-primary); }

.site-footer__icon {
    position: relative;
    width: var(--size-icon-md);
    height: var(--size-icon-md);
    display: inline-flex;
    overflow: visible;
}

.site-footer__icon img { width: 100%; height: 100%; object-fit: contain; }

.site-footer__label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    text-align: center;
    white-space: nowrap;
    color: var(--color-icon-nav);
}

.site-footer__item.is-active a,
.site-footer__item.is-active .site-footer__label { color: var(--color-primary); }


/* ========================================
   반응형
======================================== */

@media (max-width: 768px) {
    .site-footer {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        background: var(--color-bg);
        box-shadow: var(--shadow-nav);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .has-site-footer #wrap {
        padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
    }

    .no-site-footer #wrap,
    .is-result-header-page #wrap {
        padding-bottom: 0;
    }
}


/* ========================================
   하단 고정 CTA 바 — #wrap 여백 예약
   - .cta-bar 자체 스타일(위치·배경·padding)은 common.css(재사용 컴포넌트)에 있다.
   - 여기서는 #wrap에 그 높이만큼 padding-bottom을 예약해, 스크롤을 끝까지 내려도
     마지막 콘텐츠가 고정 바에 가리지 않게 한다.
   - 위 .is-result-header-page #wrap { padding-bottom: 0 } 과 특이도가 같다
     (body.클래스 #wrap). 이 두 조건을 동시에 만족하는 페이지(결과형 헤더 + CTA 바)에서
     이 규칙이 이겨야 하므로 반드시 그 규칙보다 뒤에 온다 — 이 파일에서 위치를 옮기지 말 것.
   - 탭바(.site-footer)와 달리 768px 이하로 가두지 않는다. CTA는 폭에 상관없이
     항상 화면 하단에 고정되는 페이지 chrome이라 헤더(.site-header)처럼 전 구간에 적용한다. */
body.has-cta-bar #wrap {
    padding-bottom: var(--cta-bar-height);
}