/* =====================================================================
   안착(anchak) — 화면 스타일
   SPEC §7: 여의도점집의 크림/아이보리 톤 계승. 빌드 도구 없음.

   ★ 색 규칙(계승, 불변): 빨강 = 상승/길, 파랑 = 하락/주의.
   ★ 본문 색은 크림 바탕(--bg)과 아이보리 면(--surface) 양쪽에서 대비 4.5:1 이상.
   ★ 토큰은 packages/ui/date-segment.css가 :root에 먼저 깔아둔다. 여기서 덧댄다.
   ===================================================================== */
/* ★ 색·간격·라운드 토큰은 assets/theme.css 한 파일에 있다. 여기서 정의하지 않는다. */


* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  word-break: keep-all;             /* 한국어는 어절 단위로 끊는 게 읽기 편하다 */
  overflow-wrap: break-word;
}
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5) var(--sp-4); }
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 상단 브랜드 ---------- */
.topbar {
  max-width: var(--maxw); margin: 0 auto;
  padding: max(var(--sp-5), env(safe-area-inset-top)) var(--sp-5) var(--sp-3);
  text-align: center; border-bottom: 1px solid var(--divider);
}
.brand-umbrella { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); letter-spacing: .08em; }
.brand-name { margin: var(--sp-1) 0 0; font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: -.02em; }
.brand-hanja { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--gold); margin-left: var(--sp-1); vertical-align: 3px; }
.brand-slogan { margin: var(--sp-1) 0 0; font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); }

/* ---------- 화면 공통 ---------- */
.screen { padding-top: var(--sp-3); }
.lead { text-align: center; margin-bottom: var(--sp-3); }
.mascot { display: block; margin: 0 auto var(--sp-2); }
.ask { font-size: var(--fs-lead); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); letter-spacing: -.02em; }
.ask-sub { font-size: var(--fs-caption); color: var(--muted); margin: 0; font-weight: var(--fw-normal); }

.field { margin-bottom: var(--sp-3); }
.field > label {
  display: block; font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); margin-bottom: var(--sp-2);
}
.opt { font-weight: var(--fw-normal); color: var(--faint); font-size: var(--fs-caption); }
/* ★ 자식 선택자여야 한다 — 후손으로 두면 .numseg 안의 연·월·일 칸까지 상자가 된다
   (세그먼트는 packages/ui/date-segment.css 가 따로 그린다) */
.field > input[type="text"] {
  width: 100%; background: var(--card); border: 1.5px solid var(--border-strong);
  border-radius: var(--r-1); color: var(--ink); font-size: var(--fs-body); padding: var(--sp-3);
  font-family: inherit;
}
.field > input[type="text"]:focus { outline: none; border-color: var(--ink); }
.field input::placeholder { color: var(--faint); font-weight: var(--fw-normal); }
.hint { font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-lead); margin: var(--sp-2) 0 0; font-weight: var(--fw-normal); }
.hint.off { opacity: .45; }
.err { font-size: var(--fs-caption); color: var(--down); font-weight: var(--fw-bold); margin: var(--sp-2) 0 0; }
.fineprint { font-size: var(--fs-caption); color: var(--faint); line-height: var(--lh-lead); margin-top: var(--sp-2); text-align: center; }

.check { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-2); cursor: pointer; }
.check input { margin: var(--sp-1) 0 0; flex: none; width: var(--sp-4); height: var(--sp-4); accent-color: var(--ink); }
.ctext { font-size: var(--fs-caption); color: var(--sub); font-weight: var(--fw-bold); line-height: var(--lh-lead); }

.cta {
  width: 100%; background: var(--ink); color: var(--bg-base); border: none;
  border-radius: var(--r-1); font-size: var(--fs-body); font-weight: var(--fw-bold);
  padding: var(--sp-4) 0; margin-top: var(--sp-2);
}
.cta:active { opacity: .88; }
.linkbtn {
  display: block; margin: var(--sp-2) auto 0; background: none; border: none;
  color: var(--muted); font-size: var(--fs-caption); font-weight: var(--fw-bold); text-decoration: underline;
  text-underline-offset: 3px; padding: var(--sp-2);
}
.linkbtn.back { margin-top: var(--sp-3); }

/* ---------- 고민 — 할머니 질문에 고르는 답 (4단계 · 감사 21번) ----------
   카드 그리드였던 걸 목록으로 바꿨다. 모양은 결과 화면 이어보기 선택지와 같은 말이다:
   상자 없음 · 얇은 선 · 왼쪽 정렬 · 오른쪽 끝에 볕색 꺾쇠 (감사 15번과 한 규칙). */
.answers { margin-top: var(--sp-5); border-top: 1px solid var(--line-hair); }
.answer {
  display: block; width: 100%; text-align: left; position: relative;
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line-hair);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  color: var(--sub); font-family: inherit;
  transition: color .12s ease, padding-left .12s ease;
}
.answer::after {
  content: ''; position: absolute; right: var(--sp-2); top: 50%;
  width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-50%) rotate(-45deg);
}
.answer:active { background: rgb(var(--c-sun-2) / .12); }
/* 고른 답 — 반전 상자 대신 볕 한 줄을 세운다. 목록이 목록으로 남는다 */
.answer.on { color: var(--ink); padding-left: var(--sp-4); }
.answer.on::before {
  content: ''; position: absolute; left: 0; top: var(--sp-3); bottom: var(--sp-3);
  width: var(--sp-1); background: var(--line-accent);
}
/* 고른 뒤에도 목록은 접지 않는다 (폰 확인 피드백) — 답은 늘 일곱 줄 다 보인다.
   고른 줄만 꺾쇠를 뗀다: 그건 내가 한 말이지 다시 누를 것이 아니다 */
.answer.on::after { display: none; }

/* 재방문 한 줄 — 목록 위 회색 보조 텍스트. 알려만 주고 대신 고르지 않는다 */
.ask-again {
  margin-top: var(--sp-3);
  font-size: var(--fs-caption); color: var(--muted);
}

/* ---------- 한자 고르기 (Phase 7-4) ----------
   ../yeouido-jeomjip 의 검증된 카드 패턴 이식. 색 토큰만 안착 것으로 바꿨다.
   ★ 4단계 — 고르는 방식(가로 스크롤 줄·반전·더보기)과 createElement·CSP 패턴은 그대로다.
     치수만 스케일로 옮기고(62/104/58px → 토큰), 그림자를 걷었다. */
