/* Shared stylesheet for the generated Words resource pages: guides, compare and best-for pages,
   printables, free word and phrase cards, and the language pages. Every generator links it through
   scripts/build/lib/siteShell.js head(), after /family.css and /resource.css and before the page's own
   <style>, with a ?v= content hash so a browser never pairs new markup with an older cached sheet.
   Edit this file, then regenerate the pages that link it (check:site-drift names any you miss). */
/* Fonts, tokens and the keyboard focus ring come from family.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  min-height:100dvh; color:var(--ink-2); font-family:var(--sans); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column;
  background-image:radial-gradient(var(--grain) .48px,transparent .58px); background-size:7px 7px;
}
img{max-width:100%; height:auto; display:block}
button,a{font:inherit}
a{color:inherit}
p{margin:0;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
a.sr-only:focus{position:fixed; top:8px; left:8px; width:auto; height:auto; margin:0; padding:10px 14px; clip:auto; z-index:100;
                background:var(--card); border:1px solid var(--hairline); border-radius:10px; box-shadow:var(--sh-2); color:var(--ink); font-weight:700;}
.wrap{width:min(1120px,100% - var(--gutter)*2); margin-inline:auto;}

/* ---- Type (interior scale: a page that is read, not the portal hero) ---- */
.eyebrow{font-family:var(--sans); font-weight:700; font-size:11px; line-height:1; letter-spacing:.14em;
         text-transform:uppercase; color:var(--gold-ink); margin:0 0 14px;}
h1,h2{font-family:var(--serif); font-weight:700; color:var(--ink); margin:0; text-wrap:balance;}
h1{font-size:clamp(36px,7.4vw,60px); line-height:1.0; letter-spacing:-.025em;}
h2{font-size:clamp(27px,5.6vw,40px); line-height:1.06; letter-spacing:-.02em;}
h1 em,h2 em{font-style:normal; color:var(--coral);}
h2 em{color:var(--coral-ink);}
.rule{width:96px; height:4px; border-radius:999px; background:var(--gold); margin:18px auto 0;}
.lede{font-size:clamp(17px,4.2vw,20px); line-height:1.6; font-weight:500; color:var(--ink-2);
      max-width:42ch; margin:18px auto 0; text-wrap:pretty;}
.lede b{color:var(--ink); font-weight:700;}
.sec-head{text-align:center; max-width:680px; margin:0 auto 32px;}
.sec-head .lede{margin-top:14px; max-width:50ch;}
section{padding:56px 0;}
@media (min-width:900px){ section{padding:96px 0;} }
.prose{max-width:68ch; margin-inline:auto;}
.prose p{font-size:17px; line-height:1.65; font-weight:500; color:var(--ink-2); margin:0 0 16px; text-wrap:pretty;}
.prose p:last-child{margin-bottom:0;}
.prose b,.prose strong{color:var(--ink); font-weight:700;}
.prose i{font-style:normal; font-weight:700; color:var(--ink);}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--ink);}
.prose h3{font-family:var(--serif); font-weight:700; font-size:22px; line-height:1.25; color:var(--ink); margin:34px 0 10px; text-wrap:balance;}
.prose ul,.prose ol{margin:0 0 16px; padding-left:1.3em; font-size:17px; line-height:1.65; font-weight:500; color:var(--ink-2);}
.prose li{margin:.3em 0; text-wrap:pretty;}
.prose .cite{font-size:14px; line-height:1.55; color:var(--ink-3); font-weight:600;}
/* The language's own text on this page — always ink, always bold, never a pale gloss. */
.lx{font-weight:700; color:var(--ink);}
[lang="ko"]{font-family:"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic","Nanum Gothic",var(--sans); letter-spacing:-.01em;}

/* Header and footer come from buildFamilyPages and hosting/family.css. */
.crumb{font-size:13px; font-weight:700; color:var(--ink-3); margin:0 0 18px;}
.crumb a{color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hairline);}
.crumb a:hover{color:var(--ink); text-decoration-color:var(--gold);}

/* ---- Store badges ---- */
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px;}
.badge{display:inline-flex; align-items:center; gap:11px; min-width:168px; min-height:52px; padding:9px 16px;
       border-radius:var(--r-art); border:1px solid var(--hairline); background:var(--card); color:var(--ink);
       text-decoration:none; box-shadow:var(--sh-1); transition:border-color var(--dur-base,.16s),box-shadow var(--dur-base,.16s),transform var(--dur-fast,.12s) var(--ease);}
