/* Portal layout (2026-10-25 redesign). Cards come from the shared component (/app/discovery/banners.css);
   this file owns the page: header, flagship hero, NEW strip, sections, theme tabs, board teaser, all-features page,
   footer and the phone tab bar. Light ground (owner 2026-10-30, research/2026-10-30-light-theme/PALETTE.md), the shared cards and
   the hero's example result card stay dark objects; the former dark set under :root[data-theme="dark"] (future toggle).
   --*-ink: the accents as text on the light ground (the neon ones stay for fills, dots and anything on a dark object). */
:root{
  color-scheme:light;
  --bg:#F5F6F9;--bg2:#FFFFFF;--surface:#FFFFFF;--surface2:#EFF1F6;--surface3:#E2E6EF;
  --line:rgba(28,38,56,.10);--line2:rgba(28,38,56,.15);--line3:rgba(28,38,56,.24);
  --text:#161B26;--muted:#5B6476;--faint:#667185;
  --mint:#3DE8C6;--yellow:#FFC83D;--orange:#FF7A45;--pink:#FF3D8A;
  --mint-ink:#087D69;--pink-ink:#BF245D;--on:#B52464;
  --spectrum:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);
  --spectrum-ink:linear-gradient(90deg,#087D69 0%,#936100 38%,#BC471D 66%,#BF245D 100%);
  --hd-bg:rgba(255,255,255,.91);--jump-bg:rgba(245,246,249,.92);--tabbar-bg:rgba(255,255,255,.96);
  --menu-bg:#FFFFFF;--menu-shadow:0 2px 6px rgba(28,38,56,.05),0 18px 44px rgba(28,38,56,.14);
  --hero-bg:#FFFFFF;--hero-grid:rgba(28,38,56,.05);--hero-pink:.12;--hero-mint:.12;
  --field-bg:#FFFFFF;--field-shadow:0 2px 6px rgba(28,38,56,.04),0 10px 30px rgba(28,38,56,.08);--field-shadow-2:0 4px 10px rgba(28,38,56,.05),0 14px 40px rgba(28,38,56,.11),0 0 30px rgba(255,61,138,.08);
  --pill:rgba(28,38,56,.03);--pill-2:rgba(28,38,56,.06);--newcard-bg:#FFFFFF;--glow:.10;--me-glow:0 0 0 2px rgba(255,255,255,.9),0 0 10px rgba(22,27,38,.22);
  --underline:rgba(22,27,38,.35);--mint-glow:none;--pink-glow:none;
  --f-display:'Sora','Noto Sans KR',system-ui,sans-serif;
  --f-body:'Instrument Sans','Noto Sans KR',system-ui,sans-serif;
  --f-kr:'Noto Sans KR','Instrument Sans',system-ui,sans-serif;
  --radius:20px;--header:68px;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0D12;--bg2:#0F121A;--surface:#12151E;--surface2:#191D29;--surface3:#232838;
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.13);--line3:rgba(255,255,255,.2);
  --text:#F2F4F8;--muted:#A3A9BA;--faint:#7D8497;
  --mint-ink:#3DE8C6;--pink-ink:#FF3D8A;--on:#3DE8C6;
  --spectrum-ink:var(--spectrum);
  --hd-bg:rgba(11,13,18,.86);--jump-bg:rgba(11,13,18,.9);--tabbar-bg:rgba(15,18,26,.95);
  --menu-bg:#121620;--menu-shadow:0 24px 64px rgba(0,0,0,.6);
  --hero-bg:#0C0F16;--hero-grid:rgba(255,255,255,.045);--hero-pink:.30;--hero-mint:.20;
  --field-bg:#10131B;--field-shadow:0 10px 40px rgba(0,0,0,.35);--field-shadow-2:0 14px 50px rgba(0,0,0,.45),0 0 30px rgba(255,61,138,.12);
  --pill:rgba(255,255,255,.03);--pill-2:rgba(255,255,255,.07);--newcard-bg:linear-gradient(90deg,#0F141C,#0D1017);--glow:.14;--me-glow:0 0 14px rgba(255,255,255,.55);
  --underline:rgba(255,255,255,.35);--mint-glow:0 0 18px rgba(61,232,198,.55);--pink-glow:0 0 18px rgba(255,61,138,.55);
}
:lang(ja){--f-kr:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;--f-body:'Instrument Sans','Noto Sans JP',system-ui,sans-serif;--f-display:'Sora','Noto Sans JP',system-ui,sans-serif}
:lang(zh-Hant-TW),:lang(zh-Hant-HK){--f-kr:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;--f-body:'Instrument Sans','Noto Sans TC',system-ui,sans-serif;--f-display:'Sora','Noto Sans TC',system-ui,sans-serif}
:lang(th){--f-kr:'Noto Sans Thai','Instrument Sans',system-ui,sans-serif;--f-body:'Instrument Sans','Noto Sans Thai',system-ui,sans-serif;--f-display:'Sora','Noto Sans Thai',system-ui,sans-serif}
:lang(en){--f-kr:'Instrument Sans',system-ui,sans-serif}
/* tracking: Korean headlines run tight; Latin and CJK need less, Thai none */
:lang(en) .hero h1,:lang(en) .sec-head h2,:lang(en) .page-head h1,:lang(en) .theme-intro h3,:lang(en) .theme-sec-head h2,:lang(en) .newcard h2,:lang(en) .demo-name{letter-spacing:-.022em}
:lang(ja) .hero h1,:lang(zh-Hant-TW) .hero h1,:lang(zh-Hant-HK) .hero h1,:lang(ja) .sec-head h2,:lang(zh-Hant-TW) .sec-head h2,:lang(zh-Hant-HK) .sec-head h2,:lang(ja) .page-head h1,:lang(zh-Hant-TW) .page-head h1,:lang(zh-Hant-HK) .page-head h1,:lang(ja) .theme-intro h3,:lang(zh-Hant-TW) .theme-intro h3,:lang(zh-Hant-HK) .theme-intro h3,:lang(ja) .theme-sec-head h2,:lang(zh-Hant-TW) .theme-sec-head h2,:lang(zh-Hant-HK) .theme-sec-head h2{letter-spacing:-.02em}
:lang(th) .hero h1,:lang(th) .sec-head h2,:lang(th) .page-head h1,:lang(th) .theme-intro h3,:lang(th) .theme-sec-head h2,:lang(th) .newcard h2,:lang(th) .demo-name{letter-spacing:0;line-height:1.35}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:136px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;word-break:normal;line-break:strict;overflow-wrap:anywhere}
/* Korean wraps at spaces (keep-all); Japanese, Chinese and Thai have no spaces between words and must wrap normally */
:lang(ko) body,body:lang(ko){word-break:keep-all}
:lang(ja) .hero h1,:lang(ja) .sec-head h2,:lang(ja) .theme-intro h3,:lang(ja) .page-head h1,:lang(ja) .theme-sec-head h2,:lang(ja) .newcard h2{word-break:auto-phrase}
.hero h1 em{white-space:nowrap}
@media (min-width:641px){:lang(ja) .hero h1,:lang(zh-Hant-TW) .hero h1,:lang(zh-Hant-HK) .hero h1,:lang(th) .hero h1{font-size:44px}}
:lang(ja) .demo-name{word-break:auto-phrase}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:10px;background:var(--text);color:var(--bg);font-weight:700}
.skip-link:focus{top:12px}
.wrap{width:100%;max-width:1248px;margin-inline:auto;padding-inline:24px}

