/* 미래점방 공용 프레임 — 전 페이지 통일 작업의 뼈대 (2026-08-25 대표 확정).
 *
 * 확정 세 가지를 이 파일이 구현한다.
 *   ① 하단 탭바는 전 페이지 상시. 상세·지갑은 결제 dock 을 탭바 위에 얹는다(B안).
 *   ② 상단 간판은 "미래점방". 푸터의 법인 고지는 그대로.
 *   ③ 데스크톱도 가운데 620px 폰컬럼.
 *
 * home-jeombang.css(메인 전용)는 다른 PC 가 실시간으로 만지는 뜨거운 구역이라
 * 여기서 import 하지 않고 필요한 규칙을 새로 적었다. 값은 같은 theme.css 토큰만
 * 쓴다. 통일 마지막 단계(S6)에서 메인도 이 파일 위로 옮기고 중복을 걷는다. */

:root {
    --red: var(--jb-red);
    --red-2: var(--jb-red-deep);
    --yellow: var(--jb-yellow);
    --mint: var(--jb-mint);
    --mint-l: var(--jb-mint-light);
    --wood: var(--jb-wood);
    --wood-2: var(--jb-wood-deep);
    --paper: var(--jb-paper);
    --paper-2: var(--jb-paper-2);
    --paper-3: var(--jb-paper-3);
    --card: var(--c-white);
    --ink: var(--jb-ink);
    --ink-2: var(--jb-ink-soft);
    --edge: var(--jb-line);
    --edge-2: var(--jb-wood);
    --outside: var(--jb-outside);
    --radius: 16px;
    --bw: 2px;
    --drop: 0 4px 0 rgb(139 94 60 / 30%);
    --drop-sm: 0 3px 0 rgb(139 94 60 / 26%);
    --lift: 0 10px 24px rgb(94 66 39 / 22%);
    --rule: 3px;
    --tabh: 74px;
    /* B안 — 결제 dock 이 있는 화면의 하단 총 높이. 본문 여백 계산은 이 값 하나로. */
    --dockh: 66px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--outside);
    color: var(--ink);
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
    font-size: 16px; line-height: 1.66;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 14px; top: 14px; z-index: 99; background: var(--card);
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--radius); }

/* ── 폰컬럼(확정 ③) ── */
/* 종이는 내용만큼만 — min-height 를 주면 짧은 화면에서 발판 위 공백(#34)이나
   발판 아래 띠(#35)가 남는다(2026-08-26 대표 지적 둘). 탭바는 fixed 라 안 떨어진다. */
.app {
    position: relative; max-width: 620px; margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgb(94 66 39 / 20%), 0 20px 60px rgb(60 40 20 / 28%);
    overflow: hidden;
}
.pad { padding: 0 18px; }

/* ── 상단 간판(확정 ②) — 옷은 frame.css 「상단바 한 벌」이 유일한 정의처다.
   링크는 bar 파셜 첫 줄에 실린다(2026-08-26 대표 지시 — 헤더는 한 곳에서만). */

/* ── 제목 리듬 ── */
h1 {
    margin: 22px 0 6px; font-family: "Gowun Dodum", serif;
    font-size: 27px; line-height: 1.34; letter-spacing: -.02em; font-weight: 700;
}
h2 {
    margin: 26px 0 8px; font-family: "Gowun Dodum", serif;
    font-size: 21px; line-height: 1.36; letter-spacing: -.02em; font-weight: 700;
}
.eyebrow { margin: 0; font-size: 15px; color: var(--ink-2); letter-spacing: .04em; }
.muted { color: var(--ink-2); }

/* ── 문서 본문(약관·개인정보·결제 안내) — 내용 HTML 은 손대지 않고 이 틀이 입힌다 ── */
.narrow { padding: 6px 18px 34px; }
.legal-page p, .legal-page li { font-size: 16px; line-height: 1.74; word-break: keep-all; }
.legal-page h2 { margin-top: 30px; }
.legal-page ul, .legal-page ol { padding-left: 22px; }
.legal-page table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal-page th, .legal-page td { padding: 8px 10px; border-bottom: 1px solid var(--edge); text-align: left; }

