/* =============================================================
 * 가족북톡 공통 부품 — 시안 3종이 함께 쓴다 (tokens.css 다음에 읽는다)
 * 규칙: 하드코딩 색 없음 · 선 대신 면 · 인용 상자 · 부모 팁에 이중 실선 금지
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bt-bg); color: var(--bt-ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); letter-spacing: var(--ls-title); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bt-focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--w), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.read { max-width: var(--w-read); }
.br-pc { display: inline; } .br-m { display: none; }
@media (max-width: 640px) { .br-pc { display: none; } .br-m { display: inline; } }

/* ── 머리글 ── */
.hd { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bt-bg) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(43, 38, 34, .06); }
.hd .wrap { display: flex; align-items: center; gap: var(--sp-6); height: 72px; }
.hd-logo img { height: 34px; width: auto; }
.hd-nav { display: flex; gap: var(--sp-2); margin-inline: auto; }
.hd-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-weight: 700; font-size: 15px; text-decoration: none; color: var(--bt-sub); transition: background var(--t-fast); }
.hd-nav a:hover { background: var(--bt-panel); color: var(--bt-ink); }
.hd-nav a[aria-current="page"] { background: var(--bt-ink); color: #fff; }
.hd-side { display: flex; align-items: center; gap: var(--sp-2); }
.hd-login { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-3); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--bt-sub); }
@media (max-width: 860px) {
  .hd .wrap { height: 60px; gap: var(--sp-3); }
  .hd-logo img { height: 28px; }
  .hd-nav { display: none; }
  .hd-side { margin-left: auto; }
}

/* ── 휴대폰 하단 탭 (기록 탭 없음 — 홈 · 이번 주 · 책장 · MY) ── */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border-radius: 22px; background: var(--bt-card); box-shadow: 0 10px 30px -12px rgba(43, 38, 34, .35); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding-top: 6px; border-radius: 16px; font-size: 11.5px; font-weight: 700; text-decoration: none; color: var(--bt-mut); }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { background: var(--bt-ac-soft); color: var(--bt-ac-ink-hover); }
  body { padding-bottom: 92px; }
}

/* ── 영문 라벨 · 섹션 머리 ── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--sp-4); font-size: var(--fs-label); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bt-ac-ink); }
.eyebrow b { font-weight: 800; letter-spacing: .02em; color: var(--bt-mut); }
.sec { padding-block: var(--section-y); }
.sec-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 800; }
.sec-head p { max-width: 640px; font-size: var(--fs-lead); color: var(--bt-sub); }
.sec-head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 640px) { .sec-head { margin-bottom: var(--sp-6); } .sec-head--row { grid-template-columns: minmax(0, 1fr); } }

/* ── 버튼: 기본 · 보조 · 글자 / hover · focus · active · disabled ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 26px; border: 0; border-radius: var(--r-pill); background: var(--bt-ac-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--bt-ac-ink) 85%, transparent); }
.btn:hover { background: var(--bt-ac-ink-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bt-panel-2); color: var(--bt-mut); box-shadow: none; cursor: not-allowed; transform: none; }
.btn--line { background: var(--bt-card); color: var(--bt-ink); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, .18); }
.btn--line:hover { background: var(--bt-panel); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.btn--text { min-height: 44px; padding: 0 4px; background: none; color: var(--bt-ac-ink); box-shadow: none; }
.btn--text:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 640px) { .btns--stack { flex-direction: column; } .btns--stack .btn { width: 100%; } }

/* ── 배지: 책장 · 가족 렌즈 · 메타 ── */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 800; line-height: 1; white-space: nowrap; }
.badge--shelf { background: var(--sh-soft); color: var(--sh-ink); }
.badge--shelf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sh-ink); }
.badge--related { background: var(--sh-tint); color: var(--sh-ink); font-weight: 700; }
.badge--lens { background: var(--bt-card); color: var(--bt-ink); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, .16); }
.badge--lens svg { width: 15px; height: 15px; color: var(--bt-ac); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* 북톡 메타 (추천 대상 · 시간 · 질문 · 펼침) */
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; border-radius: var(--r-m); overflow: hidden; }
.meta > div { padding: 14px 16px; background: var(--bt-panel); }
.meta dt { font-size: var(--fs-xs); font-weight: 700; color: var(--bt-mut); }
.meta dd { margin: 2px 0 0; font-size: 16px; font-weight: 800; color: var(--bt-ink); }
@media (max-width: 640px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .meta > div { padding: 12px 14px; } }

