/* ---------- tokens: light on bare :root, dark twice (system + explicit) ---------- */
:root{
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#0B0D12;--bg-2:#0F121A;--surface:#12151E;--surface-2:#191D29;--surface-3:#232838;
  --glass:rgba(255,255,255,.05);--glass-b:rgba(255,255,255,.10);--hl:rgba(255,255,255,.14);
  --border:rgba(255,255,255,.08);--border-2:rgba(255,255,255,.20);
  --text:#F2F4F8;--muted:#A3A9BA;--faint:#858CA0;   /* 2026-09-19 다크 일원화: 라이트 테마를 걷어냈다(오너 결정). 카드·공유 이미지·배너·OG 가 원래 다크 고정이었고, 가독성 버그가 전부 라이트에서만 났다. */
  --inv:#F5F6FA;--inv-text:#0B0D12;--ring:#F5F6FA;--ring-rgb:245,246,250;
  --shadow-1:0 1px 2px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.6);
  --glow-a:.5;--grid:rgba(255,255,255,.045);--top-bg:rgba(11,13,18,.72);--ov:rgba(4,5,9,.8);
  --low:#3DE8C6;--med:#FFC83D;--high:#FF7A45;--vhigh:#FF3D8A;--sky:#5CB8FF;--pos:#3DE8C6;--neg:#FF5E9B;--neg-soft:rgba(255,94,155,.18);
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A3A9BA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  /* the card tokens — kept separate so a card stays a dark object wherever it is drawn */
  --card-bg:#0F121A;--card-bg-2:#151A27;--card-text:#F5F6FA;--card-muted:#A5ABBC;--card-faint:#828A9D;--card-border:rgba(255,255,255,.10);--card-hl:rgba(255,255,255,.16);--card-glass:rgba(255,255,255,.07);
  --c-low:#3DE8C6;--c-low-rgb:61,232,198;--c-med:#FFC83D;--c-med-rgb:255,200,61;--c-high:#FF7A45;--c-high-rgb:255,122,69;--c-vhigh:#FF3D8A;--c-vhigh-rgb:255,61,138;--c-sky:#5CB8FF;--c-sky-rgb:92,184,255;
  --spectrum:var(--spectrum-vivid);
  --spectrum-vivid:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);
  --seg-on:#262B3A;--halo:.22;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.5 'Instrument Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#root{min-height:100vh;display:flex;flex-direction:column;--f-display:'Sora','Noto Sans KR',system-ui,-apple-system,sans-serif;--f-body:'Instrument Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;font-family:var(--f-body)}
#root[lang="ko"]{word-break:keep-all}
#root[lang="ja"]{--f-display:'Sora','Noto Sans JP',system-ui,-apple-system,sans-serif;--f-body:'Instrument Sans','Noto Sans JP',system-ui,-apple-system,'Segoe UI',sans-serif}
#root[lang="zh-TW"]{--f-display:'Sora','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;--f-body:'Instrument Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.card :focus-visible{outline-color:#fff}
::selection{background:rgba(61,232,198,.35)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:1040px}
@media(min-width:768px){.wrap{padding:0 32px}}
.mark{display:inline-block;width:18px;height:18px;border-radius:50%;background:conic-gradient(from 210deg,#3DE8C6,#FFC83D,#FF7A45,#FF3D8A,#3DE8C6);-webkit-mask:radial-gradient(circle,transparent 38%,#000 43%);mask:radial-gradient(circle,transparent 38%,#000 43%);flex:none}
.t-low{color:var(--low)}.t-med{color:var(--med)}.t-high{color:var(--high)}.t-vhigh{color:var(--vhigh)}.t-sky{color:var(--sky)}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.risk{display:inline-flex;align-items:center;gap:6px;font:600 12px var(--f-body);white-space:nowrap}
.risk i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;flex:none}
.tile{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface-2);font-size:17px;flex:none;line-height:1}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--top-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.top .wrap-wide{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 16px/1 var(--f-display);letter-spacing:-.01em;text-decoration:none}
.nav{display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;height:44px;font:500 14px/1 var(--f-body);color:var(--muted);text-decoration:none;padding:0 10px;border-radius:10px;transition:color .15s,background .15s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.on{color:var(--text)}
.lang{position:relative;display:inline-flex;align-items:center;margin-left:6px}
.lang svg{position:absolute;left:10px;width:14px;height:14px;pointer-events:none;color:var(--muted)}
.lang select{appearance:none;-webkit-appearance:none;height:44px;padding:0 26px 0 14px;border-radius:999px;background:var(--glass) var(--chev) no-repeat right 10px center;border:1px solid var(--glass-b);font:500 13px var(--f-body);cursor:pointer}
.lang select:hover{border-color:var(--border-2)}
.nav a{white-space:nowrap}
.lang.cc{margin-left:4px}
.lang.cc select{padding-left:12px}
.brand{white-space:nowrap}
@media(max-width:479px){.top .wrap-wide{padding:0 14px;gap:8px}.nav a{padding:0 6px;font-size:13px}.lang{margin-left:0}.lang svg{left:8px}.lang select{padding:0 22px 0 11px;font-size:12px;background-position:right 8px center}.lang.cc{margin-left:2px}.lang.cc select{padding-left:10px}}
@media(max-width:399px){.top .wrap-wide{padding:0 14px;gap:8px}.nav a{padding:0 6px;font-size:13px}.lang{margin-left:0}.lang svg{left:8px}.lang select{padding:0 22px 0 11px;font-size:12px;background-position:right 8px center}}

/* ---------- hero ---------- */
.hero{position:relative;padding:32px 0 32px;isolation:isolate;z-index:1}   /* overflow 는 .hero-bg 로 옮겼다: 히어로가 잘라내면 검색 제안 목록(.ac)이 아래쪽에서 잘려 클릭이 안 된다 */
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}   /* 장식용 글로우만 히어로 박스 안으로 클립 */
.hero-bg i{position:absolute;border-radius:50%;opacity:var(--glow-a)}
.hero-bg .g1{width:min(76vw,640px);aspect-ratio:1;left:-22%;top:-38%;background:radial-gradient(closest-side,#3DE8C6,transparent 72%)}
.hero-bg .g2{width:min(90vw,820px);aspect-ratio:1;right:-30%;top:-34%;background:radial-gradient(closest-side,#FF3D8A 0%,#FF7A45 38%,transparent 72%)}
.hero-bg .g3{width:min(56vw,460px);aspect-ratio:1;left:30%;bottom:-50%;background:radial-gradient(closest-side,#FFC83D,transparent 70%);opacity:calc(var(--glow-a)*.55)}
.hero-bg .grid{border-radius:0;opacity:1;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 25%,transparent 80%)}
@media(prefers-reduced-motion:no-preference){.hero-bg .g1{animation:drift 16s ease-in-out infinite alternate}.hero-bg .g2{animation:drift 20s ease-in-out infinite alternate-reverse}}
.hero .wrap{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.h1{font:800 clamp(33px,9.6vw,40px)/1.06 var(--f-display);letter-spacing:-.03em;margin:16px 0 12px;text-wrap:balance}
.h1 em{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
#root[lang="ko"] .h1,#root[lang="ja"] .h1{letter-spacing:-.02em;font-weight:700;line-height:1.18}
#root[lang="ja"] .h1 .hero-phrase{display:inline-block}
@media(max-width:767px){#root[lang="ja"] .h1{font-size:clamp(29px,8.5vw,40px)}}
.hero-sub{font:400 16px/1.5 var(--f-body);color:var(--muted);margin:0 0 20px;max-width:46ch}
#panel{width:100%;display:flex;flex-direction:column;align-items:stretch}
@media(min-width:768px){
  .hero{padding:80px 0 56px;text-align:center}
  .hero .wrap{align-items:center}
  .h1{font-size:64px;letter-spacing:-.04em;margin:22px 0 14px;max-width:15ch}
  #root[lang="ko"] .h1,#root[lang="ja"] .h1{font-size:54px;max-width:20ch}
  .hero-sub{font-size:18px;margin-bottom:30px}
  #panel{align-items:center}
}
@media(min-width:1100px){.h1{font-size:76px}}

/* segmented tabs */
.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;max-width:340px;margin-bottom:12px}
.seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--seg-on);box-shadow:var(--shadow-1),inset 0 1px 0 var(--hl);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.seg[data-tab="major"] .seg-ind{transform:translateX(100%)}
.seg [role="tab"] svg{width:16px;height:16px;flex:none;opacity:.75}
.seg [role="tab"][aria-selected="true"] svg{opacity:1}
.seg [role="tab"]{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:10px;font:600 14px var(--f-body);color:var(--muted);transition:color .2s}
.seg [role="tab"][aria-selected="true"]{color:var(--text)}

/* search */
.search{position:relative;width:100%;max-width:640px;z-index:5}
.search::before{content:"";position:absolute;inset:-2px;border-radius:22px;background:var(--spectrum-vivid);filter:blur(22px);opacity:var(--halo);z-index:-1;pointer-events:none;transition:opacity .25s}
.search:focus-within::before{opacity:calc(var(--halo) + .16)}
.search-in{position:relative;display:flex;align-items:center;gap:12px;height:60px;padding:0 12px 0 18px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--shadow-2),inset 0 1px 0 var(--hl);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:border-color .2s,box-shadow .2s;text-align:left}
.search-in:focus-within{border-color:var(--border-2);box-shadow:0 0 0 4px rgba(var(--ring-rgb),.2),var(--shadow-2),inset 0 1px 0 var(--hl)}
.search-in>svg{width:22px;height:22px;flex:none;color:var(--muted)}
.search-in input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font:500 17px var(--f-body);color:var(--text);padding:0;margin:0}
.search-in input::placeholder{color:transparent}
.ph{position:absolute;left:52px;right:60px;top:50%;transform:translateY(-50%);font:500 17px var(--f-body);color:var(--faint);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph b{font-weight:500;color:var(--muted)}
.ph i{display:inline-block;width:2px;height:1.05em;vertical-align:-.15em;background:var(--muted);margin-left:1px;animation:blink 1s steps(2) infinite}
.search-in:focus-within .ph i{display:none}
.has-val .ph{display:none}
.search-clear{display:none;width:32px;height:32px;border-radius:50%;background:var(--surface-2);color:var(--muted);align-items:center;justify-content:center;flex:none}
.search-clear svg{width:14px;height:14px}
.has-val .search-clear{display:inline-flex}
.kbd{display:none;font:500 11px/1 var(--f-body);color:var(--faint);border:1px solid var(--border);border-radius:6px;padding:5px 7px;letter-spacing:.02em;white-space:nowrap}
@media(hover:hover) and (min-width:768px){.kbd{display:inline-block}.has-val .kbd{display:none}}
@media(min-width:768px){.search-in{height:66px;border-radius:20px;padding:0 14px 0 22px}.search-in input,.ph{font-size:18px}.ph{left:58px}}
.ac{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);max-height:min(60vh,420px);overflow:auto;animation:fadein .16s ease-out;text-align:left}
.ac-opt{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:11px;cursor:pointer;min-height:48px}
.ac-opt.on,.ac-opt:hover{background:var(--surface-2)}
.ac-name{flex:1;min-width:0;font-weight:600;display:flex;flex-direction:column;line-height:1.2}
.ac-name small{font-weight:400;color:var(--faint);font-size:12px;margin-top:2px}
.ac-h{padding:10px 12px 6px;font-size:12px;color:var(--muted)}
.ac-alt{padding:8px 12px 6px;border-top:1px solid var(--border);margin-top:4px}
.ac-alt a{font-size:13px;color:var(--muted)}
.ac-route .ac-name small{color:var(--muted)}
/* 없는 직업 요청 행: 목록의 마지막 줄. role="option" 이 아니고 data-i 도 없으니 방향키·Enter 흐름 밖에 있다 */
.ac-req{border-top:1px solid var(--border);margin-top:4px;padding:2px}
.ac-req-b{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:11px;background:none;font:500 13px var(--f-body);color:var(--muted);text-align:left;cursor:pointer}
.ac-req-b svg{width:15px;height:15px;flex:none}
.ac-req-b:hover,.ac-req-b:focus-visible{background:var(--surface-2);color:var(--text)}

/* controls */
.ctrl-row{display:flex;gap:8px;margin-top:12px;width:100%;max-width:560px}
.sel{position:relative;display:inline-flex;min-width:0}
.sel select{appearance:none;-webkit-appearance:none;height:44px;width:100%;padding:0 30px 0 12px;border-radius:12px;background:var(--glass) var(--chev) no-repeat right 10px center;border:1px solid var(--glass-b);font:500 14px var(--f-body);cursor:pointer;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s}
.sel select:hover{border-color:var(--border-2)}
.ctrl-row .sel:first-child{flex:1 1 42%}
.ctrl-row.three .sel{flex:1 1 0}
.ctrl-lbl{font:500 12px var(--f-body);color:var(--faint);white-space:nowrap}
.mini-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b);height:44px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mini-seg button{padding:0 11px;border-radius:9px;font:600 13px var(--f-body);color:var(--muted);white-space:nowrap;transition:background .15s,color .15s;font-variant-numeric:tabular-nums}
.mini-seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--text);box-shadow:var(--shadow-1),inset 0 1px 0 var(--hl)}
@media(max-width:519px){.mini-seg button{padding:0 8px;font-size:12px}.sel select{padding-left:10px;font-size:13px}}
.trend{width:100%;max-width:640px;margin-top:8px}
.trend-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;text-align:left}
.trend-head::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--border),transparent)}
.trend-head .ctrl-lbl{font-size:11px;line-height:14px;color:var(--muted)}
.trend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:500 13px var(--f-body);color:var(--text);text-decoration:none;transition:transform .15s,background .15s,border-color .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip .tile{width:30px;height:30px;font-size:14px}
.chip:hover{transform:translateY(-1px);border-color:var(--border-2);background:var(--surface)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:transparent}
.chip[aria-pressed="true"] .tile{background:rgba(127,127,127,.25)}
.trend .chip{min-width:0;min-height:44px;height:auto;gap:8px;padding:6px 10px;border-radius:12px;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.trend .chip .tile{width:26px;height:26px;font-size:14px;background:rgba(255,255,255,.045)}
.trend .chip-name{min-width:0;font-weight:500;line-height:1.2;overflow-wrap:anywhere;text-wrap:pretty}
.trend .chip:hover{background:var(--surface-2)}
.trend .chip:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media(min-width:768px){.trend{margin-top:16px}.trend-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.trend .chip{min-height:48px}}
@media(max-width:767px){.hero{padding-top:16px}.hero .h1{margin-top:8px}.hero .hero-sub{margin-bottom:12px}.hero .seg{margin-bottom:8px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:14px;font:600 15px var(--f-body);text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s,opacity .15s,border-color .15s;border:1px solid transparent}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--inv);color:var(--inv-text);box-shadow:var(--shadow-1)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{background:var(--glass);border-color:var(--glass-b);color:var(--text);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-secondary:hover{border-color:var(--border-2);background:var(--surface)}
.btn-ghost{color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--surface-2)}
.btn-sm{height:44px;padding:0 14px;font-size:14px;border-radius:12px}

/* ---------- sections / pages ---------- */
.sec{margin-top:48px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-t{font:700 20px/1.2 var(--f-display);letter-spacing:-.02em;margin:0}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:600 11px var(--f-body);letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--muted);white-space:nowrap}
@media(min-width:768px){.sec{margin-top:72px}.sec-t{font-size:24px}}
.page{padding:24px 0 64px}
.page-h{font:800 32px/1.1 var(--f-display);letter-spacing:-.03em;margin:0 0 8px;text-wrap:balance}
.page-sub{font-size:15px;color:var(--muted);margin:0 0 20px;max-width:60ch}
@media(min-width:768px){.page{padding:40px 0 96px}.page-h{font-size:44px}.page-sub{font-size:17px}}
.back{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--f-body);color:var(--muted);text-decoration:none;margin:0 0 16px -6px;padding:6px 10px 6px 6px;border-radius:999px;transition:.15s}
.back:hover{color:var(--text);background:var(--surface-2)}
.back svg{width:16px;height:16px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.list{list-style:none;margin:0;padding:4px 0}
.list li{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:58px}
.list li+li{border-top:1px solid var(--border)}
.list a.grow{flex:1;min-width:0;font-weight:600;text-decoration:none}
.list a.grow:hover{text-decoration:underline;text-underline-offset:3px}
.list .grow{flex:1;min-width:0}
.list .end{margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.list .end b{font:700 20px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.list .end small{font-size:12px;color:var(--muted);margin-top:2px}
.check{width:28px;height:28px;border-radius:50%;background:rgba(61,232,198,.16);color:var(--low);display:grid;place-items:center;flex:none}
.check svg{width:14px;height:14px}
.rlist{list-style:none;margin:0;padding:4px 0}
.rlist li a{display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:60px;text-decoration:none;color:inherit;transition:background .15s}
.rlist li a:hover{background:var(--surface-2)}
.rlist li+li{border-top:1px solid var(--border)}
.rk{font:700 18px var(--f-display);color:var(--faint);width:26px;font-variant-numeric:tabular-nums;text-align:center;flex:none}
.rlist li:nth-child(-n+3) .rk{color:var(--text)}
.rn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font-weight:600}
.rn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;line-height:1.2}
.rn-t .risk{font-size:11.5px}
@media(min-width:640px){.rn-t{flex-direction:row;align-items:center;gap:12px}.rn-t .rn-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rn-t .risk{font-size:12px}}
.ry{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;flex:none}
.ry b{font:700 20px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ry small{font-size:12px;color:var(--muted);margin-top:2px}
/* result-page rankings board: two abridged lists of the same table, the visitor's row highlighted */
.board-lead{font:700 19px/1.3 var(--f-display);letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.board-lead b{font-weight:800}
.board-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.board-h{margin:0 0 8px;font:600 13px var(--f-body);color:var(--muted)}
.board-h .risk{font-size:13px;white-space:normal}
.board .rn-t{flex-direction:column;align-items:flex-start;gap:3px}
.board .rn-t .rn-n{white-space:normal;overflow:visible}
.board .rlist-tail li:nth-child(-n+3) .rk{color:var(--faint)}
.rlist li.me a{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--text)}
.rlist li.me .rk{color:var(--text)}
.me-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font:700 11px var(--f-display);color:var(--inv-text);background:var(--inv);white-space:nowrap;flex:none}
.rlist li.rlist-gap{display:flex;align-items:center;justify-content:center;height:22px;padding:0;border-top:1px dashed var(--border-2);color:var(--faint);font:700 14px/1 var(--f-display);letter-spacing:.2em}
.rlist li.rlist-gap+li{border-top:0}
@media(min-width:768px){.board-lead{font-size:22px}.board-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.note{font-size:12.5px;color:var(--faint);margin:10px 0 0}
.cta-row{display:flex;gap:8px;flex-wrap:wrap}
.nf{text-align:center;padding:48px 0}

/* ---------- ad slots: AdSense units or the advertiser-recruitment banner — every slot has a reserved height (CLS 0) ---------- */
.xp-slot{margin:40px auto 0;padding:0 20px;max-width:720px;width:100%}
.xp-slot.xp-pair .xp-box{display:flex;flex-direction:column;gap:12px;height:auto;min-height:0}
.sv-principle{margin-top:32px}
@media(min-width:768px){.xp-slot{padding:0 32px;margin-top:48px}}
.xp-box{position:relative;height:100px}
@media(min-width:768px){.xp-h .xp-box{height:90px}}
.xp-box .adsbygoogle{display:block;width:100%;height:100%}
.xp-tag{display:inline-flex;align-items:center;font:600 9px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(0,0,0,.3);padding:4px 6px;border-radius:5px;justify-self:start;white-space:nowrap}
.xp-rec{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"tag tag" "h cta" "s cta";align-items:center;align-content:center;gap:3px 14px;height:100%;padding:10px 14px;border-radius:16px;background:var(--card-bg);color:var(--card-text);border:1px solid var(--card-border);box-shadow:inset 0 1px 0 var(--card-hl);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .15s}
.xp-rec::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 100% 0%,rgba(92,184,255,.16) 0%,transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(61,232,198,.12) 0%,transparent 70%),linear-gradient(180deg,var(--card-bg-2),var(--card-bg))}
.xp-rec:hover{transform:translateY(-1px)}
.xp-rec .xp-tag{grid-area:tag}
.xp-rec b{grid-area:h;min-width:0;font:700 14px/1.2 var(--f-display);letter-spacing:-.01em;text-wrap:pretty}
.xp-rec small{grid-area:s;min-width:0;font:400 12px/1.25 var(--f-body);color:var(--card-muted);text-wrap:pretty}
.xp-cta{grid-area:cta;height:32px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font:600 12px var(--f-body);background:#fff;color:#0B0D12;white-space:nowrap}
/* 가로 배너 (2026-09-19 오너 시안) — 왼쪽 글, 오른쪽 일러스트. 320px 에서는 일러스트를 접는다. */
.ad-cross.ad-bn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;border-radius:20px;min-height:0}
.bn-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.ad-cross .bn-e{font:600 11.5px/1.3 var(--f-body);color:rgba(var(--gh),.95);letter-spacing:-.01em}
.ad-cross .bn-h{display:flex;flex-direction:column;gap:1px;font:800 22px/1.22 var(--f-display);letter-spacing:-.025em;color:var(--card-text)}
.bn-h .bn-h2{color:rgb(var(--gh))}
.ad-cross .bn-d{font:400 12.5px/1.45 var(--f-body);color:var(--card-muted);text-wrap:pretty}
.bn-art{flex:none;width:210px;height:122px;display:block}
.bn-svg{width:100%;height:100%;display:block;overflow:visible}
.bn-img{position:relative;display:block;width:100%;height:100%}
.bn-img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 10px 20px rgba(var(--gh),.5))}
.bn-img::after{content:'';position:absolute;inset:0;background:rgb(var(--gh));mix-blend-mode:color;opacity:.82;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
@media(max-width:719px){.ad-cross.ad-bn{padding:16px}.ad-cross .bn-h{font-size:19px}.bn-art{width:150px;height:92px}}
@media(max-width:479px){.bn-art{width:112px;height:76px}.ad-cross .bn-h{font-size:17px}.ad-cross .bn-d{font-size:11.5px}.ad-cross .bn-e{font-size:10.5px}:lang(en) .ad-cross .bn-h,:lang(es) .ad-cross .bn-h{font-size:15.5px}}   /* 영어·스페인어는 제목이 길어 17px 면 둘째 줄이 두 줄로 꺾인다 */
@media(max-width:359px){.bn-art{display:none}}
.xp-slot.xp-own:not(.xp-side) .xp-box{height:auto;min-height:0}
/* 이 블록의 클래스 이름은 일부러 'ad-' 로 시작하지 않는다(xp-*). EasyList 가 .ad-slot · .ad-side · .ad-tag · .ad-cta 를 통째로 숨겨서,
   차단기를 쓰는 방문자에게는 우리 서비스 안내까지 안 보였다(2026-09-19 확인). AdSense 의 data-ad-* 속성은 그대로다. */
/* 자체 서비스 교차 노출 카드 — 광고 자리에 들어가지만 광고가 아니다: '광고' 라벨도, 외부 링크 표시도 없다. */
.ad-cross{position:relative;display:flex;align-items:center;gap:14px;height:100%;padding:12px 16px;border-radius:16px;background:var(--card-bg);color:var(--card-text);border:1px solid var(--card-border);box-shadow:inset 0 1px 0 var(--card-hl);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .15s,border-color .15s}
.ad-cross::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 100% 0%,rgba(92,184,255,.14) 0%,transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(61,232,198,.1) 0%,transparent 70%),linear-gradient(180deg,var(--card-bg-2),var(--card-bg))}
.ad-cross:hover{transform:translateY(-1px);border-color:var(--card-hl)}
.cx-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08);color:var(--card-text)}
.cx-ic svg{width:21px;height:21px}
.cx-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ad-cross b{font:700 14.5px/1.22 var(--f-display);letter-spacing:-.01em;text-wrap:pretty}
.ad-cross small{font:400 12px/1.3 var(--f-body);color:var(--card-muted);text-wrap:pretty}
.cx-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--card-text)}
.cx-go svg{width:16px;height:16px}
.xp-slot.xp-own:not(.xp-side) .xp-box{height:auto;min-height:92px}   /* 사이드(600px)는 건드리지 않는다 — 레일이 그 높이를 다 쓴다 */
@media(max-width:479px){.ad-cross{gap:11px;padding:11px 13px}.cx-ic{width:38px;height:38px;border-radius:11px}.ad-cross b{font-size:13.5px}.cx-go{width:26px;height:26px}}
/* 오른쪽 기둥의 교차 노출 레일 — 600px 을 네 장이 똑같이 나눠 쓴다 */
.cx-rail{display:flex;flex-direction:column;gap:10px;height:100%}
.cx-rail-h{margin:0 0 2px;font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex:none}
.xp-side .ad-cross.cx-tall{flex:1 1 0;min-height:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;padding:18px 18px;border-radius:18px}
.xp-side .cx-tall .cx-ic{width:46px;height:46px;border-radius:15px;background:rgba(var(--cxh),.16);color:rgb(var(--cxh))}
.xp-side .cx-tall .cx-ic svg{width:23px;height:23px}
.xp-side .cx-tall b{font-size:16px;line-height:1.25;letter-spacing:-.015em}
.xp-side .cx-tall small{font-size:12.5px;line-height:1.4}
.xp-side .cx-tall .cx-go{position:absolute;top:16px;right:16px;width:26px;height:26px;background:rgba(var(--cxh),.14);color:rgb(var(--cxh))}
.xp-side .cx-tall .cx-go svg{width:14px;height:14px}
.xp-side .ad-cross.cx-ill{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px 14px 16px}
.xp-side .cx-ill .bn-tx{flex:1;gap:4px}
.xp-side .cx-ill small.bn-e{font:600 10.5px/1.3 var(--f-body);color:rgba(var(--gh),.95)}
.xp-side .cx-ill b.bn-h{font:800 15.5px/1.25 var(--f-display);letter-spacing:-.02em}
.xp-side .cx-ill small.bn-d{font:400 11.5px/1.4 var(--f-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xp-side .cx-ill .bn-art{width:100px;height:68px}
.xp-side .cx-rail.n5 .cx-ill small.bn-d{display:none}   /* 다섯 장이면 칸이 110px 남짓 — 설명을 접어야 윗줄이 안 잘린다 */
.xp-side .cx-rail.n5 .ad-cross.cx-ill{padding:10px 12px 10px 16px}
.xp-side .cx-rail.n3 .cx-ill .bn-art{width:112px;height:78px}
.xp-side .cx-rail.n3 .cx-ill b.bn-h{font-size:16.5px}
.xp-side .cx-rail.few .ad-cross.cx-ill{flex-direction:column-reverse;align-items:stretch;justify-content:flex-end;gap:14px;padding:18px}
.xp-side .cx-rail.few .cx-ill .bn-tx{flex:none;gap:6px}
.xp-side .cx-rail.few .cx-ill .bn-art{flex:none;width:100%;height:130px}
.xp-side .cx-rail.few .cx-ill b.bn-h{font-size:18.5px}
.xp-side .cx-rail.few .cx-ill small.bn-d{font-size:12.5px}
.xp-side .cx-rail.few .cx-ill small.bn-e{font-size:11.5px}
/* 색조는 모서리 광채로만 — 본문 글자색은 그대로 두어 대비를 지킨다 */
.ad-cross::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 90% at 100% 0%,rgba(var(--cxh),.20) 0%,transparent 62%);opacity:.9}
.ad-cross:hover::after{opacity:1}
.ad-cross .cx-ic{background:rgba(var(--cxh),.15);color:rgb(var(--cxh))}
@media(min-width:768px){.xp-h .xp-rec{grid-template-columns:auto 1fr auto;grid-template-areas:"tag h cta" "tag s cta";gap:2px 14px;padding:10px 18px}.xp-h .xp-rec b{font-size:15px}}
/* tall units: 300×600 side rail (≥1280px only, sticky under the header, 24px from the column) · 300×250 / 336×280 inside the interstitial */
.xp-side,.ad-gate{margin:0;padding:0;max-width:none;width:auto}
.xp-side .xp-box{height:600px}
.ad-gate{margin:14px 16px 0}.ad-gate .xp-box{height:250px}.ad-gate .xp-tag{display:none}
@media(min-width:768px){.ad-gate .xp-box{height:280px}}
.xp-side .xp-rec,.ad-gate .xp-rec{grid-template-columns:1fr;grid-template-areas:"tag" "h" "s" "cta";gap:8px;padding:24px 22px;border-radius:20px}
.xp-side .xp-rec b,.ad-gate .xp-rec b{font-size:22px;line-height:1.15;letter-spacing:-.02em}
.xp-side .xp-rec small,.ad-gate .xp-rec small{font-size:13px;line-height:1.4}
.xp-side .xp-cta,.ad-gate .xp-cta{justify-self:start;height:38px;padding:0 16px;font-size:13px;margin-top:6px}
/* house ads (ads/house/HOUSE-ADS-SPEC.md): the owner's other services fill the slots while AdSense is off — same card grammar as .xp-rec, one accent per service (--tc, --tc-rgb, --tc-ink), card tokens for everything else */
.ad-house{display:flex;flex-direction:column;height:100%;min-width:0}
.ad-house .xp-rec{flex:1;min-height:0;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico h h" "ico s s" "ico cta tag";gap:2px 12px;padding:10px 14px;align-content:center}
.ad-house .xp-rec::before{background:radial-gradient(70% 90% at 100% 0%,rgba(var(--tc-rgb),.34) 0%,transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(var(--tc-rgb),.14) 0%,transparent 70%),linear-gradient(180deg,var(--card-bg-2),var(--card-bg))}
.ad-house .ad-ico{grid-area:ico;width:56px;height:56px;border-radius:14px;background:var(--card-glass);box-shadow:0 0 0 1px var(--card-border);object-fit:cover}
.ad-house .xp-tag{grid-area:tag;justify-self:end;background:rgba(var(--tc-rgb),.24);color:var(--card-text)}
.ad-house .xp-rec b,.ad-house .xp-rec small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-house .xp-rec b{font-size:14px}
.ad-house .xp-rec small{font-size:12px}
.ad-house .xp-cta{justify-self:start;height:26px;padding:0 10px;margin-top:3px;background:var(--tc);color:var(--tc-ink);font-size:11.5px}
#root[lang="en"] .ad-house .xp-rec b{font-size:12px}
#root[lang="en"] .ad-house .xp-rec small{font-size:11px}
@media(min-width:768px){.xp-h .ad-house .xp-rec{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ico h tag cta" "ico s tag cta";gap:2px 14px;padding:10px 18px}.xp-h .ad-house .xp-rec b{font-size:15px}.xp-h .ad-house .xp-rec small{font-size:12.5px}.xp-h .ad-house .xp-cta{height:32px;padding:0 12px;margin:0;font-size:12px}}
/* gate 250/280: icon 96 beside a two-line head, full-width CTA · side 300×600: icon 128 stacked, the other three services as mini rows underneath; both keep a small text link to #/partners */
.ad-gate .ad-house .xp-rec{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico h" "ico s" "cta cta";gap:6px 14px;padding:18px;border-radius:20px}
.ad-gate .ad-house .ad-ico{width:96px;height:96px;border-radius:24px;align-self:start}
.ad-gate .ad-house .xp-rec b,.xp-side .ad-house .xp-rec b,.ad-gate .ad-house .xp-rec small,.xp-side .ad-house .xp-rec small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.ad-gate .ad-house .xp-rec b,.xp-side .ad-house .xp-rec b{font-size:20px;line-height:1.2;letter-spacing:-.02em;-webkit-line-clamp:2}
.ad-gate .ad-house .xp-rec small,.xp-side .ad-house .xp-rec small{font-size:13px;line-height:1.4;-webkit-line-clamp:2}
.ad-gate .ad-house .xp-cta,.xp-side .ad-house .xp-cta{justify-self:stretch;justify-content:center;height:40px;padding:0 16px;margin:4px 0 0;font-size:13.5px}
.xp-side .ad-house .xp-rec{grid-template-columns:minmax(0,1fr);grid-template-areas:"ico" "tag" "h" "s" "cta";gap:8px;padding:24px 22px;border-radius:20px;justify-items:start}
.xp-side .ad-house .ad-ico{width:128px;height:128px;border-radius:32px}
.xp-side .ad-house .xp-rec b{font-size:22px;-webkit-line-clamp:3}
.xp-side .ad-house .xp-cta{justify-self:start;min-width:160px}
.ad-house-mini{display:grid;gap:6px;margin-top:10px}
.ad-house-mini a{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"i t a";align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b);color:var(--text);text-decoration:none;font:600 12px/1.3 var(--f-body)}
.ad-house .ad-house-mini .ad-ico{grid-area:i;width:28px;height:28px;border-radius:8px;box-shadow:none;background:none}   /* outranks .xp-side .ad-house .ad-ico (128px) */
.ad-house-mini b{grid-area:t;min-width:0;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.ad-house-mini span{grid-area:a;color:var(--faint)}
.ad-house .xp-rec.ad-img,.xp-h .ad-house .xp-rec.ad-img,.ad-gate .ad-house .xp-rec.ad-img,.xp-side .ad-house .xp-rec.ad-img{display:block;padding:0;gap:0;grid-template-columns:none;grid-template-areas:none;min-height:0;background:var(--card-bg);border-radius:16px;overflow:hidden}
.xp-rec.ad-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ad-house-img{position:relative}.ad-house-img .xp-rec.ad-img{height:100%}
.ad-tag-out{position:absolute;right:0;bottom:-18px;background:none;color:var(--faint);padding:0;font-size:9px}
.xp-side .ad-house .xp-rec.ad-img{height:600px;flex:none}   /* 사이드 이미지 600px + 그 아래 미니행·제휴문의 */
.xp-side .xp-box:has(.ad-house-img){height:auto}   /* 이미지 배너일 때 박스는 내용 높이(이미지 600 + 미니행) */
.xp-side .ad-house-img .ad-house-mini{margin-top:14px}.xp-side .ad-house-img .ad-tag-out{position:static;display:block;text-align:right;margin-top:4px}
.ad-house-foot{display:flex;justify-content:flex-end;margin-top:6px;font:500 11px var(--f-body)}
.ad-house-foot a{color:var(--muted);text-decoration:none}
.ad-house-foot a:hover{color:var(--text);text-decoration:underline}
.side{display:none}
@media(min-width:1280px){
  .page.has-side{display:grid;grid-template-columns:minmax(0,656px) 300px;gap:24px;justify-content:center;padding-left:24px;padding-right:24px}
  .page.has-side.wide{grid-template-columns:minmax(0,976px) 300px}
  .page.has-side>.page-main{min-width:0}
  .page.has-side>.page-main>.wrap,.page.has-side>.page-main>.fit-slot,.page.has-side>.page-main>.xp-slot{padding-left:0;padding-right:0}
  .side{display:block;position:sticky;top:72px;align-self:start}
  .xp-railed{display:none}   /* 기둥이 서 있는 폭에서만 본문 묶음을 접는다 — 폭이 1280 아래로 줄면 기둥은 CSS 로 사라지고 이 묶음이 살아난다 */
}

/* ---------- partners (#/partners): product table + inquiry form ---------- */
.pt-tbl tbody tr{cursor:default}.pt-tbl tbody tr:hover td{background:none}
.pt-tbl td{font-size:14px}.pt-tbl td b{font-weight:600}.pt-tbl .pt-w{display:block;font-size:13px;color:var(--muted);margin-top:2px}.pt-tbl .n{white-space:nowrap}
.pt-form{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.pt-f{display:flex;flex-direction:column;gap:6px;font:500 13px var(--f-body);color:var(--muted);margin:0;padding:0;border:0;min-width:0}
.pt-f legend{padding:0;margin-bottom:6px}
.pt-f input,.pt-f textarea{width:100%;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font:500 15px var(--f-body);color:var(--text)}
.pt-f textarea{height:auto;padding:12px 16px;resize:vertical;line-height:1.4}
.pt-int div{display:flex;flex-wrap:wrap;gap:8px}
.pt-chk{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:500 14px var(--f-body);color:var(--text);cursor:pointer}
.pt-chk input{width:16px;height:16px;margin:0;accent-color:var(--text)}
.pt-chk:has(input:checked){background:var(--inv);color:var(--inv-text);border-color:transparent}
.pt-chk:has(input:checked) input{accent-color:var(--inv-text)}
.pt-form .btn{align-self:flex-start}
.pt-err{margin:0;font-size:14px;color:var(--neg)}.pt-err a{color:inherit}
.pt-done{display:flex;align-items:center;gap:12px;margin-top:32px;padding:18px 20px;font:500 15px var(--f-body)}
.pt-done p{margin:0}.pt-done a{color:var(--muted)}

/* ---------- result card: one component, three sizes ---------- */
.card{position:relative;overflow:hidden;border-radius:28px;background:var(--card-bg);color:var(--card-text);border:1px solid var(--card-border);box-shadow:var(--shadow-2),inset 0 1px 0 var(--card-hl);--tc:var(--c-med);--tc-rgb:var(--c-med-rgb);--tc2-rgb:var(--c-high-rgb);isolation:isolate;font-family:var(--f-body)}
.card[data-tier="low"],.tierc[data-tier="low"]{--tc:var(--c-low);--tc-rgb:var(--c-low-rgb);--tc2-rgb:var(--c-sky-rgb)}
.card[data-tier="med"],.tierc[data-tier="med"]{--tc:var(--c-med);--tc-rgb:var(--c-med-rgb);--tc2-rgb:var(--c-high-rgb)}
.card[data-tier="high"],.tierc[data-tier="high"]{--tc:var(--c-high);--tc-rgb:var(--c-high-rgb);--tc2-rgb:var(--c-vhigh-rgb)}
.card[data-tier="vhigh"],.tierc[data-tier="vhigh"]{--tc:var(--c-vhigh);--tc-rgb:var(--c-vhigh-rgb);--tc2-rgb:var(--c-high-rgb)}
.card[data-tier="sky"],.tierc[data-tier="sky"]{--tc:var(--c-sky);--tc-rgb:var(--c-sky-rgb);--tc2-rgb:var(--c-low-rgb)}
.card-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(var(--tc-rgb),.44) 0%,rgba(var(--tc-rgb),.12) 42%,transparent 72%),radial-gradient(60% 50% at 0% 100%,rgba(var(--tc2-rgb),.22) 0%,transparent 70%),linear-gradient(180deg,var(--card-bg-2),var(--card-bg))}
.card-in{position:relative;padding:22px 22px 20px}
/* ===== 결과 화면 v2 ===== */
.rs>.card{margin-bottom:0}
.tile-sq{width:46px;height:46px;border-radius:14px;font-size:22px;background:rgba(255,255,255,.06);border:1px solid var(--card-border)}
.hcard .who-t b{font-size:19px}
.hc-art{position:absolute;top:15px;right:3.6%;width:33%;max-width:150px;aspect-ratio:1;z-index:0;pointer-events:none}   /* 자리는 저장 이미지(storyDraw: 카드 폭 대비 오른쪽 3.6% · 위 4.3%)와 같은 비율 — 예전엔 -4px·6px 라 모서리에 몰려 보였다 */
.hc-art img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 26px rgba(var(--tc-rgb),.5))}
.hc-art::after{content:'';position:absolute;inset:0;background:rgb(var(--tc-rgb));mix-blend-mode:color;opacity:.78;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.hcard.has-art .card-head{max-width:66%}
/* 등급 배지 한 줄, 그 아래 순위 문구 한 줄 — 어느 언어에서도 두 줄로 꺾이지 않는다(넘치면 fitOneLine 이 글자를 줄인다).
   문구가 그림 위로 지나가도 된다(오너 확인) — 읽히도록 그림자만 깔아 둔다. */
.hcard .hc-rank{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:7px}   /* .card-rank(뒤에 선언, align-items:center)보다 세게 — 안 그러면 배지가 가운데로 간다 */
.hcard .hc-rank .rank-t{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 10px rgba(8,10,16,.95),0 0 3px rgba(8,10,16,.9)}
.hc-score{margin-top:8px;font:600 16px/1 var(--f-display);color:var(--card-muted)}
.mcd-line+.mcd-line{margin-top:4px}
.mcd-note{margin:10px 2px 0;font:400 12px/1.5 var(--f-body);color:var(--card-faint);text-wrap:pretty}
.hcard .who-t b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;text-wrap:balance}
.hcard .who{align-items:flex-start}
.hcard .card-in>*{position:relative;z-index:1}
.hc-cd{margin:16px 0 12px}
/* 서비스 이름 라벨 — 큰 카운트다운 바로 위(2026-09-26 오너 결정: '나의 직업 수명' · '나의 전공 수명'). 이름과 숫자가 한 덩어리로 읽히게 붙인다 */
.hc-life{margin:18px 0 0;font:700 14px/1.3 var(--f-body);letter-spacing:.01em;color:var(--tc);text-shadow:0 1px 10px rgba(8,10,16,.95)}
.hc-life+.hc-cd{margin-top:6px}
.hc-ym{font:800 64px/1.02 var(--f-display);letter-spacing:-.045em;color:var(--card-text);text-shadow:0 0 30px rgba(var(--tc-rgb),.6);font-variant-numeric:tabular-nums;text-wrap:balance}
.hc-ym.long{font-size:50px}
.hcard .cd-clock{margin-top:9px;font:600 15px/1 var(--f-display);letter-spacing:.03em;color:var(--card-faint)}
.hcard .cd-clock small{font:500 12px/1 var(--f-body);margin:0 6px 0 2px;letter-spacing:0}
.hcard .card-sub{font-size:14.5px;line-height:1.55}
.hcard .card-sub b{color:var(--card-text)}
.hcard .card-sub .dday{color:var(--tc)}
.hc-q{position:relative;margin:16px 0 0;padding:13px 16px 13px 34px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--card-border);font:400 13.5px/1.55 var(--f-body);color:var(--card-muted);text-wrap:pretty}
.hc-q::before{content:'“';position:absolute;left:13px;top:6px;font:800 26px/1 var(--f-display);color:var(--tc)}
.rs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
/* AI vs 인간 — two equal stance buttons right under the result number. The number sits at the far
   end and fades in, so the label never moves when it arrives (or when it never does). */