/* header */
.hd{position:sticky;top:0;z-index:40;background:var(--hd-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:44px;height:var(--header)}
.brand{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
.ring{width:20px;height:20px;border-radius:50%;flex:none;background:conic-gradient(from 210deg,#3DE8C6,#FFC83D,#FF7A45,#FF3D8A,#3DE8C6);-webkit-mask:radial-gradient(circle,transparent 5.2px,#000 5.8px);mask:radial-gradient(circle,transparent 5.2px,#000 5.8px)}
.nav{display:flex;gap:30px;align-self:stretch}
.nav a{position:relative;display:flex;align-items:center;font:600 15px/1 var(--f-body);color:var(--muted);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:var(--text)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--spectrum)}
.picker{position:relative;margin-left:auto}
.picker summary{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);font:600 13px/1 var(--f-body);cursor:pointer;list-style:none}
.picker summary::-webkit-details-marker{display:none}
.picker summary svg{width:14px;height:14px;color:var(--muted)}
.picker .short{display:none}
.picker nav{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:grid;min-width:240px;padding:6px;border-radius:14px;border:1px solid var(--line2);background:var(--menu-bg);box-shadow:var(--menu-shadow)}
.picker nav a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--muted)}
.picker nav a:hover,.picker nav a[aria-current]{background:var(--surface2);color:var(--text)}
.picker nav a span{color:var(--faint);font:700 12px/1.6 var(--f-display)}