.hanja-pick { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.hp-row .hp-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.hp-syl { font-size: var(--fs-body); font-weight: var(--fw-bold); font-family: var(--font-display); }
.hp-info { font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); }
.hp-list {
  display: flex; align-items: stretch; gap: var(--sp-1);
  overflow-x: auto; padding-bottom: var(--sp-1); -webkit-overflow-scrolling: touch;
}
.hp-chip {
  /* 64 ~ 104 — 스케일에서 뽑은 값이다 (sp-8 / sp-8+sp-7-sp-2). 리터럴을 두지 않는다 */
  flex: none; min-width: var(--sp-8); max-width: calc(var(--sp-8) + var(--sp-7) - var(--sp-2));
  background: var(--warm); border: 1px solid var(--warm-edge); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-2) var(--sp-2); text-align: center; line-height: var(--lh-display);
  display: flex; flex-direction: column; justify-content: flex-start; font-family: inherit;
}
.hp-chip b { display: block; font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); font-family: var(--font-display); }
/* 훈음은 길이가 제각각("솥귀 현" ~ "선비 천거리할 리") — 줄바꿈을 허용하고 어절에서만 끊는다 */
.hp-chip .hp-hun {
  display: block; font-size: var(--fs-caption); color: var(--sub); font-weight: var(--fw-bold);
  margin-top: var(--sp-1); line-height: var(--lh-display); word-break: keep-all;
}
.hp-chip i {
  display: block; font-style: normal; font-size: var(--fs-caption); color: var(--faint);
  font-weight: var(--fw-bold); margin-top: auto; padding-top: var(--sp-1); white-space: nowrap;
}
/* 고르면 반전 */
.hp-chip.on { background: var(--ink); border-color: var(--ink); }
.hp-chip.on b, .hp-chip.on i { color: var(--bg-base); }
.hp-chip.on .hp-hun { color: rgb(var(--c-bg-base) / .82); }
/* 훈이 없어 음만 보여주는 경우 — 뜻이 아니라는 걸 색으로 구분 */
.hp-chip .hp-hun.read-only { color: var(--faint); font-weight: var(--fw-bold); }
.hp-chip.on .hp-hun.read-only { color: rgb(var(--c-bg-base) / .6); }
.hp-chip.more { min-width: calc(var(--sp-7) + var(--sp-3)); background: var(--card); border: 1.5px solid var(--border-strong); justify-content: center; }
.hp-chip.more b { font-size: var(--fs-body); color: var(--gold); }
.hp-chip.more .hp-hun { color: var(--muted); margin-top: var(--sp-1); }

/* ---------- 정밀도 배지 ---------- */
.precision {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-3);
}
.pb-level { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--ink); }
.pb-level::before { content: '정밀도 '; font-weight: var(--fw-bold); color: var(--muted); }
.pb-hint { font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-normal); }

/* ---------- 로딩 ---------- */
.loading { text-align: center; padding: var(--sp-4) 0; }
.loading-text { font-size: var(--fs-small); color: var(--muted); font-weight: var(--fw-bold); }

/* ---------- 안전 장치 (SPEC §6) ----------
   결과 최상단. 눈에 먼저 들어와야 하므로 유일하게 테두리를 두껍게 쓴다. */
.crisis-card {
  border: 2px solid var(--ink); border-radius: var(--r-2);
  background: var(--card); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
.crisis-title { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.crisis-body { font-size: var(--fs-small); color: var(--sub); margin: 0 0 var(--sp-3); }
.crisis-call {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--surface); border-radius: var(--r-1); padding: var(--sp-3);
  text-decoration: none; color: var(--ink);
}
.cc-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); }
.cc-number { font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: .02em; }
.cc-note { font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); }
.crisis-foot { font-size: var(--fs-caption); color: var(--muted); margin: var(--sp-3) 0 0; }

.notice {
  background: var(--down-bg); color: var(--down); border-radius: var(--r-1);
  padding: var(--sp-3) var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-bold); margin: 0 0 var(--sp-3);
}

/* ---------- 결과 ---------- */
.summary { text-align: center; padding: var(--sp-2) 0 var(--sp-3); }
.summary-line {
  font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: -.03em;
  margin: var(--sp-1) 0 var(--sp-2);
}
.summary-note { font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); margin: 0; }
.turning-note { font-size: var(--fs-caption); color: var(--faint); font-weight: var(--fw-normal); margin: var(--sp-2) 0 0; }
.chart-line {
  display: inline-block; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: none; border-radius: var(--r-1);
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); letter-spacing: .04em;
  font-family: inherit;
}
.chart-line::after { content: ' ⌄'; color: var(--faint); }
.chart-line[aria-expanded="true"]::after { content: ' ⌃'; }
.pillar-list {
  list-style: none; margin: var(--sp-3) 0 0; padding: 0; text-align: left;
  background: var(--surface); border-radius: var(--r-1); overflow: hidden;
}
.pillar-list li { padding: var(--sp-3) var(--sp-3); border-top: 1px solid var(--divider); }
.pillar-list li:first-child { border-top: none; }
.pillar-key { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); letter-spacing: .06em; }
.pillar-line { font-size: var(--fs-caption); color: var(--sub); margin: var(--sp-1) 0 0; line-height: var(--lh-small); }

/* 더 자세히 — 접었다 펴는 구간. 실제 모양은 Phase 6 절에서 정한다(테두리·화살표·탭 영역). */
.detail { margin-top: var(--sp-3); }
.detail-title {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); margin: var(--sp-4) 0 var(--sp-2);
}
.detail-title:first-child { margin-top: var(--sp-1); }
.detail p { font-size: var(--fs-small); color: var(--sub); margin: 0 0 var(--sp-2); }

/* 반기별 해설 */
.halves { margin-top: var(--sp-2); }
.half {
  border-top: 1px solid var(--divider); padding: var(--sp-3) 0;
}
.half:first-child { border-top: none; }
.half-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.half-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--ink); }
.half-tag {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); padding: var(--sp-1) var(--sp-2); border-radius: var(--r-1);
  background: var(--surface); color: var(--muted);
}
.half-tag.up { background: var(--up-bg); color: var(--up); }
.half-tag.down { background: var(--down-bg); color: var(--down); }
.half p { font-size: var(--fs-caption); color: var(--sub); margin: 0 0 var(--sp-1); }
.half p:last-child { margin-bottom: 0; color: var(--muted); }

.daeun-next { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }

.block { border-top: 1px solid var(--divider); padding: var(--sp-3) 0; }
.block-title { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); letter-spacing: .06em; margin: 0 0 var(--sp-2); }
.block p { margin: 0 0 var(--sp-2); font-size: var(--fs-body); color: var(--sub); }
.block p:last-child { margin-bottom: 0; }
.why-line { position: relative; padding-left: var(--sp-3); }
.why-line::before {
  content: ''; position: absolute; left: 0; top: var(--sp-3);
  width: var(--sp-1); height: var(--sp-1); border-radius: 50%; background: var(--border-strong);
}

.graph-wrap { display: block; }
.graph-wrap svg { display: block; }
/* 범례는 3단계에서 그림 안으로 들어갔다 (src/graph.js). 밖에 네 줄로 늘어놓으면
   그림보다 범례가 길었다. 의미색 규칙은 graph.js 의 토큰 참조가 지킨다. */

