/*
 * /unse 공통 컴포넌트 CSS — design_handoff_unse/DESIGN.md 컴포넌트 절 매핑.
 * 모든 시각 속성은 tokens.css(:root --u-*)을 var()로 참조 — hex 리터럴 금지.
 * 변형 클래스는 BEM 컨벤션 --modifier 사용.
 */

/* ---------------------------------------------------------------------------
 * 1. CTA 버튼 (cta-primary / cta-secondary)
 *    - 화면당 cta-primary 단 하나, 결정 흐름 단일.
 *    - hover/active/disabled 상태 보강.
 * ------------------------------------------------------------------------- */
.cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--u-cinnabar);
    color: var(--u-paper);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    border: 0;
    border-radius: var(--u-r-sm);
    padding: 16px 24px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
    text-decoration: none;
}

.cta-primary:hover,
.cta-primary:focus {
    background-color: var(--u-cinnabar-dk);
}

.cta-primary[disabled],
.cta-primary.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cta-primary--full {
    width: 100%;
}

.cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--u-ink);
    border-radius: var(--u-r-sm);
    padding: 16px 24px;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out;
    text-decoration: none;
}

.cta-secondary:hover,
.cta-secondary:focus {
    border-color: var(--u-cinnabar);
    color: var(--u-cinnabar);
}

.cta-secondary--full {
    width: 100%;
}

/* ---------------------------------------------------------------------------
 * 2. 입력 컴포넌트 (input-text)
 *    - 포커스 시 inset 2px cinnabar 보더 (외부 그림자 대신).
 * ------------------------------------------------------------------------- */
.input-text {
    display: block;
    width: 100%;
    background-color: var(--u-paper-2);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    border: 0;
    border-radius: var(--u-r-sm);
    padding: 14px 16px;
    outline: none;
    box-sizing: border-box;
}

.input-text::placeholder {
    color: var(--u-mute);
}

.input-text:focus {
    box-shadow: inset 0 0 0 2px var(--u-cinnabar);
}

.input-text[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.input-text--error {
    box-shadow: inset 0 0 0 1px var(--u-cinnabar);
}

/* select 도 .input-text 비주얼 재사용 — 네이티브 화살표/옵션 팝업을 다크로 렌더 */
select.input-text {
    color-scheme: dark;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 3. 세그먼트 토글 (segment-toggle)
 *    - 2지선다(남/여, 양력/음력). 활성=cinnabar 배경.
 * ------------------------------------------------------------------------- */
.segment-toggle {
    display: inline-flex;
    gap: var(--u-s-xs);
    background-color: var(--u-paper);
    padding: 2px;
    border-radius: var(--u-r-sm);
}

.segment-toggle__button {
    flex: 1 1 auto;
    background-color: var(--u-paper-2);
    color: var(--u-ink-3);
    font-family: var(--u-ff-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    border: 0;
    border-radius: var(--u-r-sm);
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.segment-toggle__button--active,
.segment-toggle__button[aria-pressed='true'] {
    background-color: var(--u-cinnabar);
    color: var(--u-paper);
}

/* ---------------------------------------------------------------------------
 * 4. 상태 배지 (badge — paid/pending/failed/expired/refunded)
 *    - pill (rounded.full), label-sm 11px, 4px 10px padding.
 * ------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.05em;
    border-radius: var(--u-r-full);
    padding: 4px 10px;
    color: var(--u-paper);
}

.badge--paid {
    background-color: var(--u-status-paid);
}

.badge--pending {
    background-color: var(--u-status-pending);
}

.badge--failed {
    background-color: var(--u-status-failed);
}

.badge--expired {
    background-color: var(--u-status-expired);
}

.badge--refunded {
    background-color: transparent;
    color: var(--u-ink-3);
    border: 1px solid var(--u-paper-dim);
    padding: 3px 9px;
}

/* ---------------------------------------------------------------------------
 * 5. 만세력 4주 카드 (manse-card)
 *    - 기본 4-col 그리드 / 카드 최소 138px.
 *    - manse-card--self(일간)만 outset 그림자 + inset 보더 허용.
 * ------------------------------------------------------------------------- */
.manse-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.manse-card {
    position: relative;
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-sm);
    padding: 12px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
    box-shadow: inset 0 0 0 1px var(--u-paper-dim);
}

.manse-card__label {
    font-family: var(--u-ff-serif);
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: var(--u-ink-3);
    text-align: left;
    align-self: stretch;
}

/* 라벨 한글 보조 — 年柱 옆 작은 '년주' (한자 가독성 보강) */
.manse-card__label-kor {
    font-size: 9px;
    color: var(--u-mute);
    margin-left: 4px;
    letter-spacing: 0;
}

.manse-card__hanja {
    font-family: var(--u-ff-serif);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--u-ink);
}

.manse-card__hidden-stems {
    margin-top: var(--u-s-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--u-ink-3);
    text-align: center;
}

.manse-card__hidden-hanja {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--u-ink-3);
    letter-spacing: 0.05em;
}

/* — US-033 redesign 신규 element (stem/branch 블록, 한글음, divider, 십성 라벨) — */
.manse-card__stem-block,
.manse-card__branch-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.manse-card__kor-stem,
.manse-card__kor-branch {
    font-family: var(--u-ff-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--u-ink-3);
    margin-top: 3px;
    letter-spacing: 0.05em;
}

.manse-card__divider {
    width: 18px;
    height: 1px;
    background: var(--u-paper-dim);
    margin: 4px 0 2px;
}

.manse-card__branch-block .manse-card__hanja {
    color: var(--u-ink-2);
}

.manse-card__hidden-label {
    display: block;
    font-size: 8px;
    color: var(--u-mute);
    letter-spacing: 0.2em;
}

.manse-card--self {
    box-shadow: inset 0 0 0 2px var(--u-cinnabar), 0 4px 14px rgba(0, 0, 0, 0.12);
}

.manse-card--self .manse-card__label {
    color: var(--u-cinnabar);
    font-weight: 600;
}

.manse-card--self .manse-card__hanja {
    font-weight: 700;
}

.manse-card--self::before {
    content: '本';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 1px;
    background: var(--u-cinnabar);
    color: var(--u-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.manse-card--compact {
    min-height: 96px;
    padding: 10px;
}

/* ---------------------------------------------------------------------------
 * 6. 오행 분포 (wuxing-bar)
 *    - 5-col 그리드, 막대 영역 56px cap.
 * ------------------------------------------------------------------------- */
.wuxing-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    align-items: end;
}

.wuxing-bar__head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.wuxing-bar__head-title {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    color: var(--u-ink);
    letter-spacing: 0.15em;
}

/* 五行 옆 작은 '오행' 한글 보조 — daewoon-strip__title small 과 같은 패턴 */
.wuxing-bar__head-title small {
    font-size: 10px;
    color: var(--u-ink-3);
    margin-left: 6px;
    letter-spacing: 0;
}

.wuxing-bar__lack {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    color: var(--u-cinnabar);
    letter-spacing: 0.05em;
}

.wuxing-bar__label-kor {
    display: block;
    font-size: 9px;
    color: var(--u-ink-3);
    margin-top: 2px;
}

.wuxing-bar__cell--zero .wuxing-bar__count,
.wuxing-bar__cell--zero .wuxing-bar__label {
    color: var(--u-cinnabar);
}

.wuxing-bar__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-xs);
}