/* sections */
main{display:block;padding-bottom:72px}
.sec{margin-top:64px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sec-head h2{margin:0;font:800 26px/1.25 var(--f-kr);letter-spacing:-.035em}
.sec-head p{margin:6px 0 0;color:var(--muted);font-size:15px}
.more{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted);font:600 14px/1 var(--f-body);padding:10px 0;transition:color .15s}
.more:hover{color:var(--text)}
.more svg{width:16px;height:16px}

/* flagship hero: the job result card grammar (grid, magenta + teal glow, ticking number) */
.top{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;border:1px solid var(--line2);background:var(--hero-bg);padding:48px 48px 44px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 40% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 40% 30%,#000 20%,transparent 75%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(46% 62% at 0% 0%,rgba(255,61,138,var(--hero-pink)),transparent 70%),radial-gradient(46% 62% at 100% 100%,rgba(61,232,198,var(--hero-mint)),transparent 72%)}
.kicker{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--f-body);color:var(--muted)}
.chip{--chip:255,255,255;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;border:1px solid rgba(var(--chip),.38);color:rgb(var(--chip));font:700 12.5px/1 var(--f-body);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.chip-pink{--chip:191,36,93}
:root[data-theme="dark"] .chip-pink{--chip:255,61,138}
.chip-mint{--chip:8,125,105;background:rgba(61,232,198,.08)}
:root[data-theme="dark"] .chip-mint{--chip:61,232,198}
.hero h1{margin:20px 0 0;font:800 50px/1.18 var(--f-kr);letter-spacing:-.045em}
.hero h1 em{font-style:normal;background:var(--spectrum-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin:16px 0 0;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:32em}
.search{display:flex;align-items:center;gap:12px;margin-top:26px;height:58px;padding:0 8px 0 18px;border-radius:16px;background:linear-gradient(var(--field-bg),var(--field-bg)) padding-box,var(--spectrum) border-box;border:1.5px solid transparent;box-shadow:var(--field-shadow);transition:transform .2s,box-shadow .2s}
.search:hover{transform:translateY(-1px);box-shadow:var(--field-shadow-2)}
.search>svg{width:20px;height:20px;color:var(--muted);flex:none}
.search>span{flex:1;min-width:0;color:var(--faint);font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search .ph-short{display:none}
.search b{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-radius:11px;background:var(--text);color:var(--bg);font:700 14.5px/1 var(--f-body);white-space:nowrap}
.search b svg{width:16px;height:16px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.quick small{flex:none;white-space:nowrap;color:var(--faint);font:600 12.5px/1 var(--f-body);margin-right:4px}
.quick a{height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--pill);font:600 13px/1 var(--f-body);white-space:nowrap;transition:border-color .15s,background .15s}
.quick a:hover{border-color:var(--line3);background:var(--pill-2)}
.demo-wrap{justify-self:end;width:100%;max-width:470px}
.demo{--tier:255,61,138;--text:#F2F4F8;--muted:#A3A9BA;--faint:#7D8497;--bg:#0B0D12;color-scheme:dark;color:var(--text);position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:22px 22px 18px;background:linear-gradient(160deg,#181C29,#10131C 70%);border:1px solid rgba(255,255,255,.1);box-shadow:var(--demo-shadow,0 18px 50px rgba(28,38,56,.22))}
:root[data-theme="dark"] .demo{--demo-shadow:0 30px 80px rgba(0,0,0,.5)}
.demo::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 100% 0%,rgba(var(--tier),.32),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(255,122,69,.10),transparent 70%);transition:background .6s}
.demo-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 10px}
.demo-top .chip{flex:none}
.demo-name{font:800 24px/1.2 var(--f-kr);letter-spacing:-.03em;min-height:29px}
.demo .chip{--chip:var(--tier);transition:color .4s,border-color .4s}
.demo-sub{margin-top:12px;color:var(--muted);font-size:13.5px}
.demo-num{display:flex;align-items:baseline;gap:4px;margin-top:6px;font:800 60px/1.02 var(--f-display);letter-spacing:-.04em;text-shadow:0 0 26px rgba(var(--tier),.38);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-num small{font:700 18px/1 var(--f-kr);color:var(--muted);letter-spacing:-.02em;margin-right:10px;text-shadow:none}
.demo-clock{display:flex;align-items:center;gap:10px;margin-top:10px;font:800 21px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.demo-clock .ms{margin-left:-10px;color:var(--muted)}
.demo-clock i{width:8px;height:8px;border-radius:50%;background:rgb(var(--tier));box-shadow:0 0 10px rgb(var(--tier));animation:yn-blink 1s steps(2) infinite}
.demo-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--muted)}
.demo-foot b{margin-left:8px;color:var(--text);font:800 17px/1 var(--f-display);font-variant-numeric:tabular-nums}
.demo-foot .dday{color:rgb(var(--tier));font:800 16px/1 var(--f-display)}
.demo-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:var(--faint);font-size:12.5px}
.demo-caption a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.demo-dots{display:flex;gap:5px}
.demo-dots i{width:6px;height:6px;border-radius:50%;background:var(--dot,rgba(28,38,56,.16));transition:background .3s,width .3s}
.demo-dots i.on{width:16px;border-radius:3px;background:var(--dot-on,rgba(28,38,56,.5))}
:root[data-theme="dark"] .demo-dots{--dot:rgba(255,255,255,.18);--dot-on:rgba(255,255,255,.6)}
@keyframes yn-blink{50%{opacity:.25}}