.rs-wish{margin-top:12px}
.rs-wish-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 8px}
.rs-wish-k{margin:0;min-width:0;font-size:14px;font-weight:600;line-height:1.35;color:var(--text)}
.rs-wish-u{flex:none;font-size:12px;line-height:1.35;color:var(--faint);white-space:nowrap;opacity:0;transition:opacity .25s}
.rs-wish-u.on{opacity:1}
.rs-wish-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rs-wish-b{--w:61,232,198;display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(var(--w),.3);background:rgba(var(--w),.07);color:rgb(var(--w));font:600 14px var(--f-body);cursor:pointer;transition:background .15s,border-color .15s}
.rs-wish-b[data-stance=criticize]{--w:255,105,152}
.rs-wish-b:hover{background:rgba(var(--w),.13);border-color:rgba(var(--w),.5)}
.rs-wish-b:focus-visible{outline:2px solid rgb(var(--w));outline-offset:2px}
.rs-wish-b:active{transform:scale(.98)}
.rs-wish-b svg{width:18px;height:18px;flex:none}
.rs-wish-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-wish-n{margin-left:auto;padding-left:4px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s}
.rs-wish-n.on{opacity:1}
@media(min-width:768px){.rs-wish{margin-top:14px}.rs-wish-k{font-size:15px}.rs-wish-row{gap:12px}.rs-wish-b{height:46px;font-size:15px;padding:0 16px}}
@media(max-width:380px){.rs-wish-b{padding:0 11px;gap:6px;font-size:13.5px}.rs-wish-n{font-size:14px;padding-left:2px}}
@media(max-width:359px){.rs-wish-b svg{display:none}}
/* es · en 편 이름(Equipo IA · Equipo humano / Team AI · Team Human)은 길어서 폰 폭에서 나란히 두면 네 자리 글 수('1234')부터 이름이 잘린다 —
   es 만 폰 폭에서 두 버튼을 위아래로 쌓는다(숫자가 오기 전부터 같은 배치라 아무것도 움직이지 않는다). */