.locked-note {
  background: var(--surface); border-radius: var(--r-1); padding: var(--sp-3);
  font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); margin-top: var(--sp-2);
}
.locked-remain { font-size: var(--fs-caption); color: var(--faint); font-weight: var(--fw-bold); margin-top: var(--sp-2); }
#premiumTitle.locked::after { content: ' 🔒'; }

/* 해볼 것 / 피할 것 — 색으로 갈라 둔다 (빨강=권함, 파랑=주의) */
.todo {
  border-radius: var(--r-1); padding: var(--sp-3) var(--sp-3); margin-top: var(--sp-2);
  border-left: var(--sp-1) solid var(--border-strong); background: var(--surface);
}
.todo.do { border-left-color: var(--up); background: var(--up-bg); }
.todo.avoid { border-left-color: var(--down); background: var(--down-bg); }
.todo-tag {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em;
  margin-bottom: var(--sp-1);
}
.todo.do .todo-tag { color: var(--up); }
.todo.avoid .todo-tag { color: var(--down); }
.todo-text { font-size: var(--fs-small); color: var(--sub); margin: 0; line-height: var(--lh-small); font-weight: var(--fw-bold); }
.guide-line { font-size: var(--fs-caption); color: var(--muted); margin-top: var(--sp-2); }

.cta.small { width: auto; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-small); display: inline-block;
  text-decoration: none; text-align: center; margin-top: var(--sp-3); }
.premium-month { border-top: 1px solid var(--divider); padding: var(--sp-3) 0; }
.premium-month:first-child { border-top: none; }
.premium-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); }
.premium-month p { font-size: var(--fs-small); color: var(--sub); margin: var(--sp-1) 0 0; }

.share-note { font-size: var(--fs-caption); color: var(--muted); }
.share-out { margin-top: var(--sp-3); }
/* 카드 미리보기 — 실물은 1080×1920 이고 여기서는 줄여 보여준다.
   ★ 5단계에서 280px 리터럴을 걷었다 (마지막 남은 공유 화면 몫). 간격 스케일 안에서 정한다 */
.share-out canvas {
  width: 100%; max-width: calc(var(--sp-8) * 4); height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--r-1); background: var(--card);
}
.share-out .share-note { margin-top: var(--sp-2); }

.block.foot ul { margin: 0; padding-left: var(--sp-4); }
.block.foot li { font-size: var(--fs-caption); color: var(--muted); line-height: var(--lh-small); margin-bottom: var(--sp-1); }

.closing {
  text-align: center; font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink);
  padding: var(--sp-4) 0 var(--sp-2); letter-spacing: -.02em;
}

/* =====================================================================
   Phase 6 — 할머니 집
   콘셉트: 점집이 아니라 할머니 집에 놀러 온 느낌. 크림/아이보리는 그대로 두고 온기만 얹는다.

   ★ 건드리지 않는 것 (Phase 6 지시)
     · 그래프 색 규칙 — 빨강=상승, 파랑=하락 (src/graph.js 토큰 참조 / .todo.do / .todo.avoid)
     · 안전 장치 UI — .crisis-card / .notice 는 눈에 먼저 들어와야 해서 그대로 둔다
   ★ 웹폰트를 쓰지 않는다. 제목용 명조는 기기에 있는 것만 쓴다.
     외부 폰트를 부르려면 CSP(font-src·style-src 'self')를 열고 외부 요청이 생기는데,
     앱인토스 웹뷰에서 외부 리소스는 정책상 위험하고 로드 실패 리스크도 생긴다.
     시스템 명조가 없는 기기는 마지막 serif로 떨어지고, 그래도 화면은 그대로 읽힌다.
   ===================================================================== */


/* 한지·광목 질감 — 이미지 없이 그라디언트만 겹친다 (요청 0건, 용량 0KB) */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgb(var(--c-sun-1) / .055) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 67% 43%, rgb(var(--c-sun-1) / .045) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 41% 77%, rgb(var(--c-sun-1) / .05) 0 1.2px, transparent 1.3px),
    repeating-linear-gradient(90deg, rgb(var(--c-sun-1) / .03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(0deg, rgb(var(--c-sun-1) / .024) 0 1px, transparent 1px 6px);
  background-size: 137px 137px, 191px 191px, 109px 109px, auto, auto;
  background-attachment: fixed, fixed, fixed, scroll, scroll;
}

/* ★ 2단계 — 본명조는 위로 헌장 여섯 문장의 활자다. 서체 지정은 theme.css 한 곳에서만 한다.
   여기 있던 목록(.greet·.ask·.summary-line·.closing·.crisis-title)은 걷어냈다.
   .closing 은 ⑥ 이라 .comfort 로 계속 본명조를 받는다. */
.summary-line { letter-spacing: -.02em; }

/* 손그림 느낌 구분선 — 자로 그은 1px 대신 살짝 흔들리는 선 */
.block {
  border-top: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M0 3.4 Q 15 1 30 3.4 T 60 3.4 T 90 3.4 T 120 3.4' fill='none' stroke='%23E0D6C3' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left top;
  padding-top: calc(var(--sp-3) + var(--sp-1));
}
.half { border-top-color: var(--divider); }

/* ---------- 할머니 ---------- */
.scene { display: block; margin: 0 auto var(--sp-2); height: auto; }
.greet { font-size: var(--fs-body); color: var(--muted); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.gran { flex: none; width: var(--sp-7); height: var(--sp-7); display: block; }
.gran.lg { width: var(--sp-8); height: var(--sp-8); }

/* 할머니가 말하는 구간 — 아바타 + 본문 */
.says { display: flex; gap: var(--sp-2); align-items: flex-start; }
.says-body { flex: 1; min-width: 0; }

/* 말풍선 — 보자기처럼 도톰하게. 꼬리는 왼쪽 위 */
.bubble {
  position: relative;
  border-radius: var(--r-2);
  border: 1.5px solid var(--warm-edge);
  box-shadow: 0 1px 0 rgb(var(--c-sun-1) / .05);
}
.bubble::before {
  content: ''; position: absolute; left: calc(var(--sp-3) / -2 - 1px); top: var(--sp-4);
  width: var(--sp-3); height: var(--sp-3); transform: rotate(45deg);
  background: inherit; border-left: 1.5px solid var(--warm-edge); border-bottom: 1.5px solid var(--warm-edge);
}
.todo.do.bubble { border-color: rgb(var(--c-rise) / .30); }
.todo.do.bubble::before { border-color: rgb(var(--c-rise) / .30); }
.todo.avoid.bubble { border-color: rgb(var(--c-fall) / .30); }
.todo.avoid.bubble::before { border-color: rgb(var(--c-fall) / .30); }

.closing-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding-top: var(--sp-3); }
.closing { padding-top: var(--sp-1); }

/* ---------- 6-3. 접기/펼치기를 눈에 띄게 ---------- */
.more-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold); font-family: inherit;
}
.more-btn::after {
  content: ''; flex: none; width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.more-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.chart-line { background: var(--warm); border: 1.5px solid var(--warm-edge); padding: var(--sp-2) var(--sp-3); }

/* ---------- 6.5-1. 원국 배지 안내 ----------
   한자 줄이 뭔지, 눌리는지 아무도 몰랐다. 위에 라벨을 달고 눌림 어포던스를 준다. */
.chart-label {
  font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint);
  letter-spacing: .04em; margin: var(--sp-4) 0 var(--sp-1);
}
.chart-line {
  border: 1.5px solid var(--gold); background: var(--card);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-2);
}
.chart-line::after {
  content: ''; flex: none; width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.chart-line[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.chart-intro { margin-bottom: var(--sp-3); }
.chart-intro .says-body {
  font-size: var(--fs-caption); color: var(--muted); font-weight: var(--fw-bold); margin: 0;
  align-self: center;
}

/* ---------- 6.5-2. 상세 영역 가독성 ---------- */
.detail-title {
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-2); padding-left: var(--sp-3); position: relative;
  letter-spacing: -.01em;
}
.detail-title::before {
  content: ''; position: absolute; left: 0; top: var(--sp-1); bottom: var(--sp-1);
  width: var(--sp-1); border-radius: var(--r-1); background: var(--gold);
}
.detail-title:first-child { margin-top: var(--sp-2); }
.detail p { font-size: var(--fs-small); color: var(--sub); margin: 0 0 var(--sp-3); line-height: var(--lh-body); }
.detail p strong { font-weight: var(--fw-bold); color: var(--ink); }
/* 3~4문단마다 쉼 — 손그림 선 하나로 끊는다 */
.detail p.rest {
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='5'%3E%3Cpath d='M0 2.6 Q 11 0.8 22 2.6 T 45 2.6 T 68 2.6 T 90 2.6' fill='none' stroke='%23E0D6C3' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: left top;
}

/* ---------- 6-6. 명식 요약 배지 ----------
   한지에 붙인 라벨처럼. 차트·도넛은 쓰지 않는다.
   ★ 색은 금색(용신 쪽)과 흙색(기신 쪽)으로만 가른다.
     빨강/파랑은 그래프의 상승·하락 규칙이 이미 쓰고 있어서 여기서 쓰면 뜻이 섞인다. */
.chart-detail { margin-top: var(--sp-3); }
.myeong {
  background: var(--warm); border: 1.5px solid var(--warm-edge);
  border-radius: var(--r-2); padding: var(--sp-4); margin: var(--sp-3) 0 var(--sp-1); text-align: left;
}
/* 강약 · 용신 · 기신 한 줄 — 접지 않고 항상 보인다 (리뷰 [1]) */
.my-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--warm-edge);
}
/* 강약 라벨 — 본명조를 뺐다. 여섯 문장과 같은 서체로 서면 위계가 섞인다 (design-notes §4) */
.my-strength {
  font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink);
  letter-spacing: -.01em;
}
.my-sep { color: var(--faint); font-weight: var(--fw-bold); }
.my-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.my-chip {
  display: inline-flex; align-items: baseline; gap: var(--sp-1);
  background: var(--card); border: 1px solid var(--warm-edge); border-radius: var(--r-1);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--ink);
}
.my-chip b { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); letter-spacing: .06em; }