.wuxing-bar__count {
    font-family: var(--u-ff-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--u-ink-3);
}

.wuxing-bar__col {
    width: 100%;
    height: 56px;
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-sm);
    display: flex;
    align-items: flex-end;
}

.wuxing-bar__fill {
    width: 100%;
    border-radius: var(--u-r-sm);
}

/* 막대 채움 — PHP 측에서 비율을 10단위로 버킷팅한 BEM modifier (--h0 ~ --h100)로 height
   매핑. 인라인 style 금지 룰 보호 위해 attribute selector / JS 없이 클래스만으로 표현. */
.wuxing-bar__fill--h0 { height: 0; }
.wuxing-bar__fill--h10 { height: 10%; }
.wuxing-bar__fill--h20 { height: 20%; }
.wuxing-bar__fill--h30 { height: 30%; }
.wuxing-bar__fill--h40 { height: 40%; }
.wuxing-bar__fill--h50 { height: 50%; }
.wuxing-bar__fill--h60 { height: 60%; }
.wuxing-bar__fill--h70 { height: 70%; }
.wuxing-bar__fill--h80 { height: 80%; }
.wuxing-bar__fill--h90 { height: 90%; }
.wuxing-bar__fill--h100 { height: 100%; }

.wuxing-bar__fill--wood {
    background-color: var(--u-wuxing-wood);
}

.wuxing-bar__fill--fire {
    background-color: var(--u-wuxing-fire);
}

.wuxing-bar__fill--earth {
    background-color: var(--u-wuxing-earth);
}

.wuxing-bar__fill--metal {
    background-color: var(--u-wuxing-metal);
}

.wuxing-bar__fill--water {
    background-color: var(--u-wuxing-water);
}

.wuxing-bar__label {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--u-ink-2);
}

.wuxing-bar__cell--zero .wuxing-bar__fill {
    opacity: 0.2;
}

/* ---------------------------------------------------------------------------
 * 7. 후크 카드 (hook-card)
 *    - paper-2 배경, 좌측 4px cinnabar 띠, 풀 콘텐츠 7섹션 미리보기.
 * ------------------------------------------------------------------------- */
.hook-card {
    background-color: var(--u-paper-2);
    color: var(--u-ink);
    border-radius: var(--u-r-md);
    padding: 20px;
    border-left: 4px solid var(--u-cinnabar);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
}

.hook-card__title {
    font-family: var(--u-ff-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--u-ink);
}

.hook-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

.hook-card__item {
    display: flex;
    gap: var(--u-s-sm);
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.65;
    color: var(--u-ink-2);
}

.hook-card__item::before {
    content: '·';
    color: var(--u-cinnabar);
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 7b. 잠금 오버레이 (자물쇠 아이콘 + CTA)
 *    - .preview-body__paywall 폼 내부에서 자물쇠 SVG + 가격 CTA 묶음으로 사용.
 *    - TODO(rename): paywall 컨텍스트로 이동 — 후속 PR (.paywall-icon / .paywall-cta 등).
 * ------------------------------------------------------------------------- */
.lock-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-md);
    /* 자물쇠 round 와 CTA 영역만 hit-test 대상으로 — 둘 사이 gap·주변 빈 영역 클릭은 무시.
       click 이벤트는 자식에서 button 으로 정상 bubble up 되어 submit 동작은 그대로. */
    pointer-events: none;
}

.lock-overlay__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--u-r-full);
    border: 1.5px solid var(--u-ink-3);
    color: var(--u-ink);
    background-color: var(--u-paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.lock-overlay__cta {
    background-color: var(--u-gold);
    color: var(--u-paper);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--u-r-sm);
    padding: 14px 40px;
    pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * 7c. 풀이 본문 단락 (preview-body) — /preview B 화면 무료 풀이 본문.
 *     자세히 풀이(.unse-section__body)와 동일 타이포로 폰트 위계 일치.
 *     본문 텍스트 자체가 mask-image 로 마지막 부분이 페이드 → 자물쇠/CTA 가 그 위에 떠
 *     "더 읽고 싶다 → 결제" 동선을 만든다. 본문 길이가 어떻든(짧든 길든) 항상 일관된 페이드.
 * ------------------------------------------------------------------------- */
.preview-body {
    position: relative;
    font-family: var(--u-ff-serif);
    font-size: 15px;
    line-height: 1.85;
    color: var(--u-ink-2);
    /* paywall CTA(약 6rem) 가 본문 마지막 페이드 영역 위에 떠 있을 공간. */
    padding-bottom: 7rem;
    /* preview_body 가 매우 짧을 때도 paywall 가 자리잡을 컨테이너 높이 하한. */
    min-height: 16rem;
}

.preview-body__text {
    margin: 0;
    white-space: normal;
    /* 본문 끝 ~40% 가 점진적으로 투명해져 자세히 풀이 결제 유도. fade overlay 가 아닌
     * mask 라서 본문 길이에 관계없이(짧든 길든) 항상 본문 자체가 자연 페이드. */
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.preview-body__paywall {
    position: absolute;
    inset: auto 0 var(--u-s-lg) 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.preview-body__paywall-submit {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.preview-body__paywall-submit:focus-visible {
    outline: 2px solid var(--u-gold);
    outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * 7d. 잠금 해제 sticky wrapper (paywall-sticky)
 *     본문 .preview-body__paywall 이 viewport 위로 빠지면 JS(.is-active 토글)로
 *     동일 lock-overlay UI 가 viewport 하단에 즉시 페이드 인 — 결제 CTA 가 페이지 끝까지 따라옴.
 *     슬라이드 인 X (페이지 끝에서 새로 등장하는 인상을 주기 때문). 같은 자리에서 opacity 만 토글.
 *     내용물은 .preview-body__paywall-submit + .lock-overlay 를 그대로 재사용.
 * ------------------------------------------------------------------------- */
.paywall-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* form-loading-overlay(1000) 보다는 아래, 그 외 본문 위. */
    z-index: 50;
    display: flex;
    justify-content: center;
    padding: var(--u-s-md) var(--u-s-lg) calc(var(--u-s-md) + env(safe-area-inset-bottom)) var(--u-s-lg);
    /* z-index 만으로는 가려지지 않으므로 paper 로 불투명 덮기 — 뒤 footer/본문이 버튼 옆·위로 비치는 것 차단. */
    background-color: var(--u-paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* 바 위쪽 paper 그라데이션 스크림 — 페이지 콘텐츠가 바 안으로 부드럽게 사라지게(본문 mask 페이드와 동일 언어). */
.paywall-sticky::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--u-s-3xl);
    background: linear-gradient(to top, var(--u-paper), transparent);
    pointer-events: none;
}

.paywall-sticky.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * 8. 가격 강조 (price-tag)
 *    - headline-display 32px cinnabar + body-sm mute 단위 "원".
 * ------------------------------------------------------------------------- */
.price-tag {
    display: inline-flex;
    align-items: baseline;
    gap: var(--u-s-xs);
    font-family: var(--u-ff-serif);
}

.price-tag__amount {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--u-cinnabar);
}

.price-tag__unit {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--u-mute);
}

/* ---------------------------------------------------------------------------
 * 9. 스피너 (spinner / spinner--large)
 *    - 회전 인디케이터. spinner--large 56px = E·E₂ 결과 생성 중 화면.
 * ------------------------------------------------------------------------- */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--u-paper-dim);
    border-top-color: var(--u-cinnabar);
    border-radius: var(--u-r-full);
    animation: u-spin 0.9s linear infinite;
    box-sizing: border-box;
}