/* ── 글자 표지 (기존 bookshelf.css 의 .bks-face 와 같은 마크업 · 같은 모양) ── */
.cover { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 6px 14px 14px 6px; overflow: hidden; box-shadow: var(--shadow-book); background: var(--c, var(--sh-soft)); }
.bks-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18% 12% 18% 14%; color: var(--ink, var(--bt-ink)); background: linear-gradient(160deg, color-mix(in oklab, var(--c, var(--sh-soft)) 88%, #fff) 0%, var(--c, var(--sh-soft)) 60%, color-mix(in oklab, var(--c, var(--sh-soft)) 90%, #2b2622) 100%); overflow: hidden; word-break: keep-all; container-type: inline-size; }
.bks-face::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent); }
.bks-face__rule { position: absolute; top: 18%; left: 14%; width: 40%; height: 1px; background: currentColor; opacity: .25; }
.bks-face__title { position: relative; font-family: var(--font-serif); font-weight: 700; font-size: clamp(13px, 10cqi, 30px); line-height: 1.35; letter-spacing: -.01em; }
.bks-face__author { position: relative; font-size: clamp(9px, 5.4cqi, 13px); font-weight: 500; opacity: .72; }
.bks-face__mark { position: absolute; right: 9%; bottom: 5.5%; font-size: clamp(7px, 4.4cqi, 11px); font-weight: 700; letter-spacing: .04em; opacity: .45; }

/* ── 카드 ── */
.card { padding: var(--sp-6); border-radius: var(--r-l); background: var(--bt-card); box-shadow: var(--shadow-2); }
@media (max-width: 640px) { .card { padding: var(--sp-5); border-radius: 20px; } }

/* ── 질문 말풍선 (인용 상자 — 선 없이 면 + 꼬리) ── */
.say { position: relative; display: inline-block; padding: 14px 20px; border-radius: 20px 20px 20px 6px; background: var(--bt-card); font-weight: 700; box-shadow: var(--shadow-1); }
.say--me { border-radius: 20px 20px 6px 20px; background: var(--bt-ac-soft); }
.bigq { font-family: var(--font-serif); font-size: var(--fs-quote); font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
.bigq::before { content: "“"; } .bigq::after { content: "”"; }

/* ── 꼬리표 나 · 우리 · 일상 ── */
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 800; }
.tag--me { background: var(--tag-me-bg); color: var(--tag-me); }
.tag--us { background: var(--tag-us-bg); color: var(--tag-us); }
.tag--life { background: var(--tag-life-bg); color: var(--tag-life); }

/* ── 부모 팁 (이중 실선 금지 — 연한 면 + 아이콘) ── */
.tip { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-l); background: var(--bt-panel); }
.tip i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bt-card); font-style: normal; font-size: 22px; }
.tip h3 { font-size: 17px; font-weight: 800; }
.tip p { margin-top: 6px; color: var(--bt-sub); }
@media (max-width: 640px) { .tip { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); } }