.my-elem { display: inline-flex; align-items: center; gap: var(--sp-1); }
.my-elem i {
  flex: none; width: var(--sp-6); height: var(--sp-6); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: var(--fs-body); font-weight: var(--fw-bold); font-family: var(--font-display);
}
.my-elem.yong i { background: var(--gold); color: var(--bg-base); }
.my-elem.gi i { background: var(--card); color: var(--ink-muted); border: 1.5px dashed var(--line-solid); }
.me-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); }

/* 오행 5칸 — 숫자는 탭했을 때만 */
.my-bars {
  display: flex; gap: var(--sp-1); width: 100%; padding: var(--sp-2) 0 0; margin: 0;
  background: none; border: none; border-top: 1px solid var(--warm-edge);
}
.my-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.mb-track {
  width: 100%; height: var(--sp-6); display: flex; align-items: flex-end;
  background: rgb(var(--c-ink-muted) / .12); border-radius: var(--r-1); overflow: hidden;
}
.mb-fill { width: 100%; border-radius: var(--r-1); background: rgb(var(--c-ink-muted) / .45); }
.role-yong .mb-fill { background: var(--gold); }
.role-hui .mb-fill { background: rgb(var(--c-sun-1) / .55); }
.role-gu .mb-fill { background: rgb(var(--c-ink-muted) / .60); }
.role-gi .mb-fill { background: var(--ink-muted); }
.mb-ko { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--sub); font-family: var(--font-display); }
.mb-num { font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--faint); display: none; }
.myeong.show-num .mb-num { display: block; }
.my-note { font-size: var(--fs-caption); color: var(--faint); margin: var(--sp-2) 0 0; line-height: var(--lh-lead); }

/* ---------- 6-5. 이어보기 ---------- */
.chat { display: flex; flex-direction: column; gap: var(--sp-2); }
.chat-row { display: flex; gap: var(--sp-2); align-items: flex-start; width: 100%; }
.chat-row.from-me { justify-content: flex-end; }
.chat-bubble {
  /* min-width:0 이 없으면 좁은 화면에서 flex 항목이 min-content 아래로 눌린다 */
  flex: 0 1 auto; min-width: 0; max-width: calc(100% - var(--sp-7));
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-2);
  background: var(--card); border: 1.5px solid var(--warm-edge);
  word-break: keep-all; overflow-wrap: break-word;
}
.chat-row.from-me .chat-bubble {
  background: var(--warm); border-color: var(--border); border-bottom-right-radius: var(--sp-2);
}
.chat-row.from-gran .chat-bubble { border-bottom-left-radius: var(--sp-2); }
.chat-bubble p { font-size: var(--fs-small); color: var(--sub); margin: 0 0 var(--sp-2); line-height: var(--lh-small); }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chat-choice {
  font-weight: var(--fw-bold); font-family: inherit;
}
.chat-note { font-size: var(--fs-caption); color: var(--faint); margin-top: var(--sp-3); line-height: var(--lh-lead); }

.share-hint {
  font-size: var(--fs-caption); color: var(--sub); font-weight: var(--fw-bold); line-height: var(--lh-lead);
  background: var(--warm); border-radius: var(--r-1); padding: var(--sp-3) var(--sp-3); margin-top: var(--sp-2);
}


/* =====================================================================
   Phase 7-2 · 7-3 — 정보 위계와 탈균질화
   문제였던 것: 모든 텍스트가 같은 크기·같은 여백·같은 배경으로 나열됐다.
   그게 "기계가 뽑아준 것"처럼 읽히는 가장 큰 이유였다.
   ★ 그래프 색 규칙(상승 빨강/하락 파랑)과 안전 장치 UI는 여전히 안 건드린다.
   ===================================================================== */