.spinner--large {
    width: 56px;
    height: 56px;
    border-width: 3px;
}

@keyframes u-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------
 * 10. 펼치기 (disclosure)
 *     - 십신·자장간·JSON 펼치기 토글.
 * ------------------------------------------------------------------------- */
.disclosure {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

.disclosure__toggle {
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--u-ink-3);
    text-align: left;
}

.disclosure__toggle:hover {
    color: var(--u-ink);
}

.disclosure__body {
    display: none;
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.65;
    color: var(--u-ink-2);
}

.disclosure[open] .disclosure__body,
.disclosure.is-open .disclosure__body {
    display: block;
}

/* ---------------------------------------------------------------------------
 * 11. 페이지 헤더 (page-header)
 *     - 화면 진입 헤드: headline-lg 28px + 보조 카피.
 * ------------------------------------------------------------------------- */
.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
    padding: var(--u-s-2xl) 0 var(--u-s-lg);
}

.page-header__title {
    font-family: var(--u-ff-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--u-ink);
    margin: 0;
}

.page-header__subtitle {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--u-ink-3);
    margin: 0;
}

/* 사용자가 입력한 생년월일 한 줄 — subtitle 아래 칩(테두리 박스).
   "1992년 12월 15일 · 양력 · 조자시". align-self 로 내용 폭만큼만 차지. */
.page-header__birth {
    display: inline-flex;
    align-items: center;
    gap: var(--u-s-sm);
    align-self: flex-start;
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--u-ink-2);
    background: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-full);
    padding: 5px 14px;
}

.page-header__birth-dot {
    color: var(--u-cinnabar);
    font-size: 9px;
    line-height: 1;
}

/* ---------------------------------------------------------------------------
 * 12. 푸터 (footer)
 *     - 페이지 하단 안내·링크. 사용자 화면 공통.
 * ------------------------------------------------------------------------- */
.footer {
    position: relative;
    padding: var(--u-s-3xl) var(--u-s-2xl) var(--u-s-2xl);
    color: var(--u-ink-3);
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.65;
    border-top: 1px solid var(--u-paper-dim);
    margin-top: var(--u-s-4xl);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

/* 상단 cinnabar 미세 띠 — site-header와 호응하는 시각 닫힘. */
.footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: var(--u-s-2xl);
    width: 32px;
    height: 1px;
    background-color: var(--u-cinnabar);
}

.footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-s-sm);
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--u-s-sm);
}

.footer__link {
    color: var(--u-ink-3);
    text-decoration: underline;
}

.footer__link:hover {
    color: var(--u-ink);
}

.footer__sep {
    color: var(--u-paper-dim);
}

.footer__lookup {
    color: var(--u-ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: auto;
}

.footer__lookup:hover,
.footer__lookup:focus {
    color: var(--u-cinnabar);
}

.footer__copyright {
    margin: 0;
    font-size: 11px;
    color: var(--u-mute);
}

/* 사업자정보 펼치기 — .disclosure 재사용, 푸터 11px 톤에 맞춤. */
.footer__biz {
    gap: var(--u-s-xs);
}

.footer__biz-toggle {
    font-size: 11px;
    font-weight: 500;
    color: var(--u-ink-3);
}

.footer__biz-body {
    font-size: 11px;
    line-height: 1.65;
    color: var(--u-mute);
}

.footer__biz-line {
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * 12.1 사이트 헤더 (site-header)
 *     - 글로벌 상단 바: 브랜드 로고. 사용자 화면 공통.
 * ------------------------------------------------------------------------- */
.site-header {
    position: relative;
    width: 100%;
    /* width: 100% + 좌우 padding 이 viewport 폭을 초과하지 않도록 border-box.
       overflow-x: hidden 글로벌 가드와 함께 우측 로그인 버튼이 잘리는 것을 막는다. */
    box-sizing: border-box;
    padding: var(--u-s-lg) var(--u-s-2xl) var(--u-s-md);
    border-bottom: 1px solid var(--u-paper-dim);
    background-color: var(--u-paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 좌측 끝 미세 띠 — 글로벌 셸의 시작점을 옅게 표시.
   화면당 cinnabar 1개 룰 보호 위해 paper-dim 으로 톤다운. */
.site-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--u-paper-dim);
}

.site-header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: var(--u-ink);
    text-decoration: none;
    font-family: var(--u-ff-serif);
    font-size: 19px;
    letter-spacing: 0.05em;
}

/* "꿀점사주" 워드마크: 앞 "꿀점" 을 brand-gold 로 강조(황금/금전 톤),
   뒤 "사주" 는 ink-2 로 톤다운해 브랜드명 위계를 만든다. 크기·자간은 컨테이너 상속.
   결제 CTA 의 --u-gold 와 색은 같지만 토큰을 분리해 의미 독점을 보존. */
.site-header__brand-accent {
    font-weight: 700;
    color: var(--u-brand-gold);
}

.site-header__brand-rest {
    font-weight: 500;
    color: var(--u-ink-2);
}

/* 우측 끝 로그인 버튼 placeholder — 실 인증 도입 전까지 is-disabled 노출.
   cinnabar 1개 룰 보호 위해 outline 톤만 사용 (paper-dim border). */
.site-header__login {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--u-ink-2);
    background-color: transparent;
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-sm);
    padding: 8px 14px;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.site-header__login:hover,
.site-header__login:focus {
    border-color: var(--u-cinnabar);
    color: var(--u-cinnabar);
}

.site-header__login.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * 14. A0 진입점 (intro-page / category-card)
 *    - 할매 일러스트 + 4 카테고리 2×2 그리드.
 *    - 종합만 active, 나머지 3종 disabled(coming soon) — opacity로 시각 분리.
 * ------------------------------------------------------------------------- */
.intro-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    margin: 0;
    min-height: 100vh;
}

.intro-main {
    max-width: 402px;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg) var(--u-s-3xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-lg);
}

.intro-grandma {
    position: relative;
    width: 220px;
    height: 220px;
    margin-top: var(--u-s-lg);
    /* preview-main · result-main 은 align-items 미지정(=stretch) 이라 220px 고정 폭 블록이
       왼쪽에 붙는다. align-self 로 가운데 정렬. intro-main 은 이미 align-items: center 라 no-op. */
    align-self: center;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--u-paper-2);
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px var(--u-paper-dim),
        0 0 0 6px var(--u-paper),
        0 0 0 7px var(--u-cinnabar-tn);
}

.intro-grandma__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* 사진 미투입 상태 — 한자 워터마크로 placeholder. */
.intro-grandma--empty::before {
    content: '命';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--u-ff-serif);
    font-size: 110px;
    font-weight: 600;
    color: var(--u-ink-3);
    opacity: 0.22;
    letter-spacing: 0;
}

.intro-ornament {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--u-cinnabar);
    margin: var(--u-s-lg) 0 0;
    text-align: center;
    text-transform: none;
}

/* 사진 ↘ 만세력 사이 할매 voice line. preview/result 화면이 인트로 톤을 이어받는 다리. */
.opening-quote {
    align-self: center;
    max-width: 360px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
    /* 사진과 시각적으로 한 묶음 — preview-main 의 xl gap 일부를 상쇄해
       photo→quote 간격을 좁히고, quote→만세력 은 본래 xl 유지. */
    margin-top: calc(var(--u-s-xl) * -0.4);
}