.badge:hover{border-color:var(--ink); transform:translateY(-1px); box-shadow:var(--sh-2);}
.badge:active{transform:translateY(0);}
.badge svg{flex:none;}
.b-txt{display:flex; flex-direction:column; text-align:left; gap:3px;}
.b-sub{white-space:nowrap; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); line-height:1; font-weight:700;}
.b-name{font-weight:700; font-size:16px; line-height:1.1; color:var(--ink);}
@media (max-width:377px){ .badge{width:100%; justify-content:center;} }
.price-note{margin:14px auto 0; font-size:13.5px; line-height:1.6; font-weight:600; color:var(--ink-2); max-width:42ch; text-wrap:balance;}
.price-note b{color:var(--ink); font-weight:700;}

/* ---- Play buttons — 44px targets, distinct states (idle / loading / playing / error) ---- */
.play{appearance:none; -webkit-appearance:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
      gap:7px; min-width:44px; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--hairline);
      background:var(--card); color:var(--ink); font-weight:700; font-size:13.5px; line-height:1;
      transition:background-color var(--dur-base,.16s),border-color var(--dur-base,.16s),box-shadow var(--dur-base,.16s),transform var(--dur-fast,.12s) var(--ease);}
.play svg{flex:none; width:16px; height:16px;}
.play:hover{border-color:var(--ink); transform:translateY(-1px);}
.play:active{transform:translateY(0);}
.play.is-loading{border-color:var(--ink-3); animation:pulse 1s ease-in-out infinite;}
.play.is-playing{background:var(--ink); border-color:var(--ink); color:#fff; transform:none;}
.play.is-error{border-color:var(--coral-ink); color:var(--coral-ink); background:var(--coral-wash);}
@keyframes pulse{50%{box-shadow:0 0 0 4px var(--ink-ring)}}
.voices{display:flex; flex-wrap:wrap; gap:8px;}
/* Voice switch — a segmented control, 44px targets, pressed state carried by aria-pressed. */
.voice-toggle{display:inline-flex; padding:3px; gap:3px; border:1px solid var(--hairline); border-radius:999px; background:var(--card);}
.voice-toggle button{appearance:none; border:0; background:transparent; color:var(--ink-3); border-radius:999px; padding:0 14px;
                     min-height:44px; cursor:pointer; font-weight:700; font-size:13px;}
.voice-toggle button[aria-pressed="true"]{background:var(--ink); color:#fff;}
.voice-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 16px; margin:0 0 26px;}
.voice-row p{font-size:14px; font-weight:700; color:var(--ink-3); text-wrap:balance;}
.voice-row p b{color:var(--ink); font-weight:700;}

/* ---- Fact strip ---- */
.fact-band{padding:0;}
.fact-strip{display:grid; grid-template-columns:1fr 1fr; background:var(--card); border-radius:20px; box-shadow:var(--sh-2); overflow:hidden;}
.fact{padding:18px 12px; text-align:center;}
.fact:nth-child(2n){border-left:1px solid var(--hairline);}
.fact:nth-child(n+3){border-top:1px solid var(--hairline);}
.fact b{display:block; font-family:var(--serif); font-weight:700; font-size:clamp(28px,7.5vw,36px); line-height:1; color:var(--ink);
        letter-spacing:-.01em; font-variant-numeric:tabular-nums;}
.fact span{display:block; margin-top:5px; font-size:12px; font-weight:700; color:var(--ink-3);}
@media (min-width:640px){
  .fact-strip{grid-template-columns:repeat(4,1fr);}
  .fact:nth-child(n+2){border-left:1px solid var(--hairline);}
  .fact:nth-child(n+3){border-top:0;}
}

/* ---- Word cards (4-up) and paid lists ---- */
.cards{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (min-width:760px){ .cards{grid-template-columns:repeat(4,1fr); gap:12px;} }
.wcard{background:var(--card); border-radius:var(--r-tile); box-shadow:var(--sh-2); overflow:hidden; display:flex; flex-direction:column;}
.wcard img{aspect-ratio:3/2; width:100%; object-fit:cover; background:var(--paper-warm);}
.wcard-txt{padding:10px 11px 12px; display:flex; flex-direction:column; flex:1 1 auto;}
.wcard-lx{margin:0; font-size:19px; line-height:1.25;}
.wcard-en{margin:2px 0 0; font-size:12.5px; font-weight:700; color:var(--ink-3);}
.wcard-cat{margin:2px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink);}
.wcard .voices{display:grid; grid-template-columns:1fr 1fr; margin-top:auto; padding-top:11px; gap:6px;}
.wcard .play{min-width:0; min-height:42px; padding:0 6px; gap:4px; font-size:11.5px;}
.wcard .play svg{width:13px; height:13px;}
.locked-lbl{display:flex; align-items:center; gap:7px; margin:20px 0 0; font-size:12.5px; font-weight:700; color:var(--ink-3);}
.locked{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
@media (min-width:760px){ .locked{grid-template-columns:repeat(4,1fr); gap:12px;} }
.locked li{border-top:1px solid var(--hairline); padding:11px 2px 0;}
.locked .wcard-lx{font-size:18px;}

/* ---- Notes / checklists ---- */
.inside-list{list-style:none; margin:0; padding:0; display:grid; gap:0 32px; max-width:900px; margin-inline:auto;}
@media (min-width:760px){ .inside-list{grid-template-columns:1fr 1fr;} }
.inside-list li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:13px 0;
                border-top:1px solid var(--hairline); font-size:15.5px; font-weight:600; color:var(--ink-2); line-height:1.5; text-wrap:pretty;}
.inside-list li:last-child{border-bottom:1px solid var(--hairline);}
@media (min-width:760px){ .inside-list li:nth-last-child(2){border-bottom:1px solid var(--hairline);} }
.inside-list b{color:var(--ink); font-weight:700;}
.inside-list svg{margin-top:3px; color:var(--olive-ink);}
.notes{list-style:none; margin:0; padding:0; max-width:68ch; margin-inline:auto;}
.notes li{padding:18px 0; border-top:1px solid var(--hairline); font-size:17px; line-height:1.65; font-weight:500; color:var(--ink-2); text-wrap:pretty;}
.notes li:last-child{border-bottom:1px solid var(--hairline);}
.notes b{color:var(--ink); font-weight:700;}
.notes i{font-style:normal; font-weight:700; color:var(--ink);}
.notes a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;}