/* --- 1층: 섹션 첫머리 핵심 결론 (본명조 아님 — 그건 여섯 문장 것이다) --- */
.block p.lead-quote {
  font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: var(--lh-lead); color: var(--ink);
  margin: 0 0 var(--sp-4); padding-left: var(--sp-4); position: relative;
  letter-spacing: -.02em;
}
.block p.lead-quote::before {
  content: ''; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2);
  width: var(--sp-1); border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--gold), rgb(var(--c-sun-1) / .25));
}

/* =====================================================================
   위로 헌장 (SPEC §0) — 고정 위로 문장 6개와 할머니 어록
   ★ 이 화면의 주인공이다. 정보(명식·십신·대운·그래프)는 이 문장 뒤에 선다.
   ===================================================================== */

/* 고정 위로 문장 — 리드 인용구 활자. 막대 없이, 여백으로 자리를 만든다.
   ★ 선택자를 둘로 적는 이유: theme.css 의 `.block p` 가 본문 크기를 걸어둔다.
     섹션 안에 놓인 ②③④⑤ 가 거기 걸리면 ① 하고만 크기가 달라진다.
     여섯 문장은 한 목소리로 보여야 해서 `.block p.comfort` 로 한 단계 올린다. */
.comfort,
.block p.comfort {
  font-family: var(--font-display);
  font-size: var(--fs-lead); font-weight: var(--fw-display); line-height: var(--lh-lead);
  color: var(--ink);
  letter-spacing: -.01em;
  margin: var(--sp-5) 0;
  text-wrap: pretty;
}
/* 첫 뷰포트의 ① 은 할머니 얼굴 바로 아래라 위를 좁힌다 */
.summary .comfort-1 { margin-top: var(--sp-3); }
/* ⑥ 는 .closing 이 이미 자리를 잡아두었다 — 여백을 두 번 주지 않는다 */
.closing.comfort { margin: 0; }

/* 안착 시점 카드 — 리드가 년월을 말하고 ③이 그 뜻을 말한다.
   볕 모티프는 여기와 ⑤ 근처 2곳뿐이다. */
.anchak-card {
  background: linear-gradient(160deg, rgb(var(--c-sun-2) / .18), rgb(var(--c-bg-raised) / 0));
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  margin-bottom: var(--sp-4);
}
.anchak-card .comfort { margin: var(--sp-2) 0 var(--sp-3); }
.anchak-card p.lead-quote { margin-bottom: var(--sp-2); }

/* 할머니 어록 — 본문 속에 섞이는 말이라 카드를 두르지 않는다.
   버튼도 카드도 아니고, 그저 할머니가 한 마디 더 붙인 것처럼 보여야 한다. */
/* ★ `.block p` 가 문단 여백을 걸어둬서 선택자를 한 단계 올린다.
   안 그러면 섹션 안의 어록만 윗여백이 0 이 되어 앞 문단에 붙어버린다. */
.halmoni-line,
.block p.halmoni-line {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--sub);
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line-accent);
  text-wrap: pretty;
}
.says-body .halmoni-line { margin: 0 0 var(--sp-3); }

/* --- 섹션 성격에 따라 바탕과 여백을 다르게 (탈균질화) ---
   ★ 2단계 — 여백 리듬과 톤 면은 theme.css 가 소유한다 (간격 토큰이 거기 있다).
     여기 있던 padding/margin 규칙은 걷어냈다. 풀블리드 모양만 아래 2단계 절에 있다. */
.block.story + .block.story { padding-top: var(--sp-5); }

/* --- 제목: 크기 강화 + 낙관(도장) 모티프 --- */
.block-title {
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--sub);
  letter-spacing: .02em; margin: 0 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.block-title::before {
  content: ''; flex: none; width: var(--sp-3); height: var(--sp-3);
  border: 1.5px solid var(--gold); border-radius: var(--r-1);
  background:
    linear-gradient(45deg, transparent 46%, var(--gold) 46%, var(--gold) 54%, transparent 54%);
  opacity: .8;
}

/* --- 헤드라인: 안착 시점을 낙관처럼 --- */
.summary-line { font-size: var(--fs-display); }
.stamp {
  display: inline-block; margin: 0 auto; padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--up); border-radius: var(--r-1);
  font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-bold);
  color: var(--up); letter-spacing: .02em;
  transform: rotate(-1.6deg);
  background: rgb(var(--c-rise) / .06);
}

/* --- 반기 해설: 기본 2블록, 나머지는 접힘 --- */
.halves .half.folded { display: none; }
.halves.open .half.folded { display: block; }

/* --- 생활 팁: 카테고리 조언과 섞이지 않게 따로 앉힌다 --- */
.life-tip {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3);
  background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r-1);
}
.lt-tag {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em;
  color: var(--faint); margin-bottom: var(--sp-1);
}
.life-tip p { font-size: var(--fs-caption); color: var(--muted); margin: 0; line-height: var(--lh-small); }


/* =====================================================================
   리뷰 [2] 가독성 — 표시 층만 바꾼다 (카피 규칙·안전 장치는 안 건드림)

   토큰 자체는 이미 4.5:1을 넘었다 (ink 17.0 · sub 12.1 · muted 6.5 · faint 5.0).
   체감이 낮았던 건 **사용처** 때문이다 — 본문이 14~15px에 muted/faint 를 쓰고 있었다.
   그래서 색 규칙을 하나로 정한다:
     본문(읽어야 하는 글) = --ink / --sub 만
     회색(--muted / --faint) = 보조 정보(힌트·각주·라벨)에만
   ===================================================================== */
          /* 5.00 → 6.06 (보조 정보라도 바닥을 올린다) */

/* 본문 크기·행간·문단 간격 */
body { font-size: var(--fs-body); line-height: var(--lh-body); }
.block p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1.2em; color: var(--sub); }
.block p:last-child { margin-bottom: 0; }
.detail p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1.2em; color: var(--sub); }
.chat-bubble p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0 0 1.1em; color: var(--sub); }
.half p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sub); margin: 0 0 .8em; }
.half p:last-child { color: var(--sub); }      /* 두 번째 줄도 본문이다. 회색으로 죽이지 않는다 */
.todo-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.says-body { font-size: var(--fs-body); }
.summary-note { font-size: var(--fs-body); color: var(--sub); }
.turning-note { font-size: var(--fs-small); color: var(--muted); }
.pillar-line { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--sub); }
.premium-month p { font-size: var(--fs-body); color: var(--sub); line-height: var(--lh-body); }

/* 불릿 — 항목 사이를 벌리고, 점을 글줄 높이에 맞춘다 */
.why-line { padding-left: var(--sp-4); margin-bottom: 1.2em; }
.why-line::before { width: var(--sp-1); height: var(--sp-1); }
.block.foot li { font-size: var(--fs-small); line-height: var(--lh-body); margin-bottom: 1em; color: var(--muted); }
.block.foot ul { padding-left: var(--sp-5); }
.half { padding: var(--sp-4) 0; }
.pillar-list li { padding: var(--sp-4) var(--sp-4); }