.opening-quote__body {
    font-family: var(--u-ff-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--u-ink-2);
    margin: 0;
    text-align: center;
}

.opening-quote__body::before {
    content: '「';
    color: var(--u-cinnabar);
    font-style: normal;
    font-weight: 500;
    margin-right: 0.35em;
    vertical-align: -0.02em;
}

.opening-quote__body::after {
    content: '」';
    color: var(--u-cinnabar);
    font-style: normal;
    font-weight: 500;
    margin-left: 0.35em;
    vertical-align: -0.02em;
}

.opening-quote__source {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--u-ink-3);
    text-align: right;
    padding-right: var(--u-s-md);
    margin: 0;
}

/* 대운 ↘ 풀이 본문 사이 챕터 헤딩. 한자 인장(解) + 한국어 라벨 + 전폭 hairline. */
.chapter-heading {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: var(--u-s-md);
    margin: var(--u-s-lg) 0;
    padding-bottom: var(--u-s-sm);
    border-bottom: 1px solid var(--u-paper-dim);
}

.chapter-heading__hanja {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--u-cinnabar);
}

.chapter-heading__title {
    font-family: var(--u-ff-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: var(--u-ink-2);
    margin: 0;
}

.intro-headline {
    font-family: var(--u-ff-serif);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--u-ink);
    margin: var(--u-s-md) 0 0;
    text-align: center;
}

.intro-subheadline {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--u-mute);
    margin: 0 0 var(--u-s-lg);
    text-align: center;
}

.category-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--u-s-md);
}

.category-card {
    position: relative;
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-md);
    padding: var(--u-s-lg) var(--u-s-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-xs);
    min-height: 138px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--u-paper-dim);
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    color: inherit;
    text-decoration: none;
}

.category-card:hover {
    border-color: var(--u-ink-3);
    transform: translateY(-1px);
}

.category-card__hanja {
    font-family: var(--u-ff-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--u-ink);
    letter-spacing: 0.08em;
}

.category-card__korean {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--u-ink-2);
}

.category-card__desc {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    color: var(--u-ink-3);
    line-height: 1.4;
    margin-top: var(--u-s-xs);
}

.category-card--active {
    border-color: color-mix(in srgb, var(--u-cinnabar) 30%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--u-cinnabar) 30%, transparent);
}

.category-card--active .category-card__hanja {
    color: var(--u-cinnabar);
}

.category-card--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.category-card__coming {
    font-family: var(--u-ff-mono);
    font-size: 10px;
    color: var(--u-mute);
    letter-spacing: 0.1em;
    margin-top: var(--u-s-xs);
}

.intro-lookup-link {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    color: var(--u-ink-3);
    text-decoration: underline;
    margin-top: var(--u-s-xl);
}

.intro-lookup-link:hover,
.intro-lookup-link:focus {
    color: var(--u-cinnabar);
}

/* ---------------------------------------------------------------------------
 * 15. A 입력 폼 (home-page / home-form)
 *     - 이름·성별·양/음력·윤달·생년월일·시각(모름)·휴대폰·고민·동의·CTA.
 *     - 모든 시각 속성은 토큰 변수(--u-*)만 사용. 인라인 style 금지.
 * ------------------------------------------------------------------------- */
.home-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    margin: 0;
    min-height: 100vh;
}

.home-main {
    max-width: 402px;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg) var(--u-s-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
}

/* 히어로 인물 — 다크 에디토리얼 톤에 녹이는 트리트먼트(Variant A).
   사진 가장자리를 paper 로 마스크 페이드해 사각형 경계를 지우고(어둠에서 떠오르는 인상),
   warm 비네트(multiply) + 한지 그레인(soft-light)으로 본문 질감과 연속시킨다.
   화난 표정은 브랜드 컨셉이라 그대로 두고, 색온도만 본문 팔레트로 통일(sepia 미세 가산). */
.home-hero {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    -webkit-mask-image: radial-gradient(76% 82% at 50% 38%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(76% 82% at 50% 38%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}

.home-hero__image {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.78) contrast(1.05) brightness(0.9) sepia(0.12);
}

.home-hero::before,
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* warm 비네트 — 가장자리를 paper 톤으로 끌어내려 본문과 연속 */
.home-hero::before {
    z-index: 1;
    background:
        linear-gradient(to bottom, rgba(21, 17, 13, 0.7) 0%, rgba(21, 17, 13, 0) 14%, rgba(21, 17, 13, 0) 64%, rgba(21, 17, 13, 0.92) 100%),
        radial-gradient(92% 90% at 50% 38%, rgba(58, 28, 24, 0) 34%, rgba(21, 17, 13, 0.85) 100%);
    mix-blend-mode: multiply;
}

/* 한지 결 — body::before grain 과 동일 텍스처를 사진 위에도 얹어 통일 */
.home-hero::after {
    z-index: 2;
    background-image: url('/unse/images/grain.svg');
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.25;
    mix-blend-mode: soft-light;
}

.home-form {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
}

.home-form__textarea {
    resize: vertical;
    min-height: 96px;
    font-family: var(--u-ff-serif);
}

.home-form__cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
    margin-top: var(--u-s-2xl);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
}

.form-label {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--u-ink-2);
    letter-spacing: 0.02em;
}

.form-helper {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--u-mute);
    margin: 0;
}

.form-error {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--u-cinnabar);
    margin: 0;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: var(--u-s-sm);
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.5;
    color: var(--u-ink-2);
    cursor: pointer;
}

.checkbox-row__label {
    font-family: var(--u-ff-serif);
    font-weight: 400;
}

.checkbox-row__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkbox-row__link:hover {
    color: var(--u-cinnabar);
}

.checkbox-row--agree {
    color: var(--u-ink);
    font-weight: 500;
    margin-top: var(--u-s-sm);
}

.lunar-only {
    display: none;
}

.lunar-only.is-visible {
    display: inline-flex;
}

/*
 * .form-fieldset — 본인 입력과 별개의 그룹(현재 cat=match 의 상대 사주) 을 묶는 fieldset.
 * 브라우저 기본 border/padding/margin reset 후 토큰 spacing 으로 재구성.
 */
.form-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
    padding-top: var(--u-s-lg);
    border-top: 1px solid var(--u-paper-dim);
}

.form-fieldset__legend {
    font-family: var(--u-ff-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--u-ink);
    padding: 0;
    margin-bottom: var(--u-s-xs);
}

.form-fieldset__hint {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--u-mute);
    margin: 0 0 var(--u-s-sm) 0;
}

/* .form-fieldset--partner modifier 는 markup 차별화 용도. 추가 시각 분기 필요 시 본 셀렉터에 룰 추가. */

.form-label__hint {
    font-family: var(--u-ff-serif);
    font-size: 11px;
    font-weight: 400;
    color: var(--u-mute);
    margin-left: var(--u-s-xs);
}

.chip-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--u-s-xs);
    padding: 2px 0;
}

.chip-toggle__button {
    position: relative;
    background-color: var(--u-paper-2);
    color: var(--u-ink-2);
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid transparent;
    border-radius: var(--u-r-full);
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.chip-toggle__button:hover {
    border-color: var(--u-cinnabar);
}

.chip-toggle__button input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.chip-toggle__button--active,
.chip-toggle__button:has(input[type="radio"]:checked) {
    background-color: var(--u-cinnabar);
    color: var(--u-paper);
    border-color: var(--u-cinnabar);
}

.chip-toggle__button:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--u-cinnabar);
    outline-offset: 2px;
}

