/* Category pages (owner 2026-10-27 approved draft v6, "카테고리 이대로 승인한다."): 생존 /ko/prepare/ and 플레이 /ko/play/, and the
   same two pages in every market. Hub cards (owner 2026-10-29: "홈 화면처럼 좀 예쁘게 만들고, 번호는 없애버려", "굳이 화면에서
   '생존' '플레이' 이렇게 할 필요가 없어"): no title row, no rank number, the home's own cards and tokens, ported from
   src/portal/f/style.css (the NEW card: .feat) and src/service-banners/banners.css (the '인기 기능' card: .tile; phones: the
   two-up tile of f/style.css .pop and src/nav/nav.css .ynn-tiles). Own class names, scoped under main#ct, so the shared banner
   stylesheet the menu's search may load never restyles them. Colour per card from the home's theme (inline --c, --c-rgb).
   The shared header, phone bar and footer row come from /app/nav/nav.css. Built by scripts/categories/build.py.
   Light ground (owner 2026-10-30, research/2026-10-30-light-theme/PALETTE.md) like the home: the first card is the home's light NEW
   card, the other cards stay the home's dark cards (their own dark tokens on #ct .tile); the former dark look under
   :root[data-theme="dark"] (future toggle). --ci: the card colour as text on the light first card. */
html,body{margin:0;background:#F5F6F9;color:#161B26}
html{color-scheme:light}
body{-webkit-font-smoothing:antialiased}
#ct{--bg:#F5F6F9;--surface:#FFFFFF;--line:rgba(28,38,56,.10);--line2:rgba(28,38,56,.15);--text:#161B26;--muted:#5B6476;--faint:#667185;
  --pill:rgba(28,38,56,.03);--ic-bg:rgba(28,38,56,.05);--lift:0 14px 34px rgba(28,38,56,.16);
  --ko:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;--lat:"Instrument Sans","Noto Sans KR",system-ui,sans-serif;--num:"Sora","Noto Sans KR",system-ui,sans-serif;
  --c:#3DE8C6;--c-rgb:61,232,198;
  display:block;color:var(--text);font:400 15px/1.55 var(--lat);word-break:keep-all;line-break:strict;overflow-wrap:anywhere;color-scheme:light}
#ct .tile{--bg:#0B0D12;--surface:#12151E;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--text:#F2F4F8;--muted:#A3A9BA;--faint:#7D8497;color-scheme:dark}
#ct .feat{--ci:#087D69}#ct .feat[style*="255,200,61"]{--ci:#936100}#ct .feat[style*="255,61,138"]{--ci:#BF245D}
:root[data-theme="dark"] body,:root[data-theme="dark"]{background:#0B0D12;color:#F2F4F8;color-scheme:dark}
:root[data-theme="dark"] #ct{--bg:#0B0D12;--surface:#12151E;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--text:#F2F4F8;--muted:#A3A9BA;--faint:#7D8497;
  --pill:rgba(255,255,255,.04);--ic-bg:rgba(255,255,255,.05);--lift:0 18px 50px rgba(0,0,0,.45);color-scheme:dark}