/* 회색은 보조 정보에만 — 크기도 최소 13px 위로 올린다 */
.hint, .chat-note, .my-note, .share-note, .locked-note, .guide-line, .life-tip p {
  font-size: var(--fs-caption); line-height: var(--lh-small);
}
.fineprint { font-size: var(--fs-caption); line-height: var(--lh-small); }
.block-title { font-size: var(--fs-small); color: var(--sub); }

/* 강조는 문단당 하나 — 두 개 이상이면 강조가 아니게 된다 (테스트가 센다) */
.detail p strong, .block p strong { font-weight: var(--fw-bold); color: var(--ink); }

/* =====================================================================
   앱인토스 웹뷰 (SPEC §7)
   ★ 배경은 노치·홈바까지 채우고(viewport-fit=cover), 글자는 그 안으로 들어온다.
   ★ 100vh는 웹뷰에서 실제 보이는 높이와 어긋난다. src/platform.js가 재서 --app-vh에 넣는다.
     여기서는 그 값을 쓰되, 값이 없어도(순수 웹) 깨지지 않게 1vh로 되짚는다.
   ===================================================================== */
/* --app-vh 는 theme.css 가 정의한다 */

main {
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  /* 좌우 노치 — 가로 모드나 곡면 화면에서 글자가 모서리에 물리지 않게 */
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
}

/* 웹뷰에서는 화면 끝에서 당겨도 배경이 튀지 않게 한다 (당김 새로고침 오작동 방지) */
body.webview { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
body.webview .screen { min-height: calc(var(--app-vh) * 100 - 150px); }

/* 키보드가 올라온 동안 — 하단 여백을 줄여서 버튼이 키보드에 가리지 않게 */
body.kb-open main { padding-bottom: var(--sp-2); }
body.kb-open .topbar { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
body.kb-open .brand-slogan { display: none; }

/* 수익화 훅 자리 — Phase 5에서는 비활성이라 화면에 안 나온다 (index.html에 hidden) */
.monetize-slot { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.monetize-slot .cta { flex: 1; }

/* 모션을 줄이라고 설정한 사람에게는 전환 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 토스트 (링크 복사 피드백) ----------
   클립보드 복사는 화면이 하나도 안 바뀐다. 뭔가 됐다는 걸 알려주는 유일한 수단이라
   화면 아래에 잠깐 띄운다. 표시/숨김은 hidden 속성으로만 하고, 위치는 여기서 정한다
   (CSP style-src 'self' — 마크업에 style="" 을 못 박는다).
   ★ bottom 에 safe-area 를 더한다. 앱인토스 웹뷰 홈바에 가리면 안 보인다 (SPEC §7). */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(var(--sp-2));
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  z-index: 40; max-width: min(88vw, 420px);
  background: rgb(var(--c-ink-strong)); color: rgb(var(--c-bg-base));
  font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-small);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); box-shadow: var(--sh-2);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* 클립보드 폴백이 잠깐 붙이는 textarea. 화면 밖에 두되 focus 는 받아야 해서
   display:none 이 아니다 (숨기면 select() 가 안 먹는다). */
.offscreen {
  position: fixed; top: -1000px; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}


/* =====================================================================
   2단계 — 결과 화면 편집 (docs/design-notes.md §4)

   전제: 이 화면의 주인공은 위로 헌장 여섯 문장이다. 정보는 문장 뒤에 선다.
   여기서 하는 일은 그 순서를 눈에 보이게 만드는 것뿐이다 — 순서 자체는
   DOM 에 고정돼 있고 tests/run-app.js 가 지킨다.

   계측: node tools/measure.js [폭] [높이]
   ★ 새 리터럴을 만들지 않는다. 크기는 전부 theme.css 토큰이거나 토큰의 calc 이다.
   ★ 서체 지정은 theme.css 한 곳에서만 한다 (본명조 = 여섯 문장 + 한자 자리).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. 지면 폭 — 본문 한 줄을 재서 정한다 (감사 4·10번)
   한글 16px 의 글자폭은 약 .91em(14.6px).
   ★ 모바일 기준은 360px 20~24자 · 390px 22~26자다 (3단계에서 정정됐다.
     예전에 적혀 있던 35~40자는 데스크톱 값이었다). 지금 360px 20자 · 390px 22자.
   ★ 데스크톱은 35~40자가 맞고, 그러려면 본문이 511~584px 이어야 한다.
     좌우 여백을 더해 600px 을 지면 폭으로 잡는다.
   ★ 여태 --maxw 는 아무 데서도 정의되지 않아 max-width 가 통째로 무효였다.
   --------------------------------------------------------------- */
:root { --maxw: 600px; }

/* ---------------------------------------------------------------
   2. 상단 브랜드 — 결과 화면에서는 한 줄로 접는다 (감사 7번)
   브랜드는 첫인상이지 결과가 아니다. 132px 를 먹으면 명식 배지가 접힘선 밖으로 밀린다.
   브랜드 문자열은 그대로 두고 표시만 줄인다 (config/brand.json 무변경).
   --------------------------------------------------------------- */
body.on-result .topbar {
  padding-top: max(var(--sp-3), env(safe-area-inset-top));
  padding-bottom: var(--sp-2);
  display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2);
}
body.on-result .brand-umbrella,
body.on-result .brand-slogan { display: none; }
body.on-result .brand-name { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---------------------------------------------------------------
   3. 첫 뷰포트 — 할머니 얼굴 · ① · 안착 한 줄 · 어록 · 명식 배지
   이 다섯 말고는 여기 두지 않는다. 계측으로 확인한다.
   --------------------------------------------------------------- */
.summary { text-align: center; padding-top: var(--sp-2); }

/* 할머니는 여기서만 크게, 새는 그 옆에 작게 앉는다 (감사 17번).
   96px = sp-8 + sp-6 — 스케일에서 나온 값이라 새 리터럴이 아니다. */
.summary-scene {
  display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.gran.xl { width: calc(var(--sp-8) + var(--sp-6)); height: calc(var(--sp-8) + var(--sp-6)); }
.mascot.bird { width: var(--sp-7); height: var(--sp-7); margin: 0 0 var(--sp-3); }

/* 안착 한 줄 — 이 화면에서 제일 큰 글자. 년월 숫자가 흔들리지 않게 고정폭 (감사 4번) */
.summary-line {
  margin: 0 0 var(--sp-2); text-wrap: balance;
  font-variant-numeric: tabular-nums;
}
.summary .halmoni-line {
  margin: var(--sp-4) auto 0; text-align: left;
  max-width: calc(var(--maxw) - var(--sp-8));
}

/* 사주 여덟 글자 — 한자·한글·숫자가 섞이는 자리 (감사 4번).
   한자는 본명조로, 자간을 벌려 여덟 자가 한 덩이로 뭉치지 않게 한다. */
.chart-label { margin: var(--sp-5) 0 var(--sp-2); }
.chart-line { letter-spacing: .12em; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); }
.chart-intro {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--muted); margin: 0 0 var(--sp-3); text-align: left;
}