.chip-toggle__button:has(input[type="radio"][aria-invalid="true"]) {
    border-color: var(--u-cinnabar);
}

/* ---------------------------------------------------------------------------
 * 15.1 SEO 안내 카피 (seo-intro / seo-content) — 입력 폼 상·하단 prose 블록.
 *     - jonghap(평생사주) 한정. home-main 컬럼 폭 안에서 검색 노출용 h1/h2/h3 + 본문.
 *     - home-main flex gap(--u-s-lg) 이 섹션 간격을, 섹션 내부는 자체 margin 으로 흐름.
 * ------------------------------------------------------------------------- */
.seo-intro {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
}

.seo-intro__title {
    font-family: var(--u-ff-serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--u-ink);
    margin: 0;
}

.seo-intro__lead {
    font-family: var(--u-ff-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--u-ink-2);
    margin: 0;
}

.seo-content {
    font-family: var(--u-ff-serif);
    color: var(--u-ink-2);
}

.seo-content__divider {
    width: 100%;
    height: 1px;
    border: 0;
    background-color: var(--u-paper-dim);
    margin: var(--u-s-2xl) 0;
}

.seo-content h2 {
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--u-ink);
    margin: 0 0 var(--u-s-md);
}

.seo-content h3 {
    font-family: var(--u-ff-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--u-ink);
    margin: var(--u-s-xl) 0 var(--u-s-sm);
}

.seo-content p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--u-ink-2);
    margin: 0 0 var(--u-s-md);
}

.seo-content ul {
    margin: 0 0 var(--u-s-md);
    padding-left: var(--u-s-xl);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
}

.seo-content li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--u-ink-2);
}

/* ---------------------------------------------------------------------------
 * 16. 결제 확인 중 (payment-checking) — US-030 C 화면
 *     - 스피너 + 로테이션 메시지 + 30초 경과 안내. JS가 .is-active / .is-hidden 토글.
 * ------------------------------------------------------------------------- */
.payment-checking-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    margin: 0;
    min-height: 100vh;
    font-family: var(--u-ff-serif);
}

.payment-checking {
    max-width: 402px;
    margin: 0 auto;
    padding: var(--u-s-4xl) var(--u-s-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-xl);
    text-align: center;
}

.payment-checking__spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.payment-checking__headline {
    font-family: var(--u-ff-serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--u-ink);
    margin: 0;
}

.payment-checking__messages {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 22px;
}

.payment-checking__message {
    display: none;
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.5;
    color: var(--u-ink-3);
}

.payment-checking__message.is-active {
    display: block;
}

.payment-checking__delay {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    line-height: 1.6;
    color: var(--u-mute);
    margin: 0;
    padding: var(--u-s-md) var(--u-s-lg);
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-md);
    max-width: 320px;
}

.payment-checking__delay.is-hidden {
    display: none;
}

.payment-checking__hint {
    font-family: var(--u-ff-mono);
    font-size: 11px;
    color: var(--u-mute);
    margin: 0;
}

/* ---------------------------------------------------------------------------
 * 17. 결제 실패 화면 (D — US-031)
 *    - 단순 정적 view. 헤드 + 사유 카피 + 두 CTA + 주문번호 표시.
 * ------------------------------------------------------------------------- */
.payment-failed-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    min-height: 100vh;
    margin: 0;
}

.payment-failed {
    max-width: 402px;
    width: 100%;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-md);
    text-align: center;
}

.payment-failed__icon {
    color: var(--u-cinnabar);
    margin-top: var(--u-s-2xl);
    margin-bottom: var(--u-s-sm);
}

.payment-failed__headline {
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--u-ink);
    margin: 0;
}

.payment-failed__reason {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--u-ink-2);
    margin: 0;
    max-width: 320px;
}

.payment-failed__hint {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    line-height: 1.6;
    color: var(--u-mute);
    margin: 0;
}

.payment-failed__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
    margin-top: var(--u-s-lg);
}

.payment-failed__order-no {
    font-family: var(--u-ff-mono);
    font-size: 11px;
    color: var(--u-mute);
    margin: 0;
    margin-top: var(--u-s-md);
}

/* ---------------------------------------------------------------------------
 * 18. 결과 생성 중 화면 (result-pending) — US-032 E·E₂ 화면
 *     - 4주 만세력 카드 + 56px 스피너 + phase별 메시지 풀(타자기) + 60초+ E₂ 톤.
 *     - JS가 phase별 풀에서 무작위 메시지 픽 → 글자 단위 타자.
 *     - 60초 경과 시 .result-pending.is-delayed → 스피너 cinnabar 톤.
 * ------------------------------------------------------------------------- */
.result-pending-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    margin: 0;
    min-height: 100vh;
    font-family: var(--u-ff-serif);
}

.result-pending {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-xl);
    text-align: center;
}

/* 부모 align-items: center 때문에 grid/strip 자식들이 콘텐츠 폭으로 줄어드는 것 방지.
   preview/result와 동일한 가로 폭으로 만세력·오행·대운 노출. */
.result-pending > .manse-grid,
.result-pending > .wuxing-bar,
.result-pending > .daewoon-strip {
    align-self: stretch;
    width: 100%;
}

.result-pending__header {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
    width: 100%;
}

.result-pending__headline {
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--u-ink);
    margin: 0;
}

.result-pending__subhead {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.65;
    color: var(--u-ink-3);
    margin: 0;
}

.result-pending__manse {
    width: 100%;
}

.result-pending__spinner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    transition: border-color 0.2s ease-in-out;
}

/* 타자기 컨테이너 — JS 가 글자 단위로 텍스트를 채움. 2줄 분량 min-height 로 CLS 방지. */
.result-pending__typewriter {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--u-ink-2);
    margin: 0;
    padding: 0 var(--u-s-md);
    min-height: 3em;
    width: 100%;
    text-align: center;
}

.result-pending__typewriter-text {
    white-space: pre-wrap;
}

.result-pending__typewriter-cursor {
    display: inline-block;
    color: currentColor;
    animation: u-cursor-blink 0.9s steps(2) infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .result-pending__typewriter-cursor {
        animation: none;
    }
}

/* 회전 메시지 아래 고정 안내 — 소요시간·다시보기 위치 등 실용 정보. 할매 카피와 분리된 차분한 톤. */
.result-pending__notice {
    margin-top: var(--u-s-xl);
    padding: 0 var(--u-s-md);
    text-align: center;
}

.result-pending__notice-line {
    font-size: 13px;
    line-height: 1.6;
    color: var(--u-mute);
    margin: 0;
}

.result-pending__notice-line + .result-pending__notice-line {
    margin-top: var(--u-s-xs);
}

/* E₂ 상태 — 60초 경과 시 JS가 .is-delayed를 root에 부여. 스피너 톤 전환. */
.result-pending.is-delayed .spinner--large {
    border-top-color: var(--u-cinnabar-dk);
}

/* 폴링 예산(10분) 소진 시 JS(result-pending.js)가 동적 삽입 — 멈춘 스피너 방치 대신 새로고침 안내. */
.result-pending__timeout {
    margin-top: var(--u-s-lg);
    text-align: center;
}