/* ---- Questions (open text, never an accordion) ---- */
.faq{max-width:68ch; margin-inline:auto;}
.faq h3{font-family:var(--serif); font-weight:700; font-size:20px; line-height:1.25; color:var(--ink); margin:28px 0 8px; text-wrap:balance;}
.faq h3:first-child{margin-top:0;}
.faq p{font-size:17px; line-height:1.65; font-weight:500; color:var(--ink-2); text-wrap:pretty;}
.faq p b,.faq p i{color:var(--ink); font-weight:700; font-style:normal;}
.faq-more{margin:28px auto 0; padding-top:18px; border-top:1px solid var(--hairline); font-size:15px; font-weight:600; color:var(--ink-3); max-width:68ch;}
.faq-more a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;}

/* ---- Price + trust ---- */
.price{padding-top:0;}
.price-card{max-width:680px; margin:0 auto; background:var(--paper-warm); border-radius:28px; box-shadow:var(--sh-2); padding:36px 22px 32px; text-align:center;}
.price-card .lede{max-width:44ch;}
.price-card .badges{margin-top:24px;}
/* Two badges share a row down to 378px, each a little tighter; narrower phones stack them full width
   (the .badge rule above), so the store logo and the one-line label always fit. */
@media (max-width:420px){ .price-card{padding-left:14px; padding-right:14px;} }
@media (min-width:378px) and (max-width:420px){ .price-card .badge{min-width:0; flex:1 1 0; padding:9px 8px; gap:8px;} }
.trust{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:20px auto 0;}
.trust span{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2);}
.trust svg{width:15px; height:15px; color:var(--olive-ink);}
.trust a{color:inherit; text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px;}
.trust a:hover{color:var(--ink);}

/* ---- Sibling / related links ---- */
.sibs{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));}
.sibs a{display:block; position:relative; padding:15px 38px 15px 16px; border-radius:var(--r-art); background:var(--card); box-shadow:var(--sh-1);
        text-decoration:none; transition:box-shadow var(--dur-base,.16s),transform var(--dur-fast,.12s) var(--ease);}
.sibs a:hover{box-shadow:var(--sh-2); transform:translateY(-1px);}
.sibs a::after{content:"\203A"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px; line-height:1; font-weight:700; color:var(--coral-deep);}
.sibs a:hover b{text-decoration:underline; text-underline-offset:3px;}
.sibs b{display:block; font-weight:700; color:var(--ink); font-size:15px;}
.sibs span{display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--ink-3);}