/* NEW strip under the flagship */
.newcard{position:relative;isolation:isolate;overflow:hidden;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(--newcard-bg);padding:20px 26px 20px 20px;transition:border-color .2s,transform .2s}
.newcard:hover{border-color:rgba(61,232,198,.4);transform:translateY(-2px)}
.newcard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 120% at 0% 50%,rgba(61,232,198,var(--glow)),transparent 70%),radial-gradient(30% 120% at 100% 50%,rgba(255,200,61,.06),transparent 70%)}
.newcard .art{width:96px;height:96px;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
.newcard h2{margin:10px 0 0;font:800 23px/1.32 var(--f-kr);letter-spacing:-.04em}
.newcard h2 em{font-style:normal;color:var(--mint-ink)}
.newcard p{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.meter{display:grid;gap:9px;min-width:0}
.meter .you{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.meter .you>small{font:700 13px var(--f-kr);color:var(--muted)}
.meter .ynb-ans{font-size:26px}
.meter .ynb-ans .ynb-dig{color:var(--mint-ink);text-shadow:var(--mint-glow)}
.meter .ynb-ans small{color:var(--text);font:800 26px/1 var(--f-display);margin:0 4px}
.meter ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.meter li{height:10px;border-radius:3px;background:rgba(61,232,198,calc(.10 + var(--i) * .1))}
.meter li.me{background:var(--text);box-shadow:var(--me-glow)}
.meter .ends{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--faint)}
.meter .ends b{color:var(--muted);font-weight:700}
/* the NEW slot's two cards (f/app.js feature()): the head script's pick shows one, the other takes no space */
html:not([data-new-pick="1"]) .newcard[data-new-slot="1"],html[data-new-pick="1"] .newcard[data-new-slot="0"]{display:none}
/* 이민 가챠 in the NEW slot: the Fun pink, and the gacha's own asset quick picks over the home size */
.newcard[data-service="emigrate"]:hover{border-color:rgba(255,61,138,.4)}
.newcard[data-service="emigrate"]::before{background:radial-gradient(40% 120% at 0% 50%,rgba(255,61,138,var(--glow)),transparent 70%),radial-gradient(30% 120% at 100% 50%,rgba(255,200,61,.06),transparent 70%)}
.newcard[data-service="emigrate"] h2 em{color:var(--pink-ink)}
.meter-chips .ynb-ans .ynb-dig{color:var(--pink-ink);text-shadow:var(--pink-glow)}
.meter ol.chips{display:flex;flex-wrap:wrap;gap:6px}
.meter .chips li{height:auto;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--pill);color:var(--muted);font:700 12.5px/1.2 var(--f-body);white-space:nowrap}
.meter .chips li.me{background:var(--text);border-color:transparent;color:var(--bg);box-shadow:var(--me-chip,none)}
:root[data-theme="dark"] .meter .chips li.me{--me-chip:0 0 14px rgba(255,255,255,.35)}
.newcard .cta{display:flex;align-items:center;gap:14px;font:700 15px/1.3 var(--f-body);white-space:nowrap}
.newcard .cta .meta{display:block;margin-top:4px;color:var(--faint);font:500 12.5px/1 var(--f-body)}
.arrowbtn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--text);color:var(--bg);flex:none;transition:transform .2s}
.newcard:hover .arrowbtn{transform:translateX(3px)}
.arrowbtn svg{width:18px;height:18px}