.result-pending__timeout-text {
    color: var(--u-mute);
    margin-bottom: var(--u-s-sm);
}

.result-pending__timeout-refresh {
    color: var(--u-cinnabar);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 19. 결과 완성 화면 (result-page) — US-033 F 화면
 *     - 4주 manse-card full 변형 + wuxing-bar + 단일 본문 블록(result-body__text) + footer 안내.
 *     - 인쇄 친화 @media print 룰 포함.
 * ------------------------------------------------------------------------- */
.result-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    margin: 0;
    min-height: 100vh;
    font-family: var(--u-ff-serif);
}

/* 사용자 화면 공통 페이지 셸 — 기본 풀이·결과 모두 같은 최대 폭·내 padding·세로 흐름을
   사용한다. 한 정의로 묶어 둘 사이 시각 위계 차이를 없앤다. */
.preview-main,
.result-main {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xl);
}

.manse-grid--full {
    gap: var(--u-s-xs);
}

.manse-card--full {
    min-height: 168px;
    padding: var(--u-s-md);
    gap: var(--u-s-xs);
}

.result-body {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xl);
}

.result-body__text {
    font-family: var(--u-ff-serif);
    font-size: 15px;
    line-height: 1.85;
    color: var(--u-ink);
    white-space: pre-wrap;
    margin: 0;
}

.result-footer {
    margin-top: var(--u-s-xl);
    padding-top: var(--u-s-lg);
    border-top: 1px solid var(--u-paper-dim);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
    text-align: center;
}

.result-footer__hint {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    color: var(--u-ink-3);
    margin: 0;
}

.result-footer__lookup {
    color: var(--u-ink-2);
    text-decoration: underline;
    margin-left: var(--u-s-xs);
}

.result-footer__order-no {
    font-family: var(--u-ff-mono);
    font-size: 10px;
    color: var(--u-ink-3);
    margin: 0;
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
 * 19.1 대운 strip (.daewoon-strip) — US-033 result-page 한정 (section 19 sub)
 *     - 카드 *밖* 독립 섹션. 8칸 grid, 현재 대운만 cinnabar 보더.
 *     - 데이터(`$daewoonItems`)가 빈 배열이면 view 에서 섹션 자체 비노출.
 * ------------------------------------------------------------------------- */
.daewoon-strip {
    border-top: 1px solid var(--u-paper-dim);
    padding-top: var(--u-s-lg);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

.daewoon-strip__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.daewoon-strip__title {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    color: var(--u-ink);
    letter-spacing: 0.15em;
}

.daewoon-strip__title small {
    font-size: 10px;
    color: var(--u-ink-3);
    margin-left: 6px;
    letter-spacing: 0;
}

.daewoon-strip__note {
    font-family: var(--u-ff-serif);
    font-size: 10px;
    color: var(--u-ink-3);
}

.daewoon-strip__note b {
    color: var(--u-cinnabar);
    font-weight: 600;
}

.daewoon-strip__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
}

.daewoon-cell {
    background-color: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    padding: 7px 2px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.daewoon-cell__age {
    font-family: var(--u-ff-serif);
    font-size: 9px;
    color: var(--u-ink-3);
}

.daewoon-cell__hanja {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--u-ink);
}

.daewoon-cell__kor {
    font-family: var(--u-ff-serif);
    font-size: 9px;
    color: var(--u-mute);
    letter-spacing: 0.05em;
}

.daewoon-cell--now {
    border-color: var(--u-cinnabar-dk);
    background-color: var(--u-paper-dim);
}

.daewoon-cell--now .daewoon-cell__age {
    color: var(--u-cinnabar);
    font-weight: 700;
}

/* 인쇄 친화 — 페이지 break 가이드 + 비핵심 인터랙션 요소 숨김. 색은 토큰 그대로 유지. */
@media print {
    .result-main {
        max-width: none;
        padding: 0;
    }

    .manse-card {
        box-shadow: none;
    }

    .result-footer__lookup {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * 20. 시스템 오류 화면 (error-page) — US-035 H 화면
 *     - 4종 변형(generic/ai_failed/key_expired/not_found) 공용.
 *     - PageHeader '안내' → 64px 원형 보더 + 32px 글리프 → 헤드/보조 카피 →
 *       처음으로 CTA → mono 운영자 푸터.
 * ------------------------------------------------------------------------- */
.error-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    margin: 0;
    min-height: 100vh;
    font-family: var(--u-ff-serif);
}

.error-main {
    max-width: 402px;
    width: 100%;
    margin: 0 auto;
    padding: var(--u-s-lg) var(--u-s-lg) var(--u-s-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-lg);
    text-align: center;
}

.error-main .page-header {
    width: 100%;
    align-items: flex-start;
    text-align: left;
}

/* ResultController renderFailed/renderBlocked 의 인라인 에러 화면 헤드/보조 카피.
 * page-header__title/__subtitle 타이포를 error-main 중앙정렬 맥락에 맞춰 재사용. */
.error-headline {
    font-family: var(--u-ff-serif);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--u-ink);
    margin: 0;
}

.error-sub {
    font-family: var(--u-ff-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--u-ink-3);
    margin: 0;
}

.error-glyph-frame {
    width: 64px;
    height: 64px;
    border-radius: var(--u-r-full);
    border: 1.5px solid var(--u-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--u-s-lg);
}

.error-glyph {
    font-family: var(--u-ff-serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--u-ink);
    line-height: 1;
}

.error-message {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
    max-width: 320px;
}

.error-message__headline {
    font-family: var(--u-ff-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--u-ink);
    margin: 0;
}

.error-message__sub {
    font-family: var(--u-ff-serif);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--u-ink-3);
    margin: 0;
}

.error-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
    margin-top: var(--u-s-md);
}

.error-footer__code {
    font-family: var(--u-ff-mono);
    font-size: 10px;
    color: var(--u-mute);
    margin: 0;
    margin-top: var(--u-s-lg);
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------------------
 * 22. 정적 정보 페이지 (static-page / static-article)
 *     - 이용약관 · 개인정보처리방침 · 사업자정보.
 *     - 단일 컬럼, 모바일 폭, 본문 명조 16px / line-height 1.75.
 * ------------------------------------------------------------------------- */
.static-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    margin: 0;
    min-height: 100vh;
}

.static-main {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--u-s-2xl) var(--u-s-3xl);
}

.static-article {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-2xl);
}

.static-section {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

.static-section__title {
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--u-ink);
    margin: 0;
}

.static-section__body {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--u-ink-2);
    margin: 0;
    letter-spacing: 0.01em;
}

.static-article__placeholder {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--u-mute);
    margin: var(--u-s-lg) 0 0;
    padding: var(--u-s-md) var(--u-s-lg);
    border-left: 2px solid var(--u-paper-dim);
    background-color: var(--u-paper-2);
}

.static-deflist {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--u-s-md);
    margin: 0;
}

.static-deflist__row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--u-s-md);
    padding-bottom: var(--u-s-md);
    border-bottom: 1px solid var(--u-paper-dim);
}

.static-deflist__row:last-child {
    border-bottom: 0;
}

.static-deflist__term {
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--u-ink-3);
    letter-spacing: 0.05em;
}

.static-deflist__desc {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--u-ink);
    margin: 0;
}