@media(max-width:479px){#root[lang="es"] .rs-wish-row,#root[lang="en"] .rs-wish-row{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.rs-wish-n,.rs-wish-u,.rs-wish-b{transition:none}}
.rs-tile{display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px 11px 13px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.rs-tile small{font:500 11px/1.2 var(--f-body);color:var(--muted);text-wrap:balance}
.rs-v{display:flex;align-items:center;gap:7px;min-width:0;margin-top:auto}
.rs-ic{flex:none;display:inline-grid;place-items:center;width:22px;height:22px}
.rs-ic svg{width:100%;height:100%}
.rs-ic.tc,.rs-v b.tc{color:var(--tc)}
.rs-v b{font:700 15px/1.1 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
/* 좁은 폰: 세 칸이 100px 안팎이라 15px 값('Very high'·'非常に高い'·'상위 72%')이 칸 밖으로 나가 옆 칸에 가려졌다 */
@media(max-width:430px){.rs-tile{padding:12px 9px 13px}.rs-ic{width:18px;height:18px}.rs-v{gap:5px}.rs-v b{font-size:13px}}
@media(max-width:374px){.rs-ic{width:16px;height:16px}.rs-v{gap:4px}.rs-v b{font-size:12px}}
@media(max-width:340px){.rs-ic{display:none}}
.rs-tl{margin-top:10px;padding:16px 18px 14px;overflow:visible}
.rs-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rs-h h2,.rs-box h2{margin:0;font:700 15px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.rs-chip{font:500 11.5px/1 var(--f-body);color:var(--muted);padding:6px 9px;border-radius:999px;background:var(--surface-2);white-space:nowrap}
.rs-chip b{color:var(--text);font-weight:600}
.rs-tl .tl{margin:0}
.rs-tl .tl-track{margin-top:46px}
.rs .share{margin-top:14px}
.rs-ft{margin-top:14px;padding:14px 16px 15px}
.rs-mj{margin-top:10px;padding:6px 16px 8px}
.rs-mj .rs-h{padding:10px 0 2px}
.rs-note{margin:4px 0 2px;font:400 12px/1.4 var(--f-body);color:var(--muted);text-wrap:pretty}
.rs-mj .card-jobs{margin:4px 0 0}
.rs-mj .cj{padding:7px 0;gap:9px}
.rs-mj .cj .tile{width:28px;height:28px;font-size:14px}
.rs-mj .cj-t{flex-direction:row;align-items:center;flex-wrap:wrap;gap:2px 8px}
.rs-mj .cj-t b{font-size:14px}
.rs-mj .cj-t .risk{font-size:11.5px}
.rs-mj .cj-e{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 6px;max-width:48%}
.rs-mj .cj-e b{font-size:15px}
.rs-mj .cj-e small{font-size:11px;margin:0}
@media(min-width:768px){.rs-mj .card-jobs{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}}
.rs-mj .card-jobs .k{display:none}
.rs-ft .ft{margin:0;padding:0;border:0}
.rs-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.rs-box{padding:14px;overflow:visible;min-width:0}
.rs-box p{margin:5px 0 0;font:400 12px/1.4 var(--f-body);color:var(--muted);text-wrap:pretty}
:is(.tw-guide,.career-guide){margin:28px 0;padding:24px;overflow-wrap:anywhere;line-height:1.85}
:is(.tw-guide,.career-guide) h2{margin:0;font:700 21px/1.5 var(--f-body);text-wrap:pretty}
:is(.tw-guide,.career-guide) h3{margin:0 0 6px;font:600 15px/1.6 var(--f-body)}
:is(.tw-guide,.career-guide) p{margin:0;color:var(--muted);font-size:14px}
:is(.tw-guide,.career-guide) :is(.tw-guide-intro,.career-guide-intro){margin-top:10px}
:is(.tw-guide-sections,.career-guide-sections){display:grid;gap:20px;margin-top:24px}
:is(.tw-guide-links,.career-guide-links){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
:is(.tw-guide-links,.career-guide-links) a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;font-size:13px;text-decoration:none}
:is(.tw-guide,.career-guide) a:hover{text-decoration:underline}
:is(.tw-guide,.career-guide) a:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
:is(.tw-guide-sources,.career-guide-sources){margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
:is(.tw-guide-sources,.career-guide-sources) ul{padding-left:18px;margin:8px 0 12px;font-size:12px}
:is(.tw-guide-sources,.career-guide-sources) p,:is(.tw-guide,.career-guide) :is(.tw-guide-updated,.career-guide-updated){font-size:12px}
:is(.tw-guide,.career-guide) :is(.tw-guide-updated,.career-guide-updated){margin-top:18px}
@media(max-width:480px){:is(.tw-guide,.career-guide){padding:18px}:is(.tw-guide,.career-guide) h2{font-size:19px}:is(.tw-guide-links,.career-guide-links){grid-template-columns:1fr}}
.rs-beside{position:relative;z-index:6}
.rs-beside .search{margin-top:11px;max-width:none}
.rs-beside .search-in{height:44px;padding:0 10px;gap:7px;border-radius:12px}
.rs-beside .search-in input{font-size:16px;min-width:0}
.rs-beside .search-in svg{width:16px;height:16px;flex:none}
.rs-beside .kbd{display:none}
.rs-beside .ph{left:33px;right:10px;font-size:13.5px}   /* 가짜 플레이스홀더의 좌우 여백(52/60px)이 좁은 칸을 다 먹어 '상…' 만 보였다 */
.rs-beside .ac{left:-15px;right:auto;width:calc(200% + 70px)}   /* 추천 목록은 두 칸 너비로 펼친다(칸 하나 폭으로는 직업 이름이 안 들어간다): 2×(칸 + 좌우 패딩 28px + 테두리 2px) + 간격 10px */
.rs-sim{list-style:none;margin:8px 0 0;padding:0}
.rs-sim li+li{border-top:1px solid var(--border)}
.rs-sim a{display:grid;grid-template-columns:7px minmax(0,1fr);gap:3px 7px;align-items:center;padding:8px 0;text-decoration:none;color:var(--text);font:500 12.5px/1.25 var(--f-body)}
.rs-sim .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-sim b{grid-column:2;font:600 12px/1 var(--f-display);color:var(--muted);white-space:nowrap}
.rs-sim svg{display:none}
.rs-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-med)}
.rs-dot.t-low{background:var(--c-low)}.rs-dot.t-high{background:var(--c-high)}.rs-dot.t-vhigh{background:var(--c-vhigh)}
.rs-tabs{margin-top:26px}
.rs-tablist{display:flex;gap:4px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.rs-tablist::-webkit-scrollbar{display:none}
.rs-tablist button{flex:none;position:relative;height:44px;padding:0 12px;border:0;background:none;color:var(--muted);font:600 13.5px var(--f-body);white-space:nowrap;cursor:pointer}
.rs-tablist button[aria-selected="true"]{color:var(--text)}
.rs-tablist button:focus-visible{outline-offset:-3px;border-radius:8px}
.rs-tablist.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.rs-tablist button[aria-selected="true"]::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--brand,#FF5E9B)}
.rs-tp{padding-top:16px}
.rs-tp .sec{margin-top:0}
.rs-tp .sec-h{display:none}
.rs .comments{margin-top:28px}
.rs-more{margin-top:28px}
.rs-more .rs-duo{margin-top:0}
@media(max-width:359px){.rs-duo{grid-template-columns:1fr}.rs-beside .ac{left:0;width:100%}.hc-ym{font-size:54px}.hc-ym.long{font-size:42px}}
@media(min-width:768px){.rs-tiles{gap:12px}.rs-tile{padding:16px 18px;gap:11px}.rs-ic{width:30px;height:30px}.rs-tile small{font-size:12.5px}.rs-v b{font-size:19px}.rs-v{gap:10px}.rs-duo{gap:14px}.rs-box{padding:18px}.rs-sim a{grid-template-columns:7px minmax(0,1fr) auto 12px;gap:9px;font-size:14px;min-height:46px;padding:0}.rs-sim b{grid-column:auto;font-size:14px;color:var(--text)}.rs-sim svg{display:block;width:12px;height:12px;color:var(--muted)}.rs-box p{font-size:13px}.rs-tablist button{font-size:15px;padding:0 16px}.hc-ym{font-size:84px}.hc-ym.long{font-size:64px}.hcard .card-in{padding:30px 32px 28px}.hc-art{max-width:220px;width:30%;top:28px;right:3.6%}.rs-mj{padding:8px 20px 10px}}
/* 전공 카운트다운 화면 전용(전공 결과 · 첫 화면 TOP 5 · 전공 순위표). 직업 화면은 이 클래스를 쓰지 않는다 */
.hcard .who-t .result-name .mname-q{display:block;margin-top:3px;font:600 .74em/1.3 var(--f-body);letter-spacing:0;color:var(--card-muted)}
.hc-ym.mym{word-break:keep-all;overflow-wrap:normal}
.hc-ym.xlong{font-size:42px}
@media(max-width:359px){.hc-ym.xlong{font-size:36px}}
@media(min-width:768px){.hc-ym.xlong{font-size:64px}}
.rlist-m .ry{max-width:36%;text-align:right}
.rlist-m .ry b{white-space:normal;word-break:keep-all;overflow-wrap:normal;text-wrap:balance}
.rlist-m .rn-n{overflow-wrap:break-word;hyphens:auto}
@media(min-width:640px){.rlist-m .rn-t .rn-n{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}}
.rank.rank-m .j a{white-space:normal;overflow-wrap:anywhere}   /* .rank .j a(nowrap, 뒤에 선언)보다 세게 */
.rank.rank-m .yrs{white-space:normal}
.rank.rank-m .yrs b{display:inline-block;word-break:keep-all;overflow-wrap:normal;text-wrap:balance}
@media(max-width:767px){.rank.rank-m .j a{hyphens:auto}.rank.rank-m td.j{min-width:8.5em}.rank.rank-m .yrs b{font-size:17px}.rank.rank-m td.yrs{padding-left:4px}}   /* 390px: 이름 칸이 너무 좁아지지 않게, 남은 시간은 두 줄로 */
#root[lang="ja"] .hero-sub-m{word-break:auto-phrase}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.who{display:flex;align-items:center;gap:11px;min-width:0}
.who .tile{width:40px;height:40px;background:var(--card-glass);border:1px solid var(--card-border);font-size:19px}
.who-t{display:flex;flex-direction:column;min-width:0;line-height:1.2;text-align:left}
.who-t b{font:700 16px var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-t small{font:400 13px var(--f-body);color:var(--card-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-full .who-t small{white-space:normal}
.card-full .tl-track{margin-top:46px}
.bmark{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--f-display);color:var(--card-muted);letter-spacing:-.01em;white-space:nowrap;flex:none}
.bmark .mark{width:14px;height:14px}
.big{display:flex;align-items:baseline;gap:10px;margin:22px 0 6px;font:800 96px/.95 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(var(--tc-rgb),.5),0 0 80px rgba(var(--tc-rgb),.28);text-align:left}
.big .u{font:600 22px var(--f-display);letter-spacing:-.01em;color:var(--card-muted);text-shadow:none}
.big.ym{font-size:64px;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.big.ym.long{font-size:48px}
.cd{margin:18px 0 14px;text-align:left}
.cd-big{display:flex;align-items:flex-end;gap:14px}
.cd-c{display:flex;align-items:baseline;gap:5px;min-width:0}
.cd-c b{font:800 64px/1 var(--f-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--card-text);text-shadow:0 0 28px rgba(var(--tc-rgb),.55)}
.cd-c small{font:600 18px/1 var(--f-display);letter-spacing:-.01em;color:var(--card-muted)}
.cd-clock{margin-top:10px;font:600 26px/1 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--card-muted)}
.cd-clock b{font-weight:700;color:var(--card-text);text-shadow:0 0 14px rgba(var(--tc-rgb),.4)}
.cd.past b{opacity:.5}
@media(max-width:399px){.cd-c b{font-size:52px}.cd-big{gap:10px}.cd-clock{font-size:22px}}
@media(min-width:768px){.big.ym{font-size:110px}.big.ym.long{font-size:80px}.cd{margin:24px 0 18px}.cd-big{gap:22px}.cd-c b{font-size:110px;letter-spacing:-.05em}.cd-c small{font-size:26px}.cd-clock{font-size:40px;margin-top:14px}}
.card-sub{font:400 15px/1.45 var(--f-body);color:var(--card-muted);margin:0;text-align:left}
.card-sub b{color:var(--card-text);font-weight:600}
.card-why{margin:10px 0 0;font:400 13.5px/1.45 var(--f-body);color:var(--card-text);text-align:left}
/* talking points: title badge (the .risk tag in the tier colour) + rank line, wrapping freely at 390px; D-day sits in the card-sub in the tier colour */
.card-rank{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;margin:12px 0 0;font:500 12.5px/1.4 var(--f-body);color:var(--card-muted);text-align:left}
.card-rank .risk{font-size:12px}
.card-rank .rank-t b{color:var(--card-text);font-weight:600;font-variant-numeric:tabular-nums}
.card-rank .t-low{color:var(--c-low)}.card-rank .t-med{color:var(--c-med)}.card-rank .t-high{color:var(--c-high)}.card-rank .t-vhigh{color:var(--c-vhigh)}
.card-sub .dday{color:var(--tc);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-mini .card-rank{margin-top:8px;font-size:11.5px;gap:3px 8px}
.card-mini .card-rank .risk{font-size:11px;white-space:normal}
@media(min-width:768px){.card-rank{font-size:13px;margin-top:14px}.card-rank .risk{font-size:12.5px}}
/* friend landing: claim buttons under the received card */
.friend-claim{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.friend-claim .btn{flex:1 1 160px}
/* B3 · story image: fallback sheet (the image to long-press / right-click) · in-app browser escape link under the share buttons */
.open-browser{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 8px 6px 6px;border:0;background:none;border-radius:999px;font:500 13px var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.open-browser:hover{color:var(--text)}
.open-browser svg{width:14px;height:14px}
.story-ov{z-index:75}
.story-int .int-top{align-items:center}
.story-t{font:700 15px var(--f-display);color:var(--text)}
.sp{margin:0 0 12px}
.sp-h{margin:0 0 9px;font:600 12.5px/1.3 var(--f-body);color:var(--muted)}
.sp-strip{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 4px;margin:0 -2px;scrollbar-width:none}
.sp-strip::-webkit-scrollbar{display:none}
.sp-card{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:132px;padding:0;border:0;background:none;color:var(--muted);font:600 12px/1 var(--f-body);cursor:pointer;scroll-snap-align:start}
.sp-card img{display:block;width:132px;height:165px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);object-fit:cover;transition:border-color .15s,transform .15s}
.sp-card:hover img,.sp-card:focus-visible img{border-color:var(--border-2);transform:translateY(-2px)}
.sp-card:hover{color:var(--text)}
@media(min-width:768px){.sp-strip{gap:12px;overflow:visible}.sp-card{flex:1 1 0;width:auto;max-width:220px}.sp-card img{width:100%;height:auto;aspect-ratio:4/5}}
.no-motion .sp-card img{transition:none}
.img-sty{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 2px}
.img-sty.img-sty-top{margin:12px 16px 0;justify-content:center}   /* 미리보기 바로 아래 — 이름을 넣지 않아도 스타일을 고를 수 있다 */
.img-sty-l{font:600 12px/1 var(--f-body);color:var(--muted);margin-right:4px}
.img-sty button{height:36px;padding:0 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:600 12.5px/1 var(--f-body);cursor:pointer;transition:border-color .15s,color .15s}
.img-sty button[aria-checked="true"]{border-color:var(--brand,#FF5E9B);color:var(--text);background:rgba(255,94,155,.12)}
.story-btns .btn.nudge{border-color:var(--brand,#FF5E9B);box-shadow:0 0 0 3px rgba(255,94,155,.18)}
.story-x{display:inline-grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);cursor:pointer}
.story-x:hover{color:var(--text)}
.story-x svg{width:16px;height:16px}
/* .int(뒤에 선언, overflow:hidden)에 덮여 이 시트가 스크롤되지 않았다 — 이름 입력·스타일 선택이 들어오면서 폰 화면보다 길어졌고, 아래 버튼에 닿을 수 없었다(2026-09-19 오너 지적). 특이도를 올린다. */
.int.story-int{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.img-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:12px 16px 0;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b)}
.img-seg [role="tab"]{height:36px;border-radius:9px;font:600 13px var(--f-body);color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.img-seg [role="tab"][aria-selected="true"]{background:var(--seg-on);color:var(--text);box-shadow:var(--shadow-1),inset 0 1px 0 var(--hl)}
.img-wrap{position:relative}
.story-img{display:block;margin:12px auto 0;width:auto;max-width:calc(100% - 32px);max-height:min(56vh,540px);aspect-ratio:9/16;border-radius:14px;border:1px solid var(--border);background:#0B0D12;-webkit-touch-callout:default;transition:opacity .15s}
.img-wrap[data-fmt="feed"] .story-img{aspect-ratio:4/5}
.img-wrap[aria-busy="true"] .story-img{opacity:.25}
.img-load{position:absolute;inset:12px 0 0;display:grid;place-items:center;font:600 13px var(--f-body);color:var(--text);pointer-events:none}
@media(max-width:479px) and (max-height:820px){.story-img{max-height:44vh}}
.story-hint{margin:12px 16px 0;font:400 13px/1.45 var(--f-body);color:var(--muted);text-align:center;text-wrap:pretty}
.story-hint.on{color:var(--text);font-weight:600}
.img-me-b{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;width:calc(100% - 32px);height:44px;margin:12px 16px 0;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font:600 13.5px var(--f-body);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.img-me-b:hover{color:var(--text);border-color:var(--border-2,var(--border))}
.img-me-b[aria-expanded="true"]{color:var(--text);border-color:var(--border);background:var(--surface-2);border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.img-me-i{display:inline-flex;align-items:center;gap:9px;min-width:0}
.img-me-b svg{width:16px;height:16px;flex:none}
.img-me-c{width:13px;height:13px;opacity:.55;transition:transform .18s}
.img-me-b[aria-expanded="true"] .img-me-c{transform:rotate(180deg)}
/* 펼친 입력 — 버튼에 이어 붙는 한 덩어리. 라벨을 보여 무엇을 넣는 칸인지 비어 있을 때도 알 수 있게 한다. */
.img-me{box-sizing:border-box;width:calc(100% - 32px);display:flex;flex-direction:column;gap:11px;margin:0 16px;padding:14px;
  border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;background:var(--surface-2)}
.img-me-f{display:flex;flex-direction:column;gap:6px}
.img-me-f>span{font:600 11.5px/1 var(--f-body);letter-spacing:-.01em;color:var(--muted)}
.img-me input{width:100%;box-sizing:border-box;height:42px;padding:0 13px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:500 14px var(--f-body)}
.img-me input:focus{outline:none;border-color:var(--neg)}
/* 이름·메시지를 치는 동안(imgTypingArm): 미리보기를 줄여 시트 위에 붙인다 — 키보드가 떠도 입력칸 바로 위에서 그림이 바뀌는 게 보인다 */
.story-int.typing .img-wrap{position:sticky;top:0;z-index:3;padding-bottom:10px;background:var(--surface)}
.story-int.typing .story-img{margin-top:8px;max-height:min(max(calc(var(--vvh,100vh)*.4),calc(var(--vvh,100vh) - 250px)),540px)}   /* 입력칸 둘(약 250px)을 뺀 나머지를 미리보기에 준다 */
.story-int.typing .img-load{inset:8px 0 10px}
.img-me-note{margin:0;font:400 11.5px/1.4 var(--f-body);color:var(--faint)}
.story-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 16px 16px}
.story-int .story-btns .btn{flex:1 1 40%;margin:0;width:auto}
.story-int .story-btns #img-dl{flex-basis:100%}
@media(max-width:479px){.story-int .story-btns .btn{flex-basis:100%}}
.story-int .story-btns .btn.story-x{display:inline-flex;height:48px;border-radius:14px;background:transparent;border:1px solid var(--border);color:var(--muted)}   /* 맨 아래 '닫기' — .story-x(원형 X)의 36px·50% 가 폰에서 그대로 먹어 길쭉한 타원이 됐었다 */
.story-int .story-btns .btn.story-x:hover{color:var(--text);border-color:var(--border-2,var(--border))}
/* '이미지로 저장' — 눈에 띄게: 브랜드 그라디언트 테두리 + 지나가는 빛 + 반짝이는 별 셋(별은 모서리에만 — ja 처럼 버튼이 156px 로 좁아져도 글자·아이콘을 덮지 않는다). 움직이는 건 transform·opacity 뿐(합성 단계)이라 저사양 폰에서도 부담이 없다 */
.btn-shine{position:relative;overflow:hidden;isolation:isolate;border:1.5px solid transparent;font-weight:700;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 20px -6px rgba(255,61,138,.55),0 0 20px -8px rgba(61,232,198,.5)}
.btn-shine:hover{border-color:transparent;background:linear-gradient(#1F2433,#1F2433) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box;box-shadow:0 0 26px -4px rgba(255,61,138,.7),0 0 26px -6px rgba(61,232,198,.6)}
.btn-shine::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:-1;width:42%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.26) 50%,transparent 100%);transform:translateX(-140%) skewX(-18deg);animation:bsSweep 3.2s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
.bs-stars{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bs-stars i{position:absolute;width:15px;height:15px;background:#FFE9A8;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;transform:scale(.2);animation:bsTwinkle 2.1s ease-in-out infinite}
.bs-stars i:nth-child(1){top:4px;right:6px}
.bs-stars i:nth-child(2){bottom:4px;right:12px;width:9px;height:9px;background:#9FF5E3;animation-delay:.7s}
.bs-stars i:nth-child(3){bottom:6px;left:9px;width:11px;height:11px;background:#FFB3D1;animation-delay:1.3s}
.btn-shine:disabled::before,.btn-shine[aria-busy="true"]::before{animation-play-state:paused;opacity:0}
@keyframes bsSweep{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(380%) skewX(-18deg)}}
@keyframes bsTwinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}45%,55%{opacity:1;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.btn-shine::before{animation:none;opacity:0}.bs-stars i{animation:none;opacity:.9;transform:none}}
/* Search + random exploration: the approved A layout. Equal icon/spacer columns
   center the label itself, independently of its language or the icon width. */
:is(.search,.search-box,.r-search).random-search{box-sizing:border-box;border:1px solid var(--glass-b);border-radius:18px;background:rgba(19,22,29,.87);box-shadow:var(--shadow-2),inset 0 1px 0 var(--hl);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
:is(.search,.search-box,.r-search).random-search::before{inset:-1px;opacity:.19}
:is(.search,.search-box,.r-search).random-search:focus-within{border-color:var(--border-2);box-shadow:0 0 0 4px rgba(var(--ring-rgb),.14),var(--shadow-2)}
:is(.search,.search-box,.r-search).random-search>:is(.search-in,.search-field,.r-search-field){height:58px;min-height:58px;background:transparent;border:0;border-radius:17px 17px 0 0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.random-explore{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:46px;margin:0 13px;padding:5px 0 7px;border-top:1px solid rgba(255,255,255,.07);text-align:left}
.random-explore-hint{flex:1;min-width:0;color:var(--faint);font:400 11.5px/1.5 var(--f-body);letter-spacing:-.015em}
.random-explore .random-explore-button{position:relative;display:inline-grid;grid-template-columns:14px max-content 14px;align-items:center;justify-content:center;gap:6px;flex:none;height:32px;min-height:32px;padding:0 10px;border:1.5px solid transparent;border-radius:10px;background:linear-gradient(#191D29,#191D29) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box;color:#F2F4F8;font:700 12px/1.3 var(--f-body);letter-spacing:-.015em;text-align:center;white-space:nowrap}
.random-explore .random-explore-button:hover:not(:disabled){background:linear-gradient(#1F2433,#1F2433) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box}
.random-explore-icon,.random-explore-spacer{display:block;width:14px;height:14px}
.random-explore-icon svg{display:block;width:14px;height:14px}
.random-explore-label{text-align:center;min-width:0}
.random-explore-button .bs-stars i:nth-child(1){top:2px;right:3px;width:7px;height:7px}
.random-explore-button .bs-stars i:nth-child(2){bottom:2px;right:7px;width:5px;height:5px}
.random-explore-button .bs-stars i:nth-child(3){bottom:2px;left:4px;width:6px;height:6px}
.random-explore .random-explore-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.random-search .suggestions{top:calc(100% + 8px)}
@media(min-width:768px){:is(.search,.search-box,.r-search).random-search{border-radius:20px}:is(.search,.search-box,.r-search).random-search>:is(.search-in,.search-field,.r-search-field){height:64px;min-height:64px;border-radius:19px 19px 0 0}.random-explore{margin-right:17px;margin-left:20px}.random-explore-hint{font-size:12px}}
@media(max-width:359px){.random-explore{margin-left:10px;margin-right:10px;gap:6px}.random-explore-hint{font-size:11px}.random-explore .random-explore-button{padding-left:8px;padding-right:8px;gap:5px}}
/* B4 · beside: a second job next to the visitor's own card */
.beside{margin-top:28px}
.beside .sec-sub{margin:4px 0 0;font:400 14px/1.45 var(--f-body);color:var(--muted);text-wrap:pretty}
.beside .search{margin-top:14px}
@media(min-width:768px){.beside{margin-top:36px}}
/* compare: neutral first / later chips (no winner glow); the two mini clocks wrap instead of overflowing at 390px */
.lead.later{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}
.card-mini .big.ym{white-space:normal;font-size:44px}
.card-mini .big.ym.long{font-size:34px}
@media(max-width:419px){.card-mini .big.ym{font-size:36px}.card-mini .big.ym.long{font-size:28px}}
.tl{margin:24px 0 22px;text-align:left}
.tl-track{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:36px}
.tl-band{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(var(--tc-rgb),.22);transform-origin:left}
.tl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,rgba(var(--tc-rgb),.25),var(--tc));box-shadow:0 0 18px rgba(var(--tc-rgb),.55);transform-origin:left}
.tl-tick{position:absolute;top:2px;bottom:2px;width:1px;background:rgba(11,13,18,.5)}
.tl-mark{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--card-bg),0 0 0 5px var(--tc),0 0 22px rgba(var(--tc-rgb),.8)}
.tl-mark b{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);font:700 13px/1 var(--f-display);color:#0B0D12;background:var(--tc);padding:5px 8px;border-radius:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-mark b::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:var(--tc)}
.tl-axis{display:flex;justify-content:space-between;margin-top:10px;font:500 12px var(--f-body);color:var(--card-faint);font-variant-numeric:tabular-nums}
.tl-axis b{color:var(--card-muted);font-weight:500}
.tl-range{font:400 13px var(--f-body);color:var(--card-muted);margin-top:8px}
.tl-range em{font-style:normal;color:var(--card-text);font-weight:600;font-variant-numeric:tabular-nums}
.grad-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.grad-row .mini-seg{flex-wrap:wrap}
.cj.gone .cj-e b{color:var(--vhigh)}
.cj.gone .cj-e small{opacity:.7}
.big.risk{font-size:52px;letter-spacing:-.03em;align-items:baseline}
.big.risk .u{font-size:20px}
.card-jobs{margin:18px 0 4px;text-align:left}
.card-jobs .k{display:block;font:600 10.5px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--card-faint);margin-bottom:8px}
.cj{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--card-border);text-decoration:none;color:inherit}
.cj .tile{width:34px;height:34px;font-size:17px;flex:none}
.cj-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cj-t b{font:600 15px/1.2 var(--f-body)}
.cj-e{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;flex:none}
.cj-e b{font:700 18px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cj-e small{font-size:11.5px;color:var(--card-muted);margin-top:2px}
@media(min-width:768px){.big.risk{font-size:72px}.big.risk .u{font-size:24px}.cj-e b{font-size:22px}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:18px;border-top:1px solid var(--card-border);text-align:left}
.stat{display:flex;flex-direction:column;gap:6px;min-width:0}
.stat .k{font:600 10.5px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--card-faint)}
.stat .v{font:700 17px/1.15 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:3px}
.stat .v small{font:400 12px/1.25 var(--f-body);color:var(--card-muted);letter-spacing:0}
.stat.tc .v{color:var(--tc)}
.card .pos{color:var(--c-low)}.card .neg{color:var(--c-vhigh)}
.ft{margin-top:11px;padding-top:10px;border-top:1px solid var(--card-border)}
.ft-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ft-top b{font:700 13.5px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--card-text);text-wrap:pretty}
.ft-tag{flex:none;font:600 10.5px/1 var(--f-body);color:var(--card-faint);white-space:nowrap}
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0 0;pointer-events:none;user-select:none}
.ft-col{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:10px;background:var(--card-glass);border:1px solid var(--card-border);min-width:0}
.ft-tile{width:18px;height:18px;border-radius:6px;background:rgba(var(--tc-rgb),.18);color:var(--tc);display:grid;place-items:center;font:700 10.5px/1 var(--f-display);flex:none}
.ft-bar{flex:1;min-width:0;height:8px;border-radius:4px;background:var(--card-text);opacity:.34;filter:blur(1.6px)}
.ft-pct{font:700 11px/1 var(--f-display);color:var(--card-muted);font-style:normal;flex:none}
.ft-s{margin:8px 0 0;font:600 12.5px/1.35 var(--f-body);letter-spacing:-.005em;color:var(--card-muted)}
.ft-ask{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;margin-top:10px;font:500 12.5px/1.4 var(--f-body);color:var(--card-text)}
.ft-btns{display:flex;gap:8px;flex:none}
.ft-ask .btn{height:34px;padding:0 14px;font-size:12.5px}
.card:not(.card-mini) .ft{cursor:pointer}
@media(min-width:600px){.ft-top b{font-size:14.5px}.ft-s{font-size:13px}}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid var(--card-border)}
@media(max-width:767px){
  .card-full .stats{grid-template-columns:1fr 1fr;gap:12px 16px}
  .card-full .stat.wide{grid-column:1/-1;order:3;padding-top:12px;border-top:1px solid var(--card-border)}
  .card-full .stat.wide .v{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
}
.card-foot .q{font:600 14px var(--f-display);color:var(--card-text);letter-spacing:-.01em}
@media(min-width:768px){
  .card-in{padding:30px 34px 26px}
  .big{font-size:150px;margin-top:26px;letter-spacing:-.05em;gap:14px}
  .big.ym{font-size:110px}
  .big.ym.long{font-size:80px}
  .big .u{font-size:28px}
  .card-sub{font-size:17px}
  .card-why{font-size:14px}
  .who .tile{width:44px;height:44px}
  .who-t b{font-size:18px}
  .stat .v{font-size:20px}.stat .k{font-size:11px}
  .tl-track{margin-top:40px}
}
/* mini (compare / friend) */
.card-mini{border-radius:20px}
.card-mini .card-in{padding:16px 16px 14px}
.card-mini .who{gap:8px}
.card-mini .who .tile{width:32px;height:32px;font-size:15px}
.card-mini .who-t b{font-size:14px;white-space:normal;line-height:1.15}.card-mini .who-t small{font-size:11px;white-space:normal}
.card-mini .card-why{display:none}
.card-mini .bmark{display:none}
.card-mini .big{font-size:52px;margin:14px 0 4px;gap:6px;letter-spacing:-.04em}
.card-mini .big .u{font-size:14px}
.card-mini .card-sub{font-size:12px}
.card-mini .tl{margin:14px 0 12px}
.card-mini .tl-track{height:6px;margin-top:28px}
.card-mini .tl-mark{width:12px;height:12px;margin:-6px 0 0 -6px;box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--tc),0 0 14px rgba(var(--tc-rgb),.8)}
.card-mini .tl-mark b{font-size:11px;padding:3px 6px;bottom:calc(100% + 9px)}
.card-mini .tl-axis{font-size:10px;margin-top:8px}
.card-mini .tl-range{font-size:11px;margin-top:6px}
.card-mini .stats{display:flex;flex-direction:column;gap:7px;padding-top:12px}
.card-mini .stat{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}
.card-mini .stat .k{font-size:9.5px;letter-spacing:.07em}
.card-mini .stat .v{font-size:13px;text-align:right;align-items:flex-end}
.card-mini .stat .v small{display:none}
.card-mini .card-foot{display:none}
@media(max-width:419px){.card-mini .stat{flex-direction:column;align-items:flex-start;gap:2px}.card-mini .stat .v{text-align:left;align-items:flex-start}.card-mini .stats{gap:9px}.card-mini .big{font-size:46px}}
/* ---------- share ---------- */
.share{margin-top:16px}
.share-row{display:flex;gap:8px;flex-wrap:wrap}
.share-row .btn{flex:1 1 auto}
.share-kind[aria-pressed="true"]{outline:2px solid var(--ring);outline-offset:2px}
.soc-lbl{font:500 13px var(--f-body);color:var(--muted);margin-right:4px;align-self:center}
.share-kind[aria-pressed="true"] svg{color:var(--inv-text)}
.soc-row[hidden]{display:none}
.share-payload{display:none}
.soc-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.soc{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px 0 11px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:500 13px var(--f-body);white-space:nowrap;flex:none;transition:.15s;color:var(--text)}
.soc:hover{border-color:var(--border-2);background:var(--surface)}
.soc svg{width:15px;height:15px;color:var(--muted)}
.social-draft{margin-top:14px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}
.social-draft[hidden]{display:none}.social-draft-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.social-draft-head b{font-size:16px}.social-draft-close{border:0;background:none;color:var(--muted);font-size:24px;cursor:pointer}
.social-draft label{display:block;font-size:12px;color:var(--muted);margin-top:12px}.social-draft textarea{display:block;box-sizing:border-box;width:100%;margin-top:7px;padding:12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:400 14px/1.6 var(--f-body);resize:vertical}.social-draft p{font:400 13px/1.55 var(--f-body);color:var(--muted);margin:12px 0}.social-draft-actions{display:flex;flex-wrap:wrap;gap:8px}.social-draft-actions .btn{flex:1;min-height:44px;text-align:center;text-decoration:none;justify-content:center}.social-draft-actions .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- rankings ---------- */
.rank-tabs{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-b);margin-bottom:14px}
.rank-tabs a{display:flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:9px;font:600 14px var(--f-body);color:var(--muted);text-decoration:none;min-width:110px}
.rank-tabs a[aria-selected="true"]{background:var(--seg-on);color:var(--text);box-shadow:var(--shadow-1),inset 0 1px 0 var(--hl)}
.rank-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.rank-tools .sp{flex:1}
/* category filter chips (jobs tab): one scrolling strip on phones, wrapping rows from 768px */
.cat-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding:2px 0 10px;margin:-2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips button{flex:none;height:34px;padding:0 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:500 13px var(--f-body);color:var(--muted);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.cat-chips button:hover{color:var(--text);border-color:var(--border-2)}
.cat-chips button[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:transparent}
@media(min-width:768px){.cat-chips{flex-wrap:wrap;overflow:visible}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.rank{width:100%;border-collapse:collapse}
.rank th{font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:left;padding:14px 12px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.rank th:first-child,.rank td:first-child{padding-left:18px}
.rank th:last-child,.rank td:last-child{padding-right:18px}
.rank td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.rank tbody tr{cursor:pointer;transition:background .12s}
.rank tbody tr:hover td{background:var(--surface-2)}
.rank tbody tr:last-child td{border-bottom:0}
.rank .r{font:700 20px var(--f-display);color:var(--faint);width:34px;font-variant-numeric:tabular-nums}
.rank tr.top .r{color:var(--text)}
.rank .j a{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:inherit;white-space:nowrap}
.rank .j .tile{width:32px;height:32px;font-size:15px}
.rank .n{text-align:right;white-space:nowrap}
.rank .n .risk{justify-content:flex-end}
.rank .yrs b{font:700 22px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rank .yrs small{font-size:12px;color:var(--muted);margin-left:3px}
.rank .g{font-weight:600;font-variant-numeric:tabular-nums}
.rank .around{color:var(--muted);font-variant-numeric:tabular-nums}
.show-m{display:none}
@media(max-width:767px){.hide-m{display:none}.show-m{display:inline}.rank .j a{white-space:normal}.rank th,.rank td{padding-left:8px;padding-right:8px}.rank th:first-child,.rank td:first-child{padding-left:14px}.rank th:last-child,.rank td:last-child{padding-right:14px}.rank .r{width:26px;font-size:18px}.rank .yrs b{font-size:20px}.rank .j .tile{width:30px;height:30px;font-size:14px}}
.locked{position:relative}
.locked .tbl-wrap{border-top:0;border-top-left-radius:0;border-top-right-radius:0;filter:blur(3px);-webkit-mask-image:linear-gradient(#000 0%,transparent 96%);mask-image:linear-gradient(#000 0%,transparent 96%);pointer-events:none;user-select:none}
.tbl-wrap.open-b{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.lock-cta{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 16px}
.lock-cta p{margin:0;font-size:13px;color:var(--muted)}
.lock-cta .tag{background:var(--surface);border:1px solid var(--border)}

/* ---------- compare ---------- */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.who-l{display:flex;align-items:center;justify-content:space-between;font:600 11px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;min-height:22px}
.lead{font:700 11px var(--f-display);letter-spacing:0;text-transform:none;color:var(--inv-text);background:var(--inv);padding:4px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.duel .win .card{box-shadow:0 0 0 1.5px rgba(var(--tc-rgb),.9),0 0 44px rgba(var(--tc-rgb),.38),var(--shadow-2)}
.diff{font:800 30px/1.12 var(--f-display);letter-spacing:-.03em;margin:28px 0 8px;text-wrap:balance}
.diff em{font-style:normal;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}
.cmp-tbl{display:grid;grid-template-columns:1fr auto 1fr;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;margin-top:16px}
.cmp-tbl>span{padding:12px 14px;font-size:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;min-width:0}
.cmp-tbl>span.c{justify-content:center;font:600 10.5px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}
.cmp-tbl>span.a{justify-content:flex-start;font-weight:600}
.cmp-tbl>span.b{justify-content:flex-end;text-align:right;font-weight:600}
.cmp-tbl>span:nth-last-child(-n+3){border-bottom:0}
@media(max-width:419px){.cmp-tbl>span{padding:10px 10px;font-size:13px}.cmp-tbl>span.c{font-size:9.5px}}
@media(min-width:768px){.diff{font-size:44px}.duel{gap:16px}}
.friend-hero{margin-bottom:24px}


/* ---------- footer / toast / interstitial ---------- */
.foot{margin-top:auto;border-top:1px solid var(--border);padding:32px 0 40px;font-size:13px;color:var(--muted)}
.foot .wrap-wide{display:flex;flex-direction:column;gap:14px}
.foot-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-brand .brand{font-size:15px}
.foot-links{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:var(--muted)}
.foot-links a:hover{color:var(--text)}
.ai-notice{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;margin:16px 0;padding:13px 14px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff05;font:400 12.5px/1.7 var(--f-body);color:#bdc6d5;text-align:left}
.ai-notice-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff20;border-radius:8px;background:#ffffff08;color:#d4dbe6;font:700 11px/1 var(--f-display);letter-spacing:.02em}
.ai-notice .ai-notice-text{margin:0;font:inherit;color:inherit;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.ai-notice-action{display:inline-flex;align-items:center;min-height:28px;margin-top:5px;font:500 11px/1.5 var(--f-body);color:#c9d2df}
.ai-notice-action:hover{text-decoration:underline;text-underline-offset:3px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;background:var(--inv);color:var(--inv-text);padding:11px 16px;border-radius:999px;font:500 14px var(--f-body);box-shadow:var(--shadow-2);z-index:80;pointer-events:none;transition:.25s;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.ov{position:fixed;inset:0;z-index:70;background:var(--ov);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center}
.int{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:28px 28px 0 0;box-shadow:var(--shadow-2);overflow:hidden;animation:rise .4s cubic-bezier(.2,.7,.2,1)}
@media(min-width:560px){.ov{align-items:center;padding:24px}.int{border-radius:28px}}
.int-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.int-top .xp-tag{color:var(--muted);background:var(--surface-2)}
.ring{position:relative;width:36px;height:36px;display:grid;place-items:center;font:700 13px var(--f-display);font-variant-numeric:tabular-nums}
.ring svg{position:absolute;inset:0;width:36px;height:36px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .bgc{stroke:var(--border)}
.ring .fgc{stroke:var(--text);stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:0;transition:stroke-dashoffset 5s linear}
.ring.run .fgc{stroke-dashoffset:100.5}
.int-note{margin:12px 16px 0;font-size:12px;color:var(--faint);text-align:center}
.int .btn{margin:12px 16px 16px;width:calc(100% - 32px)}
.lock-scroll{overflow:hidden}

/* ---------- fit v1: banner (dark card tone, no ad label) · test · result ---------- */
.fit-slot{margin:20px auto 0;padding:0 20px;max-width:720px;width:100%}
@media(min-width:768px){.fit-slot{padding:0 32px}}
.wrap.fit{max-width:600px}
.fit-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.fit-top .back{margin:0 0 0 -6px}
.fit-count{font:600 13px var(--f-body);color:var(--muted)}
.fit-bar{height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fit-bar i{display:block;height:100%;border-radius:999px;background:var(--spectrum);transition:width .3s}
.fit-kicker{font:600 11px var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:40px 0 10px}
.fit-q{font:800 26px/1.25 var(--f-display);letter-spacing:-.025em;margin:0 0 24px;text-wrap:balance}
.fit-q:focus{outline:none}
.fit-opts{display:grid;gap:8px}
.fit-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 16px 0 18px;border-radius:16px;background:var(--surface);border:1px solid var(--border);font:600 16px var(--f-body);text-align:left;transition:background .15s,border-color .15s,transform .15s}
.fit-opt:hover{border-color:var(--border-2);background:var(--surface-2)}
.fit-opt:active{transform:scale(.99)}
.fit-opt[aria-pressed="true"]{background:var(--inv);color:var(--inv-text);border-color:var(--inv)}
.fit-opt kbd{font:500 11px var(--f-mono);color:var(--faint);border:1px solid var(--border);border-radius:6px;padding:2px 6px;flex:none}
.fit-opt[aria-pressed="true"] kbd{color:inherit;opacity:.6;border-color:currentColor}
@media(hover:none){.fit-opt kbd{display:none}}
@media(min-width:560px){.fit-opts.likert{grid-template-columns:repeat(5,1fr)}.fit-opts.likert .fit-opt{flex-direction:column;justify-content:center;gap:8px;min-height:84px;padding:12px 8px;text-align:center;font-size:14px}}
@media(min-width:768px){.fit-kicker{margin-top:56px}.fit-q{font-size:34px}}
/* 적성검사 첫 화면(#/fit, 2026-09-25) — 직업 첫 화면의 .hero · .h1 em · .hero-sub 를 그대로 쓰고, 대학 첫 화면의 머리글 · 숫자 요약 카드를 닮게. 적성검사 색(청록 61,232,198 = CROSS_HUE.fit) */
.fl-hero{--fl:61,232,198}
.fl-hero .hero-bg{-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}   /* 검색창이 없어 히어로가 짧다 — 글로우가 아래 경계에서 잘려 보이지 않게 흐린다 */
.fl-e{margin:0;font:700 13px/1.3 var(--f-body);letter-spacing:.01em;color:rgb(var(--fl))}
.fl-hero .h1{margin-top:10px}
.fl-hero .h1 .fl-ph{white-space:nowrap}   /* 일본어 · 중국어 제목은 구절 단위로 줄을 바꾼다. inline-block 은 안 된다 — WebKit 에서 em 의 글자 그라데이션(background-clip:text)이 사라진다 */
.fl-hero .hero-sub{margin-bottom:22px;text-wrap:pretty}
#root[lang="ja"] .fl-hero .hero-sub{word-break:auto-phrase}
.fl-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:440px}
.fl-cta .btn{white-space:normal;text-align:center;line-height:1.25}
.fl-go{min-height:56px;height:auto;padding:12px 22px;border-radius:16px;font-size:17px;font-weight:700}
.fl-go svg{width:20px;height:20px}
.fl-alt{min-height:48px;height:auto;padding:10px 20px}
.fl-note{display:flex;align-items:center;gap:7px;margin:14px 0 0;font:500 12.5px/1.45 var(--f-body);color:var(--muted);text-wrap:pretty}
.fl-note svg{width:14px;height:14px;flex:none;color:rgb(var(--fl))}
.fl-body{--fl:61,232,198}
.fl-sum{position:relative;isolation:isolate;padding:20px 18px 18px;margin-top:18px}
.fl-sum::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 100% 0%,rgba(var(--fl),.15),transparent 70%)}
.fl-sum-top{display:flex;align-items:center;gap:10px}
.fl-sum-t{flex:1;min-width:0}
.fl-sum h2{margin:0;font:800 19px/1.3 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.fl-sum p{margin:6px 0 0;font:400 12.5px/1.5 var(--f-body);color:var(--muted);text-wrap:pretty}
.fl-art{flex:none;width:104px;height:72px;display:block}
.fl-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 0}
.fl-nums div{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.fl-nums dt{font:500 11px/1.3 var(--f-body);color:var(--muted);overflow-wrap:anywhere}
.fl-nums dd{margin:0;font:800 27px/1 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.fl-nums div:nth-child(3) dd{color:rgb(var(--fl))}
.fl-how{margin-top:40px}
.fl-how .sec-t{margin-bottom:14px}
.fl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fl-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--border)}
.fl-step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(var(--fl),.12);color:rgb(var(--fl));font:800 15px/1 var(--f-display)}
.fl-steps h3{margin:5px 0 6px;font:700 16px/1.3 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.fl-steps p{margin:0;font:400 13.5px/1.6 var(--f-body);color:var(--muted);text-wrap:pretty}
.fl-axes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fl-axes li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border-radius:999px;background:var(--surface-2);font:500 12px/1.2 var(--f-body);color:var(--text)}
.fl-axes li::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--ft2-ax)}
.fl-ex{margin-top:40px}
.fl-ex .sec-t{margin-bottom:22px}
.fl-ex-box{position:relative;padding:22px 10px 10px;border-radius:26px;border:1.5px dashed rgba(var(--fl),.45)}
.fl-ex-flag{position:absolute;top:-13px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:999px;background:var(--bg);border:1.5px solid rgba(var(--fl),.55);font:700 13px/1 var(--f-body);letter-spacing:.02em;color:rgb(var(--fl))}
.fl-ex-flag svg{width:14px;height:14px;flex:none}
.fl-ex-box .ft2-hero{margin-bottom:10px}
.fl-ex .ft2-type-t small{color:rgb(var(--fl))}
.fl-ex .fit-name{filter:none;user-select:auto;-webkit-user-select:auto;pointer-events:none;color:var(--text)}
.fl-ex-lock{display:flex;align-items:center;gap:7px;margin:0;padding:2px 16px 12px 74px;border-bottom:1px solid var(--border);font:500 12.5px/1.45 var(--f-body);color:var(--muted);text-wrap:pretty}
.fl-ex-lock svg{width:14px;height:14px;flex:none;color:rgb(var(--fl))}
.fl-ex-note{margin:10px 4px 0;font:400 12.5px/1.5 var(--f-body);color:var(--muted);text-wrap:pretty}
.fl-ex>.ai-notice{margin:14px 0 0}
.fl-cta-end{margin:32px auto 0}
@media(min-width:768px){
  .fl-e{font-size:14px}
  .fl-cta{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:none}
  .fl-go{min-width:300px}
  .fl-alt{min-height:56px;border-radius:16px}
  .fl-note{justify-content:center}
  .fl-sum{padding:24px 26px 22px}
  .fl-sum h2{font-size:22px}
  .fl-sum p{font-size:13.5px}
  .fl-art{width:168px;height:104px}
  .fl-nums dt{font-size:12px}
  .fl-nums dd{font-size:34px}
  .fl-steps li{padding:18px 20px}
  .fl-ex-box{padding:24px 12px 12px}
  #root[lang="zh-TW"] .fl-hero .h1{font-size:54px;max-width:20ch}   /* 중국어 제목도 한국어 · 일본어처럼 54px — 76px · 15ch 에서는 구절이 한 줄에 하나씩 4줄로 쌓였다 */
}
@media(max-width:359px){.fl-art{display:none}.fl-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}}
.fit-axes{display:grid;gap:10px;padding:16px 18px;margin:0 0 16px}
.axis{display:grid;grid-template-columns:minmax(84px,auto) 1fr 32px;align-items:center;gap:12px;font:500 13px var(--f-body);color:var(--muted)}
.axis.top{color:var(--text);font-weight:600}
.axis .bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.axis .bar i{display:block;height:100%;border-radius:999px;background:var(--border-2)}
.axis.top .bar i{background:var(--spectrum)}
.axis .n{text-align:right}
.fit-rank{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:700 12px var(--f-display);background:var(--surface-2);color:var(--muted);white-space:nowrap;flex:none}
.card-fit .fit-rank{background:var(--card-glass);border:1px solid var(--card-border);color:var(--card-text)}
.card-fit .big.fitp{font-size:72px;margin:18px 0 8px}
.card-fit .card-foot a.q{text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.card-fit .card-foot a.q svg{width:14px;height:14px}
.fit-lock{margin-top:16px}
.fit-row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px}
.fit-row+.fit-row{border-top:1px solid var(--border)}
.fit-name{flex:1;min-width:0;font:700 16px var(--f-display);filter:blur(6px);user-select:none;-webkit-user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fit-pct{font:600 13px var(--f-body);color:var(--muted);white-space:nowrap}
.fit-cta{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.fit-cta [hidden]{display:none!important}
.fit-cta .btn{white-space:normal;height:auto;min-height:48px;padding:12px 20px;text-align:center;line-height:1.25}
.fit-email{display:flex;gap:8px}
.fit-email input{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font:500 15px var(--f-body);color:var(--text)}
.fit-email input::placeholder{color:var(--faint)}
.fit-email .btn{flex:none}
.fit-email-done{display:flex;align-items:center;gap:8px;margin:0;min-height:48px;padding:0 16px;border-radius:14px;background:var(--surface-2);font:500 14px var(--f-body);color:var(--text)}
.fit-email-done svg{width:16px;height:16px;color:var(--pos);flex:none}
/* share-to-unlock gate (locked) · unlocked #2·#3 rows */
.fit-lock-h{margin:0 0 8px;font:600 13px var(--f-body);color:var(--muted)}
.fit-lock.open .fit-name{filter:none;user-select:auto;-webkit-user-select:auto;pointer-events:auto;color:var(--text);text-decoration:none}
.fit-lock.open .fit-name:hover{text-decoration:underline}
.fit-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.fit-left{font:500 12px var(--f-body);color:var(--muted);white-space:nowrap}
.fit-gate{display:flex;flex-direction:column;gap:10px;margin:12px;padding:14px;border-radius:12px;background:var(--surface-2)}
.fit-gate+.fit-row{border-top:1px solid var(--border)}
.fit-gate-h{margin:0;font:700 16px var(--f-display);color:var(--text)}
.fit-gate-p{margin:0;font:400 14px/1.5 var(--f-body);color:var(--muted)}
.fit-gate .btn{width:100%;white-space:normal;height:auto;min-height:48px;padding:12px 20px;line-height:1.25}
.fit-gate .soc-row{margin-top:0}
.fit-gate .soc{background:var(--surface);border-color:var(--border)}
.fit-gate [hidden]{display:none!important}
.fit-gate-alt{align-self:center;background:none;border:0;padding:4px 6px;font:500 13px var(--f-body);color:var(--muted);text-decoration:underline;cursor:pointer}
.fit-gate-alt:hover{color:var(--text)}
/* FIT_TOP_LOCK: 잠긴 1위는 2·3위와 같은 한 줄이다 — 이름 자리는 막대, 바로 아래에 한 줄짜리 잠금 해제(2026-09-18 오너 지시로 큰 패널을 걷어냈다) */
.fit-row-locked .tile{opacity:.75}
.fit-name-masked{flex:1;min-width:0;height:18px;border-radius:999px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));max-width:200px}
@media(prefers-reduced-motion:no-preference){.fit-name-masked{background-size:220% 100%;animation:tlockShimmer 2.4s ease-in-out infinite}}
@keyframes tlockShimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
/* ===== 적성 결과·검사 v2 (ft2-) — 막대 6줄 → 육각 레이더, TOP 3 행에 분야 그림 + 적합도 링, 잠금 해제 뒤집기, 축별 진행 막대 =====
   오너 지적: 이 화면은 '쓸데없이 크다' — 순위 행은 준비 가이드 버튼까지 넣고도 모바일에서 84px 을 넘지 않는다(행을 2줄 그리드로 짜고 버튼을 둘째 줄에 넣었다).
   잠긴 1위 자리에는 잠금 큐브와 가려진 막대뿐이다 — 분야 그림·링·기간·등급 색이 없다(단서가 새지 않게). */
.ft2-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 무채색 유리 그림에 등급 색 입히기 — .hc-art 와 같은 기법(마스크 + mix-blend-mode:color) */
.ft2-art{position:relative;display:block;flex:none;aspect-ratio:1}
.ft2-art img{width:100%;height:100%;object-fit:contain;display:block}
.ft2-art::after{content:'';position:absolute;inset:0;background:rgb(var(--tc-rgb));mix-blend-mode:color;opacity:.78;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.ft2-art.alt::after{background:rgb(var(--tc2-rgb))}
.ft2-art.plain::after{display:none}
/* 적성 히어로: 유형 이름(위) + 레이더(아래), 768px 부터 좌우 */
.ft2-hero{position:relative;isolation:isolate;display:grid;gap:8px;padding:14px 14px 6px;margin:0 0 16px}
.ft2-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 60% at 100% 0%,rgba(var(--tc-rgb),.16),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(var(--tc2-rgb),.1),transparent 70%)}
.ft2-type{display:flex;align-items:center;gap:12px;min-width:0}
.ft2-icons{display:flex;flex:none}
.ft2-icons .ft2-art{width:48px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.ft2-icons .ft2-art+.ft2-art{margin-left:-12px}
.ft2-type-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.ft2-type-t small{font:600 11px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ft2-type-t h2{margin:0;font:800 20px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.ft2-type-t h2 i{font-style:normal;color:var(--tc);white-space:nowrap}
.ft2-type-t h2 i.b{color:rgb(var(--tc2-rgb))}
.ft2-type-t p{margin:0;font:400 12.5px/1.4 var(--f-body);color:var(--muted);text-wrap:pretty}
.ft2-radar{display:block;width:100%;max-width:312px;height:auto;margin:0 auto;overflow:visible}
.ft2-radar text{font:500 12px var(--f-body);fill:var(--muted)}
.ft2-radar text.top{font-weight:700;fill:var(--text)}
.ft2-radar .v{font:600 10.5px var(--f-body);fill:var(--muted);font-variant-numeric:tabular-nums}
.ft2-radar .top .v{fill:var(--tc)}
.ft2-grid{fill:none;stroke:var(--border);stroke-width:1}
.ft2-grid.out{stroke:var(--border-2)}
.ft2-spoke{stroke:var(--border);stroke-width:1}
.ft2-spoke.top{stroke:rgba(var(--tc-rgb),.45)}
.ft2-dot{fill:var(--muted)}
.ft2-dot.top{fill:var(--tc);filter:drop-shadow(0 0 5px rgba(var(--tc-rgb),.85))}
.ft2-hero.anim .ft2-shape,.ft2-hero.anim .ft2-dot{transform-origin:160px 116px;animation:ft2-bloom .6s .08s cubic-bezier(.2,.7,.2,1) both}
@keyframes ft2-bloom{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
@media(min-width:768px){.ft2-radar{max-width:340px}.ft2-hero{grid-template-columns:minmax(0,1fr) 340px;align-items:center;gap:20px;padding:18px 22px 12px 26px}.ft2-type{flex-direction:column;align-items:flex-start;gap:14px}.ft2-icons .ft2-art{width:56px}.ft2-type-t{gap:6px}.ft2-type-t h2{font-size:26px}.ft2-type-t p{font-size:13.5px}}
/* TOP 3 행: 첫 줄 [순위 · 이름(세 줄까지)] [적합도 링], 둘째 줄 [남은 기간] … [준비 가이드], 그림은 두 줄에 걸친다. KR 팩은 prepRowBlock 이 행을 .fit-prep 으로 감싸므로
   격자를 감싼 쪽에 두고 행은 display:contents 로 푼다 — 그래야 버튼이 행의 둘째 줄에 들어간다. 다른 팩은 행이 곧 격자다. */
.ft2-list .ft2-row,.ft2-list .prep.fit-prep{display:grid;grid-template-columns:46px auto minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:8px 16px;min-height:0}
.ft2-list .prep.fit-prep>.ft2-row{display:contents}
.ft2-pic{grid-area:1/1/3/2;display:grid;place-items:center;width:46px;height:46px}
.ft2-pic .ft2-art{width:46px}
.ft2-main{grid-area:1/2/2/4;min-height:36px;display:flex;align-items:center;gap:8px;min-width:0}
.ft2-main .fit-rank{height:22px;padding:0 8px;font-size:11.5px}
.ft2-list .ft2-main .fit-name{font:700 15px/1.17 var(--f-display);white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-wrap:balance}
.ft2-list .ft2-main .fit-name-masked{display:block}
.ft2-list .ft2-main{position:relative}
.ft2-list .ft2-main a.fit-name::after{content:'';position:absolute;inset:0}
.ft2-meta{grid-area:2/2/3/3;display:inline-flex;align-items:center;gap:5px;min-height:20px;color:var(--muted);white-space:nowrap}
.ft2-meta svg{width:13px;height:13px;flex:none;color:var(--tc)}
.ft2-meta .fit-left{font-size:12.5px}
.ft2-list .prep-t-row{position:relative;grid-area:2/3/3/5;justify-self:end;max-width:100%;min-width:0;margin:0;min-height:28px;padding:0 10px;font-size:12.5px;gap:4px;white-space:nowrap}
.ft2-list .prep-t-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ft2-list .prep-t-row::before{content:'';position:absolute;inset:-7px -4px}   /* 보이는 높이는 28px, 눌리는 영역은 42px */
.ft2-list .prep.fit-prep .prep-b{grid-column:1/-1;padding:8px 0 6px}
.ft2-ringbox{grid-area:1/4/2/5;position:relative;display:grid;place-items:center;width:36px;height:36px;color:var(--tc)}
.ft2-ringbox svg{position:absolute;inset:0;width:100%;height:100%}
.ft2-ringbox b{position:relative;font:800 12px/1 var(--f-display);letter-spacing:-.03em;color:var(--text)}
.ft2-ringbox b small{font:600 8px/1 var(--f-body);color:var(--muted)}
.ft2-list .ft2-arc{animation:ft2-draw .7s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes ft2-draw{from{stroke-dasharray:0 200}}
@media(min-width:768px){.ft2-list .ft2-row,.ft2-list .prep.fit-prep{padding:10px 20px;column-gap:14px}.ft2-list .ft2-main .fit-name{font-size:16px}.ft2-ringbox{width:40px;height:40px}.ft2-ringbox b{font-size:13px}.ft2-list .ft2-gate{padding:0 20px 14px}}
.ft2-locked .ft2-pic .ft2-art{filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.ft2-locked .ft2-main{grid-column:2/5;min-height:22px;align-self:end}
.ft2-locked .ft2-meta{align-self:start}
.ft2-list .ft2-locked .fit-name-masked{height:14px;max-width:150px}
.ft2-mask-s{display:block;width:64px;height:9px;border-radius:999px;background:var(--surface-2)}
/* 잠긴 1위 행과 작은 게이트는 한 덩어리다 — 사이 줄을 없애고, 게이트 다음(2위)에 줄을 긋는다 */
.ft2-list .ft2-gate{border-top:0;padding:0 16px 12px}
.ft2-list .ft2-gate+.ft2-row,.ft2-list .ft2-gate+.prep.fit-prep{border-top:1px solid var(--border)}
.ft2-gate .fg-line{gap:12px}
.ft2-gprog{position:relative;display:grid;place-items:center;width:46px;height:40px;flex:none;color:var(--c-low)}
.ft2-gprog svg{position:absolute;top:0;left:3px;width:40px;height:40px}
.ft2-gate .ft2-gprog .inv-prog{position:relative;margin:0;gap:0}
.ft2-gate .ft2-gprog .inv-n{font:800 11px/1 var(--f-display);letter-spacing:-.02em}
.ft2-garc{transition:stroke-dasharray .5s ease}
.no-motion .ft2-garc{transition:none}
/* 풀린 1위: 직업 결과의 히어로(.hcard)를 그대로 쓰되 이 화면에 맞게 조인다 */
.ft2-top .card-in{padding:18px 18px 16px}
.ft2-top .hc-art{width:31%;max-width:136px}
.ft2-top.has-art .card-head{max-width:72%}
.ft2-top .who-t b{overflow-wrap:anywhere}
.ft2-top .ft2-rk .rank-t{white-space:normal;overflow:visible;text-wrap:pretty}
.ft2-top.has-art .ft2-rk{max-width:68%}
.ft2-top .ft2-cd{display:flex;align-items:baseline;gap:8px;margin:12px 0 0}
.ft2-top .hc-ym{font-size:56px}
.ft2-top .ft2-cd>span{font:600 14px var(--f-body);color:var(--card-muted)}
.ft2-stats{display:grid;grid-template-columns:repeat(3,minmax(min-content,1fr));gap:8px;margin-top:12px}
@media(max-width:340px){.ft2-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.ft2-stat b{overflow-wrap:anywhere}}
.ft2-stat{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 10px 11px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--card-border)}
.ft2-stat small{font:500 11px/1.2 var(--f-body);color:var(--card-muted)}
.ft2-stat b{font:700 14px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--card-text);text-wrap:balance}
.ft2-stat b.tc{color:var(--tc)}
.ft2-stat b em{display:block;margin-top:3px;font:500 11px/1.2 var(--f-body);font-style:normal;color:var(--card-muted)}
.ft2-top .hc-q{margin-top:12px;padding:11px 14px 11px 32px;font-size:13px}
.ft2-top .card-foot{margin-top:14px;padding-top:12px;gap:12px}
.ft2-top .card-foot a.q{text-align:right}
.ft2-top+.prep{margin-top:10px}
/* 잠금이 풀리는 순간 한 번: 잠금 큐브가 그려진 뒷면에서 앞면으로 뒤집힌다. 모션을 끈 환경에서는 클래스를 붙이지 않는다(뒷면이 남으면 안 되므로 CSS 로도 한 번 더 막는다) */
.ft2-face{display:none}
.card.hcard.ft2-flip{animation:ft2-flip .95s both}
.ft2-flip .ft2-face{display:grid;place-items:center;position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--card-bg);animation:ft2-face .95s both}
.ft2-face .ft2-art{width:104px;transform:scaleX(-1)}
@keyframes ft2-flip{0%{transform:perspective(1100px) rotateY(-180deg) scale(.94);animation-timing-function:ease-in}50%{transform:perspective(1100px) rotateY(-90deg) scale(.97);animation-timing-function:ease-out}100%{transform:perspective(1100px) rotateY(0) scale(1)}}
@keyframes ft2-face{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.no-motion .ft2-face{display:none!important}
@media(prefers-reduced-motion:reduce){.ft2-face{display:none!important}}
/* 검사 화면: 진행 막대를 문항이 속한 축별 구간으로(첫 구간은 사전 질문 3개 — 무채색), 문항 전환은 가벼운 슬라이드 */
.fit-bar.ft2-bar{display:flex;gap:3px;height:6px;background:none;overflow:visible;border-radius:0}
.ft2-seg{flex:1 1 0;min-width:0;height:100%;border-radius:999px;background:var(--surface-3);overflow:hidden;--ft2-ax:var(--muted)}
.ft2-seg b{display:block;height:100%;border-radius:999px;background:var(--ft2-ax);transition:width .3s ease}
.ft2-seg.cur{background:var(--border-2)}
.ft2-ax-R{--ft2-ax:var(--c-high)}.ft2-ax-I{--ft2-ax:var(--c-sky)}.ft2-ax-A{--ft2-ax:var(--c-vhigh)}.ft2-ax-S{--ft2-ax:var(--c-low)}.ft2-ax-E{--ft2-ax:var(--c-med)}.ft2-ax-C{--ft2-ax:#A98BFF}
.no-motion .ft2-seg b{transition:none}
.ft2-fwd{animation:ft2-in-r .24s cubic-bezier(.2,.7,.2,1) both}
.ft2-back{animation:ft2-in-l .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes ft2-in-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes ft2-in-l{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.fit-gate-mini{gap:8px;margin:0;padding:10px 16px 14px;background:none;border-top:1px solid var(--border)}
.fit-gate-mini .fg-line{display:flex;align-items:center;gap:10px;margin:0;font:400 13px/1.45 var(--f-body);color:var(--muted)}
.fit-gate-mini .fg-line>span{min-width:0}
.fit-gate-mini .inv-prog{gap:8px;margin-left:auto;flex:none}
.fit-gate-mini .inv-n{font:700 13px/1 var(--f-display)}
.fit-gate-mini .inv-bar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0}
.fit-gate-mini .btn{width:auto;align-self:flex-start;min-height:38px;height:38px;padding:0 14px;font-size:13.5px}
.fit-gate-mini .fg-act{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.fit-gate-mini .fg-alt{display:flex;align-items:center;gap:12px;margin-left:auto;font:500 12.5px var(--f-body)}
.fit-gate-mini .fg-alt a{color:var(--muted);text-decoration:none}
.fit-gate-mini .fg-alt a:hover{color:var(--text);text-decoration:underline}
.fit-gate-mini .fit-gate-alt{font-size:12.5px;padding:0}
.fit-free-note{margin:10px 0 0;font:400 13px/1.5 var(--f-body);color:var(--muted)}
.fit-rule{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);font:400 13px/1.5 var(--f-body);color:var(--muted)}
/* invite gate (INVITE-GATE-SPEC): the progress pair (count + bar) is shared by the gate and #/inv */
.inv-prog{display:flex;align-items:center;gap:12px}
.inv-n{font:800 22px/1 var(--f-display);letter-spacing:-.02em;color:var(--text);white-space:nowrap;flex:none}
.inv-bar{flex:1;min-width:0;height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.inv-bar i{display:block;height:100%;border-radius:999px;background:var(--spectrum);transition:width .4s ease}
.no-motion .inv-bar i{transition:none}
@media(prefers-reduced-motion:reduce){.inv-bar i{transition:none}}
.inv-gate .btn+.btn{margin-top:2px}
/* #/inv — the dashboard: big count, the link itself, what opens at the target */
.inv-wrap{display:flex;flex-direction:column;gap:16px}
.inv-card{padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.inv-card .inv-n{font-size:40px}
.inv-card .inv-bar{height:12px}
.inv-hint{margin:0;font:400 14px/1.5 var(--f-body);color:var(--muted)}
.inv-done{display:flex;align-items:center;gap:8px;margin:0;font:700 15px var(--f-display);color:var(--text)}
.inv-done svg{width:18px;height:18px;color:var(--pos);flex:none}
.inv-l{display:block;margin:0 0 6px;font:600 12px var(--f-body);letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
.inv-link{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:14px;background:var(--surface-2)}
.inv-link code{font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);word-break:break-all}
.inv-link .btn{align-self:stretch}
.inv-note{margin:0;font:400 13px/1.5 var(--f-body);color:var(--muted)}
.inv-meta{margin:0;font:500 13px var(--f-body);color:var(--faint)}
.inv-what{padding:16px}
.inv-what b{display:block;margin:0 0 6px;font:700 15px var(--f-display);color:var(--text)}
.inv-what p{margin:0;font:400 14px/1.6 var(--f-body);color:var(--muted)}
.inv-done.inv-stale{color:var(--muted)}
.inv-share-box{display:flex;flex-direction:column;gap:8px}
.inv-share-box .btn{width:100%;white-space:normal;height:auto;min-height:48px;padding:12px 20px;line-height:1.25}
.inv-acts{display:flex;flex-direction:column;gap:8px}
.inv-acts .btn{width:100%;white-space:normal;height:auto;min-height:48px;padding:12px 20px;line-height:1.25}
.inv-wrap .soc-row{margin-top:0}
@media(min-width:560px){.inv-acts{flex-direction:row}.inv-acts .btn{flex:1}.inv-link{flex-direction:row;align-items:center;justify-content:space-between}.inv-link .btn{align-self:auto;flex:none}}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(28px,20px)}}
.anim.card{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.anim .tl-fill,.anim .tl-band{animation:grow .5s .1s cubic-bezier(.2,.7,.2,1) both}
.anim .tl-mark{animation:pop .3s .38s cubic-bezier(.2,.7,.2,1) both}
.anim .stats .stat{animation:fadeup .35s both}
.anim .stats .stat:nth-child(1){animation-delay:.3s}
.anim .stats .stat:nth-child(2){animation-delay:.38s}
.anim .stats .stat:nth-child(3){animation-delay:.46s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* review hook: under automation (headless capture) or ?motion=0, show the resting state directly */
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important}
/* comments: a per-language thread under the result card; counter button first, list + form on demand; theme tokens only */
.comments{margin-top:28px;scroll-margin-top:72px}
/* 순위표: 탭 줄의 오른쪽 끝에 댓글 칩 — 표가 길어서(750행) 맨 아래 댓글까지 가는 길이 위에 있어야 한다 */
.rank-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.rank-head .rank-tabs{margin-bottom:0}
.c-jump{flex:none;height:40px;color:var(--text)}
.rk-more{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 0}
.rk-more-n{font:500 12.5px/1 var(--f-body);color:var(--muted)}
.rk-more .btn{min-width:220px}
.c-entry{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:22px 0 0;padding:0 16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);color:var(--text);font:600 15px var(--f-body);text-align:left;cursor:pointer;transition:border-color .15s}
.c-entry:hover{border-color:var(--border-2)}
.c-entry svg{width:18px;height:18px;flex:none;color:var(--muted)}
.c-entry span{flex:1;min-width:0}
.c-entry.is-empty span{text-align:center}
/* 댓글 시트 */
.c-ov{z-index:72}
.c-int{max-width:560px;display:flex;flex-direction:column;height:86vh;height:86dvh}
.c-int .int-top{flex:none;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.c-int-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.c-ov .comments{margin:0}
.c-ov .comments .sec-h,.c-ov .c-open{display:none}
.c-ov .c-panel{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.c-ov .c-body{padding:0}
@media(min-width:900px){
  /* 넓은 화면: 오른쪽 패널. 표를 가리지 않게 배경을 흐리지 않는다 — 순위를 보면서 댓글을 읽는다 */
  .ov.c-ov{align-items:stretch;justify-content:flex-end;padding:0;background:rgba(4,6,10,.42);-webkit-backdrop-filter:none;backdrop-filter:none}
  .c-int{width:460px;max-width:460px;height:100vh;height:100dvh;border-radius:24px 0 0 24px;animation:cslide .28s cubic-bezier(.2,.7,.2,1)}
}
@keyframes cslide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.no-motion .c-int{animation:none}
@media(max-width:479px){.rank-head .rank-tabs a{min-width:0;padding:0 14px}}   /* 'Comentarios 12' 처럼 긴 칩이 와도 탭이 줄어들어 한 줄에 선다 */
.sv .comments{margin:0 0 28px}
.comments .sec-h{margin-bottom:12px}
.comments .sec-t small{font:500 14px var(--f-body);color:var(--muted);letter-spacing:0;margin-left:8px}
.c-panel{padding:6px}
.c-open{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:0 14px;border:0;border-radius:14px;background:none;color:var(--text);font:600 15px var(--f-body);text-align:left;cursor:pointer}
.c-open:hover{background:var(--surface-2)}
.c-open svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s}
.c-open.is-empty{position:relative;justify-content:center;padding:14px 40px;text-align:center}
.c-open.is-empty svg{position:absolute;right:14px}
.c-open[aria-expanded="true"] svg{transform:rotate(180deg)}
.c-body{padding:6px 10px 10px}
.c-form{display:flex;flex-direction:column;gap:8px}
.c-form input,.c-form textarea{width:100%;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--border-2);background:var(--surface);font:500 15px var(--f-body);color:var(--text)}
.c-form textarea{height:auto;min-height:84px;padding:10px 14px;resize:vertical;line-height:1.45}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c-btns{display:flex;gap:6px}
.c-count{font:500 12px var(--f-mono);color:var(--faint)}
.c-count.over{color:var(--neg)}
.c-note{margin:8px 2px 0;font:400 12.5px/1.45 var(--f-body);color:var(--faint);text-wrap:pretty}
.c-list{list-style:none;margin:14px 0 0;padding:0}
.c-item{padding:12px 4px 8px;border-top:1px solid var(--border)}
.c-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;font:600 13px var(--f-body)}
.c-meta time{font:400 12px var(--f-body);color:var(--faint)}
.c-me{font:600 10px var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);padding:1px 6px;border-radius:999px}
.c-text{margin:4px 0 0;font:400 15px/1.5 var(--f-body);white-space:pre-wrap;overflow-wrap:anywhere}
.c-acts{display:flex;flex-wrap:wrap;gap:2px 4px;margin:4px 0 0 -8px}
.c-acts button{height:32px;padding:0 8px;border:0;border-radius:8px;background:none;color:var(--muted);font:500 13px var(--f-body);cursor:pointer}
.c-acts button:hover{color:var(--text);background:var(--surface-2)}
.c-acts button:disabled{color:var(--faint);background:none;cursor:default}
.c-rslot .c-form{margin:6px 0 4px}
.c-replies{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--border)}
.c-replies .c-item{border-top:0;padding:8px 0 4px 8px}
.c-empty,.c-unavail{margin:14px 4px 4px;font:400 14px var(--f-body);color:var(--muted)}
.c-empty{padding:20px 16px;text-align:center;line-height:1.5}
.c-unavail{margin:14px}
@media(min-width:768px){.comments{margin-top:36px}.c-panel{padding:8px}.c-body{padding:8px 14px 14px}}
/* prep guide: a collapsed accordion (fit #1 card · unlocked #2·#3 rows · job result section). Theme tokens only. */
.sec>.prep{margin-top:0}
.prep{margin-top:16px;background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden}
.prep-t{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;padding:0 16px;border:0;border-radius:20px;background:none;color:var(--text);font:600 15px var(--f-body);text-align:left;cursor:pointer}
.prep-t:hover{background:var(--surface-2)}
.prep-t svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s}
.prep-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.prep-b{padding:4px 16px 18px;border-top:1px solid var(--border)}
.prep-load,.prep-err{margin:12px 0;font:400 14px var(--f-body);color:var(--muted)}
.prep-langnote{margin:12px 0 2px;font:500 12.5px/1.45 var(--f-body);color:var(--faint)}
.prep-sum{margin:12px 0 0;font:600 15px/1.45 var(--f-body);text-wrap:pretty}
.prep-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.prep-diff{display:inline-flex;align-items:center;gap:8px;flex:none}
.prep-dots{display:inline-flex;gap:3px}
.prep-dots i{width:9px;height:9px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-2)}
.prep-dots i.on{background:var(--text);border-color:var(--text)}
.prep-dl{font:700 13px var(--f-body);white-space:nowrap}
.prep-fact{font:500 13px/1.4 var(--f-body);color:var(--muted);text-wrap:pretty}
.prep-why{margin:8px 0 0;font:400 13.5px/1.55 var(--f-body);color:var(--muted);text-wrap:pretty}
.prep-prog{margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.prep-prog p{margin:0 0 8px;font:600 12.5px var(--f-body);color:var(--muted)}
.prep-bar{display:block;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.prep-bar i{display:block;height:100%;border-radius:999px;background:var(--spectrum);transition:width .2s}
.prep-h{margin:20px 0 8px;font:700 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.prep-h .tag{margin-left:8px;height:22px;letter-spacing:.03em;text-transform:none}
.prep-sal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prep-sal .s{min-width:0;padding:10px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.prep-sal .k{font:500 11.5px var(--f-body);color:var(--muted)}
.prep-sal .n{font:700 15px/1.2 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.prep-sal .u{font:500 11px var(--f-body);color:var(--faint)}
.prep-src{margin-top:8px}
.prep-src summary{font:500 12.5px var(--f-body);color:var(--muted);cursor:pointer;padding:4px 0}
.prep-src ul{margin:4px 0 0;padding-left:18px}
.prep-src li,.prep-src p{margin:2px 0;font:400 12.5px/1.5 var(--f-body);color:var(--faint)}
.prep-rows{display:grid;gap:8px}
.prep-row{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:baseline;font:400 13.5px/1.5 var(--f-body)}
.prep-row>.k{font-weight:600;color:var(--muted)}
.prep-row>.v{min-width:0;text-wrap:pretty}
.prep-lic{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.prep-lic+.prep-lic{margin-top:8px}
.prep-lic b,.prep-res b{font:600 13.5px var(--f-body)}
.prep-lic small{font:400 12px var(--f-body);color:var(--faint);flex-basis:100%}
.prep-req{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;font:700 10.5px var(--f-body);letter-spacing:.03em;white-space:nowrap;background:var(--text);color:var(--bg-2)}
.prep-req.opt{background:var(--surface-3);color:var(--muted)}
.prep-tl{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.prep-tl::before{content:"";position:absolute;left:12px;top:6px;bottom:10px;width:2px;background:var(--border)}
.prep-tl li{position:relative;padding:0 0 14px}
.prep-tl .n{position:absolute;left:-30px;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border-2);font:700 12px var(--f-display);color:var(--text);font-variant-numeric:tabular-nums}
.prep-tl b{display:block;font:600 14px/1.4 var(--f-body)}
.prep-tl p{margin:3px 0 0;font:400 13px/1.55 var(--f-body);color:var(--muted);text-wrap:pretty}
.prep-tl .meta,.prep-ph-h span{font:500 12px var(--f-mono);color:var(--faint)}
.prep-tl .meta{display:block;margin-top:4px}
.prep-total{margin:2px 0 0;font:600 13px var(--f-body);color:var(--text)}
.prep-ul{margin:0;padding-left:18px}
.prep-ul li,.prep-ai{font:400 13.5px/1.55 var(--f-body);text-wrap:pretty}
.prep-ul li{margin:4px 0}
.prep-ul li::marker{color:var(--faint)}
.prep-ph{padding:12px;border-radius:14px;background:var(--surface-2)}
.prep-ph+.prep-ph{margin-top:8px}
.prep-ph-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
.prep-ph-h b{font:700 14px var(--f-display);letter-spacing:-.01em}
.prep-ph-h span{white-space:nowrap}
.prep-ph .prep-ul{margin-bottom:8px}
.prep-ph .prep-ul li{font-size:13px;color:var(--muted)}
.prep-chk{display:flex;align-items:flex-start;gap:9px;padding:6px 4px;border-radius:8px;cursor:pointer;font:400 13.5px/1.45 var(--f-body)}
.prep-chk:hover{background:var(--surface)}
.prep-chk input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--text);cursor:pointer}
.prep-chk input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.prep-chk input:checked+span{color:var(--faint);text-decoration:line-through}
.prep-res{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.prep-res li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:400 13px/1.5 var(--f-body)}
.prep-res .tag{height:20px;padding:0 8px;font-size:10.5px;text-transform:none;letter-spacing:.02em}
.prep-res small{font-size:12.5px;color:var(--muted);flex-basis:100%}
.prep-ai{margin:0}
.prep-costn,.prep-disc{margin:6px 0 0;font:400 12px/1.5 var(--f-body);color:var(--faint);text-wrap:pretty}
.prep-disc{margin-top:10px}
/* in the fit result the block has no chrome of its own — the row above it already sits in .panel */
.prep.fit-prep{margin:0;background:none;border:0;border-radius:0}
.fit-prep+.fit-prep{border-top:1px solid var(--border)}
.prep-t-row{min-height:38px;margin:0 16px 12px;padding:0 12px;width:auto;border:1px solid var(--border);border-radius:999px;font-size:13px;gap:6px}
.prep-t-row svg{width:15px;height:15px}
.prep.fit-prep .prep-b{padding:0 16px 16px;border-top:0}
@media(max-width:479px){.prep-sal.wide{grid-template-columns:1fr}.prep-sal.wide .s{flex-direction:row;align-items:baseline;gap:6px}.prep-sal.wide .k{flex:1}}
@media(min-width:768px){.prep-b{padding:6px 20px 22px}.prep-row{grid-template-columns:84px 1fr}}
/* ---------- survive: the survival calculator (#/survive) — page tokens only; the card CTA uses the card tokens; the nav badge + home teaser ---------- */
.nav-new{display:inline-flex;align-items:center;height:16px;padding:0 5px;margin-left:5px;border-radius:999px;font:700 9px/1 var(--f-body);letter-spacing:.06em;font-style:normal;color:var(--neg);background:var(--neg-soft)}
@media(max-width:419px){.nav-new{display:none}.top .wrap-wide{gap:6px}.nav a{padding:0 6px;font-size:12.5px;letter-spacing:-.01em}.lang select{padding:0 19px 0 8px;font-size:11.5px;background-position:right 6px center}.lang.cc select{padding-left:7px}}
.sv-link-slot{margin-top:10px;text-align:center}
.sv-link{display:inline-block;padding:6px 10px;border-radius:999px;font:500 13.5px/1.4 var(--f-body);color:var(--muted);text-decoration:none;transition:color .15s,background .15s}
.sv-link:hover{color:var(--text);background:var(--surface-2)}
.sv-h1{max-width:16em}
.sv-privacy{display:flex;align-items:center;gap:6px;margin:-8px 0 16px;font:500 13px var(--f-body);color:var(--muted)}
.sv-in,.sv-out{padding:18px 16px 20px;margin-top:16px}
@media(min-width:768px){.sv-in,.sv-out{padding:24px 24px 26px}}
.sv-panel-h{margin:0 0 14px;font:700 17px/1.2 var(--f-display);letter-spacing:-.02em}
.sv-f{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;min-width:0}
/* 소제목(.sv-l · 결과 통계 키)이 --faint 라 라이트에서 흐리게 읽혔다(오너 2026-09-18 "글자색이 맘에 안들어") → 라벨 전용 잉크.
   라이트 #39404F = 흰 패널에서 10.4:1, 다크 #AEB5C6 = 어두운 패널에서 8.6:1. --faint 는 힌트·축 라벨이 함께 쓰므로 건드리지 않는다 */
:root{--sv-lbl:#AEB5C6}
.sv-l{font:600 12px/1.3 var(--f-body);letter-spacing:.02em;text-transform:uppercase;color:var(--sv-lbl)}
.sv-l .sv-opt{text-transform:none;letter-spacing:0;font-weight:500}
.sv-hint{font:400 12.5px/1.4 var(--f-body);color:var(--faint)}
.sv-hint[hidden]{display:none}
.sv-f>input[type=text]{width:100%;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font:500 16px var(--f-body);color:var(--text)}
.sv-f input::placeholder{color:var(--faint)}
.sv-amt{display:flex;align-items:center;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);transition:border-color .15s}
.sv-amt:focus-within{border-color:var(--text)}
.sv-amt.bad{border-color:var(--neg)}
.sv-amt input{flex:1;min-width:0;height:46px;padding:0;border:0;background:none;font:500 16px var(--f-body);color:var(--text);font-variant-numeric:tabular-nums}
.sv-amt input:focus{outline:none}
.sv-amt input:disabled{color:var(--faint)}
.sv-amt .sv-u{flex:none;margin-left:8px;font:500 13px var(--f-body);color:var(--muted);white-space:nowrap}
.sv-amt.pre .sv-u{margin:0 6px 0 0}
.sv-jobrow{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 12px 6px 8px;border-radius:14px;background:var(--surface-2)}
.sv-jobname{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.sv-jobname b{font:700 15px var(--f-display);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-jobname small{font:400 12px var(--f-body);color:var(--muted)}
.sv-jobchg{flex:none;font:500 13px var(--f-body);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sv-jobchg:hover{color:var(--text)}
.sv-grid2{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:560px){.sv-grid2{grid-template-columns:1fr 1fr}}
.sv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip.sv-chip{height:auto;min-height:40px;padding:8px 14px;gap:2px;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.15;font-size:13.5px;font-weight:600;text-align:left}
.chip.sv-chip small{font:400 11px/1.2 var(--f-body);opacity:.72}
.sv-seg .chip.sv-chip{min-height:32px;padding:5px 11px;font-size:12.5px}
.sv-calc{width:100%;margin-top:4px}
.sv-valid{margin:0 0 10px;font:500 13px/1.4 var(--f-body);color:var(--neg)}
.sv-presets{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.sv-presets .sv-l{display:block;margin-bottom:8px}
.sv-out{position:relative;transition:opacity .15s}
.sv-out.pending,.sv2-dl.pending,.sv-sug.pending{opacity:.55}
.sv-badge{display:inline-flex;align-items:center;max-width:100%;height:24px;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font:600 11px var(--f-body);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-rtitle{margin:12px 0 4px;font:600 15px/1.35 var(--f-body);color:var(--muted);text-wrap:pretty}
.sv-nline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:4px 0 8px}
.sv-n{font:800 56px/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.sv-n.long{font-size:44px}
.sv-unit{font:600 20px/1 var(--f-display);letter-spacing:-.01em;color:var(--muted)}
.sv-out.improved .sv-n,.sv-out.inf .sv-n{color:var(--pos)}
.sv-out.pre .sv-n{color:var(--neg)}
@media(min-width:768px){.sv-n{font-size:72px}.sv-n.long{font-size:56px}.sv-unit{font-size:24px}}
.sv-cap{margin:0;font:400 14.5px/1.5 var(--f-body);color:var(--muted);text-wrap:pretty}
.sv-cap b{color:var(--text);font-weight:600}
.sv-cmp{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--pos);font:600 12.5px/1.3 var(--f-body)}
.sv-cmp[hidden],.sv-prewarn[hidden],.sv-leg [hidden]{display:none}
.sv-prewarn{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font:400 13px/1.45 var(--f-body);color:var(--text)}
.sv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:479px){.sv-stats{grid-template-columns:1fr 1fr}.sv-stats .sv-stat:last-child{grid-column:1/-1}}
.sv-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.sv-stat .k{font:600 10.5px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-lbl)}
.sv-stat .v{font:700 17px/1.15 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.sv-stat .v small{font:500 12px var(--f-body);color:var(--muted);margin:0 2px}
.sv-stat .v.neg{color:var(--neg)}.sv-stat .v.pos{color:var(--pos)}
.sv-start{margin:12px 0 0;font:400 13px/1.45 var(--f-body);color:var(--muted)}
.sv-start b{color:var(--text);font-weight:600}
.sv-chart-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.sv-chart-h h3{margin:0;font:600 14px var(--f-body);color:var(--text)}
.sv-leg{display:flex;gap:12px;font:500 11.5px var(--f-body);color:var(--muted)}
.sv-leg span{display:inline-flex;align-items:center;gap:5px}
.sv-leg i{width:14px;height:0;border-top:2px dashed var(--neg)}
.sv-leg .chg i{border-top:2px solid var(--pos)}
.sv-chart-box{width:100%;padding:8px 6px 4px;border-radius:12px;background:var(--surface-2);box-sizing:border-box}
.sv-chart{display:block;width:100%;height:180px;overflow:visible}
.sv-chart .sv-ax{stroke:var(--border-2)}.sv-chart .sv-grid{stroke:var(--border)}
.sv-chart .sv-lbl{fill:var(--muted);font:500 10px var(--f-mono)}
.sv-chart .sv-base{stroke:var(--neg);fill:none;stroke-linejoin:round}
.sv-chart .sv-chg{stroke:var(--pos);fill:none;stroke-linejoin:round}
.sv-chart .sv-area{fill:var(--neg);fill-opacity:.06;stroke:none}
.sv-chart .sv-dot-base{fill:var(--neg);stroke:var(--surface);stroke-width:2}.sv-chart .sv-dot-chg{fill:var(--pos);stroke:var(--surface);stroke-width:2}
.sv-chart .sv-dot2{stroke:none}
.sv-chart .sv-pill{fill:var(--surface);stroke:var(--border-2);stroke-width:.7}
.sv-chart .sv-pill-t{font:600 10px var(--f-body)}
.sv-chart .sv-pill-t.base{fill:var(--neg)}.sv-chart .sv-pill-t.chg{fill:var(--pos)}
.sv-chart-note{margin:8px 0 0;font:400 12px/1.4 var(--f-body);color:var(--faint)}
.sv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sv-acts .btn{flex:1 1 40%}
.sv-acts .btn-ghost{flex:1 1 100%;justify-content:flex-start;padding-left:6px;height:40px}
@media(max-width:479px){.sv-acts .btn{flex-basis:100%}}
.sv-soc{margin-top:10px}
.story-hint.sv-warn{color:var(--neg);font-weight:600}
.sv-chks{display:flex;flex-wrap:wrap;gap:8px;margin:10px 16px 0}
.sv-chks .pt-chk{margin:0;height:40px;font-size:13.5px}
.sv-sc-h{margin:32px 0 12px}
.sv-sc-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sv-sc-top h2{margin:0 0 4px;font:700 20px/1.2 var(--f-display);letter-spacing:-.02em}
.sv-sc-top p{margin:0;font:400 14px/1.5 var(--f-body);color:var(--muted);max-width:60ch}
.sv-sc-top .btn{flex:none}
.sv-sc{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.sv-sc{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.sv-sc{grid-template-columns:repeat(4,1fr)}}
.sv-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);transition:border-color .15s}
.sv-card.on{border-color:var(--border-2)}
.sv-card.off{opacity:.5}
.sv-card h3{margin:0;font:700 15px/1.3 var(--f-display);letter-spacing:-.01em}
.sv-card p{margin:0;font:400 13px/1.45 var(--f-body);color:var(--muted)}
.sv-vrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:4px}
.sv-card output{font:800 22px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.sv-delta{font:500 12px var(--f-body);color:var(--muted)}
input[type=range].sv-range{width:100%;height:28px;margin:6px 0 0;accent-color:var(--text);cursor:pointer;touch-action:pan-y}
input[type=range].sv-range:disabled{cursor:not-allowed}
.sv-ends{display:flex;justify-content:space-between;font:500 11px var(--f-body);color:var(--faint)}
.sv-re-row{display:grid;grid-template-columns:1fr;gap:8px;margin-top:4px}
/* 연금 3칸: 한 줄에 나이·개시연령·금액. 좁은 화면에서는 금액이 아래로 내려간다(숫자 두 칸은 짧아 나란히 둬도 읽힌다) */
/* 제목과 '선택 입력'을 붙여 둔다 — .sv-row 의 space-between 을 쓰면 힌트가 반대쪽 끝으로 밀려
   선택 사항이라는 뜻이 제목에 걸리지 않는다(오너 지적 2026-09-18) */
.sv-pen3-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sv-pen3-h .sv-l{display:inline;margin:0}
.sv-optbadge{font:600 10.5px/1 var(--f-body);letter-spacing:.02em;color:var(--muted);
 background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 7px;white-space:nowrap}
.sv-pen3-row{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px;margin-top:4px}
.sv-pen3-row .sv-f{margin:0;min-width:0}
/* 세 칸을 한 줄에 — 좁은 화면(390px)에서도 유지한다. 라벨이 길어 두 줄이 되는 것은 허용하고, 칸 자체는 넘치지 않게 min-width:0 으로 눌러 둔다 */
.sv-pen3-row .sv-l{font-size:12px;line-height:1.25}
.sv-pen3-row input{min-width:0;width:100%}
@media(min-width:560px){.sv-pen3-row{gap:8px}.sv-pen3-row .sv-l{font-size:13px}}
.sv-pen3.off{opacity:.55;pointer-events:none}
.sv-re-row .sv-f{margin:0}
.sv-re-row .sel{width:100%}
.sv-re-note{margin:4px 0 0;font:400 12px/1.4 var(--f-body);color:var(--faint)}
.sv-re-note.late{color:var(--neg)}
.sv-card .pt-chk{align-self:flex-start;height:36px;font-size:13px}
.sv-sum{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--surface-2);font:400 13.5px/1.5 var(--f-body);color:var(--muted)}
.sv-sum.active{color:var(--text)}
.sv-sum b{color:var(--pos);font-weight:600}
.sv-sum svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--faint)}
/* ===== 생존 계산기 결과 v2 (sv2) ===== 직업 결과 화면과 같은 말투: 히어로 카드(등급 색 글로우 + 유리 일러스트) · 지표 3칸 · 패널.
   이 블록 뒤에도 옛 .sv-* 규칙이 남아 있어서(.sv-cdbox 등) 전부 .sv2-* 조상을 붙여 우선순위로 이긴다. 등급 색은 #sv-res[data-tier] 가 내려 준다. */
.sv2-out{padding:0;border-radius:28px}   /* 패널 껍데기를 벗는다 — 안에 히어로 카드·지표·그래프 패널이 세로로 쌓인다 */
@media(min-width:768px){.sv2-out{padding:0}}
.sv2-hero .hc-art{top:12px;right:10px;width:24%;max-width:112px;aspect-ratio:315/480}   /* 모래시계는 세로로 긴 그림이라 정사각 틀 대신 제 비율로 */
.sv2-hero.has-art .card-head{max-width:72%}
.sv2-hero .who{align-items:flex-start}
.sv2-hero .sv-rtitle{margin:0;font:700 16.5px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--card-text);text-wrap:balance}
.sv2-hero .sv-rtitle .sv2-ph{display:inline-block}:lang(ja) .sv2-hero .sv-rtitle{word-break:auto-phrase}
.sv2-hero .sv-badge{align-self:flex-start;height:auto;min-height:22px;margin-top:7px;padding:3px 10px;line-height:1.3;white-space:normal;background:var(--card-glass);border:1px solid var(--card-border);color:var(--card-muted)}
.sv2-hero .hc-rank{max-width:72%}
.sv2-tier{color:var(--tc)}
.sv2-hero .hc-rank .rank-t{white-space:normal;overflow:visible}
.sv2-hero .sv2-cd{margin:18px 0 12px}
.sv2-hero .sv-nline{margin:0;gap:4px 9px}
.sv2-out .sv2-hero .sv-n{font:800 64px/1.02 var(--f-display);letter-spacing:-.045em;color:var(--card-text);text-shadow:0 0 30px rgba(var(--tc-rgb),.6)}   /* 늘었는지는 등급 색과 아래 알약이 말한다 — 숫자는 직업 카드처럼 늘 흰색 */
.sv2-out .sv2-hero .sv-n.long{font-size:50px}
.sv2-hero .sv-unit{font:800 32px/1 var(--f-display);letter-spacing:-.03em;color:var(--card-text)}
@media(max-width:359px){.sv2-out .sv2-hero .sv-n{font-size:54px}.sv2-out .sv2-hero .sv-n.long{font-size:42px}.sv2-hero .sv-unit{font-size:26px}}
.sv2-hero .sv-cdbox{margin:12px 0 0;padding:0;border:0;border-radius:0;background:none}
.sv2-hero .sv-cdbox.inf{display:none}
.sv2-hero .sv-cd-l{font:500 11.5px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--card-faint)}
.sv2-hero .sv-cd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px}
.sv2-hero .sv-cd-big{align-items:baseline;gap:8px}
.sv2-hero .sv-cd-c{gap:3px}
.sv2-hero .sv-cd-c b,.sv2-hero .sv-cd-clock b{font:600 15px/1 var(--f-display);letter-spacing:.03em;color:var(--card-text)}
.sv2-hero .sv-cd-c small{font:500 12px/1 var(--f-body);color:var(--card-faint)}
.sv2-hero .sv-cd-clock{margin:0;font:600 15px/1 var(--f-display);letter-spacing:.03em;color:var(--card-faint)}
.sv2-hero .sv-cap{margin:0;color:var(--card-muted)}
.sv2-hero .sv-cap b{color:var(--card-text)}
.sv2-hero .sv2-when{margin-top:2px}
.sv2-hero .sv-cd-date{margin:0;font:inherit;font-weight:600;color:var(--card-text)}
.sv2-hero .sv2-when [hidden]{display:none}
.sv2-hero .sv-cmp{margin-top:14px;background:rgba(var(--tc-rgb),.14);border:1px solid rgba(var(--tc-rgb),.32);color:var(--tc)}
.sv2-hero .sv-prewarn,.sv2-hero .sv-penmsg{margin-top:14px;border-radius:16px;background:rgba(255,255,255,.04);border-color:var(--card-border);color:var(--card-muted)}
.sv2-tiles .rs-tile{gap:7px}
.sv2-tiles .rs-ic{width:20px;height:20px}
.sv2-tiles .rs-ic.up{color:var(--pos)}.sv2-tiles .rs-ic.up svg{transform:scaleY(-1)}
.sv2-tiles .rs-v b{font-size:16px;white-space:normal;overflow-wrap:anywhere}   /* 금액은 아이콘 옆에 안 들어간다 — 아이콘을 위로 올리고 값에 한 줄을 다 준다 */
.sv2-tiles .rs-v b small{display:inline-block;font:500 11px/1 var(--f-body);color:var(--muted);margin:0 1px;white-space:nowrap}
.sv2-tiles .rs-v b.neg{color:var(--neg)}.sv2-tiles .rs-v b.pos{color:var(--pos)}
.sv2-chartp{margin-top:10px;padding:16px 16px 14px}
.sv2-chartp .sv-chart-h{margin:0 0 10px}
.sv2-chartp .sv-chart-h h3{font:700 15px/1.2 var(--f-display);letter-spacing:-.01em}
.sv2-chartp .sv-chart-box{background:linear-gradient(180deg,rgba(var(--tc-rgb),.07),transparent 72%),var(--surface-2)}
.sv2-chartp .sv-start{margin-top:10px}
.sv2-chartp .sv-rate-line{margin-top:4px}
.sv2-out .sv-leg i{border-top:2px solid var(--tc)}
.sv2-out.sv2-chgd .sv-leg span:first-child i{border-top:2px dashed var(--muted)}
.sv2-out .sv-chart .sv2-g0{stop-color:var(--tc);stop-opacity:.46}
.sv2-out .sv-chart .sv2-g1{stop-color:var(--tc);stop-opacity:0}
.sv2-out .sv-chart .sv2-area{stroke:none}
.sv2-out .sv-chart .sv2-line{stroke:var(--tc);stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(var(--tc-rgb),.6))}
.sv2-out .sv-chart .sv-base:not(.sv2-line){stroke:var(--muted);opacity:.7}
.sv2-out .sv-chart .sv-dot-base,.sv2-out .sv-chart .sv-dot-chg,.sv2-out .sv-chart .sv2-mk-dot{fill:var(--tc);stroke:var(--surface-2);stroke-width:2}
.sv2-out .sv-chart .sv2-mk{filter:drop-shadow(0 0 6px rgba(var(--tc-rgb),.9))}
.sv2-out .sv-chart .sv2-halo{fill:var(--tc);opacity:.26;transform-box:fill-box;transform-origin:center;animation:sv2-pulse 2.8s ease-out infinite}
.sv2-out .sv-chart .sv-pill{stroke:rgba(var(--tc-rgb),.5)}
.sv2-out .sv-chart .sv-pill-t.base,.sv2-out .sv-chart .sv-pill-t.chg{fill:var(--tc)}
.sv2-draw{animation:sv2-dash 1.2s cubic-bezier(.4,0,.2,1) forwards}
.sv2-in{animation:sv2-fade .5s ease both}
@keyframes sv2-dash{to{stroke-dashoffset:0}}
@keyframes sv2-fade{from{opacity:0}to{opacity:1}}
@keyframes sv2-pulse{0%{opacity:.5;transform:scale(.55)}70%,100%{opacity:0;transform:scale(1.7)}}
/* 모션을 끄면 애니메이션이 통째로 사라진다(전역 규칙) — 그때 선이 점선 오프셋에 갇혀 안 보이는 일이 없게 */
.no-motion .sv2-draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.sv2-draw{stroke-dasharray:none!important;stroke-dashoffset:0!important}}
.sv2-dlslot{display:grid;align-content:start;min-height:68px;margin-top:6px}   /* 설명 문장과 변화량 배지가 같은 자리를 번갈아 쓴다 — 높이를 미리 잡아 슬라이더가 밀리지 않는다 */
.sv2-dlslot p{margin:0;font:400 14px/1.5 var(--f-body);color:var(--muted);max-width:60ch;text-wrap:pretty}
.sv2-dlslot p[hidden],.sv2-dl[hidden]{display:none}
.sv2-dl{display:inline-flex;flex-direction:column;gap:6px;justify-self:start;max-width:100%;padding:10px 14px 11px;border-radius:16px;background:rgba(var(--tc-rgb),.1);border:1px solid rgba(var(--tc-rgb),.36);box-shadow:0 0 26px rgba(var(--tc-rgb),.16)}
.sv2-dl-k{font:600 10.5px/1 var(--f-body);letter-spacing:.03em;color:var(--muted)}
.sv2-dl-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font:800 28px/1 var(--f-display);letter-spacing:-.03em;color:var(--text)}
.sv2-dl-a{font-size:22px;font-weight:700;color:var(--muted)}
.sv2-dl i{font-style:normal;font-size:18px;font-weight:600;color:var(--faint)}
.sv2-dl b.txt{font-size:22px}
.sv2-dl-u{margin-left:-4px;font:700 15px/1 var(--f-display);color:var(--muted)}
.sv2-dl em{align-self:center;margin-left:2px;padding:5px 9px;border-radius:999px;background:var(--tc);color:#0B0D12;font:800 14px/1 var(--f-display);font-style:normal;letter-spacing:0}
.sv2-dl.down em{background:var(--neg)}
.sv2-res .sv-delta{padding:5px 10px;border-radius:999px;background:var(--surface-2);font-weight:600;white-space:nowrap}
.sv2-res .sv-card.on:not(.sv-card-rate) .sv-delta{background:rgba(var(--tc-rgb),.14);color:var(--tc);box-shadow:inset 0 0 0 1px rgba(var(--tc-rgb),.3)}
.sv2-res .sv-card.on:not(.sv-card-rate){border-color:rgba(var(--tc-rgb),.38)}
.sv2-res .sv-card.on:not(.sv-card-rate) input[type=range].sv-range{accent-color:var(--tc)}
.sv2-sgs{display:grid;grid-template-columns:1fr;gap:8px}
.sv2-sg{display:grid;grid-template-columns:40px minmax(0,1fr) auto 24px;align-items:center;gap:10px;width:100%;min-height:60px;padding:9px 12px 9px 10px;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-family:var(--f-body);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.sv2-sg:hover{border-color:rgba(var(--tc-rgb),.55)}
.sv2-sg:active{transform:scale(.985)}
.sv2-sg[disabled]{opacity:.45;cursor:default;transform:none}
.sv2-sg-art{position:relative;width:40px;height:40px}
.sv2-sg-art img{display:block;width:100%;height:100%;object-fit:contain}
.sv2-sg-art::after{content:'';position:absolute;inset:0;background:rgb(var(--tc-rgb));mix-blend-mode:color;opacity:.78;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.sv2-sg .tile{width:40px;height:40px}
.sv2-sg-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.sv2-sg-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:700 14px/1.2 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.sv2-sg-t small{font:500 11.5px/1.2 var(--f-body);color:var(--muted)}
.sv2-sg-g{padding:6px 9px;border-radius:999px;background:rgba(var(--tc-rgb),.14);color:var(--tc);font:700 12.5px/1 var(--f-display);white-space:nowrap}
.sv2-sg-g[hidden]{display:none}
.sv2-sg-plus{grid-column:4;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--border-2);color:var(--muted);font:500 16px/1 var(--f-body)}
.sv2-fitl{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:12px 0 -6px;padding-top:6px;border-top:1px solid var(--border);font:600 13.5px/1.35 var(--f-body);color:var(--text);text-decoration:none}
.sv2-fitl svg{flex:none;width:16px;height:16px;color:var(--muted)}
.sv2-fitl:hover{color:var(--tc)}
.no-motion .sv2-sg{transition:none}
/* ===== /sv2 ===== */
.sv-principle{margin-top:8px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--border)}
.sv-principle h3{margin:0 0 6px;font:700 17px/1.3 var(--f-display);letter-spacing:-.02em}
.sv-principle p{margin:0;font:400 14px/1.55 var(--f-body);color:var(--muted)}
.sv-faq{margin-top:12px}
.sv-faq details,.sv-method{border-top:1px solid var(--border)}
.sv-faq details:last-child,.sv-method{border-bottom:1px solid var(--border)}
.sv-faq details+details{border-top:0}
.sv-faq summary,.sv-method summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none;font:600 15px/1.35 var(--f-body);color:var(--text)}
.sv-faq summary::-webkit-details-marker,.sv-method summary::-webkit-details-marker{display:none}
.sv-faq summary::after,.sv-method summary::after{content:"+";flex:none;font:500 18px/1 var(--f-body);color:var(--muted)}
.sv-faq details[open] summary::after,.sv-method[open] summary::after{content:"−"}
.sv-faq details p,.sv-method p{margin:0 0 14px;font:400 14px/1.6 var(--f-body);color:var(--muted)}
.sv-method{margin-top:12px}
.sv-method h4{margin:12px 0 4px;font:700 14px/1.3 var(--f-display)}
.sv-formula{padding:10px 12px;border-radius:10px;background:var(--surface-2);font:600 13.5px var(--f-mono);color:var(--text)}
.sv-friend{display:flex;flex-direction:column;gap:8px;padding:18px 16px;margin-bottom:20px}
.sv-friend h2{margin:0;font:700 22px/1.25 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.sv-friend p{margin:0;font:400 14px/1.5 var(--f-body);color:var(--muted)}
.sv-friend .sv-fr-job{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600}
.sv-friend .btn{align-self:flex-start;margin-top:4px}
.sv-hide{margin:10px 16px 0;align-self:flex-start}
.no-motion .sv-link,.no-motion .sv-amt,.no-motion .sv-out,.no-motion .sv-card{transition:none}
/* ===== two-row header (v2): row 1 brand + country/language, row 2 the service list. Row 2 scrolls sideways on narrow phones; the document itself never does ===== */
.top .top-r1{height:56px}
.top-tools{display:flex;align-items:center;flex:none;gap:10px}
/* 헤더의 국가·언어 — 알약마다 작은 이름표(국가/언어)를 달아 어느 쪽이 무엇인지 헷갈리지 않게 한다(2026-09-19 오너 지적: 국기만 있고 둘이 붙어 있었다).
   보이는 글자는 span 이고 진짜 select 는 투명하게 위에 덮는다 — select 는 가장 긴 옵션 폭으로 늘어나서('United Kingdom') 폰 헤더를 밀어낸다. */
.pick{position:relative;display:inline-flex;flex-direction:column;justify-content:center;gap:3px;height:44px;min-width:0;padding:0 28px 0 13px;border-radius:13px;background:var(--glass) var(--chev) no-repeat right 10px center;border:1px solid var(--glass-b);cursor:pointer;transition:border-color .15s}
.pick:hover{border-color:var(--border-2)}
.pick:focus-within{outline:2px solid var(--focus,#5CB8FF);outline-offset:2px}
.pick-k{font:600 9.5px/1 var(--f-body);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.pick-v{font:600 13px/1.15 var(--f-body);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch}
.pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;appearance:none;-webkit-appearance:none}
@media(max-width:479px){.top-tools{gap:8px}.pick{padding:0 24px 0 11px;background-position:right 8px center}.pick-v{font-size:12.5px;max-width:9ch}}
@media(max-width:359px){.top-tools{gap:6px}.pick{padding:0 21px 0 9px;background-position:right 6px center}.pick-v{max-width:7ch}.brand{font-size:14.5px;gap:7px}}
/* ===== survive v2: the stage (input ↔ result in one place), the depletion countdown, the rate card, the chart markers ===== */
.sv-stage{position:relative}
.sv-again-row{display:flex;justify-content:flex-end;margin:12px 0 0}
.sv .xp-slot{padding-left:0;padding-right:0;margin:16px auto 0}   /* .wrap 안에 있어 좌우 여백이 두 번 먹던 것을 없앤다 — 카드와 같은 폭 */
.sv .xp-slot .xp-box{border-radius:16px}
.sv-out:focus{outline:none}
.sv-out:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sv-cdbox{margin:16px 0 0;padding:14px 14px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border)}
.sv-cd-l{display:block;font:600 10.5px/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sv-cd{margin-top:8px}
.sv-cdbox.inf .sv-cd{display:none}
.sv-cd-big{display:flex;align-items:flex-end;gap:12px}
.sv-cd-c{display:flex;align-items:baseline;gap:4px;min-width:0}
.sv-cd-c b{font:800 34px/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--text)}
.sv-cd-c small{font:600 12px/1 var(--f-display);color:var(--muted)}
.sv-cd-clock{margin-top:6px;font:600 17px/1 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--muted)}
.sv-cd-clock b{font-weight:700;color:var(--text)}
.sv-cd.past b{opacity:.5}
.sv-cd-date{margin:8px 0 0;font:500 12.5px/1.4 var(--f-body);color:var(--muted)}
@media(min-width:768px){.sv-cd-c b{font-size:44px}.sv-cd-c small{font-size:14px}.sv-cd-clock{font-size:20px}}
@media(max-width:399px){.sv-cd-c b{font-size:29px}.sv-cd-big{gap:9px}.sv-cd-clock{font-size:15px}}
.sv-rate-line{margin:10px 0 0;font:400 12.5px/1.45 var(--f-body);color:var(--faint)}
.sv-date{margin:10px 0 0}
.sv-date input[type=date]{width:100%;min-width:0;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font:500 15px var(--f-body);color:var(--text);font-variant-numeric:tabular-nums}
.sv-date input[type=date]:disabled{color:var(--faint);background:var(--surface-2)}
.chip.sv-chip small:empty{display:none}
.sv-rate-l{font:600 12px/1.3 var(--f-body);letter-spacing:.02em;text-transform:uppercase;color:var(--faint)}
.sv-card-rate output{font-size:20px}
.sv-card-rate .sv-vrow{margin-top:8px}
.sv-chart .sv-stopline{stroke:var(--border-2)}
.sv-chart .sv-stop-t,.sv-chart .sv-perp{fill:var(--muted);font:600 10px var(--f-body)}
.no-motion .sv-out,.no-motion .sv-card,.no-motion .sv-date input[type=date]{transition:none}
.sv-ch{margin:0 0 14px;padding-top:14px;border-top:1px solid var(--border)}
.sv-ch .sv-row{align-items:baseline}
.sv-ch-sub{margin:6px 0 10px;font:400 12.5px/1.45 var(--f-body);color:var(--faint);text-wrap:pretty}
.sv-ch-row{position:relative;margin:0 0 10px;padding:12px 12px 8px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2)}
.sv-ch-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.sv-ch-n{font:600 11.5px/1.3 var(--f-body);letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.sv-ch-x{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.sv-ch-x:hover{background:var(--surface);color:var(--text)}
.sv-ch-x svg{width:15px;height:15px}
.sv-ch-grid{display:grid;grid-template-columns:1fr;gap:0 12px}
@media(min-width:560px){.sv-ch-grid{grid-template-columns:1.15fr 1fr}}
.sv-ch-grid .sv-f{margin:0 0 10px}
.sv-ch-span{display:block;margin-top:-2px}
.sv-ch-span.past{color:var(--neg)}
.sv-ch-add{width:100%;justify-content:center}
.sv-ch-add[disabled]{opacity:.45;cursor:default}
.sv-ch-add>span{margin-right:6px;font:600 17px/1 var(--f-body)}
.sv-sug{margin-top:16px;padding:16px}
.sv-sug h3{margin:0;font:700 16px/1.3 var(--f-display);letter-spacing:-.02em;text-wrap:pretty}
.sv-sug>p{margin:6px 0 12px;font:400 13px/1.45 var(--f-body);color:var(--muted);text-wrap:pretty}
.sv-sug .chip.sv-chip[disabled]{opacity:.45;cursor:default}
.sv-sug-note{margin:10px 0 0}
.sv-chsum{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding:11px 14px;border-radius:12px;background:var(--surface-2);font:600 13.5px/1.5 var(--f-body);color:var(--text);overflow-wrap:anywhere}
.sv-chart .sv-phline{stroke:var(--border-2);opacity:.8}
.sv-chart .sv-ph-t{fill:var(--muted);font:600 10px var(--f-body)}
.sv-chart .sv-penline{stroke:var(--sky);opacity:.9}
.sv-chart .sv-pen-t{fill:var(--sky);font:600 10px var(--f-body)}
.sv-f>input.sv-num{width:100%;min-width:0;height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface);font:500 16px var(--f-body);color:var(--text);font-variant-numeric:tabular-nums}
.sv-f>input.sv-num:disabled{color:var(--faint);background:var(--surface-2)}
.sv-f>input.sv-num[aria-invalid=true]{border-color:var(--neg)}
.sv-penmsg{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);font:400 13px/1.45 var(--f-body);color:var(--text)}
.sv-penmsg.miss{border-color:var(--neg);color:var(--neg)}
.no-motion .sv-ch-x{transition:none}
/* ===== AI Pick (data/pick/picks.json): 시장 탭 · 1위 카드 · 순위 목록 · 근거 패널 · 선정 기준 모달 =====
   순위 옆에는 언제나 반론이 함께 선다. 이 화면은 추천이 아니라 '무엇을 확인할지'의 목록이다. */
/* ===================== AI Pick — 전면 재설계 (2026-09-18)
   제품의 서명은 "밝은 페이지 위의 어두운 카드 + 거대한 디스플레이 숫자"다(직업 결과 카드 .card).
   예전 AI Pick 은 밝은 면 위의 밝은 목록이라 그 서명을 하나도 쓰지 않았다 — 그래서 평평했다.
   이번에는 **목록 전체를 하나의 어두운 판**으로 만든다. 순위 숫자가 판 왼쪽을 따라 흐르며 리듬을 만들고,
   상위 3위는 스펙트럼 색을 받는다. 1위는 그 판 안에서 가장 큰 숫자와 함께 따로 선다. ===================== */

/* ── 상단: 고지와 스냅샷 */
.pk-notice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 16px;font:400 12.5px/1.5 var(--f-body);color:var(--faint)}
.pk-est{font:700 10.5px/1.5 var(--f-body);color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:5px 9px;max-width:100%;text-wrap:pretty}
.pk-snap{margin:12px 0 0;font:400 12px/1.4 var(--f-body);color:var(--faint);text-align:center}

/* ── 시장 탭 */
.pk-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:460px;margin:18px auto 0;box-sizing:border-box}
/* .rank-tabs 는 탭 둘(직업·전공)을 전제로 min-width:110px 를 준다. 시장 탭은 셋이라 320px 에서 110×3 이 화면을 넘겼다 —
   세 번째 '🇯🇵 일본 JP' 가 35px 밖으로 나가 페이지 전체가 가로로 밀렸다(2026-09-19). 여기서는 최소 폭을 풀고 좁으면 나라 이름을 접는다. */
.pk-tabs a{min-width:0;padding:0 8px;gap:5px;white-space:nowrap}
@media(max-width:379px){.pk-tabs a{padding:0 4px;font-size:13px}.pk-tabs .pk-cn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.pk-cn{font-weight:600}
.pk-cc{font:700 11px/1 var(--f-body);letter-spacing:.06em;color:var(--card-muted);margin-left:2px}

/* ── 판 머리: 제목과 도구 */
.pk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0 14px}
.pk-head h2{margin:0;font:800 22px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--text)}
.pk-head h2 small{margin-left:8px;font:700 11px/1 var(--f-body);letter-spacing:.11em;color:var(--faint);vertical-align:2px}
.pk-acts{display:flex;gap:8px;flex-wrap:wrap}
.pk-tbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font:600 12.5px/1 var(--f-body);cursor:pointer;transition:border-color .16s,color .16s}
.pk-tbtn:hover{border-color:var(--border-2);color:var(--text)}
.pk-tbtn svg{width:15px;height:15px}

/* ── 1위: 어두운 카드. 스펙트럼 띠와 글로우로 판 전체의 기준을 만든다 */
.pk-lead{position:relative;margin:0 0 10px;border:1px solid var(--card-border);border-radius:26px;background:var(--card-bg);color:var(--card-text);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-2),inset 0 1px 0 var(--card-hl)}
.pk-lead::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c-low),var(--c-med) 38%,var(--c-high) 66%,var(--c-vhigh))}
.pk-lead::after{content:'';position:absolute;right:-26%;top:-70%;width:76%;height:210%;pointer-events:none;background:radial-gradient(circle,rgba(61,232,198,.18),transparent 62%);filter:blur(34px);z-index:-1}
.pk-lead-t{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px 0}
.pk-first{font:700 10.5px/1 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--c-low)}
.pk-tagc{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font:600 11px/1 var(--f-body);color:rgba(245,246,250,.82);white-space:nowrap}

/* ── 목록: 하나의 어두운 판. 개별 행이 아니라 판이 먼저 보인다 */
.pk-list{list-style:none;margin:0;padding:4px 0;border:1px solid var(--card-border);border-radius:26px;background:var(--card-bg);color:var(--card-text);overflow:hidden;box-shadow:var(--shadow-2)}
.pk-row{position:relative}
.pk-row+.pk-row::before{content:'';position:absolute;inset:0 22px auto;height:1px;background:rgba(255,255,255,.07)}
/* 상위 3위는 판 안에서 살짝 밝게 — 구간이 눈에 들어온다 */
.pk-row.top{background:linear-gradient(90deg,rgba(255,255,255,.045),transparent 62%)}

/* ── 행: 순위 · 이름/카피 · 변화 · 화살표 */
.pk-sum{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 22px;background:none;border:0;color:inherit;cursor:pointer;font-family:inherit;transition:background .14s}
.pk-sum:hover{background:rgba(255,255,255,.04)}
.pk-sum:focus-visible{outline:2px solid var(--c-low);outline-offset:-2px;border-radius:14px}
.pk-lead .pk-sum{padding:12px 22px 20px;gap:18px}

/* 순위 숫자 — 이 판의 리듬이다 */
.pk-rank{min-width:48px;font:800 32px/1 var(--f-display);letter-spacing:-.04em;color:rgba(245,246,250,.40);font-variant-numeric:tabular-nums}
.pk-sum[data-tier='1'] .pk-rank{color:var(--c-low)}
.pk-sum[data-tier='2'] .pk-rank{color:var(--c-med)}
.pk-sum[data-tier='3'] .pk-rank{color:var(--c-high)}
.pk-rank.pk-hero{min-width:72px;font-size:62px;color:var(--c-low)}

.pk-nm{display:flex;flex-direction:column;gap:3px;min-width:0}
.pk-nm b{font:700 16.5px/1.25 var(--f-display);letter-spacing:-.01em;color:var(--card-text);overflow-wrap:anywhere}
.pk-lead .pk-nm b{font:800 27px/1.15 var(--f-display);letter-spacing:-.02em}
.pk-meta{font:400 11.5px/1.3 var(--f-body);color:rgba(245,246,250,.52)}
.pk-meta .num{font-variant-numeric:tabular-nums}
/* 한 줄 카피가 행의 주역이다 */
.pk-why{margin-top:4px;font:450 13.5px/1.55 var(--f-body);color:rgba(245,246,250,.88);text-wrap:pretty}
.pk-lead .pk-why{font:450 15.5px/1.5 var(--f-body);color:rgba(245,246,250,.94)}

.pk-mv{display:inline-flex;align-items:center;gap:3px;font:700 12px/1 var(--f-body);font-variant-numeric:tabular-nums;color:rgba(245,246,250,.5)}
.pk-mv.up{color:var(--c-low)}
.pk-mv.dn{color:var(--c-vhigh)}
.pk-mv.new{color:var(--c-med);letter-spacing:.06em;font-size:10.5px}
.pk-chev{display:grid;place-items:center;width:22px;height:22px;color:rgba(245,246,250,.42);transition:transform .2s ease,color .16s}
.pk-chev svg{width:16px;height:16px}
.pk-sum[aria-expanded='true'] .pk-chev{transform:rotate(180deg);color:var(--c-low)}

/* ── 펼친 상세: 같은 판 안에서 열린다 */
.pk-det{padding:2px 22px 20px;border-top:1px solid rgba(255,255,255,.07);margin-top:-1px}
.pk-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin:16px 0 14px;padding:0}
.pk-nums div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:11px 13px;min-width:0}
.pk-nums dt{margin:0 0 5px;font:700 9.5px/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:rgba(245,246,250,.5)}
.pk-nums dd{margin:0;font:800 18px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--card-text);overflow-wrap:anywhere}
.pk-body{margin:0 0 14px;font:400 14px/1.7 var(--f-body);color:rgba(245,246,250,.86)}
.pk-fact{margin:0 0 12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.12)}
.pk-fact p{margin:5px 0 0;font:400 13px/1.6 var(--f-body);color:rgba(245,246,250,.74)}
.pk-ai{border-left-color:var(--c-low)}
.pk-dl{margin:0;font:700 10px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:rgba(245,246,250,.52)}
.pk-ai .pk-dl{color:var(--c-low)}
.pk-pts{margin:0 0 14px;padding-left:20px;font:400 13.5px/1.65 var(--f-body);color:rgba(245,246,250,.82)}
.pk-srcrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;font:400 11.5px/1.4 var(--f-body);color:rgba(245,246,250,.5)}
.pk-src{display:inline-flex;align-items:center;gap:4px;color:var(--c-low);text-decoration:none;font-weight:600}
.pk-src:hover{text-decoration:underline}
.pk-src svg{width:12px;height:12px}
.pk-dfoot{margin:12px 0 0;font:400 11.5px/1.5 var(--f-body);color:rgba(245,246,250,.44)}

/* ── 도구 줄과 검색 */
.pk-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.pk-count{font:700 12.5px/1 var(--f-body);color:var(--muted)}
.pk-find{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:320px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--faint)}
.pk-find svg{width:15px;height:15px;flex:none}
.pk-find input{flex:1;min-width:0;border:0;background:none;outline:none;font:400 13.5px var(--f-body);color:var(--text)}
.pk-empty{padding:34px 22px;text-align:center;color:rgba(245,246,250,.72)}
.pk-empty b{display:block;margin-bottom:6px;font:700 15px var(--f-display);color:var(--card-text)}
.pk-empty span{display:block;margin-bottom:14px;font:400 13px/1.5 var(--f-body)}