/* grids of shared cards */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid3 .ynb-wide{grid-column:span 2}
.grid3 .ynb-wide.flat{grid-column:auto}
.pop .yn-bn-card{min-height:214px}

/* theme tabs */
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{--c:61,232,198;--ct:7,113,95;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);color:var(--muted);font:700 15px/1 var(--f-body);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.ynb-t-prepare.tab,.ynb-t-prepare .tab{--c:255,200,61;--ct:147,97,0}
.tab.ynb-t-prepare{--c:255,200,61;--ct:147,97,0}.tab.ynb-t-fun{--c:255,61,138;--ct:191,36,93}
.tab i{width:8px;height:8px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c));opacity:.55}
.tab span{color:var(--faint);font:700 12.5px/1 var(--f-display)}
.tab:hover{color:var(--text)}
.tab[aria-selected=true]{color:var(--text);background:var(--surface2);border-color:rgba(var(--c),.5)}
.tab[aria-selected=true] i{opacity:1}
.tab[aria-selected=true] span{color:rgb(var(--ct))}
.theme-panel{--c:61,232,198;--ct:7,113,95;display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:stretch}
.theme-panel.ynb-t-prepare{--c:255,200,61;--ct:147,97,0}.theme-panel.ynb-t-fun{--c:255,61,138;--ct:191,36,93}
.theme-intro{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid rgba(var(--c),.22);background:linear-gradient(180deg,rgba(var(--c),.08),rgba(var(--c),.01) 70%),var(--bg2);padding:24px 22px 20px}
.theme-intro::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(var(--c),calc(var(--glow) * 1.7)),transparent 70%);z-index:-1}
.theme-intro .name{font:800 14px/1 var(--f-body);color:rgb(var(--ct));display:flex;align-items:center;gap:8px}
.theme-intro .name i{width:8px;height:8px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c))}
.theme-intro h3{margin:14px 0 0;font:800 24px/1.32 var(--f-kr);letter-spacing:-.04em}
.theme-intro p{margin:10px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}
.theme-intro .count{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font:600 13.5px/1 var(--f-body)}
.theme-intro .more{color:var(--text);padding:0}
.theme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.all-tile{display:flex;align-items:center;justify-content:center;gap:8px;min-height:92px;border-radius:16px;border:1px dashed rgba(var(--ct),.35);background:rgba(var(--c),.03);color:rgb(var(--ct));font:700 14.5px/1 var(--f-body);transition:background .2s,border-color .2s}
.all-tile:hover{background:rgba(var(--c),.08);border-color:rgba(var(--c),.6)}
.all-tile svg{width:16px;height:16px}