/* -------------------------------------------------------------------------
 * 22. G 재접근/본인 확인 화면 (lookup-page / lookup-form / lookup-message)
 *     - 결제한 사용자가 휴대폰+생년월일로 본인 인증 후 /unse/result 진입.
 *     - 페이지 셸은 home-page 와 동일 폭·padding. 폼은 home-form 패턴.
 *     - lookup-message 는 매칭/검증 실패 시 cinnabar tonal 톤으로 안내.
 * ------------------------------------------------------------------------- */
.lookup-page {
    background-color: var(--u-paper);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    margin: 0;
    min-height: 100vh;
}

.lookup-main {
    max-width: 402px;
    margin: 0 auto;
    padding: var(--u-s-2xl) var(--u-s-lg) var(--u-s-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
}

.lookup-form {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-lg);
}

.lookup-message {
    padding: var(--u-s-md) var(--u-s-lg);
    border-radius: var(--u-r-md);
    background-color: var(--u-cinnabar-tn);
    border: 1px solid var(--u-cinnabar);
}

.lookup-message__text {
    margin: 0;
    color: var(--u-ink);
    font-size: 14px;
    line-height: 1.5;
}

.lookup-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
}

.lookup-list__item {
    margin: 0;
}

.lookup-list__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u-s-sm);
    flex-wrap: wrap;
    padding: var(--u-s-lg);
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-sm);
    box-shadow: inset 0 0 0 1px var(--u-paper-dim);
    text-decoration: none;
    color: var(--u-ink);
}

.lookup-list__link:hover {
    box-shadow: inset 0 0 0 1px var(--u-cinnabar);
}

.lookup-list__category {
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--u-ink);
}

.lookup-list__name {
    font-size: 13px;
    color: var(--u-ink-2);
}

.lookup-list__when {
    margin-left: auto;
    font-size: 12px;
    color: var(--u-ink-3);
}

/* 상태 배지는 메타 행 아래 새 줄에 좌측 정렬 — 래퍼가 줄 전체를 차지하고
 * 안의 .badge(inline-flex)는 내용 너비만 가져 좌측에 붙는다. */
.lookup-list__status {
    flex-basis: 100%;
    margin-top: var(--u-s-xs);
}

.review-strip { margin: var(--u-s-2xl) 0; }
.review-strip__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--u-s-md);
}
.review-strip__card {
    background-color: var(--u-paper-2);
    border-radius: var(--u-r-sm);
    padding: var(--u-s-lg);
    box-shadow: inset 0 0 0 1px var(--u-paper-dim);
}
.review-strip__card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--u-s-sm);
    flex-wrap: wrap;
    margin-bottom: var(--u-s-sm);
}
.review-strip__stars { color: var(--u-cinnabar); font-size: 16px; }
.review-strip__meta  { display: flex; gap: var(--u-s-sm); color: var(--u-ink-2); font-size: 12px; }
.review-strip__body  {
    margin: 0;
    color: var(--u-ink);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}
.review-strip__summary {
    text-align: center;
    color: var(--u-ink-2);
    font-size: 13px;
    margin: var(--u-s-md) 0 0;
}

/* ---------------------------------------------------------------------------
 * review-zone / review-form (Task 7 — 후기 폼)
 * ------------------------------------------------------------------------- */
.review-zone { margin: 32px 0; padding: 20px; border-top: 1px solid var(--u-ink-3); }
.review-zone__toast,
.review-zone__notice { color: var(--u-ink-2); text-align: center; }
.review-form { display: grid; gap: 12px; }
.review-form__rating { border: 0; padding: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.review-form__rating legend { color: var(--u-ink); margin-right: 8px; }
.review-form__star { line-height: 1; }
.review-form__star input { position: absolute; opacity: 0; pointer-events: none; }
.review-form__star span[aria-hidden="true"] { font-size: 32px; color: var(--u-ink-3); cursor: pointer; transition: color 0.1s ease-in-out; }
.review-form__star:has(input:checked) span[aria-hidden="true"],
.review-form__star:has(~ .review-form__star input:checked) span[aria-hidden="true"] { color: var(--u-cinnabar); }
.review-form__rating:hover .review-form__star span[aria-hidden="true"] { color: var(--u-ink-3); }
.review-form__rating:hover .review-form__star:hover span[aria-hidden="true"],
.review-form__rating:hover .review-form__star:has(~ .review-form__star:hover) span[aria-hidden="true"] { color: var(--u-cinnabar); }
.review-form__textarea { min-height: 96px; resize: vertical; font-family: var(--u-ff-serif); }
.review-form__submit { justify-self: start; padding: 8px 18px; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------------------------------------------------------------------------
 * 폼 제출 로딩 오버레이 (form-loading-overlay)
 *    - submit 클릭 직후 화면 전체를 덮어 OpenAI / PG 응답 대기 시각 피드백 제공.
 *    - JS(`form-loading.js`)가 `<form data-loading-overlay="…">` 의 메시지를 읽어 동적 삽입.
 *    - 브라우저가 응답 redirect 를 따라가면 자연스럽게 사라진다.
 * ------------------------------------------------------------------------- */
.form-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.form-loading-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--u-s-2xl);
    padding: var(--u-s-2xl);
    text-align: center;
}

.form-loading-overlay__message {
    margin: 0;
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

/* 자세한 풀이 목차 — paywall 결제 폼 다음, review-strip 위. 어드민에서 편집하는
   `unse_full_sections` 트리(parent_id=0 상위 + 자식 sub-items)가 표시되는 사용자
   화면 통로. 카드 컨테이너 없이 평탄 — paywall 본문과 자연 연결. */
.full-sections {
    margin: var(--u-s-2xl) 0;
}

.full-sections__head {
    display: flex;
    align-items: baseline;
    gap: var(--u-s-md);
    margin: 0 0 var(--u-s-xl);
}

.full-sections__mark {
    color: var(--u-cinnabar);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.full-sections__eyebrow {
    margin: 0;
    color: var(--u-ink-2);
    font-family: var(--u-ff-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
}

.full-sections__rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--u-paper-dim);
    align-self: center;
}

.full-sections__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-2xl);
}

.full-sections__item {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 0;
    row-gap: var(--u-s-xs);
}

.full-sections__num {
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 2px;
    color: var(--u-cinnabar);
    font-family: var(--u-ff-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
}

.full-sections__heading {
    margin: 0;
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.full-sections__sub {
    margin: var(--u-s-xs) 0 0;
    padding: 0 0 0 var(--u-s-md);
    list-style: none;
    border-left: 1px solid var(--u-paper-dim);
    display: flex;
    flex-direction: column;
    gap: var(--u-s-xs);
}

.full-sections__sub-item {
    color: var(--u-ink-3);
    font-family: var(--u-ff-serif);
    font-size: 13px;
    line-height: 1.6;
}

/* 결제 혜택 보너스 항목 — 번호 목록과 구분선으로 분리해 "결제하면 더 받는 것"으로 읽히게. */
.full-sections__item--bonus {
    padding-top: var(--u-s-2xl);
    border-top: 1px solid var(--u-paper-dim);
}

.full-sections__num--bonus {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 22. 결제창 SDK launch (payment-redirect) — Task 5
 *     - PaymentController::start() pending 주문 → SETTLE_PG.pay() SDK 호출
 *       시점에 잠깐 보이는 풀-뷰포트 스피너 + JS 비활성 안내 문구.
 *     - 스피너 keyframes 는 §9 의 `u-spin` 공유 (별도 keyframes 추가 X).
 * ------------------------------------------------------------------------- */
.payment-redirect {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--u-paper);
    padding: var(--u-s-xl);
}

.payment-redirect__panel {
    background-color: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-md);
    padding: var(--u-s-xl);
    max-width: 360px;
    text-align: center;
}

.payment-redirect__spinner {
    width: 24px;
    height: 24px;
    margin: 0 auto var(--u-s-md);
    border: 3px solid var(--u-paper-dim);
    border-top-color: var(--u-gold);
    border-radius: var(--u-r-full);
    animation: u-spin 0.8s linear infinite;
}

.payment-redirect__title {
    font-family: var(--u-ff-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--u-ink);
    margin: 0 0 var(--u-s-xs);
}

.payment-redirect__hint {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--u-ink-3);
    margin: 0 0 var(--u-s-md);
}