/* ── 아래 안내와 CTA */
.pk-note{display:flex;gap:8px;margin:16px 0 0;font:400 12px/1.55 var(--f-body);color:var(--faint)}
.pk-note svg{width:14px;height:14px;flex:none;margin-top:2px}
.pk-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:22px 0 0;padding:18px 20px;border-radius:20px;background:var(--surface-2);border:1px solid var(--border)}
.pk-cta b{display:block;font:700 15px/1.3 var(--f-display);color:var(--text)}
.pk-cta small{display:block;margin-top:3px;font:400 12.5px/1.45 var(--f-body);color:var(--muted)}
.pk-disc{margin:18px 0 0;font:400 11.5px/1.6 var(--f-body);color:var(--faint);text-wrap:pretty}

/* ── 선정 기준 모달 */
.pk-mbody{display:flex;flex-direction:column;gap:14px}
.pk-step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.pk-step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font:800 12px/1 var(--f-display);color:var(--muted)}
.pk-mnote{margin:0;font:400 12.5px/1.6 var(--f-body);color:var(--faint);text-wrap:pretty}
.pk-mdisc{margin-bottom:4px;color:var(--muted);font-weight:600}

/* ── 좁은 화면 */
@media(max-width:420px){
  .pk-lead-t{padding:14px 16px 0}
  .pk-sum{padding:14px 16px;gap:11px}
  .pk-lead .pk-sum{padding:10px 16px 18px;gap:13px}
  .pk-det{padding:2px 16px 18px}
  .pk-row+.pk-row::before{inset:0 16px auto}
  .pk-rank{min-width:40px;font-size:27px}
  .pk-rank.pk-hero{min-width:58px;font-size:48px}
  .pk-nm b{font-size:15.5px}
  .pk-lead .pk-nm b{font-size:22px}
  .pk-why{font-size:13px}
  .pk-lead .pk-why{font-size:14.5px}
  .pk-head h2{font-size:19px}
  .pk-find{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .pk-sum,.pk-chev,.pk-tbtn,.pk-rank{transition:none}
}
@media(max-width:560px){.pk-cn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.pk-cc{display:inline}.pk-sum{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:12px 14px}.pk-chev{display:none}.pk-find{max-width:none;margin-left:0}.pk-head h2{font-size:19px}.pk-rank.pk-hero{font-size:44px}}
.no-motion .pk-chev,.no-motion .pk-sum{transition:none}
/* iOS Safari 는 글자가 16px 미만인 입력칸에 초점이 가면 화면을 확대한다(되돌아오지도 않는다) — 터치 기기에서는 입력칸 글자를 16px 로 맞춘다 */
@media (pointer:coarse){.img-me input,.c-form input,.c-form textarea,.fit-email input,.pt-f input,.pt-f textarea,.pk-find input,.sv-date input[type=date],.sel select{font-size:16px}}
/* Navigation C — the existing service bodies retain their own layout and styles. */
.yn-rail,.yn-dock,.yn-peek,.yn-breadcrumb{display:none}
[data-yn-group="forecast"]{--yn-rgb:255,94,155}
[data-yn-group="prepare"]{--yn-rgb:61,232,198}
[data-yn-group="community"]{--yn-rgb:61,232,198}
[data-yn-group="all"]{--yn-rgb:224,232,247}
.yn-rail a,.yn-dock a,.yn-peek a,.yn-services a{text-decoration:none}
.yn-rail svg,.yn-dock svg,.yn-peek svg,.yn-services svg,.yn-breadcrumb svg{width:18px;height:18px;flex:none}
.yn-services{color:var(--text);font:400 15px/1.5 var(--f-body);width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 36px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.yn-services[open]{display:flex;flex-direction:column;gap:10px}
.yn-services::backdrop{background:#05080d38}  /* 2026-09-25 오너: 뒤 화면을 거의 그대로 보이게 — 아주 옅게만 어둡게, 흐림 없음 */
.yn-menu-panel{background:#10151f;border:1px solid #ffffff24;border-radius:24px;overflow:hidden;min-height:0;display:flex;flex-direction:column;box-shadow:0 20px 80px #0008}
.yn-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 20px 13px;border-bottom:1px solid #ffffff0d;flex:none;min-height:76px}
.yn-menu-heading small{font-size:10px;line-height:1.4;color:#8d9eb8;display:block;margin-bottom:4px}
.yn-menu-heading h2{margin:0;font-size:21px;line-height:1.35;font-weight:700;letter-spacing:-.7px}
.yn-menu-heading h2:focus{outline:none}
.yn-menu-actions{display:flex;gap:4px;align-items:center;flex:none}
.yn-menu-actions button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#afbed3}
.yn-menu-actions button:hover,.yn-menu-actions button[aria-expanded="true"]{background:#ffffff0b;color:#fff}
#yn-menu-close{border:1px solid #ffffff19}
#yn-menu-body{padding:15px 18px 19px;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#344056 transparent}
.yn-menu-group+.yn-menu-group{margin-top:20px}
.yn-group-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:25px;margin-bottom:9px}
.yn-group-heading h3{margin:0;display:flex;gap:8px;align-items:center;font-size:11px;font-weight:600;color:#b7c5da}
.yn-group-heading h3 small{color:#8a9ab2;font-size:10px}
.yn-rank-link{display:inline-flex;align-items:center;gap:5px;min-height:32px;font-size:10px;color:#9daec6}
.yn-rank-link svg{width:12px;height:12px}
.yn-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.yn-service-card{position:relative;min-width:0;min-height:119px;display:flex;flex-direction:column;gap:10px;padding:13px 12px;border-radius:15px;border:1px solid #ffffff10;background:linear-gradient(145deg,#19202d,#151b27);transition:border-color .15s,background .15s}
.yn-service-card:hover{border-color:rgba(var(--yn-rgb),.4)}
.yn-glyph{width:28px;height:28px;flex:none;display:grid;place-items:center;color:rgb(var(--yn-rgb));border:1px solid rgba(var(--yn-rgb),.13);border-radius:9px;background:linear-gradient(135deg,rgba(var(--yn-rgb),.17),rgba(var(--yn-rgb),.04))}
.yn-glyph svg{width:17px;height:17px}
.yn-card-copy{min-width:0;display:grid;gap:5px}
.yn-card-copy b{font-size:13px;line-height:1.35;font-weight:600;color:#e4ecf9;letter-spacing:-.25px}
.yn-card-copy>small{font-size:10px;line-height:1.7;color:#9caec7;word-break:keep-all;overflow-wrap:anywhere}
.yn-card-tag{position:absolute;right:11px;top:14px;display:inline-flex;gap:3px;color:#b8b0dd;font-size:8px;line-height:1.5;white-space:nowrap}
.yn-card-tag.current{color:#e8bc72}
.yn-service-card.is-current{border-color:#e1b75555;background:linear-gradient(125deg,#b4903715,#151b27 75%)}
.yn-service-card.is-current .yn-glyph{color:#f6cd77;border-color:#e1b75526;background:#e1b75511}
.yn-service-card.is-wide{grid-column:1/-1;flex-direction:row;align-items:center;min-height:76px;gap:12px}
.yn-service-card.is-wide .yn-glyph{width:33px;height:33px;border-radius:11px}
.yn-service-card.is-wide .yn-card-tag{position:static;margin-left:auto;flex:none}
.yn-service-search{display:flex;align-items:center;gap:10px;border:1px solid #ffffff25;background:#ffffff04;border-radius:12px;padding:0 12px;min-height:46px;margin-bottom:17px}
.yn-service-search svg{color:#9daec6}
.yn-service-search input{width:100%;min-width:0;background:transparent;border:0;font-size:16px;min-height:44px}
.yn-empty{font-size:13px;color:var(--muted);padding:24px 4px}
:lang(ja) .yn-card-copy>small{word-break:normal}
@media(min-width:961px){
  #root{margin-left:224px}
  .top .top-r1{height:72px;max-width:none;padding-inline:32px}
  .top-r1>.brand{display:none}
  .yn-breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px}
  .yn-breadcrumb>span{color:#929fb4}
  .yn-breadcrumb svg{width:11px;height:11px;color:#75839b}
  .yn-breadcrumb b{font-weight:600;color:#d7deea}
  .yn-rail{position:fixed;display:flex;flex-direction:column;inset:0 auto 0 0;width:224px;padding:27px 18px 22px;background:#0e1118;border-right:1px solid #ffffff12;z-index:41}
  .yn-rail>.brand{font-size:17px;gap:8px;margin-left:6px;flex:none}
  .yn-rail-search{display:flex;gap:10px;align-items:center;border:1px solid #ffffff16;border-radius:10px;background:#ffffff03;padding:10px 12px;margin:30px 0 24px;color:#a4b1c5;font-size:12px;min-height:42px;flex:none}
  .yn-rail-search svg{width:16px;height:16px}
  #yn-rail-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#344056 transparent;padding-bottom:20px}
  .yn-rail-group+.yn-rail-group{margin-top:25px}
  .yn-rail-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 12px 7px}
  .yn-rail-heading h2{font-size:10px;font-weight:600;letter-spacing:.04em;color:#8f9db4;margin:0;flex:none}
  .yn-rail-link{display:flex;align-items:center;gap:10px;min-height:45px;padding:10px 12px;margin-bottom:3px;border:1px solid transparent;border-radius:10px;color:#b1bdce;font-size:13px;font-weight:600}
  .yn-rail-link:hover{color:#fff;background:#ffffff06}
  .yn-rail-phrases{word-break:keep-all}
  .yn-rail-link.is-active{background:rgba(var(--yn-rgb),.1);color:rgb(var(--yn-rgb));border-color:rgba(var(--yn-rgb),.18)}
  .yn-rail-rank{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;line-height:1.4;color:#9facc1;min-height:28px;white-space:nowrap}
  .yn-rail-rank:hover{color:#f2f4f8}
  .yn-rail-rank svg{width:12px;height:12px}
  .yn-rail-rank[aria-current]{color:var(--neg)}
  #yn-rail-foot{margin-top:auto;padding:18px 10px 0;border-top:1px solid #ffffff0b;font-size:11px;color:#8894a8;flex:none}
  /* Keep the original content width: the right column fits after allowing for the rail. */
  .side{top:94px}
}
@media(min-width:1280px) and (max-width:1503px){
  .page.has-side{display:block;padding-left:0;padding-right:0}
  .page.has-side>.page-main>.wrap,.page.has-side>.page-main>.fit-slot,.page.has-side>.page-main>.xp-slot{padding-left:32px;padding-right:32px}
  .side{display:none}.xp-railed{display:block}
}
@media(max-width:960px){
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .top{position:relative}
  .top .top-r1{height:56px}
  .yn-peek{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 max(14px,calc((100% - 660px)/2));background:#10141d;border-bottom:1px solid #ffffff0d}
  .yn-peek a{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:44px;padding:0;font-size:12px;font-weight:500;letter-spacing:-.3px;white-space:normal;line-height:1.3;color:#d5e0f1;flex:1;min-width:0}
  .yn-peek a span{min-width:0;text-wrap:balance;text-align:center}
  .yn-peek a svg{width:14px;height:14px;color:#c897b6}
  .yn-peek button{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end;min-height:44px;min-width:50px;font-size:10px;color:#b4c5de;flex:none}
  .yn-peek button b{display:grid;place-items:center;font-size:9px;font-weight:500;width:16px;height:16px;border-radius:5px;background:#ffffff0c;color:#dbe6f6}
  #root[lang="es"] .yn-peek a{white-space:normal;font-size:11px;line-height:1.3}
  #root[lang="es"] .yn-peek a span{max-width:17ch}
  .yn-dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;width:auto;border:1px solid #ffffff25;border-radius:23px;padding:5px;gap:3px;background:#191f2ef5;backdrop-filter:blur(20px);box-shadow:0 8px 35px #0008}
  .yn-dock-item{display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-width:0;min-height:51px;gap:4px;border-radius:17px;color:#a9b6ca;font-size:10px;line-height:1.2;transition:background .15s,color .15s}
  .yn-dock-item>svg{width:19px;height:19px}
  .yn-dock-item[data-yn-service="community"]>svg{width:22px;height:22px}
  .yn-dock-item>span{display:grid;align-items:center;max-width:100%;min-height:2.4em;white-space:normal;overflow-wrap:anywhere;text-align:center;text-wrap:balance}
  .yn-dock-item.is-active{background:rgba(var(--yn-rgb),.1);color:rgb(var(--yn-rgb))}
  .yn-dock-item[data-yn-menu="all"]{position:relative}
  .yn-dock-item[data-yn-menu="all"]:before{content:'';position:absolute;left:-2px;top:14px;bottom:14px;width:1px;background:#ffffff10}
  .yn-services{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - 25px);padding:0 12px calc(14px + env(safe-area-inset-bottom,0px))}
  .yn-services>.yn-dock{position:relative;inset:auto;margin:0;width:100%;flex:none}
  .yn-menu-heading{padding:13px 16px 12px;min-height:74px}
  #yn-menu-body{padding:12px 15px 16px}
  .toast{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:359px){
  .yn-peek{gap:4px;padding-inline:12px}
  .yn-peek a{font-size:11px}
  .yn-peek a svg{display:none}
  .yn-dock{left:10px;right:10px}
  .yn-services{padding-inline:10px}
  .yn-menu-heading h2{font-size:19px}
  .yn-menu-heading small{font-size:9px}
  .yn-service-card{padding:12px 10px}
  .yn-card-copy b{font-size:12px}
  .yn-service-card.is-wide{gap:9px}
  .yn-service-card.is-wide .yn-card-tag{display:none}
}


/* Taiwan official program directory: neutral information, no forecast color/score. */
.tw-program-status{margin:12px 2px 0;color:#A5ABBC;font-size:12px;line-height:1.7;text-align:left}
.tw-program-retry{border:0;background:transparent;color:#79BDF7;text-decoration:underline;cursor:pointer;font:inherit}
.tw-program-ac-label{font-size:10px;color:#A5ABBC;max-width:94px;text-align:right;line-height:1.4;flex-shrink:0}
.tw-program-page{max-width:780px}.tw-program-hero{padding:28px}.tw-program-eyebrow{margin:0 0 10px;color:#A5ABBC;font-size:12px;letter-spacing:.06em}
.tw-program-hero h1{font-size:clamp(25px,5vw,36px);line-height:1.35;margin:0 0 18px;overflow-wrap:anywhere}
.tw-program-badge{display:inline-block;padding:6px 10px;border:1px solid #505768;border-radius:999px;background:#252A36;font-size:12px;color:#D6DAE4}
.tw-program-meta{font-size:13px;color:#A5ABBC;margin:16px 0}.tw-program-note{line-height:1.8;margin:20px 0 0;color:#D6DAE4}
.tw-program-reason{color:#A5ABBC;font-size:13px;line-height:1.7;margin:12px 0 0}.tw-program-section{padding:22px;margin-top:16px}
.tw-program-section h2{font-size:16px;margin:0 0 16px}.tw-program-links{display:grid;gap:8px}.tw-program-links a{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #363C4C;border-radius:12px;color:inherit;text-decoration:none}.tw-program-links a:hover{background:#252A36}.tw-program-links a>span:nth-child(2){flex:1;min-width:0}.tw-program-links svg{width:18px;flex-shrink:0}
.tw-program-schools{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;padding-left:20px;font-size:13px;line-height:1.65}.tw-program-section summary{color:#79BDF7;cursor:pointer;font-size:13px;margin-top:14px}
.tw-program-source{color:#8E96A8;font-size:12px;line-height:1.8;margin:20px 4px}.tw-program-source a{color:#79BDF7}
@media(max-width:480px){.tw-program-hero{padding:22px 18px}.tw-program-section{padding:20px 18px}.tw-program-schools{grid-template-columns:1fr}.tw-program-ac-label{max-width:74px}}

.hcard .who-t .result-name{margin:0;font:700 19px/1.2 var(--f-display);letter-spacing:-.01em;white-space:normal;text-wrap:balance}

/* Quiet result-page discovery; the existing mobile dock keeps its own space. */
.yn-service-suggestion{position:fixed;right:22px;bottom:var(--yn-suggestion-bottom,94px);z-index:44;width:min(400px,calc(100vw - 28px));padding:10px 13px 4px;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(120deg,#1b2432,#121925 72%);color:var(--card-text,#f5f6fa);box-shadow:0 7px 28px #0005,inset 0 1px 0 #ffffff06;font:400 13px/1.4 var(--f-body,system-ui);isolation:isolate;animation:yn-suggestion-enter .22s ease-out both}
.yn-service-suggestion[hidden]{display:none!important}
.yn-suggestion-top{display:flex;align-items:center;min-height:15px;margin:0 0 6px}
.yn-suggestion-heading{min-width:0;color:#a7b4c9;font-size:11px;line-height:1.35;letter-spacing:-.1px}
.yn-suggestion-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px -3px 0;padding-top:1px;border-top:1px solid #ffffff12}
.yn-suggestion-dismiss{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:0;margin:0;padding:7px 8px;border:0;border-radius:9px;background:transparent;color:#b9c2d1;font:500 11.5px/1.35 var(--f-body,system-ui);text-align:center;overflow-wrap:anywhere;cursor:pointer;touch-action:manipulation}
.yn-suggestion-dismiss+.yn-suggestion-dismiss:before{content:"";position:absolute;left:-4px;top:50%;width:1px;height:12px;background:#ffffff16;transform:translateY(-50%);pointer-events:none}
.yn-suggestion-dismiss:hover{color:#fff;background:#ffffff08}
.yn-suggestion-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px;align-items:center}
.yn-suggestion-copy{min-width:0}
.yn-suggestion-service{display:flex;align-items:center;gap:5px;color:#b7c9e3;font-size:10px;line-height:1.5;margin-bottom:2px}
.yn-suggestion-icon{display:inline-flex;flex:none;color:#8ebdf5}
.yn-suggestion-icon svg{display:block;width:13px;height:13px}
.yn-suggestion-question{margin:0;color:#eef3fb;font-size:14px;line-height:1.4;font-weight:600;letter-spacing:-.25px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.yn-suggestion-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:86px;max-width:145px;padding:9px 12px;border:1px solid #94c4ff45;border-radius:11px;background:#73b4fc19;color:#c1dfff;text-decoration:none;font:600 12px/1.35 var(--f-body,system-ui);text-align:center;word-break:keep-all;transition:background .15s,border-color .15s;touch-action:manipulation}
.yn-suggestion-action svg{width:15px;height:15px;flex:none}
.yn-suggestion-action:hover{background:#73b4fc2c;border-color:#94c4ff80}
.yn-suggestion-action:focus-visible,.yn-suggestion-dismiss:focus-visible{outline:2px solid #b4d7ff;outline-offset:3px}
.yn-service-suggestion:lang(ja) .yn-suggestion-question,.yn-service-suggestion:lang(zh-TW) .yn-suggestion-question{word-break:normal}
@media(max-width:960px){.yn-service-suggestion{left:12px;right:12px;width:auto;max-width:400px;margin-inline:auto;padding:9px 12px 3px;border-radius:17px}.yn-suggestion-body{gap:10px}.yn-suggestion-question{font-size:13px;line-height:1.4}.yn-suggestion-action{padding-inline:10px;min-width:82px;max-width:126px;font-size:11px}.yn-suggestion-top{margin-bottom:5px}.yn-suggestion-footer{margin-top:7px}}
@media(max-width:359px){.yn-service-suggestion{left:10px;right:10px}.yn-suggestion-heading{font-size:10px}.yn-suggestion-question{font-size:12px}.yn-suggestion-body{gap:8px}.yn-suggestion-action{min-width:74px;padding-inline:8px;max-width:104px}.yn-suggestion-action svg{display:none}}
@keyframes yn-suggestion-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.yn-service-suggestion{animation:none}.yn-suggestion-action{transition:none}}