/* Fun board teaser (KR) */
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* the home's ad slots (f/ads.js): the sections' spacing around them while they hold an ad or a reservation; an empty one takes none (the engine's rule) */
main>.wrap>.yn-ad{--yn-ad-m:64px}
main>.wrap>.yn-ad[data-ad-pos="102"]{--yn-ad-m:64px auto 0}
/* the banner under the header (100, owner 2026-10-29; src/ads/place/rules/50-community.js): its box is kept from the first paint
   (12px under the header, the 16px label and its 6px gap, the unit, 24px to what follows), so nothing moves when the ad comes.
   Phones 320x100 across the full width; computers 728x90, or 970x90 when the column is 990px or wider (34px side padding = the
   column's 24px + 10px). It closes when the guard held the ad scripts, when its slot closed or was switched off, and when the
   runtime never came (8 s). min-height: a unit taller than the box (a phone unit after a rotation) is never cut off */
.yn-box{box-sizing:border-box;overflow:hidden}
.yn-box>.yn-ad{--yn-ad-m:0!important}
.yn-box-top{min-height:158px;padding:12px 0 24px}
@media (min-width:961px){.yn-box-top{min-height:148px;max-width:1248px;margin-inline:auto;padding:12px 34px 24px}}
html.yn-ad-hold .yn-box,.yn-box.yn-box-off,.yn-box:has(>.yn-ad.yn-ad-off){display:none}
html:not(.yn-box-live) .yn-box{animation:yn-box-gone 0s 8s forwards}
@keyframes yn-box-gone{to{min-height:0;height:0;padding:0;margin:0}}
.post{display:flex;flex-direction:column;gap:12px;min-width:0}
.post .ph{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:16px;overflow:hidden;background:var(--surface2);border:1px solid var(--line)}
.post .ph img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.post:hover .ph img{transform:scale(1.04)}
.post .ph-empty{display:grid;place-items:center;height:100%;color:var(--faint);font:800 22px/1 var(--f-display)}
.post .pick{position:absolute;left:10px;top:10px;height:24px;padding:0 9px;display:inline-flex;align-items:center;border-radius:7px;background:rgba(11,13,18,.82);color:var(--yellow);font:700 12px/1 var(--f-body)}
.post .cat{color:var(--faint);font:600 12.5px/1 var(--f-body);min-height:13px}
.post strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 16px/1.45 var(--f-kr);letter-spacing:-.03em;min-height:2.9em}
.post:hover strong{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--underline)}
.post-skeleton .ph,.post-skeleton .cat,.post-skeleton strong{background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:yn-shimmer 1.4s linear infinite;border-radius:10px}
.post-skeleton .cat{width:40%}
@keyframes yn-shimmer{to{background-position:-200% 0}}