/* ── 카드·폼(문의) ── */
.card, .panel {
    background: var(--card);
    border: var(--bw) solid var(--edge-2); border-radius: var(--radius);
    box-shadow: var(--drop);
    padding: var(--fr-card-pad-block) var(--fr-card-pad-inline);
}
.stack { display: grid; gap: 14px; }
.field label { display: block; margin-bottom: 7px; font-size: 15px; color: var(--ink-2); }
.input, .select, .textarea {
    width: 100%; min-height: 50px; padding: 10px 14px;
    font-size: 16px; font-family: inherit; color: var(--ink);
    background: var(--paper); border: var(--bw) solid var(--edge); border-radius: 12px;
}
.textarea { min-height: 140px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--red); background: var(--card); }
.checkbox { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); flex: 0 0 auto; }

/* 소셜 로그인 버튼은 상표 색이 우선이라 점방 빨강을 입히지 않는다(2026-08-25 실측:
   구글 흰 바탕이 빨강으로 덮였다). 카카오·네이버는 제 규칙이 세서 원래 살아남는다. */
.button:not(.auth-provider-button), .btn {
    display: flex; align-items: center; justify-content: center;
    min-height: 54px; padding: 0 22px;
    border: var(--bw) solid var(--red-2); border-radius: 999px;
    background: var(--red); color: var(--c-white);
    font-size: 17px; font-weight: 700; box-shadow: 0 5px 0 var(--red-2);
    word-break: keep-all;
    cursor: pointer;
}
.button:not(.auth-provider-button):active, .btn:active { transform: translateY(3px); box-shadow: none; }
.button-block { width: 100%; }
.button-secondary {
    background: var(--card); color: var(--ink);
    border-color: var(--edge-2); box-shadow: var(--drop-sm);
}
.status-box {
    padding: 12px 14px; border: var(--bw) solid var(--edge); border-radius: 12px;
    background: var(--paper-2); font-size: 15px;
}
.status-box:has(> .button),
body.jb-app main .status-box:has(> .button) {
    padding: var(--fr-card-pad-block, 20px) var(--fr-card-pad-inline, 20px);
}
.status-box.is-error { border-color: var(--red); background: var(--jb-me); }

/* 푸터 — 프레임 규칙은 frame.css 로 이사(2026-08-26). 여기 다시 적지 않는다. */

/* 푸터 KB 마크 줄 — 프레임 규칙은 frame.css 로 이사(2026-08-26). 여기 다시 적지 않는다. */
.kb-escrow-button {
    display: inline-flex; min-height: 76px; padding: 8px 14px 8px 8px;
    border: var(--bw) solid var(--edge); border-radius: 12px;
    align-items: center; gap: 10px;
    color: var(--ink); background: var(--card);
    font: inherit; text-align: left; cursor: pointer;
    box-shadow: var(--drop-sm);
}
.kb-escrow-button img { width: 58px; height: 58px; object-fit: contain; }
.kb-escrow-button span { display: grid; gap: 3px; }
.kb-escrow-button b { font-size: 15px; }
.kb-escrow-button small { font-size: 15px; color: var(--ink-2); }

/* 탭바 — 프레임 규칙은 frame.css 로 이사(2026-08-26). 여기 다시 적지 않는다. */

/* 결제 dock 규칙은 2026-08-25 dock 삭제로 함께 걷었다. */

/* ── 웹툰 본문 브리지 — 구 화면을 점방 프레임에 앉히는 다리 (S0, 2026-08-25) ──
 *
 * 유료 리포트·상세 본문(webtoon.css 9,971줄)은 색을 전부 --c-* 토큰으로 받는다.
 * 그래서 규칙을 다시 쓰지 않고 body.jb-app 에서 종이·먹 계열만 점방 톤으로 덮으면
 * 본문 전체가 점방 종이 위에 앉는다. 오행 의미색(쪽·옥·치자·모래)과 단사 CTA 는
 * 차트·가격의 뜻이 실린 색이라 덮지 않는다.
 * 어두운 밴드(ph-hero 등)는 bg=--c-ink, 글자=--c-paper 라 덮은 뒤에도 대비가 남는다. */
