/* Family Book Talk — quiet editorial finish. Native header settings stay authoritative. */
.bt-reference {
  --bg-page:var(--c-bg);--bg-card:var(--c-card);--bg-panel:var(--c-panel);
  --text-primary:var(--c-text);--text-secondary:var(--c-muted);
  --accent:var(--c-accent);--accent-soft:var(--c-accent-soft);
  --bt-bg:var(--c-bg);--bt-card:var(--c-card);--bt-panel:var(--c-panel);
  --bt-panel-2:color-mix(in srgb,var(--c-panel) 82%,var(--c-card));
  --bt-ink:var(--c-text);--bt-sub:var(--c-text);--bt-mut:var(--c-muted);
  --bt-night:var(--c-panel);--bt-on-night:var(--c-text);--bt-on-night-mut:var(--c-muted);
  --bt-ac:var(--c-accent);--bt-ac-ink:var(--c-accent);--bt-ac-soft:var(--c-accent-soft);
  --bt-ac-ink-hover:color-mix(in srgb,var(--c-accent) 88%,var(--c-text));
  --bt-focus:var(--c-accent);--r-l:20px;--r-xl:28px;
  --shadow-1:0 3px 14px -10px color-mix(in srgb,var(--c-text) 14%,transparent);
  --shadow-2:0 16px 40px -28px color-mix(in srgb,var(--c-text) 22%,transparent);
  --premium-rule:var(--c-line);
}
.bt-icon{display:inline-block;width:24px;height:24px;flex:none;vertical-align:middle;overflow:visible}
.bt-icon use{pointer-events:none}
.reference-landing .hero{padding-top:clamp(28px,4vw,52px)}
.reference-landing .hero-in{background:var(--bt-panel);border:1px solid var(--premium-rule);box-shadow:none}
.reference-landing .hero h1{font-weight:800;letter-spacing:-.045em}
.reference-landing .eyebrow{letter-spacing:.16em;font-size:11px;color:var(--bt-ac-ink)}
.reference-landing .hero-lead{line-height:1.95;max-width:32em}
.reference-landing .hero-talk .say{background:var(--bt-card);border:1px solid color-mix(in srgb,var(--bt-ink) 5%,transparent);box-shadow:0 5px 16px -13px color-mix(in srgb,var(--bt-ink) 25%,transparent);border-radius:16px 16px 16px 4px}
.reference-landing .hero-talk .say--me{background:var(--bt-panel-2);border-radius:16px 16px 4px 16px}
.btn{border-radius:10px;box-shadow:none;transition:background 220ms cubic-bezier(.25,1,.5,1),transform 220ms cubic-bezier(.25,1,.5,1),box-shadow 220ms cubic-bezier(.25,1,.5,1)}
.reference-landing .btn:not(.btn--line):not(.btn--text){background:var(--bt-ac-ink);color:var(--bt-action-text);box-shadow:0 8px 20px -14px color-mix(in srgb,var(--bt-ink) 50%,transparent)}
.reference-landing .btn:not(.btn--line):not(.btn--text):hover{background:var(--bt-ac-ink-hover);transform:translateY(-2px);box-shadow:0 12px 24px -14px color-mix(in srgb,var(--bt-ink) 56%,transparent)}
.btn:active{transform:translateY(1px)}
.btn--line{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-ink) 25%,transparent)}
.btn--line:hover{background:var(--bt-panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-ink) 38%,transparent)}
.btn--text{box-shadow:none}
.reference-landing .sec-head h2{font-weight:800;letter-spacing:-.04em;max-width:24em}
.reference-landing .sec-head p{line-height:1.9}
.reference-landing .why{gap:clamp(32px,6vw,88px)}
.reference-landing .why-step{border-radius:12px;background:transparent;box-shadow:none;padding:20px 0;border-bottom:1px solid var(--premium-rule)}
.reference-landing .why-step:last-child{border-bottom:0;background:transparent}
.reference-landing .why-step i{width:48px;height:48px;border-radius:0;background:transparent;color:var(--bt-ac-ink)}
.reference-landing .why-step i .bt-icon{width:30px;height:30px}
.reference-landing .why-step:nth-child(3) i{background:transparent}
.reference-landing .why-step span{display:block;margin-top:5px}
.reference-landing .why-pull{background:transparent;border-block:1px solid var(--premium-rule);border-radius:0;text-align:left;padding:32px 0;color:var(--bt-sub);max-width:900px;margin-inline:auto}
.reference-landing .how{background:var(--bt-panel);border-block:1px solid color-mix(in srgb,var(--bt-ink) 4%,transparent)}
.reference-landing .steps{gap:0}
.reference-landing .step{background:transparent;border-radius:0;padding:20px 26px 24px;border-left:1px solid color-mix(in srgb,var(--bt-ink) 13%,transparent)}
.reference-landing .step:first-child{border-left:0;padding-left:0}
.reference-landing .step--rec{background:transparent}
.reference-landing .step i{width:40px;height:40px;border-radius:0;background:transparent;margin:24px 0 18px;color:var(--bt-ac-ink)}
.reference-landing .step i .bt-icon{width:34px;height:34px}
.reference-landing .step h3{font-size:19px;font-weight:800}
.reference-landing .step h3 small{display:block;margin:8px 0 0;letter-spacing:.14em;font-size:10px}
.reference-landing .step p{margin-top:14px;font-size:14px;line-height:1.9}
.reference-landing .step:not(:last-child)::after{display:none}
.reference-landing .week{background:var(--bt-panel);border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);border-radius:24px;box-shadow:none}
.reference-landing .badge--shelf{background:var(--bt-ac-soft);color:var(--bt-ink)}
.reference-landing .week-q{background:var(--bt-card);border-radius:12px;box-shadow:none;padding:24px 28px}
.reference-landing .week-q small{color:var(--bt-sub)}
.reference-landing .week .meta{gap:8px}
.reference-landing .week .meta>div{background:transparent;border-top:1px solid color-mix(in srgb,var(--bt-ink) 13%,transparent);padding:14px 0}
.reference-landing .shelves{gap:20px}
.reference-landing .shelf{background:var(--bt-card);border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);border-radius:16px;padding:28px;box-shadow:none}
.reference-landing .shelf:hover{transform:translateY(-3px);box-shadow:0 18px 32px -28px color-mix(in srgb,var(--bt-ink) 40%,transparent);border-color:color-mix(in srgb,var(--bt-ink) 24%,transparent)}
.reference-landing .shelf .gyeol{color:var(--bt-ac-ink);letter-spacing:.08em}
.reference-landing .shelf .go{color:var(--bt-ac-ink);font-size:13px}
.reference-landing .shelf-books{height:88px;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--bt-ink) 14%,transparent)}
.reference-landing .shelf-books i{filter:saturate(.55)}
.reference-landing .shelf h3{font-size:20px;font-weight:800}
.reference-landing .shelf p{font-size:16px;line-height:1.7}
.reference-landing .lens{border-radius:12px;box-shadow:none;border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);background:transparent}
.reference-landing .ask{background:var(--bt-night)}
.reference-landing .ask-grid{gap:0;border-block:1px solid color-mix(in srgb,var(--bt-on-night) 19%,transparent);padding-block:28px}
.reference-landing .ask-grid li{background:transparent;border-radius:0;box-shadow:none;border-right:1px solid color-mix(in srgb,var(--bt-on-night) 17%,transparent);padding:16px 28px}
.reference-landing .ask-grid li:first-child{padding-left:0}.reference-landing .ask-grid li:last-child{border-right:0}
.reference-landing .ask-grid i{color:var(--bt-ac)}
.reference-landing .eco li{background:var(--bt-card);box-shadow:none;border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);border-radius:14px}
.reference-landing .eco li.is-here{background:var(--bt-ac-ink);color:var(--bt-action-text);border-color:var(--bt-ac-ink)}
.reference-landing .eco li.is-here .n{color:var(--bt-action-text)}
.reference-landing .memo{background:var(--bt-card);transform:rotate(-1deg);border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);box-shadow:0 20px 45px -30px color-mix(in srgb,var(--bt-ink) 33%,transparent)}
.reference-landing .memo-stamp{background:var(--bt-ac-ink)}
.reference-landing .cta{background:var(--bt-panel);border:1px solid color-mix(in srgb,var(--bt-ink) 9%,transparent);border-radius:24px}
.reference-landing .cta h2{font-family:var(--font-serif);font-weight:700;line-height:1.5}
.reference-landing .cta p{line-height:1.9}
.ft{background:var(--c-foot-bg);color:var(--c-foot-text)}
.ft b,.ft a,.ft small{color:var(--c-foot-text)}
.before>i .bt-icon,.while .pin .bt-icon,.tip>i .bt-icon{width:28px;height:28px;color:var(--bt-ac-ink)}
.react-opt>.emo .bt-icon{width:26px;height:26px}
.saved .ok .bt-icon{width:28px;height:28px}
.badge--lens .bt-icon{width:15px;height:15px}
.memo dl .bt-icon{width:16px;height:16px;margin-right:5px}
/* Native Local renders the real header and mobile bar. No duplicate reference tabs. */
.bt-reference .enh{font-family:var(--en-font,var(--font))}
.bt-reference .body,.bt-reference .flow,.bt-reference .toc{scroll-margin-top:calc(var(--hdr-h,77px) + 24px)}
.bt-reference .toc{top:calc(var(--hdr-h,77px) + 24px)}
.bt-reference .flow{top:var(--hdr-h,77px)}
@media(max-width:1024px){.reference-landing .step{border-left:0;border-top:1px solid var(--premium-rule);padding:24px}.reference-landing .step:first-child{padding-left:24px}.reference-landing .step--rec{border-bottom:1px solid var(--premium-rule)}}
@media(max-width:640px){
 .reference-landing .step{padding:20px 0!important;grid-template-columns:40px minmax(0,1fr)}
 .reference-landing .step i{margin:0}.reference-landing .step h3 small{display:inline;margin:0 0 0 8px}
 .reference-landing .step p{margin:4px 0 0;line-height:1.8}
 .reference-landing .shelf{padding:20px 16px}.reference-landing .shelf h3{font-size:18px}
 .reference-landing .week-q{padding:20px}.reference-landing .ask-grid{gap:0;padding-block:12px}
 .reference-landing .ask-grid li{padding:18px 12px!important}.reference-landing .why-pull{text-align:left;font-size:19px}
 .reference-landing .hero-talk .say{border-radius:12px}.reference-landing .hero h1{font-weight:800}
 .reference-landing .cta{padding:36px 22px}
}
@media(prefers-reduced-motion:reduce){.bt-reference *,.bt-reference *::before,.bt-reference *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Theme-menu colors are authoritative; classification and book data remain intact. */
.bt-reference [data-shelf]{--sh-soft:var(--bt-ac-soft);--sh-tint:var(--bt-panel);--sh-ink:var(--bt-ink)}
.bt-reference{--tag-me:var(--bt-ink);--tag-me-bg:var(--bt-panel);--tag-us:var(--bt-ink);--tag-us-bg:var(--bt-ac-soft);--tag-life:var(--bt-ink);--tag-life-bg:var(--bt-panel)}
.btn:not(.btn--line):not(.btn--text),.ex-types li[aria-current],.after li::before{color:var(--bt-action-text);background:var(--bt-ac-ink)}
.btn:not(.btn--line):not(.btn--text):hover{color:var(--bt-action-hover-text)}
.reference-landing .btn:not(.btn--line):not(.btn--text):hover{color:var(--bt-action-hover-text)}
.reference-landing .memo-stamp{color:var(--bt-action-text)}
.reference-landing .badge--shelf{background:var(--bt-ac-soft);color:var(--bt-ink)}
.reference-landing .eco li.is-here .n,.reference-landing .eco li.is-here a{color:var(--bt-action-text)}
.reference-landing .eco{--eco-gap:36px;gap:var(--eco-gap)}
.reference-landing .eco li:not(:last-child)::after{right:calc((var(--eco-gap) + 10px) / -2)}
@media(max-width:860px){
 .reference-landing .eco{--eco-gap:32px}
 .reference-landing .eco li:not(:last-child)::after{right:auto;bottom:calc((var(--eco-gap) + 10px) / -2)}
}
.catalog-filters a[aria-current]{background:var(--bt-ac-ink);color:var(--bt-action-text)}
.catalog-age select,.field select{background:var(--bt-card);color:var(--bt-ink);border-color:var(--c-line)}
.react-opt:has(input:checked){background:var(--bt-ac-soft);color:var(--bt-ink)}