/* all features */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:44px}
.page-head h1{margin:0;font:800 38px/1.2 var(--f-kr);letter-spacing:-.045em}
.page-head p{margin:10px 0 0;color:var(--muted);font-size:16px}
.find{position:relative;width:min(380px,100%);flex:none}
.find input{width:100%;height:50px;padding:0 16px 0 46px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font:500 15px/1 var(--f-body);outline:none;transition:border-color .15s}
.find input::placeholder{color:var(--faint)}
.find input:focus{border-color:var(--line3)}
.find svg{position:absolute;left:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--muted)}
.jump{position:sticky;top:var(--header);z-index:30;margin-top:28px;background:var(--jump-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;gap:8px;padding-block:12px;overflow-x:auto;scrollbar-width:none}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{--c:61,232,198;--ct:7,113,95;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--line2);color:var(--muted);font:700 14px/1 var(--f-body);white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.jump a.ynb-t-prepare{--c:255,200,61;--ct:147,97,0}.jump a.ynb-t-fun{--c:255,61,138;--ct:191,36,93}
.jump a i{width:7px;height:7px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 8px rgb(var(--c))}
.jump a span{color:var(--faint);font:700 12px/1 var(--f-display)}
.jump a.on{color:var(--text);border-color:rgba(var(--c),.5);background:var(--surface2)}
.theme-sec{--c:61,232,198;--ct:7,113,95;margin-top:48px}
.theme-sec.ynb-t-prepare{--c:255,200,61;--ct:147,97,0}.theme-sec.ynb-t-fun{--c:255,61,138;--ct:191,36,93}
:root[data-theme="dark"] :is(.tab,.theme-panel,.jump a,.theme-sec){--ct:var(--c)}
.theme-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.theme-sec-head .name{display:flex;align-items:center;gap:9px;font:800 14px/1 var(--f-body);color:rgb(var(--ct))}
.theme-sec-head .name i{width:8px;height:8px;border-radius:50%;background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c))}
.theme-sec-head h2{margin:10px 0 0;font:800 26px/1.3 var(--f-kr);letter-spacing:-.04em}
.theme-sec-head p{margin:6px 0 0;color:var(--muted);font-size:15px}
.theme-sec-head .n{font:800 15px/1 var(--f-display);color:var(--faint);white-space:nowrap}
.rows{display:grid;gap:10px}
.mob,.mbr{display:none}
.empty{margin-top:40px;padding:48px 20px;border-radius:var(--radius);border:1px dashed var(--line2);text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--text);font:700 18px/1.4 var(--f-kr);margin-bottom:6px}

/* footer */
.ft{border-top:1px solid var(--line);margin-top:24px}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:28px}
.ft .tag{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px}
.ft .brand{font-size:16px}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:13.5px}
.ft nav a:hover{color:var(--text)}