/* ---------------------------------------------------------------------------
 * 결제수단 선택 모달 (payment-modal / payment-method)
 *   - CTA → 모달. 카드=iframe 임베드, 나머지=현재창 리다이렉트.
 *   - 좌측 4px 브랜드 엣지로 식별, 본체는 먹빛 토큰 유지(다크 단일 팔레트).
 * ------------------------------------------------------------------------- */
.payment-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.payment-modal.is-hidden {
    display: none;
}

.payment-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.payment-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 var(--u-s-md);
    margin-bottom: calc(var(--u-s-lg) + env(safe-area-inset-bottom));
    padding: var(--u-s-lg);
    background-color: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-md);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.payment-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--u-s-lg);
}

.payment-modal__title {
    font-family: var(--u-ff-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--u-ink);
    margin: 0;
}

.payment-modal__close {
    background: transparent;
    border: 0;
    color: var(--u-mute);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: var(--u-s-xs);
}

.payment-modal__close:focus-visible {
    outline: 2px solid var(--u-gold);
    outline-offset: 2px;
}

/* 결제 직전 금액 고지 — 영수증 합계처럼 라벨(좌)·금액(우) 한 줄, 하단 룰로 결제수단 목록과 분리. */
.payment-modal__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u-s-md);
    margin-bottom: var(--u-s-lg);
    padding-bottom: var(--u-s-md);
    border-bottom: 1px solid var(--u-paper-dim);
}

.payment-modal__summary-label {
    font-family: var(--u-ff-serif);
    font-size: 14px;
    color: var(--u-mute);
}

.payment-modal__summary-value {
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--u-ink);
    font-feature-settings: 'tnum' 1;
}

.payment-modal__summary-unit {
    margin-left: 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--u-ink-2);
}

.payment-modal__phone {
    margin-bottom: var(--u-s-lg);
}

.payment-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
}

.payment-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--u-s-md);
    width: 100%;
    padding: 13px 15px 13px 18px;
    background-color: var(--u-paper);
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-sm);
    color: var(--u-ink);
    font-family: var(--u-ff-serif);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.payment-method:hover,
.payment-method:focus-visible {
    border-color: var(--u-ink-3);
    outline: none;
}

.payment-method:focus-visible {
    box-shadow: inset 0 0 0 1px var(--u-gold);
}

.payment-method::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.payment-method--card::before { background-color: var(--u-gold); }
.payment-method--kakao::before { background-color: var(--u-brand-kakao); }
.payment-method--naver::before { background-color: var(--u-brand-naver); }
.payment-method--mobile::before { background-color: var(--u-ink-3); }

.payment-method__icon {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--u-ink-2);
}

.payment-method__label {
    flex: 1;
}

.payment-method__chev {
    color: var(--u-mute);
    font-size: 14px;
}

.payment-modal__frame {
    width: 100%;
    height: 70vh;
    border: 0;
    background-color: var(--u-paper);
}

.payment-modal__frame.is-hidden {
    display: none;
}

/* ── 할매에게 질문하기 (followup) ───────────────────────────── */
.followup-zone {
    margin-top: var(--u-s-3xl);
    padding-top: var(--u-s-2xl);
    border-top: 1px solid var(--u-paper-dim);
}
.followup-zone__head {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--u-s-md);
}
.followup-zone__seal {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-family: var(--u-ff-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    color: var(--u-cinnabar);
    background: var(--u-cinnabar-tn);
    border: 1px solid var(--u-cinnabar-dk);
    border-radius: var(--u-r-sm);
}
.followup-zone__heading {
    flex: 1 1 200px;
    min-width: 0;
}
.followup-zone__title {
    font-family: var(--u-ff-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--u-ink);
    margin: 0;
}
.followup-zone__hint {
    color: var(--u-ink-3);
    font-size: 13px;
    line-height: 1.6;
    margin: var(--u-s-xs) 0 0;
}
.followup-zone__remaining {
    flex: 0 0 auto;
    align-self: center;
    color: var(--u-ink-3);
    font-size: 12px;
    line-height: 1.3;
    padding: 5px 12px;
    background: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    border-radius: var(--u-r-full);
    white-space: nowrap;
    margin: 0;
}
.followup-list {
    list-style: none;
    padding: 0;
    margin: var(--u-s-xl) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--u-s-md);
}
.followup-list:empty {
    display: none;
}
.followup-item {
    border-radius: var(--u-r-md);
    background: var(--u-paper-2);
    border: 1px solid var(--u-paper-dim);
    padding: var(--u-s-lg);
}
.followup-item__q {
    color: var(--u-ink);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 var(--u-s-md);
    padding-bottom: var(--u-s-md);
    border-bottom: 1px dashed var(--u-paper-dim);
}
.followup-item__q::before {
    content: '물음';
    display: inline-block;
    margin-right: var(--u-s-sm);
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--u-ink-3);
    background: var(--u-paper);
    border-radius: var(--u-r-full);
    vertical-align: 0.14em;
}
.followup-item__a {
    color: var(--u-ink-2);
    font-size: 15px;
    line-height: 1.75;
    margin: 0;
    white-space: pre-wrap;
}
.followup-item__a::after {
    content: '— 할매';
    display: block;
    margin-top: var(--u-s-sm);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--u-cinnabar);
    text-align: right;
    white-space: normal;
}
.followup-form {
    display: flex;
    flex-direction: column;
    gap: var(--u-s-sm);
    margin-top: var(--u-s-xl);
}
.followup-form__label {
    font-family: var(--u-ff-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--u-ink-3);
}
.followup-form__textarea {
    width: 100%;
    min-height: 88px;
    resize: vertical;
}
.followup-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-s-md);
}
.followup-form__counter {
    color: var(--u-ink-3);
    font-size: 11px;
    line-height: 1.3;
}
.followup-form__submit {
    padding: 10px 22px;
    font-size: 14px;
}
/* 후속 질문 제출 중(followup.js setSubmitting) — 라벨을 투명 처리해 버튼 폭을
 * 유지한 채 ::after 회전 스피너만 노출. JS 는 is-loading 토글만, 시각은 여기서. */
.followup-form__submit.is-loading {
    color: transparent;
    position: relative;
    pointer-events: none;
}
.followup-form__submit.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border: 2px solid var(--u-paper-dim);
    border-top-color: var(--u-cinnabar);
    border-radius: var(--u-r-full);
    animation: u-spin 0.9s linear infinite;
    box-sizing: border-box;
}
.followup-form__error {
    color: var(--u-cinnabar);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}