/* 옛 헤더(66px) 시절 본문 스트레치 — 점방 골격에서는 이중 스트레치가 되어
   내용 짧은 화면(#34 my-core)에 공백을 만든다. 가운데 정렬이 필요한 결제
   성공/실패·콜백은 안쪽 .status-page/.saju-auth-loading 이 제 키를 따로 가진다. */
body.jb-app .page-main, body.jb-app .test-shell { min-height: 0; }

body.jb-app {
    --c-paper: var(--jb-paper);
    --c-ink: var(--jb-ink);
    --c-ink-soft: var(--jb-ink-soft);
    /* 구 화면 자체 배경(그라데이션)을 걷고 폰컬럼 바깥색을 깐다(확정 ③). */
    background: var(--outside);
}

/* (pd-dock 은 2026-08-25 에 dock 자체가 삭제되며 함께 사라졌다.)
 * 그때까지 조립 화면에서는 탭바 위로 들어 올린다(확정 ① B안). */
.jb-app .pd-dock { bottom: calc(var(--tabh) + env(safe-area-inset-bottom, 0px) + 10px); }

/* 구 골격의 밴드를 점방 밴드로(S2 매핑) — 어두운 히어로를 걷고 종이 리듬을 입힌다.
 * 본문 부품 규칙은 그대로 두고, 밴드의 바탕·경계·글자색만 바꾼다. */
.jb-app .ph-hero {
    padding: 30px 0 30px;
    background: var(--paper);
    color: var(--ink);
    border-bottom: var(--rule) solid var(--edge-2);
}
.jb-app .ph-hero h1 { color: var(--ink); font-family: "Gowun Dodum", serif; font-weight: 700; }
.jb-app .ph-hero-lead { color: var(--ink-2); }
.jb-app .ph-band { background: var(--paper); }
.jb-app .ph-band.is-alt {
    background: var(--paper-2);
    border-top: var(--rule) solid var(--edge-2);
    border-bottom: var(--rule) solid var(--edge-2);
}
/* is-dark 는 base.css 에서 먹색 배경 + 흰 글자로 정의된다. 여기서 .ph-band 의
 * 배경만 덮으면(같은 0,2,0 이라 뒤에 오는 이쪽이 이긴다) 배경은 종이색이 되고
 * 글자색은 흰색으로 남아 글자가 통째로 사라진다. 2026-08-25 점방 재도색 뒤
 * 묶음 상세 6곳의 '값' 칸이 그렇게 비어 보였다(2026-08-26 대표 제보).
 * 지금 이 변형을 쓰는 화면은 없지만, 다시 쓰는 사람이 같은 데 빠지지 않도록
 * 배경을 여기서도 먹색으로 세워 둔다. */
.jb-app .ph-band.is-dark { background: var(--ink); color: var(--paper); }

/* ── 점방 재도색 — S0 대표 검수 수정(2026-08-25): 버튼·칩·입력을 메인 톤으로 ──
 * 구 화면(webtoon-site)의 버튼류는 가라앉은 단사 그라데이션 + 각진 모서리라
 * 메인의 밝은 알약과 딴 가게처럼 보였다(대표 지적). jb-app 스코프에서 모양을
 * 메인 부품과 같게 맞춘다. .webtoon-site .button(0,1,1)을 이기려면 (0,2,0)이
 * 필요해서 전부 .jb-app 을 앞에 세운다. 오행 의미색은 계속 불가침. */

/* CTA — 밝은 빨강 알약 + 낙하 그림자(메인 '무료로 시작하기'와 같은 모양) */
.jb-app .button-primary,
.jb-app .pd-dock-cta,
.jb-app .pd-buy-go {
    border: var(--bw) solid var(--red-2);
    border-radius: 999px;
    background: var(--red);
    color: var(--c-white);
    box-shadow: 0 5px 0 var(--red-2);
}
.jb-app .button-primary:active,
.jb-app .pd-dock-cta:active,
.jb-app .pd-buy-go:active { transform: translateY(3px); box-shadow: none; }