/* phone tab bar (the root page's; the market homes carry the shared nav). Above Google's bottom anchor ad: the ad runtime
   measures it into html{--yn-anchor} (handle + 16px, phones only), the bar moves up by it and the body pads for it. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--tabbar-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(calc(-1 * var(--yn-anchor,0px)));transition:transform .2s ease-out}
@media (prefers-reduced-motion:reduce){.tabbar{transition:none}}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:62px;color:var(--faint);font:600 11.5px/1 var(--f-body)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar a[aria-current]{color:var(--text)}
.tabbar a[aria-current] svg{color:var(--on)}

@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .demo-wrap{justify-self:start}
  .newcard{grid-template-columns:auto minmax(0,1fr) auto}
  .newcard .meter{grid-column:2 / 3}
  .newcard .cta{grid-row:1 / 3;grid-column:3}
  .theme-panel{grid-template-columns:minmax(0,1fr)}
  .theme-intro .count{padding-top:16px}
}
@media (max-width:1020px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--header:56px}
  .nav{display:none}
  .tabbar{display:grid}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px) + var(--yn-anchor,0px))}
  html{scroll-padding-top:124px}
  .page-head{flex-direction:column;align-items:stretch}
  .find{width:100%}
}
@media (max-width:640px){
  main>.wrap>.yn-ad{--yn-ad-m:44px}
  main>.wrap>.yn-ad[data-ad-pos="102"]{--yn-ad-m:44px auto 0}
  .wrap{padding-inline:16px}
  .picker .long{display:none}.picker .short{display:inline}
  .picker summary{height:34px;padding:0 11px}
  .top{margin-top:16px;gap:14px}
  .hero{padding:26px 20px 22px;border-radius:22px;gap:22px}
  .hero h1{font-size:31px;line-height:1.24;margin-top:16px}
  .hero .lede{font-size:15px;margin-top:12px}
  .search{height:54px;margin-top:20px;padding-left:15px}
  .search>span{font-size:14.5px}
  .search .ph-long{display:none}.search .ph-short{display:inline}
  .search b{height:40px;padding:0 13px;font-size:14px}
  .quick{flex-wrap:nowrap;overflow-x:auto;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .quick::-webkit-scrollbar{display:none}
  .demo-wrap{max-width:none}
  .demo{padding:16px 16px 13px;border-radius:18px}
  .demo-name{font-size:18px;min-height:22px}
  .demo-sub{margin-top:8px;font-size:12.5px}
  .demo-num{font-size:40px;margin-top:4px}
  .demo-num small{font-size:14px;margin-right:8px}
  .demo-clock{font-size:15px;margin-top:8px}
  .demo-foot{margin-top:12px;padding-top:10px;font-size:12px}
  .demo-foot b,.demo-foot .dday{font-size:14px}
  .demo-caption{margin-top:10px}
  .newcard{grid-template-columns:minmax(0,1fr) auto;gap:14px 12px;padding:20px 18px 18px}
  .newcard .art{grid-row:1;grid-column:2;width:76px;height:76px;margin:-6px -6px 0 0}
  .newcard .copy{grid-row:1;grid-column:1}
  .newcard h2{font-size:20px}
  .newcard p{font-size:14px}
  .newcard .meter{grid-column:1 / -1;grid-row:2}
  .newcard .cta{grid-column:1 / -1;grid-row:3;justify-content:space-between;padding-top:4px}
  .sec{margin-top:44px}
  .sec-head{margin-bottom:14px}
  .sec-head h2{font-size:22px}
  .sec-head p{font-size:14px}
  .grid3{grid-template-columns:minmax(0,1fr);gap:12px}
  .grid3 .ynb-wide{grid-column:auto}
  /* popular on phones: two-up tiles, art on top, the short question */
  .pop{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pop.pop-3{grid-template-columns:minmax(0,1fr)}
  .pop .yn-bn-card{min-height:0;padding:14px 14px 16px;border-radius:18px}
  .pop .yn-bn-card .ynb-art{position:static;order:-1;width:60px;height:60px;margin:-4px 0 6px -6px}
  .pop .yn-bn-card .ynb-label{position:absolute;top:12px;right:12px}
  .pop .yn-bn-card .ynb-label>:not(.ynb-rank){display:none}
  .pop .yn-bn-card .ynb-q,.pop .yn-bn-card .ynb-d,.pop .yn-bn-card .ynb-meta,.pop .yn-bn-card .ynb-go{display:none}
  .pop .yn-bn-card .ynb-qs{display:block;margin:0;font:800 15.5px/1.4 var(--ynb-kr);letter-spacing:-.035em}
  .pop .yn-bn-card .ynb-foot{padding:12px 0 0;gap:0}
  .pop .yn-bn-card .ynb-ans{font-size:19px}
  .pop .yn-bn-card .ynb-ans small{font-size:11.5px;margin:0 4px 0 2px}
  .tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:1 1 auto;justify-content:center;padding:0 12px;font-size:14px;white-space:nowrap}
  .theme-intro{padding:18px 18px 16px}
  .theme-intro::after{width:160px;height:160px;right:-50px;top:-50px}
  .theme-intro h3{font-size:19px;margin-top:10px}
  .theme-intro p{font-size:14px;margin-top:6px}
  .theme-intro .count{display:none}
  .theme-list{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px}
  .all-tile{min-height:52px}
  .posts{gap:12px}
  .post{gap:9px}
  .post strong{font-size:14.5px}
  .page-head{margin-top:28px}
  .page-head h1{font-size:28px}
  .page-head p{font-size:14.5px}
  .theme-sec{margin-top:36px}
  .theme-sec-head h2{font-size:21px}
  .theme-sec-head p{font-size:14px}
  .desk{display:none}.mob{display:grid}.mbr{display:inline}
  .ft .wrap{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* the root page carries no /app/nav/nav.css: the ad runtime's slot labels (color:inherit at 50%, src/ads/place/engine.js) read
   on light at full opacity in the muted text, as nav.css sets them on every other page */
:root:not([data-theme="dark"]) :is(.yn-ad.yn-ad-res,.yn-ad.yn-ad-req,.yn-ad.yn-ad-fb,.yn-ad.yn-ad-on,.yn-ad-rail)>.yn-ad-lbl{color:var(--muted);opacity:1}