:root[data-theme="dark"] #ct .feat{--ci:var(--c);--feat-glow-a:.14;--spectrum-q:linear-gradient(90deg,#3DE8C6,#FFC83D 38%,#FF7A45 66%,#FF3D8A)}
#ct *{box-sizing:border-box}
#ct a{color:inherit;text-decoration:none}
#ct img{max-width:100%;display:block}
#ct h1,#ct h2,#ct h3,#ct p{margin:0}
#ct .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#ct .wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
#ct .body{display:grid;gap:12px;padding-block:16px 40px}
/* section titles: the home's section heading (f/style.css .sec-head h2), one step down */
#ct .gtitle{margin:22px 0 2px}
#ct .gtitle h2{font:800 19px/1.3 var(--ko);letter-spacing:-.035em}
/* the other menus */
#ct .more{display:grid;gap:10px}
#ct .more a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
#ct .more .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ic-bg);color:color-mix(in srgb,rgb(var(--ic)) 45%,#161B26)}
:root[data-theme="dark"] #ct .more .ic{color:rgb(var(--ic))}
#ct .more .ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#ct .more b{display:block;font:700 15px/1.4 var(--ko)}
#ct .more small{color:var(--muted);font-size:12.5px}
#ct .more .arr{color:var(--faint)}
/* the site footer: the shared footer row of every service, then the site links */
.ct-foot{border-top:1px solid rgba(28,38,56,.10);color:#667185;font:400 12.5px/1.6 "Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif}
.ct-foot .wrap{max-width:1120px;margin:0 auto;padding:20px 20px 24px}
.ct-foot .links{display:flex;flex-wrap:wrap;gap:8px 18px}
.ct-foot a{color:#667185;text-decoration:none}
.ct-foot a:hover{color:#161B26}
:root[data-theme="dark"] .ct-foot{border-top-color:rgba(255,255,255,.08);color:#858CA0}:root[data-theme="dark"] .ct-foot a{color:#858CA0}:root[data-theme="dark"] .ct-foot a:hover{color:#F2F4F8}

/* ---- every card (banners.css .yn-bn): the card face, its glow in the card's colour, hover lift */
#ct .bn{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-width:0;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg,#131722,#0E1119);color:var(--text);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
#ct .bn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(75% 65% at 100% 100%,rgba(var(--c-rgb),.15),transparent 70%)}
#ct .bn:hover{transform:translateY(-3px);border-color:rgba(var(--c-rgb),.42);box-shadow:var(--lift)}
#ct .bn:focus-visible{outline:2px solid var(--ring,#B52464);outline-offset:3px}
:root[data-theme="dark"] #ct{--ring:#F2F4F8}
#ct .q em{font-style:normal;color:var(--c)}
#ct .new{flex:none;margin-left:2px;padding:3px 6px;border-radius:5px;background:rgba(61,232,198,.12);color:var(--new-ink,#087D69);font:700 10.5px/1 var(--lat);letter-spacing:.03em}
/* the '??' hook (banners.js answer()): '?' slots glow in the card's colour, units small */
#ct .ans{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2px;font:800 27px/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
#ct .ans b{font-weight:800}
#ct .ans small{font:700 14px/1 var(--ko);color:var(--muted);letter-spacing:-.02em;margin:0 7px 0 3px}
#ct .ans small:first-child{margin-left:0}
#ct .ans .dig{color:var(--c);text-shadow:0 0 18px rgba(var(--c-rgb),.5)}
#ct .feat .ans .dig{color:var(--ci);text-shadow:var(--feat-glow,none)}
#ct .tile .new,:root[data-theme="dark"] #ct .new{--new-ink:#3DE8C6}
:root[data-theme="dark"] #ct .feat{--feat-glow:0 0 18px rgba(var(--c-rgb),.5)}

/* ---- the first card: the home's NEW card (f/style.css .newcard) — art | label pill, question, description | hook, chips | CTA */
#ct .top{display:grid}
#ct .feat{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:28px;border-radius:22px;border:1px solid var(--line2);
  background:var(--feat-bg,#FFFFFF);padding:20px 26px 20px 20px}
:root[data-theme="dark"] #ct .feat{--feat-bg:linear-gradient(90deg,#0F141C,#0D1017)}
#ct .feat .q em{color:var(--ci)}
#ct .feat::before{background:radial-gradient(40% 120% at 0% 50%,rgba(var(--c-rgb),var(--feat-glow-a,.10)),transparent 70%),radial-gradient(30% 120% at 100% 50%,rgba(255,200,61,.06),transparent 70%)}
#ct .feat:hover{transform:translateY(-2px);border-color:rgba(var(--c-rgb),.4);box-shadow:none}
#ct .feat .art{width:96px;height:96px;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
#ct .copy{min-width:0}
#ct .kicker{display:flex;align-items:center;gap:8px;min-width:0}
#ct .chip{display:inline-flex;align-items:center;gap:7px;min-width:0;height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(var(--c-rgb),.38);background:rgba(var(--c-rgb),.08);
  color:var(--ci,var(--c));font:700 12.5px/1 var(--lat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ct .chip i{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
#ct .feat .q{margin-top:10px;font:800 23px/1.32 var(--ko);letter-spacing:-.04em;text-wrap:pretty}
#ct .feat .d{margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.55}
#ct .spectrum .q em{background:var(--spectrum-q,linear-gradient(90deg,#087D69,#936100 38%,#BC471D 66%,#BF245D));-webkit-background-clip:text;background-clip:text;color:transparent}
#ct .hook{display:grid;gap:12px;min-width:0}
#ct .feat .ans{font-size:30px}
#ct .feat .ans small{font-size:15px}
#ct .meta{display:flex;flex-wrap:wrap;gap:6px}
#ct .meta span{padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--pill);color:var(--muted);font:700 12.5px/1.2 var(--lat);white-space:nowrap}
#ct .cta{display:flex;align-items:center;gap:14px;font:700 15px/1.3 var(--lat);white-space:nowrap}
#ct .arrowbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--text);color:var(--bg);flex:none;transition:transform .2s}
#ct .feat:hover .arrowbtn{transform:translateX(3px)}
#ct .arrowbtn svg{width:18px;height:18px}

/* ---- every other card: the home's '인기 기능' card (banners.css .yn-bn-card) — name, question, one hook line, the 3D art */
#ct .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
#ct .tile{padding:22px 22px 20px;min-height:214px;container-type:inline-size}
#ct .lbl{display:flex;align-items:center;gap:7px;min-width:0;font:600 12.5px/1.2 var(--lat);color:var(--muted)}
#ct .lbl>i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--c);box-shadow:0 0 10px var(--c)}
#ct .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ct .tile .q{display:block;margin-top:14px;font:800 21px/1.38 var(--ko);letter-spacing:-.04em;text-wrap:pretty}
#ct .qs{display:none;text-wrap:pretty}
#ct .foot{margin-top:auto;padding-top:18px;padding-right:104px}
#ct .tile .art{position:absolute;right:-6px;bottom:-6px;width:122px;height:122px;max-width:none;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,#000 64%,transparent 100%);mask:radial-gradient(closest-side,#000 64%,transparent 100%);transition:transform .35s ease}
#ct .tile:hover .art{transform:scale(1.06) rotate(-3deg)}
#ct .go{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);
  opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s,background .2s,color .2s}
#ct .go svg{width:16px;height:16px}
#ct .tile:hover .go{opacity:1;transform:none;background:var(--c);color:var(--bg)}
/* narrow cards (the home's narrow-slot rule): the art shrinks, the question one step smaller */
@container (max-width:330px){
  #ct .tile .art{width:104px;height:104px}
  #ct .tile .foot{padding-right:78px}
  #ct .tile .q{font-size:19px}
  #ct .tile .ans{font-size:clamp(20px,11cqi,23px)}
  #ct .tile .ans small{font-size:13px;margin:0 5px 0 2px}
}

/* ---- computers: every row full (1, 2, 3, 4, 5 = three then two, 6 = three and three, 7 = four then three, 8 = four and four) */
@media (min-width:1021px){
  #ct .body{gap:18px;padding-block:28px 56px}
  #ct .gtitle{margin:30px 0 0}
  #ct .gtitle h2{font-size:22px}
  #ct .grid.g1{grid-template-columns:minmax(0,1fr)}
  #ct .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ct .grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  #ct .grid.g5{grid-template-columns:repeat(6,minmax(0,1fr))}
  #ct .grid.g5>.tile{grid-column:span 2}
  #ct .grid.g5>.tile:nth-child(n+4){grid-column:span 3}
  #ct .grid.g7{grid-template-columns:repeat(12,minmax(0,1fr))}
  #ct .grid.g7>.tile{grid-column:span 3}
  #ct .grid.g7>.tile:nth-child(n+5){grid-column:span 4}
  /* one card alone (the home's wide card): a bigger question and art */
  #ct .grid.g1>.tile{min-height:200px}
  #ct .grid.g1>.tile .q{font-size:24px;max-width:22em}
  #ct .grid.g1>.tile .art{width:190px;height:190px;right:6px;bottom:-14px}
  #ct .grid.g1>.tile .foot{padding-right:200px}
  #ct .more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:641px) and (max-width:1020px){
  #ct .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ct .tile.odd{grid-column:1 / -1}
  #ct .more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  #ct .feat{grid-template-columns:auto minmax(0,1fr) auto}
  #ct .feat .hook{grid-column:2 / 3}
  #ct .feat .cta{grid-row:1 / 3;grid-column:3}
}
/* ---- phones: the NEW card's phone layout, two-up tiles (art on top, the name beside it, the short question, the hook) */
@media (max-width:640px){
  #ct .feat{grid-template-columns:minmax(0,1fr) auto;gap:14px 12px;padding:20px 18px 18px}
  #ct .feat .art{grid-row:1;grid-column:2;width:76px;height:76px;margin:-6px -6px 0 0}
  #ct .feat .copy{grid-row:1;grid-column:1}
  #ct .feat .q{font-size:20px}
  #ct .feat .d{font-size:14px}
  #ct .feat .hook{grid-column:1 / -1;grid-row:2}
  #ct .feat .ans{font-size:28px}
  #ct .feat .cta{grid-column:1 / -1;grid-row:3;justify-content:space-between;padding-top:4px}
  #ct .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #ct .tile{min-height:0;padding:14px 14px 16px;border-radius:18px}
  #ct .tile .art{position:static;order:-1;width:60px;height:60px;margin:-4px 0 6px -6px}
  #ct .tile .lbl{position:absolute;top:14px;right:12px;left:76px;justify-content:flex-end;flex-wrap:wrap;row-gap:4px}
  #ct .tile .lbl>i{display:none}
  #ct .tile .nm{font-size:11px;line-height:1.3;white-space:normal;text-align:right;overflow:visible}
  #ct .tile .q,#ct .tile .go{display:none}
  #ct .tile .qs{display:block;margin:0;font:800 15.5px/1.4 var(--ko);letter-spacing:-.035em}
  #ct .tile .foot{padding:12px 0 0}
  #ct .tile .ans{font-size:19px}
  #ct .tile .ans small{font-size:11.5px;margin:0 4px 0 2px}
  /* an odd group's first card spans the row: the card face of the home's phone card (the question, the art at its corner) */
  #ct .tile.odd{grid-column:1 / -1;padding:18px 18px 16px;border-radius:20px}
  #ct .tile.odd .art{position:absolute;order:0;right:-6px;bottom:-6px;width:104px;height:104px;margin:0}
  #ct .tile.odd .lbl{position:static;justify-content:flex-start;flex-wrap:nowrap}
  #ct .tile.odd .lbl>i{display:block}
  #ct .tile.odd .nm{font-size:12.5px;line-height:1.2;white-space:nowrap;text-align:left;overflow:hidden}
  #ct .tile.odd .q{display:block;margin-top:10px;font-size:19px;padding-right:76px}
  #ct .tile.odd .qs{display:none}
  #ct .tile.odd .foot{padding:14px 96px 0 0}
  #ct .tile.odd .ans{font-size:22px}
  #ct .tile.odd .ans small{font-size:13px;margin:0 6px 0 3px}
}
@media (max-width:374px){#ct .tile .qs{font-size:14.5px;letter-spacing:-.045em}}
@media (prefers-reduced-motion:reduce){#ct .bn,#ct .tile .art,#ct .go,#ct .arrowbtn{transition:none}#ct .bn:hover,#ct .feat:hover{transform:none}#ct .tile:hover .art{transform:none}}

/* ===== each language's own face (the other markets follow the approved KR design) ===== */
/* Japanese and Chinese break between characters (keep-all is for Korean); Thai lines need more height */
html[lang="en"] #ct{--ko:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--lat:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--num:"Sora","Instrument Sans",system-ui,sans-serif}
html[lang="ja"] #ct{--ko:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;--lat:"Instrument Sans","Noto Sans JP","Hiragino Sans",system-ui,sans-serif;--num:"Sora","Noto Sans JP",system-ui,sans-serif}
html[lang="zh-Hant-TW"] #ct{--ko:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;--lat:"Instrument Sans","Noto Sans TC","PingFang TC",system-ui,sans-serif;--num:"Sora","Noto Sans TC",system-ui,sans-serif}
html[lang="zh-Hant-HK"] #ct{--ko:"Noto Sans HK","Noto Sans TC","PingFang HK",system-ui,sans-serif;--lat:"Instrument Sans","Noto Sans HK","Noto Sans TC","PingFang HK",system-ui,sans-serif;--num:"Sora","Noto Sans HK",system-ui,sans-serif}
html[lang="th"] #ct{--ko:"Noto Sans Thai",system-ui,sans-serif;--lat:"Instrument Sans","Noto Sans Thai",system-ui,sans-serif;--num:"Sora","Noto Sans Thai",system-ui,sans-serif}
html[lang="en"] .ct-foot{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
html[lang="ja"] .ct-foot{font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif}
html[lang="zh-Hant-TW"] .ct-foot{font-family:"Noto Sans TC","PingFang TC",system-ui,sans-serif}
html[lang="zh-Hant-HK"] .ct-foot{font-family:"Noto Sans HK","Noto Sans TC","PingFang HK",system-ui,sans-serif}
html[lang="th"] .ct-foot{font-family:"Noto Sans Thai",system-ui,sans-serif}
html[lang="ja"] #ct,html[lang^="zh"] #ct{word-break:normal;line-break:strict}
html[lang="ja"] #ct .q,html[lang="ja"] #ct .qs{word-break:auto-phrase}
html[lang^="zh"] #ct .qs{word-break:keep-all}
/* a narrow card keeps a Chinese line whole between its spaces and designed breaks (no 工 / 作 split); a line that cannot fit still wraps */
html[lang^="zh"] #ct .tile .q{word-break:keep-all}
/* tracking (banners.css): Korean headlines run tight; Latin and CJK need less, Thai none */
html[lang="en"] #ct .q,html[lang="en"] #ct .qs{letter-spacing:-.018em}
html[lang="ja"] #ct .q,html[lang^="zh"] #ct .q,html[lang="ja"] #ct .qs,html[lang^="zh"] #ct .qs{letter-spacing:-.02em}
html[lang="th"] #ct .q,html[lang="th"] #ct .qs{letter-spacing:0;line-height:1.45}
html[lang="th"] #ct .gtitle h2,html[lang="th"] #ct .more b{line-height:1.5}