/* ---------------------------------------------------------------
   4. 여섯 문장 — 넉넉한 여백이 곧 위계다
   활자는 이미 갈라져 있다(본명조 500). 여기서는 자리를 넓힌다.
   --------------------------------------------------------------- */
.comfort, .block p.comfort { margin: var(--sp-6) 0; text-align: left; }
.summary .comfort-1 { margin: var(--sp-3) 0 var(--sp-5); text-align: center; text-wrap: balance; }
.closing.comfort { margin: 0; text-align: center; }
.block .comfort-2 { margin-top: var(--sp-4); }        /* 제목 바로 밑이라 위를 좁힌다 */

/* ---------------------------------------------------------------
   5. 본문 조판 — 읽는 글에는 아바타 칸을 두지 않는다
   문단 사이는 행간의 1.5배 (1.75 × 1.5 = 2.625em ≒ 42px).
   ★ 48px 아바타가 왼쪽을 먹으면 본문이 251px 로 좁아져 한 줄 17자가 됐다(계측).
     할머니는 첫 뷰포트에서 한 번 크게 나오고, 읽는 글은 폭을 다 쓴다.
   --------------------------------------------------------------- */
.prose { font-size: var(--fs-body); line-height: var(--lh-body); }
.prose p,
.block .prose p,
.detail .prose p { margin: 0 0 calc(var(--lh-body) * 1.5em); color: var(--sub); }
.prose p:last-child, .block .prose p:last-child, .detail .prose p:last-child { margin-bottom: 0; }
/* 강조는 문단당 하나 — src/app.js 의 fill() 이 문단마다 em 을 한 번만 넣는다 */
.prose p strong { font-weight: var(--fw-bold); color: var(--ink); }

/* ---------------------------------------------------------------
   6. 소펼침 — 버튼이 아니라 본문의 접힌 부분 (2단계 지시)
   테두리 상자를 걷어낸다. 글줄에 이어지는 한 줄이고, 탭 영역만 넉넉히 남긴다.
   --------------------------------------------------------------- */
.more-btn {
  width: auto; margin: var(--sp-5) 0 0;
  padding: var(--sp-4) var(--sp-2) var(--sp-2) 0;
  background: none; border: none; border-radius: 0;
  border-bottom: 1px dashed var(--line-accent);
  color: var(--gold); text-align: left;
}
.more-btn::after { border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.detail { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------
   7. 안착 시점 카드 — 낙관이 년월을 찍고, ③ 이 그 뜻을 말한다
   볕 광원 두 곳 중 첫 곳 (③ 근처).
   --------------------------------------------------------------- */
.anchak-card {
  position: relative; overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--warm-edge); border-radius: var(--r-2);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.anchak-card::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: calc(var(--sp-6) * -1); top: calc(var(--sp-8) * -1);
  width: calc(var(--sp-8) * 3); height: calc(var(--sp-8) * 3);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--c-sun-2) / .34) 0%,
                              rgb(var(--c-sun-2) / .12) 45%, transparent 70%);
}
.anchak-card > * { position: relative; z-index: 1; }
.anchak-card .stamp { margin: 0 0 var(--sp-3); }
.anchak-card .comfort { margin: 0 0 var(--sp-4); }
.anchak-note,
.block p.anchak-note {
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--sub);
  margin: 0 0 var(--sp-2);
}
.anchak-note:last-child, .block p.anchak-note:last-child { margin-bottom: 0; }
/* 낙관 — 한자와 년월이 붙는 자리라 고정폭 숫자에 자간을 준다 (감사 4번) */
.stamp { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* 근거 두 줄 — 그래프 바로 아래. 헤드라인 직후에 있던 걸 내렸다 (감사 9번).
   본문이 아니라 데이터에 붙는 주석이라 왼쪽에 가는 선을 하나 세워 묶는다. */
.graph-notes {
  margin: var(--sp-4) 0 0; padding-left: var(--sp-3);
  border-left: 1px solid var(--line-accent);
}
.block .graph-notes p.anchak-note { margin-bottom: var(--sp-2); }
.turning-note, .block p.turning-note { margin: 0; color: var(--sub); }

/* ---------------------------------------------------------------
   8. 톤 면은 화면 끝까지, 글은 안쪽 여백으로 (감사 10·20번)
   ★ 예전엔 데이터 섹션이 좌우 24px 씩 더 들어와 본문이 231px(한 줄 15자)이었다.
     면만 끝까지 내보내고 글은 같은 자리로 되돌린다 — 섹션마다 글 폭이 달라지지 않는다.
   --------------------------------------------------------------- */
.block.data, .block.sun {
  margin-left: calc(max(var(--sp-5), env(safe-area-inset-left)) * -1);
  margin-right: calc(max(var(--sp-5), env(safe-area-inset-right)) * -1);
  padding-left: max(var(--sp-5), env(safe-area-inset-left));
  padding-right: max(var(--sp-5), env(safe-area-inset-right));
  background-position: left top;
}
/* 볕 드는 면 — 광원 두 곳 중 둘째 (⑤ 가 이 섹션 끝에 있다) */
.block.sun {
  position: relative; overflow: hidden;
  background-image: none;                  /* 볕 드는 면에는 손그림 선을 얹지 않는다 */
}
.block.sun::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--sp-7) * -1); bottom: calc(var(--sp-8) * -1);
  width: calc(var(--sp-8) * 3); height: calc(var(--sp-8) * 3);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--c-sun-2) / .30) 0%,
                              rgb(var(--c-sun-2) / .10) 45%, transparent 70%);
}
.block.sun > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------
   9. 그래프 (감사 18·19·20 — 3단계)
   ★ 상자를 두르지 않는다. 그림과 바로 아래 ④ 문장이 한 덩이로 읽혀야 한다.
     흰 카드에 갇혀 있으면 그림은 "자료"가 되고 ④ 는 남의 말이 된다.
   ★ 폭은 app.js 의 graphWidth() 가 지면에서 계산해 넘긴다 — viewBox 가 실제 폭과
     같아서 SVG 안 글자가 화면 픽셀과 1:1 이다 (축 라벨이 11px 로 안 쪼그라든다).
     width:100% 는 그대로라 계산이 조금 틀려도 넘치지 않는다.
   --------------------------------------------------------------- */
.graph-wrap { overflow: visible; padding: 0; }
.graph-wrap svg { width: 100%; height: auto; }

/* 새의 착지 — 안착 월 위 가지에 내려앉는다 (감사 18번).
   한 번만, 짧게. prefers-reduced-motion 은 아래 공통 규칙이 끈다. */