/* ── 완료 · 반응 3택 · 한 문장 · 저장 (상세 · 이번 주 북톡이 함께 쓴다) ── */
.done { display: grid; gap: var(--sp-5); }
.done-check { display: flex; align-items: center; gap: var(--sp-3); min-height: 60px; padding: 0 var(--sp-5); border-radius: var(--r-m); background: var(--bt-panel); font-weight: 800; cursor: pointer; transition: background var(--t-fast); }
.done-check input { appearance: none; flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; border-radius: 9px; background: var(--bt-card); box-shadow: inset 0 0 0 2px rgba(43, 38, 34, .25); cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); }
.done-check input::after { content: ""; width: 12px; height: 7px; border: solid #fff; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform var(--t-mid) var(--ease); }
.done-check input:checked { background: var(--bt-ok); box-shadow: none; }
.done-check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.done-check:has(input:checked) { background: var(--bt-ok-soft); color: var(--bt-ok); }
@media (max-width: 640px) { .done-check { padding: 0 var(--sp-4); font-size: 15px; } }
.done-check input:focus-visible { outline: 3px solid var(--bt-focus); outline-offset: 3px; }

.react legend { padding: 0; margin-bottom: var(--sp-3); font-size: 18px; font-weight: 800; }
.react { margin: 0; padding: 0; border: 0; min-width: 0; }
.react-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.react-opt { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 112px; padding: var(--sp-4) var(--sp-3); border-radius: var(--r-m); background: var(--bt-card); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, .12); text-align: center; font-weight: 800; font-size: 15px; line-height: 1.4; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.react-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.react-opt .emo { font-size: 30px; line-height: 1; }
.react-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, .22), var(--shadow-1); }
.react-opt:has(input:checked) { background: var(--bt-ac-soft); box-shadow: inset 0 0 0 2.5px var(--bt-ac-ink); color: var(--bt-ac-ink-hover); }
.react-opt:has(input:focus-visible) { outline: 3px solid var(--bt-focus); outline-offset: 3px; }
@media (max-width: 640px) {
  .react-opts { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .react-opt { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; min-height: 60px; text-align: left; }
  .react-opt .emo { font-size: 26px; }
}

.field { display: grid; gap: 8px; }
.field label { font-weight: 800; }
.field label small { margin-left: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--bt-mut); }
.field input[type="text"], .field textarea { width: 100%; min-height: var(--tap); padding: 13px 16px; border: 0; border-radius: 14px; background: var(--bt-card); box-shadow: inset 0 0 0 1.5px rgba(43, 38, 34, .14); font: inherit; color: var(--bt-ink); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--bt-mut); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--bt-focus); }
.field .help { font-size: var(--fs-xs); color: var(--bt-mut); }
.field.is-error input { box-shadow: inset 0 0 0 2.5px var(--bt-err); background: var(--bt-err-soft); }
.field .err { font-size: var(--fs-xs); font-weight: 700; color: var(--bt-err); }

/* 저장 완료 — «가족아카이브에 남겼어요» */
.saved { display: none; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-5) var(--sp-6); border-radius: var(--r-l); background: var(--bt-ok-soft); }
.saved:focus { outline: none; } /* 저장 뒤 스크립트가 옮기는 포커스 — 읽기는 role=status 가 맡는다 */
.saved.is-on { display: grid; animation: pop var(--t-slow) var(--ease) both; }
.saved .ok { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bt-ok); color: #fff; }
.saved .ok svg { width: 28px; height: 28px; }
.saved h3 { font-size: 20px; font-weight: 800; color: var(--bt-ok); }
.saved p { margin-top: 4px; color: var(--bt-sub); }
.saved dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: var(--sp-4) 0 0; font-size: var(--fs-sm); }
.saved dt { color: var(--bt-mut); font-weight: 700; }
.saved dd { margin: 0; font-weight: 700; }
@media (max-width: 640px) { .saved { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── 바닥글 ── */
.ft { padding: var(--sp-8) 0 var(--sp-7); background: var(--bt-night); color: var(--bt-on-night-mut); font-size: var(--fs-sm); }
.ft .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6); }
.ft b { display: block; margin-bottom: var(--sp-3); font-size: 18px; color: var(--bt-on-night); }
.ft nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.ft a { color: var(--bt-on-night); text-decoration: none; font-weight: 700; min-height: 32px; display: inline-flex; align-items: center; }
.ft a:hover { text-decoration: underline; }
.ft-sns { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.ft-sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ft-sns svg { width: 20px; height: 20px; }
.ft small { display: block; margin-top: var(--sp-5); color: var(--bt-on-night-mut); }
@media (max-width: 860px) { .ft .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}