/* 오픈 기념가 타이머 — 알약 배지 */
/* 오픈 기념가 칩은 배지지 버튼이 아니다. 예전에는 빨강 채움 + 흰 글씨 + 그림자로
 * 바로 아래 '열기' 버튼과 같은 옷을 입고 있었다 — 손님이 누르려다 안 눌린다
 * (2026-08-26 대표 지적). 빨강 채움은 버튼이 갖고, 배지는 옅은 분홍 바탕에
 * 붉은 글씨로 물러선다. 그림자도 뺀다 — 그림자가 '누를 수 있다'는 신호다. */
/* 크기는 열기 버튼급(전폭·54px·가운데)이되 버튼으로 오해되지 않게 —
 * 채움·그림자 없음(2026-08-26 대표 지적 둘: 배지는 물러선다 + 버튼만 한 크기).
 * 상세 16장·지갑·무료 입력의 세 클래스가 이 한 벌을 입는다. */
.jb-app .ph-hero-timer,
.jb-app .jbw-timer,
.jb-app .wt-opening-promotion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2px 10px;
    width: 100%;
    min-height: 54px;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--jb-me);
    border: var(--bw) solid var(--red);
    box-shadow: none;
    color: var(--red-2);
}
.jb-app .ph-hero-timer[hidden],
.jb-app .jbw-timer[hidden],
.jb-app .wt-opening-promotion[hidden] { display: none; }
.jb-app .ph-hero-timer span, .jb-app .ph-hero-timer small, .jb-app .ph-hero-timer b,
.jb-app .jbw-timer span, .jb-app .jbw-timer small, .jb-app .jbw-timer b,
.jb-app .wt-opening-promotion > span, .jb-app .wt-opening-promotion small,
.jb-app .wt-opening-promotion b {
    color: var(--red-2);
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
}
.jb-app .ph-hero-timer b,
.jb-app .jbw-timer b,
.jb-app .wt-opening-promotion b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* 선택 칩(양력/음력·성별 등) — 2px 테두리, 고르면 빨강 테두리 + 옅은 분홍 바탕 */
.jb-app .saju-choice-grid span {
    border: var(--bw) solid var(--edge);
    border-radius: 12px;
    background: var(--card);
}
.jb-app .saju-choice-grid input:checked + span {
    border-color: var(--red);
    color: var(--red-2);
    background: var(--jb-me);
    box-shadow: var(--drop-sm);
}

/* 연도 칩(2026/2027) — 같은 규칙 */
.jb-app .pd-year-chip {
    border: var(--bw) solid var(--edge);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}
.jb-app .pd-year-chip.is-on {
    border-color: var(--red);
    background: var(--jb-me);
    color: var(--red-2);
    box-shadow: var(--drop-sm);
}

/* 입력·셀렉트 — 점방 입력 모양 */
.jb-app input.input,
.jb-app select.input,
.jb-app .select {
    background: var(--paper);
    border: var(--bw) solid var(--edge);
    border-radius: 12px;
}
.jb-app input.input:focus,
.jb-app select.input:focus,
.jb-app .select:focus { border-color: var(--red); background: var(--card); outline: none; }

/* 무료 확인 유도 한 줄 — 독에서 본문으로 옮긴 자리(2026-08-25 대표 지적).
 * 독은 타이머+결제 버튼 두 줄만 갖는다(--dockh 66px, 탭바와 합쳐 140px). */
.jb-app .pd-free-line { margin: 16px 18px 0; text-align: center; font-size: 15px; }
.jb-app .pd-free-line a { color: var(--red-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }




/* 소셜 로그인 버튼 — 상표 색은 pages.css 그대로, 곡률만 점방 알약 */
.auth-provider-button { border-radius: 999px; }

/* 생년월일 카드는 frame.css 가 부르는 birth-card.css 한 벌만 맡는다. */
.jb-app .pd-buy-card > .pd-buy-go {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}