.g-bird {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: anchak-land .75s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes anchak-land {
  from { opacity: 0; transform: translateY(-14px) rotate(-6deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* ④ 는 그림의 설명이다 — 그래프에 붙여 놓는다 (3단계 지시) */
.block .comfort-4 { margin-top: var(--sp-4); }
.graph-notes { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------
   10. 이번 달 — 해볼 것과 피할 것의 모양을 가른다 (감사 16번)
   색 규칙(빨강=해볼 것, 파랑=피할 것)은 그대로 두고 형태만 바꾼다:
   해볼 것은 할머니가 건네는 말풍선, 피할 것은 그 밑에 붙는 주의 한 줄.
   --------------------------------------------------------------- */
.todo.do { background: var(--card); padding: var(--sp-4); margin-top: 0; }
.todo.avoid {
  background: none; border: none; border-left: 1px dashed var(--down);
  border-radius: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  margin-top: var(--sp-4); box-shadow: none;
}
.todo.avoid .todo-text { color: var(--sub); font-weight: var(--fw-normal); }
.life-tip {
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line-hair);
  padding: var(--sp-3) 0 0; margin-top: var(--sp-5);
}

/* ---------------------------------------------------------------
   11. 이어보기 선택지 — 알약 세 개가 나란히 서지 않게 (감사 15번)
   버튼처럼 생긴 상자 대신, 할머니에게 건넬 말을 고르는 목록으로 둔다.
   --------------------------------------------------------------- */
.chat-choices { flex-direction: column; gap: 0; margin-top: var(--sp-4); }
.chat-choice {
  width: 100%; text-align: left; background: none; border: none; border-radius: 0;
  border-top: 1px solid var(--line-hair); box-shadow: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0;
  color: var(--sub); position: relative;
}
.chat-choice::after {
  content: ''; position: absolute; right: var(--sp-2); top: 50%;
  width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-50%) rotate(-45deg);
}
.chat-choice:active { background: rgb(var(--c-sun-2) / .12); }
.chat-choices { border-bottom: 1px solid var(--line-hair); }
.chat-note { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------
   12. 반기 해설 — 일곱 덩이가 같은 모양으로 서지 않게
   --------------------------------------------------------------- */
.halves { margin-top: var(--sp-4); }
.half { padding: var(--sp-4) 0; }
.half-label { font-variant-numeric: tabular-nums; }
.half-head { margin-bottom: var(--sp-2); }


/* =====================================================================
   4단계 — 입력·첫 화면 (docs/design-notes.md §4)

   전제: 첫 화면은 랜딩도 폼도 아니라 **할머니가 묻는 자리**다 (감사 21번).
   답을 고르는 것이 곧 시작이고, 그다음부터는 대화가 이어진다 (SPEC §0-4).

   하는 일은 두 가지뿐이다.
     1. 상자를 걷어낸다 — 입력 칸도, 선택지도, 이어가기도 상자가 아니다.
        2·3단계에서 결과 화면에 한 것과 같은 규칙이다 (감사 14·15·16번).
     2. 라벨 자리에 할머니 질문을 놓는다 — 13px 회색 폼 라벨이 아니라 읽는 말이라
        `.ask-line` 은 본문 크기로 선다.
   ★ 새 리터럴을 만들지 않는다. 전부 theme.css 토큰이거나 토큰의 calc 이다.
   ★ `.talk` 은 대화하는 화면(고민·사주 입력)에만 붙는다. 결과 화면은 안 건드린다.
   ===================================================================== */

/* 리드 — 할머니는 여기서 한 번 크게 나온다 (결과 화면과 같은 규칙, 감사 17번) */
.talk .lead { margin-bottom: var(--sp-5); }

/* 할머니가 답을 받아 주는 줄 — 알아봐 준 다음에 다음 질문이 온다
   ★ 크기·굵기는 theme.css 가 정한다 (타이포 단일 소스). 여기는 자리만 잡는다 */
.talk .gran-line { color: var(--sub); margin: 0 0 var(--sp-5); }

/* 질문 줄 — 폼 라벨이 아니다. 할머니가 묻는 말이라 본문 크기로 선다.
   한 턴 안에서 질문이 둘 이상이면(고민 화면) 앞 대답과 붙지 않게 벌린다 */
.talk .ask-line { display: block; color: var(--ink); margin: 0 0 var(--sp-3); }
.talk .ask-line:not(:first-child) { margin-top: var(--sp-6); }

/* 문답 한 쌍이 한 덩이로 읽히게 턴 사이를 벌린다 */
.talk .turn { margin-top: var(--sp-6); }
.talk .field { margin-bottom: var(--sp-6); }
.talk .field:last-of-type { margin-bottom: var(--sp-5); }

/* 입력은 상자가 아니라 밑줄 한 줄이다 (칸은 남지만 폼처럼 안 보인다) */
.talk .numseg {
  background: none; border: none; border-radius: 0;
  border-bottom: 1.5px solid var(--border-strong); padding: 0;
}
.talk .numseg:focus-within { border-bottom-color: var(--ink); }
.talk .numseg.off { background: none; border-bottom-color: var(--border); }
.talk .numseg input:focus { background: none; }
/* 세그먼트 안쪽 칸은 제외하고, 줄로 서는 입력만 밑줄을 준다 */
.talk .turn > input[type="text"],
.talk .field > input[type="text"] {
  width: 100%; background: none; border: none; border-radius: 0;
  border-bottom: 1.5px solid var(--border-strong);
  color: var(--ink); font-size: var(--fs-body); font-family: inherit;
  padding: var(--sp-3) 0;
}
.talk .turn > input[type="text"]:focus,
.talk .field > input[type="text"]:focus { outline: none; border-bottom-color: var(--ink); }

/* 양/음력 · 성별 — 밀어 넣은 알약 대신 고르는 말 세 개 */
.talk .seg { background: none; padding: 0; gap: var(--sp-5); margin-bottom: var(--sp-3); }
.talk .seg-btn { flex: 0 1 auto; padding: var(--sp-2) 0; border-radius: 0; color: var(--muted); }
.talk .seg-btn.on {
  background: none; box-shadow: none; color: var(--ink);
  border-bottom: 2px solid var(--line-accent);
}

/* 정밀도 — 상자를 걷고 선 한 줄로 (읽는 정보지 카드가 아니다) */
.talk .precision {
  background: none; border-radius: 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line-hair);
}

/* 이어가기 — 버튼이 아니라 대화의 다음 줄이다 (답 목록과 같은 모양) */
.talk .cta {
  width: 100%; text-align: left; position: relative;
  background: none; color: var(--ink); border-radius: 0;
  border-top: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; margin-top: var(--sp-6);
}
.talk .cta::after {
  content: ''; position: absolute; right: var(--sp-2); top: 50%;
  width: var(--sp-2); height: var(--sp-2);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-50%) rotate(-45deg);
}
.talk .cta:active { background: rgb(var(--c-sun-2) / .12); opacity: 1; }

/* 한자 고르기 — 고르는 방식은 그대로다. 그림자는 theme.css 목록에서 뺐다 */
.talk .hanja-pick { margin-top: var(--sp-4); }