@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/sora-0.woff2) format('truetype')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/sora-1.woff2) format('truetype')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/instrument-sans-0.woff2) format('truetype')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/instrument-sans-1.woff2) format('truetype')}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/noto-sans-kr-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/noto-sans-kr-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/noto-sans-kr-2.ttf) format('truetype');
}

/* Result card: the job result card rules, copied from demo/index.html (intro.py CARD_RULES). */
.num{font-variant-numeric:tabular-nums}
.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}
.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}
.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}
.tile-sq{width:46px;height:46px;border-radius:14px;font-size:22px;background:rgba(255,255,255,.06);border:1px solid var(--card-border)}
.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-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-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)}
.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-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}
/* /ko/ai-readiness/ v3. The title screen is the career quiz's (intro.py, appended after this file); the result is the AI badge
   (concept C, owner 2026-10-25), styled here. This file only places the shared parts and styles what is new. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg,#0b0d12);color:var(--text,#f2f4f8);font-family:'Instrument Sans','Noto Sans KR',system-ui,sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
a{color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,[role=option]:focus-visible{outline:3px solid #387dce;outline-offset:3px}
[hidden]{display:none!important}
/* body.html: a result link shows nothing in the column until app.js has drawn the result (no title screen first, nothing moves) */
html[data-ar-boot]:not([data-ar-view]) :is(#ar-intro,#ar-intro-details,#ar-method,.ar-footer){display:none}
#ar-main{--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;--f-kr:'Noto Sans KR',system-ui,-apple-system,sans-serif;font-family:var(--f-body)}
.ar-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ar-skip{position:absolute;top:-100px;left:20px;z-index:2000;background:#fff;color:#12151e;padding:12px}
.ar-skip:focus{top:12px}
.ar-text-btn{border:0;background:transparent;color:var(--muted);padding:8px 0;min-height:40px;font:500 13px var(--f-body,inherit);text-underline-offset:4px}
.ar-text-btn:hover{color:var(--text);text-decoration:underline}
.ar-note{color:var(--muted);font-size:12.5px;line-height:1.7;margin:16px 0}
.ar-status{position:fixed;bottom:calc(96px + var(--yn-anchor,0px));left:50%;transform:translateX(-50%);z-index:1200;max-width:calc(100vw - 32px);width:max-content;padding:12px 18px;border-radius:12px;background:#e9f4ef;color:#12271f;font:600 13.5px/1.45 var(--f-body,inherit);box-shadow:var(--shadow-2)}
.ar-status:empty{display:none}
/* the shared site shell, in this page's palette (light 2026-10-30: the page tokens; the old dark pins kept for the toggle) */
.yn-services,.yn-dock,.yn-rail{--f-body:"Instrument Sans","Noto Sans KR",sans-serif;color:var(--text)}
:root[data-theme="dark"] :is(.yn-services,.yn-dock,.yn-rail){--text:#f2f4f8;--muted:#a3a9ba;--ring:#3de8c6}
/* light 2026-10-30: the badge (.idc, also inside the share-image frame .ar-shot) keeps the dark set, so it and the saved
   picture (read back from its computed colours) stay as LIVE; the page around it follows the light tokens */
.idc{color-scheme:dark;color:#F2F4F8;--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;--inv:#F5F6FA;--inv-text:#0B0D12;--ring:#F5F6FA;--ring-rgb:245,246,250;--low:#3DE8C6;--med:#FFC83D;--high:#FF7A45;--vhigh:#FF3D8A;--sky:#5CB8FF;--pos:#3DE8C6;--neg:#FF5E9B}

/* ---------- title screen: month badge, resume, the two mode cards ---------- */
.ar-month{display:inline-block;padding:2px 9px;margin-right:2px;border-radius:999px;background:rgba(61,232,198,.14);border:1px solid rgba(61,232,198,.4);color:var(--low);font-weight:700}
.ar-resume-label{margin:0 0 10px;font:600 14.5px/1.45 var(--f-body);color:var(--text)}
#ar-resume{margin-bottom:20px}
.ar-fresh{margin-top:6px}
.ar-modes{width:100%;display:grid;gap:12px;text-align:left}
.ar-modes-t{margin:0;font:600 14px/1.4 var(--f-body);color:var(--muted)}
.ar-mode{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,var(--surface),var(--glass));border:1px solid var(--glass-b);box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ar-mode-head{display:flex;gap:12px;align-items:flex-start}
.ar-mode-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--card-glass);border:1px solid var(--card-border);font-size:20px;line-height:1}
.ar-mode h2{margin:1px 0 0;font:700 18px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--text)}
.ar-mode-head p{margin:4px 0 0;font:400 14px/1.5 var(--f-body);color:var(--muted);text-wrap:pretty}
.ar-search{position:relative}
.ar-search>svg{position:absolute;left:15px;top:16px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.ar-search input{display:block;width:100%;height:52px;padding:0 14px 0 43px;border-radius:14px;border:1px solid var(--border-2);background:var(--bg-2);color:var(--text);font:500 16px var(--f-body);outline:none;-webkit-appearance:none;appearance:none}
.ar-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.ar-search input::placeholder{color:var(--faint)}
.ar-search input:focus{border-color:rgba(61,232,198,.75);box-shadow:0 0 0 3px rgba(61,232,198,.18)}
.ar-job-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;border-radius:16px;background:var(--surface-2);border:1px solid var(--border-2);box-shadow:var(--shadow-2);max-height:min(352px,56vh);overflow:auto;overscroll-behavior:contain}
.ar-opt{display:flex;align-items:center;gap:11px;min-height:50px;padding:7px 10px;border-radius:11px;cursor:pointer}
.ar-opt[aria-selected=true]{background:var(--surface-3)}
@media(hover:hover){.ar-opt:hover{background:var(--surface-3)}}
.ar-opt-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--surface);font-size:17px;line-height:1}
.ar-opt-t{display:flex;flex-direction:column;min-width:0}
.ar-opt-t b{font:600 15px/1.3 var(--f-body);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-opt-t small{margin-top:2px;font:400 12.5px/1.3 var(--f-body);color:var(--muted)}
.ar-job-empty{margin:10px 2px 0;font:400 13.5px/1.55 var(--f-body);color:var(--muted)}
.ar-inline-btn{border:0;background:none;padding:0;color:var(--low);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ar-mode-alt{align-self:flex-start;min-height:36px;margin:-4px 0 -4px;padding:4px 0;border:0;background:none;color:var(--muted);font:500 13.5px/1.4 var(--f-body);text-align:left}
.ar-mode-alt:hover{color:var(--text)}
.ar-mode-job{z-index:2}   /* its job list opens over the daily card (each card is a stacking context: backdrop-filter) */
.ar-mode-daily{z-index:1;cursor:pointer;transition:border-color .15s,transform .15s}
.ar-mode-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:auto;padding:0 18px;border-radius:14px;border:1px solid var(--border-2);background:var(--surface-3);color:var(--text);font:600 16px var(--f-body)}
.ar-mode-go svg{width:18px;height:18px;color:var(--low)}
.ar-mode-go::after{content:'';position:absolute;inset:0;border-radius:20px}   /* the whole card starts the daily quiz */
@media(hover:hover){.ar-mode-daily:hover{border-color:var(--border-2);transform:translateY(-1px)}.ar-mode-daily:hover .ar-mode-go{background:var(--surface-2)}}
@media(min-width:768px){
  .ar-modes{grid-template-columns:1fr 1fr;max-width:656px;gap:14px}
  .ar-modes-t{grid-column:1/-1;text-align:center}
  .ar-mode{padding:20px 20px 18px}
  #ar-resume{margin-bottom:28px}
}
.ar-intro-body{margin-top:8px}
.ar-intro-info{margin-top:24px}
.ar-intro-info h2{font:700 20px/1.4 'Sora','Noto Sans KR',sans-serif;letter-spacing:-.02em;margin:0 0 10px}
.ar-intro-info>p{font:400 14.5px/1.65 'Instrument Sans','Noto Sans KR',sans-serif;color:var(--muted);margin:0 0 12px}
.ar-axis-map{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.ar-axis-map li{padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.ar-axis-map b{font:700 15px var(--f-display,inherit)}
.ar-axis-map span{margin-left:8px;font:500 12.5px var(--f-body,inherit);color:var(--low)}
.ar-axis-map p{margin:4px 0 0;font:400 13.5px/1.55 var(--f-body,inherit);color:var(--muted)}

/* ---------- page column (method, footer; the result) ---------- */
.ar-content{max-width:720px;margin:0 auto;padding:0 20px 24px}
@media(min-width:768px){.ar-content{padding:0 32px 40px}}
@media(min-width:961px){.ar-content:not(:has(>#ar-quiz:not([hidden]))){margin-left:auto;margin-right:auto}}
.ar-method{border-top:1px solid var(--border);padding:20px 0;margin-top:24px;font:400 13px/1.7 var(--f-body);color:var(--muted)}
.ar-method summary{cursor:pointer;font-weight:600;min-height:32px}
.ar-method details[open] summary{margin-bottom:16px}
.ar-method p{margin:0 0 12px}
.ar-method ul{padding-left:20px;margin:0 0 12px}
.ar-method table{border-collapse:collapse;width:100%;margin:4px 0 14px;font-size:12.5px}
.ar-method th,.ar-method td{text-align:left;border-bottom:1px solid var(--border);padding:8px 6px}
.ar-method .ar-gate{color:var(--low)}
.ar-footer{border-top:1px solid var(--border);display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:18px 0 0;font:500 11.5px var(--f-body);color:var(--muted)}
.ar-footer>a:first-child{font:700 12px 'Sora',sans-serif;color:var(--text);letter-spacing:-.3px;text-decoration:none}
.ar-footer>span{flex:1}
@media(max-width:767px){.ar-footer>span{display:none}}

/* ---------- result: the AI badge (concept C, owner 2026-10-25: an ID badge on a lanyard; the grade name is the job title,
   "상위 N%" the staff number, the three axes access gauges). Everything that moves in the reveal reads a --rv-* variable that
   app.js sets on one CSS rule (no style attributes), and only while #ar-result has .is-revealing; the tilt reads --rx/--ry/--mx/
   --my/--gx/--fx the same way. Without them every rule below is the final card. ---------- */
.ar-result{padding-top:6px}
.ar-result-top{position:relative;z-index:2;margin:0}
.ar-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 0;border:0;background:none;color:var(--muted);font:500 14px var(--f-body)}
.ar-back svg{width:16px;height:16px}
.ar-back:hover{color:var(--text)}
@media(min-width:768px){.ar-result{padding-top:22px}}
/* tier colours over the nine grades (app.js tierOf, the site's [data-tier] values): 1–2 teal, 3–4 sky, 5–6 yellow, 7–8 orange,
   9 pink; --h1…--h5 the holographic foil in the grade colour (its own hue, two cool/warm neighbours, white) */
.ar-result[data-tier=low],.ar-shot[data-tier=low]{--tt:#087D69;--tc:#3DE8C6;--tc-rgb:61,232,198;--tc2-rgb:92,184,255;--h1:#14CBA9;--h2:#B2FFF2;--h3:#38B6F0;--h4:#B9A2FF;--h5:#3DE8C6}
.ar-result[data-tier=sky],.ar-shot[data-tier=sky]{--tt:#2464B7;--tc:#5CB8FF;--tc-rgb:92,184,255;--tc2-rgb:61,232,198;--h1:#3B9DFF;--h2:#CDEBFF;--h3:#8B74FF;--h4:#4FEBD3;--h5:#5CB8FF}
.ar-result[data-tier=med],.ar-shot[data-tier=med]{--tt:#936100;--tc:#FFC83D;--tc-rgb:255,200,61;--tc2-rgb:255,122,69;--h1:#FFB01A;--h2:#FFF3BF;--h3:#FF8448;--h4:#E3F27A;--h5:#FFC83D}
.ar-result[data-tier=high],.ar-shot[data-tier=high]{--tt:#BC471D;--tc:#FF7A45;--tc-rgb:255,122,69;--tc2-rgb:255,61,138;--h1:#FF6326;--h2:#FFD6BF;--h3:#FF5FA8;--h4:#FFC24A;--h5:#FF7A45}
.ar-result[data-tier=vhigh],.ar-shot[data-tier=vhigh]{--tt:#BF245D;--tc:#FF3D8A;--tc-rgb:255,61,138;--tc2-rgb:255,122,69;--h1:#FF2A7A;--h2:#FFC7DE;--h3:#A978FF;--h4:#FF8B66;--h5:#FF3D8A}
.idc-mark{display:inline-block;flex:none;width:13px;height:13px;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%)}

/* the scene behind the badge: the reels' grid with magenta + teal glow and the grade glow. The glow is clipped inside .idc-bg,
   which never reaches past the viewport (no sideways scroll): the column's own width on phones, up to 12px from the window
   edge on wider screens */
.idc-scene{position:relative;isolation:isolate;display:flex;justify-content:center;margin:-34px -20px 0;padding:0 20px 6px}
@media(max-width:767px){.idc-scene{overflow-x:clip}}   /* phones: the scene is the screen's width; the swinging card never widens the page */
.idc-bg{position:absolute;z-index:-1;top:-150px;bottom:-60px;left:0;right:0;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 150px),transparent);mask:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 150px),transparent)}
.idc-bg i{position:absolute;border-radius:50%;filter:blur(64px)}
.idc-bg .b1{width:340px;height:340px;left:-130px;top:180px;background:radial-gradient(circle,rgba(255,61,138,.7),transparent 70%);opacity:.2}
.idc-bg .b2{width:380px;height:380px;right:-160px;bottom:20px;background:radial-gradient(circle,rgba(61,232,198,.62),transparent 70%);opacity:.22}
.idc-bg .b3{width:280px;height:280px;left:50%;top:calc(44% + 58px);margin:-140px 0 0 -140px;background:radial-gradient(circle,rgba(var(--tc-rgb),.42),transparent 70%);opacity:.3}
.idc-bg .grid{inset:130px 0 40px;border-radius:0;filter:none;background-image:linear-gradient(rgba(28,38,56,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(28,38,56,.05) 1px,transparent 1px);background-size:28px 28px;background-position:center top;-webkit-mask:radial-gradient(75% 62% at 50% 46%,#000 25%,transparent 78%);mask:radial-gradient(75% 62% at 50% 46%,#000 25%,transparent 78%)}
@media(min-width:768px){
  .idc-scene{margin:-44px -32px 0;padding:0 32px 6px}
  .idc-bg{left:min(0px,calc(372px - 50vw));right:min(0px,calc(372px - 50vw))}
  .idc-bg .b1{width:420px;height:420px;left:calc(max(0px,50vw - 372px) - 160px);top:130px}
  .idc-bg .b2{width:460px;height:460px;right:calc(max(0px,50vw - 372px) - 190px);bottom:-30px}
  .idc-bg .b3{width:360px;height:360px;margin:-180px 0 0 -180px}
}

/* the hanging badge; --lan: room above the card for the lanyard (straps + crimp + ring), --up: how far the straps reach up */
.idc-hang{--w:350px;--lan:84px;--up:52px;position:relative;width:min(var(--w),100%);padding-top:var(--lan);flex:none}
@media(min-width:768px){.idc-hang{--w:360px;--lan:96px;--up:84px}}
.idc-straps{position:absolute;left:50%;top:calc(-1 * var(--up));width:140px;height:calc(var(--lan) - 32px + var(--up));margin-left:-70px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent 0,#000 55%);mask:linear-gradient(180deg,transparent 0,#000 55%)}
.idc-straps svg{display:block;position:absolute;left:0;bottom:0;width:140px;height:240px}
.idc-swing{position:relative;transform-origin:50% -34px}
.idc-hw{position:absolute;left:50%;top:-34px;width:40px;height:52px;margin-left:-20px;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.idc-tilt{perspective:1100px}
.idc-svg{position:absolute;width:0;height:0}

/* the card: CR80 proportions (54 × 85.6 mm) as a minimum height, glass over the scene. Rows that hold text get fixed heights
   where they can, so a web font arriving late never changes the card's height (no layout shift) */
.idc{position:relative;display:flex;flex-direction:column;width:100%;aspect-ratio:54/85.6;margin:0;border-radius:22px;transform-origin:50% 12px;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 3px 8px rgba(28,38,56,.16),0 34px 70px -14px rgba(28,38,56,.34)}
.idc-face{position:relative;flex:1 0 auto;border-radius:inherit;overflow:hidden;isolation:isolate;
  background:linear-gradient(162deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 34%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.06)),linear-gradient(rgba(15,18,28,.62),rgba(15,18,28,.62)),
    radial-gradient(70% 45% at 50% 60%,rgba(var(--tc-rgb),.12),transparent 75%),radial-gradient(60% 40% at 0% 85%,rgba(255,61,138,.08),transparent 70%),#0B0D12;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06)}
.idc-face::before{content:"";position:absolute;inset:0;z-index:7;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.55),rgba(255,255,255,.1) 24%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.idc-back{position:absolute;inset:0;visibility:hidden}
.idc-halo{position:absolute;inset:-1px;border-radius:23px;pointer-events:none;opacity:0;box-shadow:0 0 0 5px rgba(var(--tc-rgb),.2),0 0 64px 6px rgba(var(--tc-rgb),.6)}
.idc-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(85% 50% at 100% 6%,rgba(var(--tc-rgb),.34),rgba(var(--tc-rgb),.09) 46%,transparent 72%),radial-gradient(70% 42% at 0% 100%,rgba(var(--tc2-rgb),.17),transparent 70%)}
.idc-sheen{position:absolute;inset:0;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 42% at var(--mx,28%) var(--my,8%),rgba(255,255,255,.13),transparent 70%),linear-gradient(116deg,transparent calc(var(--gx,28%) - 16%),rgba(255,255,255,.055) var(--gx,28%),transparent calc(var(--gx,28%) + 16%))}
.idc-shade{position:absolute;inset:0;z-index:6;pointer-events:none;background:#05070b;opacity:0}

/* holographic foil band with the punched lanyard slot */
.idc-foil{position:relative;z-index:1;height:32px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 45%,rgba(0,0,0,.14)),
    radial-gradient(circle,transparent 0 2.7px,rgba(255,255,255,.38) 3px 4px,transparent 4.3px),
    radial-gradient(circle,transparent 0 2.7px,rgba(255,255,255,.38) 3px 4px,transparent 4.3px),
    repeating-linear-gradient(112deg,rgba(255,255,255,0) 0 3px,rgba(255,255,255,.28) 3px 4px,rgba(255,255,255,0) 4px 7px),
    linear-gradient(100deg,var(--h1) 0%,var(--h2) 14%,var(--h3) 30%,var(--h4) 46%,var(--h5) 60%,var(--h2) 74%,var(--h3) 88%,var(--h1) 100%);
  background-size:auto,22px 16px,22px 16px,auto,300% 100%;background-position:0 0,0 0,11px 8px,0 0,var(--fx,30%) 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.4)}
.idc-foil::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 160% at var(--mx,28%) 0%,rgba(255,255,255,.55),transparent 55%),linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 42%,transparent 52%,transparent 64%,rgba(255,255,255,.22) 72%,transparent 80%);background-size:auto,300% 100%;background-position:0 0,var(--fx,30%) 0;mix-blend-mode:overlay}
.idc-slot{position:absolute;left:50%;top:8px;width:38px;height:9px;margin-left:-19px;border-radius:5px;background:#05070A;box-shadow:inset 0 1.5px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.25)}
.idc-micro{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:space-between;padding:0 14px;font:700 6.5px/1 var(--f-display);letter-spacing:.24em;color:rgba(8,12,20,.42);white-space:nowrap;text-transform:uppercase}
.idc-sweep{position:absolute;top:-10px;bottom:-10px;left:0;width:46%;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);mix-blend-mode:overlay;opacity:0}
/* idle glint on the foil once the badge has landed (every 7 s; off with reduced motion and while the reveal runs) */
.idc-foil::after{content:"";position:absolute;top:-6px;bottom:-6px;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);mix-blend-mode:overlay;transform:translateX(-140%) skewX(-18deg);animation:idcGlint 7s 2.6s ease-in-out infinite}
@keyframes idcGlint{0%,78%{transform:translateX(-140%) skewX(-18deg)}94%,100%{transform:translateX(420%) skewX(-18deg)}}
.is-revealing .idc-foil::after{animation:none;opacity:0}

.idc-in{position:relative;z-index:2;padding:14px 20px 17px}
.idc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:28px}
.idc-kick{display:inline-flex;align-items:center;gap:8px;margin:0;font:800 13px/1 var(--f-kr);letter-spacing:.04em;color:#FF3D8A;white-space:nowrap}
.idc-kick i{width:7px;height:7px;border-radius:50%;background:#FF3D8A;box-shadow:0 0 12px #FF3D8A;flex:none}
.idc-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px 0 10px;border-radius:999px;flex:none;background:rgba(var(--tc-rgb),.14);border:1px solid rgba(var(--tc-rgb),.6);color:var(--tc);font:800 13px/1 var(--f-display);white-space:nowrap}
.idc-pill i{width:7px;height:7px;border-radius:50%;background:var(--tc);box-shadow:0 0 10px var(--tc)}

.idc-who{min-width:0;margin-top:16px}
.idc-dept{margin:0;font:500 12px/1.3 var(--f-kr);color:var(--muted)}
.idc-job{margin:3px 0 0;font:700 15px/1.3 var(--f-kr);color:#E3E7EF;overflow-wrap:anywhere}
.idc-title{margin:12px 0 0;font:800 28px/1.14 var(--f-kr);letter-spacing:-.03em;color:var(--text);text-wrap:balance;overflow-wrap:anywhere}
.idc-title:focus,.idc-title:focus-visible{outline:0}
.idc-line{margin:7px 0 0;font:500 12.5px/1.42 var(--f-kr);color:#B9C1D2;text-wrap:pretty}

/* the place (owner 2026-10-26): "100명 중" small, then N big with its unit; the grade ladder on the right. The number scales
   with its column (container query units), so two digits and the unit fit from 320 px phones to the 360 px desktop card */
.idc-rank{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;margin-top:18px}
.idc-score{min-width:0;container-type:inline-size}
.idc-lbl{height:16px;margin:0;font:700 13.5px/1.2 var(--f-kr);color:var(--tc);letter-spacing:.01em}
.idc-lead{height:20px;margin:10px 0 0;font:700 17px/20px var(--f-kr);letter-spacing:-.02em;color:#E8ECF3;white-space:nowrap;overflow:hidden}
.idc-num{display:flex;align-items:baseline;gap:4px;height:80px;margin:4px 0 0;line-height:1;white-space:nowrap;transform-origin:0 85%}
.idc-num .n{position:relative;display:inline-block}
.idc-num b,.idc-num .g{font:800 min(104px,57cqi)/.8 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text);text-shadow:0 0 30px rgba(var(--tc-rgb),.55),0 0 90px rgba(var(--tc-rgb),.3)}
.idc-num b{display:block}
.idc-num .g{position:absolute;left:0;top:0;display:none;letter-spacing:0;white-space:nowrap}
.idc-num .g span{display:inline-block;text-align:center}
.idc-num .u{font:800 min(40px,21cqi)/1 var(--f-kr);letter-spacing:-.03em}
:lang(zh) .idc-num b,:lang(zh) .idc-num .g{font-size:min(96px,47cqi)}
:lang(zh) .idc-num .u{font-size:min(34px,17cqi)}
/* the ladder: nine rungs, 1등급 at the top, the last grade at the bottom (one row each, the column's height). --c = rungs from the
   bottom up to the person's; those below it light dimly in the grade colour, theirs fully with a glow and the marker. --q (the
   climb) and --m (the person's rung) are 1, and run from 0 in the reveal */
.idc-ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(9,minmax(0,1fr));--q:1;--m:1}
.idc-rung{position:relative;display:flex;align-items:center;gap:7px;min-width:0;padding-left:11px}
.idc-rung i{position:relative;flex:none;width:22px;height:8px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.idc-rung i::before{content:"";position:absolute;inset:0;background:var(--tc);opacity:calc(clamp(0,var(--c) * var(--q) - var(--k),1) * .38)}
.idc-rung.is-me i{box-shadow:0 0 calc(var(--m) * 10px) rgba(var(--tc-rgb),.85)}
.idc-rung.is-me i::before{opacity:clamp(0,var(--c) * var(--q) - var(--k),1)}
.idc-rung span{font:600 11px/1 var(--f-kr);color:#8F98AB;white-space:nowrap}
.idc-rung.is-me span{color:var(--text)}
.idc-mk{position:absolute;left:0;top:50%;width:0;height:0;margin-top:-4px;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #F5F6FA;opacity:var(--m);filter:drop-shadow(0 0 3px rgba(255,255,255,.7))}
.idc-rung:nth-child(1){--k:8}.idc-rung:nth-child(2){--k:7}.idc-rung:nth-child(3){--k:6}.idc-rung:nth-child(4){--k:5}.idc-rung:nth-child(5){--k:4}.idc-rung:nth-child(6){--k:3}.idc-rung:nth-child(7){--k:2}.idc-rung:nth-child(8){--k:1}.idc-rung:nth-child(9){--k:0}
.idc-clock{position:relative;display:flex;align-items:center;gap:10px;height:18px;margin:12px 0 0;font:500 13px/1 var(--f-kr);color:var(--muted)}
.idc-clock>i{width:8px;height:8px;border-radius:50%;background:var(--tc);box-shadow:0 0 12px var(--tc);flex:none}
.idc-clock b{font:700 16px/1 var(--f-display);color:var(--text);letter-spacing:-.01em;margin:0 1px}
.idc-clock .sl{margin:0 4px 0 3px}
.idc-clock .st{position:absolute;left:18px;top:50%;transform:translateY(-50%);opacity:0;font-weight:600;color:#C9D0DD;white-space:nowrap}

/* access gauges: one row per area (활용, 숙련도; owner 2026-10-27), ten cells each; the last lit cell fills by the decimal.
   Two rows take the room three did (63 px), so the card keeps its height and the space under the footer */
.idc-gauge{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:15px}
.idc-gauge li{display:grid;grid-template-columns:58px minmax(0,1fr) 38px;align-items:center;gap:10px;height:24px}
.idc-gauge span{font:600 13.5px/1 var(--f-kr);color:#C3CAD8;white-space:nowrap}
.idc-gauge .idc-cells{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;filter:drop-shadow(0 0 4px rgba(var(--tc-rgb),.45))}
.idc-gauge .idc-cells i{position:relative;height:12px;border-radius:2px;background:rgba(255,255,255,.085);overflow:hidden}
.idc-gauge .idc-cells i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(clamp(0,var(--v) - var(--k),1) * 100%);background:var(--tc)}
.idc-gauge .idc-cells i:nth-child(1){--k:0}.idc-gauge .idc-cells i:nth-child(2){--k:1}.idc-gauge .idc-cells i:nth-child(3){--k:2}.idc-gauge .idc-cells i:nth-child(4){--k:3}.idc-gauge .idc-cells i:nth-child(5){--k:4}.idc-gauge .idc-cells i:nth-child(6){--k:5}.idc-gauge .idc-cells i:nth-child(7){--k:6}.idc-gauge .idc-cells i:nth-child(8){--k:7}.idc-gauge .idc-cells i:nth-child(9){--k:8}.idc-gauge .idc-cells i:nth-child(10){--k:9}
.idc-gauge b{position:relative;font:700 18px/1 var(--f-display);text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.idc-gauge b .c{position:absolute;right:0;top:0;display:none;font-style:normal;color:var(--text)}

.idc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09)}
.idc-issue{display:inline-flex;align-items:center;gap:8px;min-width:0;margin:0;font:500 12px/1.2 var(--f-kr);color:var(--muted)}
.idc-issue b{font:700 12px/1 var(--f-display);letter-spacing:-.005em;color:#DCE1EA;white-space:nowrap}
.idc-code{display:block;width:38px;height:38px;flex:none;color:#E9EDF4}

/* the back, what hangs there before it turns round: the reels' '?' hook */
.idc-back-in{position:absolute;inset:32px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 40px;text-align:center}
.idc-back .idc-kick{height:14px;font-size:14px}
.idc-q{height:196px;margin:6px 0 0;font:800 196px/1 var(--f-display);letter-spacing:-.04em;background:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(255,61,138,.28))}
.idc-hook{height:56px;margin:2px 0 0;font:800 21px/1.32 var(--f-kr);letter-spacing:-.03em;color:var(--text)}
.idc-hook em{font-style:normal;background:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.idc-back-brand{position:absolute;left:0;right:0;bottom:22px;display:flex;align-items:center;justify-content:center;gap:9px;margin:0;font:800 14px/1 var(--f-display);letter-spacing:-.01em;color:#DCE1EA}
.idc-back-brand .idc-mark{width:15px;height:15px}
.idc-back .idc-guil{position:absolute;inset:32px 0 0;width:100%;height:calc(100% - 32px);color:var(--tc);opacity:.1;pointer-events:none}

/* the reveal (app.js revealBadge: one CSS rule with the frame's --rv-* values; skipped or instant = none of this) */
.is-revealing .idc-hang{opacity:var(--rv-op);transform:translateY(var(--rv-drop))}
.is-revealing .idc-swing{transform:rotate(var(--rv-swing))}
.is-revealing .idc{transform:rotateY(var(--rv-turn)) scale(var(--rv-sc))}
.is-revealing .idc-front{visibility:var(--rv-front)}
.is-revealing .idc-back{visibility:var(--rv-back)}
.is-revealing .idc-front .idc-shade{opacity:var(--rv-shade-f)}
.is-revealing .idc-back .idc-shade{opacity:var(--rv-shade-b)}
.is-revealing .idc-num b{opacity:var(--rv-real)}
.is-revealing .idc-num .g{display:flex;opacity:var(--rv-ghost)}
.is-revealing .idc-micro span+span{opacity:var(--rv-k)}   /* the micro-printed No. carries the grade and % */
.is-revealing .idc-num{transform:scale(var(--rv-pop))}
.is-revealing .idc-title{filter:blur(var(--rv-tblur));opacity:var(--rv-top)}
.is-revealing .idc-line{opacity:var(--rv-lop);transform:translateY(var(--rv-ly))}
.is-revealing .idc-pill{opacity:var(--rv-pop2);transform:scale(var(--rv-psc))}
.is-revealing .idc-clock .st{opacity:var(--rv-st)}
.is-revealing .idc-clock .fin{opacity:var(--rv-fin)}
.is-revealing .idc-clock>i{opacity:var(--rv-dot)}
.is-revealing .idc-halo{opacity:var(--rv-halo)}
.is-revealing .idc-sweep{opacity:var(--rv-sw);transform:translateX(var(--rv-swx)) skewX(-18deg)}
.is-revealing .idc-ladder{--q:var(--rv-lad);--m:var(--rv-me)}
.is-revealing .idc-rung.is-me span{color:#8F98AB;color:color-mix(in srgb,var(--text) calc(var(--m) * 100%),#8F98AB)}   /* no hint before the landing */
.is-revealing .idc-gauge li:nth-child(1){--q:var(--rv-q0)}
.is-revealing .idc-gauge li:nth-child(2){--q:var(--rv-q1)}
.is-revealing .idc-gauge .idc-cells i::before{width:calc(clamp(0,var(--v) * var(--q) - var(--k),1) * 100%)}
.is-revealing .idc-gauge b{color:transparent}
.is-revealing .idc-gauge b .c{display:block}
.is-revealing .idc-code{clip-path:inset(0 0 var(--rv-qr) 0)}
.is-revealing .ar-next-up{opacity:var(--rv-next)}

.ar-next-up,.ar-result-actions{position:relative}   /* above the scene's glow, which is a positioned layer */
.ar-next-up{margin:14px 0 0;text-align:center;font:500 14px/1.45 var(--f-kr);color:var(--muted)}
.ar-next-up b{color:var(--text);font-weight:700}
.ar-next-up em{font-style:normal;font-weight:700;color:var(--tt,var(--tc))}

/* 이미지로 저장: the career result's save sheet (src/apps/career/style.css .ov / .int / .story-*), in this page's tokens */
.ar-result-actions #ar-other{grid-column:1/-1}
.ar-result-actions .ar-img-btn{position:relative;overflow:hidden;isolation:isolate;border:1.5px solid transparent;font-weight:700;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box}
.ar-img-btn::before{content:"";position:absolute;top:0;bottom:0;left:0;z-index:-1;width:42%;background:linear-gradient(100deg,transparent 0%,rgba(28,38,56,.07) 50%,transparent 100%);transform:translateX(-140%) skewX(-18deg);animation:arImgSweep 3.2s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes arImgSweep{0%,55%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.ar-result-actions .ar-img-btn:hover{background:linear-gradient(var(--surface-2),var(--surface-2)) 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,.3),0 0 26px -6px rgba(61,232,198,.26)}
.ar-img-btn:disabled::before,.ar-img-btn[aria-busy="true"]::before{animation-play-state:paused;opacity:0}
.ar-img-btn svg{width:18px;height:18px;flex:none}
.ar-ov{position:fixed;inset:0;z-index:1150;background:var(--ov);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center}
.ar-int{width:100%;max-width:440px;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--border);border-radius:28px 28px 0 0;box-shadow:var(--shadow-2);animation:arRise .4s cubic-bezier(.2,.7,.2,1)}
@keyframes arRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:560px){.ar-ov{align-items:center;padding:24px}.ar-int{border-radius:28px}}
/* Google's bottom anchor ad (phones) sits above every overlay: the sheet stays clear of it (html{--yn-anchor}, AMENDMENTS A3) */
.ar-ov{padding-bottom:var(--yn-anchor,0px)}
.ar-ov .ar-int{max-height:calc(100dvh - var(--yn-anchor,0px))}
@media(min-width:560px){.ar-ov{padding-bottom:calc(24px + var(--yn-anchor,0px))}}
.ar-int-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
.ar-int-t{font:700 15px var(--f-display);color:var(--text)}
.ar-int-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}
.ar-int-x:hover{color:var(--text)}
.ar-int-x svg{width:16px;height:16px}
.ar-img{display:block;margin:12px auto 0;width:auto;max-width:calc(100% - 32px);max-height:min(56vh,540px);aspect-ratio:4/5;border-radius:14px;border:1px solid var(--border);background:#0B0D12;-webkit-touch-callout:default}
@media(max-width:479px) and (max-height:820px){.ar-img{max-height:44vh}}
.ar-img-hint{margin:12px 16px 0;font:400 13px/1.45 var(--f-body);color:var(--muted);text-align:center;text-wrap:pretty}
.ar-img-hint.on{color:var(--text);font-weight:600}
.ar-img-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 16px 16px}
.ar-img-btns .btn{flex:1 1 40%;margin:0;width:auto}
.ar-img-btns #ar-img-dl{flex-basis:100%}
@media(max-width:479px){.ar-img-btns .btn{flex-basis:100%}}
.ar-img-btns .btn.nudge{border-color:#FF3D8A;box-shadow:0 0 0 3px rgba(255,61,138,.18)}
.ar-img-btns .ar-int-close{background:transparent;border:1px solid var(--border);color:var(--muted)}
.ar-img-btns .ar-int-close:hover{color:var(--text);border-color:var(--border-2)}
html.ar-lock{overflow:hidden}
/* the offscreen frame the share image is measured in (app.js shareImage): laid out, never shown */
.ar-shot{position:fixed;left:0;top:0;width:600px;height:750px;visibility:hidden;pointer-events:none;contain:layout paint;transform:translateX(-200vw)}
.ar-shot .idc-hang{--w:350px;--lan:100px;--up:52px;margin:4px auto 0}
.ar-shot .idc,.ar-shot .idc-swing{transform:none}

@media(prefers-reduced-motion:reduce){.idc-foil::after,.ar-img-btn::before{animation:none;opacity:0}}

.ar-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}
.ar-result-actions .btn{height:auto;min-height:52px;padding:10px 14px;white-space:normal;line-height:1.3;border-radius:16px}
@media(max-width:359px){.ar-result-actions{grid-template-columns:1fr}}
.ar-result-note{margin:14px 2px}
.ar-answer-review{margin-top:6px;border-top:1px solid var(--border);font:400 13.5px/1.6 var(--f-body)}
.ar-answer-review summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;font-weight:600;cursor:pointer;list-style:none}
.ar-answer-review summary::-webkit-details-marker{display:none}
.ar-answer-review summary::after{content:'+';font:400 20px/1 var(--f-body);color:var(--muted)}
.ar-answer-review[open] summary::after{content:'−'}
.ar-review-row{display:flex;gap:14px;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border)}
.ar-review-row p{margin:0}
.ar-review-row small{color:var(--muted);font-size:12.5px}
.ar-review-row button{flex:none;white-space:nowrap;color:var(--low)}
.ar-retry{margin:4px 0 0;text-align:center}

/* ---------- dialogs ---------- */
.ar-reset-dialog{width:min(420px,calc(100% - 32px));border:1px solid var(--border-2);border-radius:20px;padding:24px;background:var(--surface);color:var(--text);font-family:'Instrument Sans','Noto Sans KR',sans-serif}
.ar-reset-dialog::backdrop{background:var(--ov);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ar-reset-dialog h2{margin:0 0 8px;font:700 19px/1.4 'Sora','Noto Sans KR',sans-serif}
.ar-reset-dialog p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.ar-reset-dialog>div{display:flex;gap:10px;margin-top:20px}
.ar-reset-dialog .btn{flex:1}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Career landing grammar: the same mode segment, direct search and button scale as the job service. */
#ar-intro{--fl:61,232,198;padding-bottom:24px}
#ar-intro .ar-modes{display:grid;grid-template-columns:1fr;max-width:640px;gap:12px}
#ar-intro .ar-mode-tabs{margin:0}
#ar-intro .ar-mode-tabs button{border:0;background:none;padding:0;min-width:0;cursor:pointer}
#ar-intro .ar-mode{width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;gap:12px}
#ar-intro .hero-sub{max-width:36ch;text-wrap:pretty}
#ar-intro .ar-quick-jobs{margin-top:0}
.ar-about{border-top:1px solid var(--border);font:500 13px/1.6 var(--f-body);color:var(--muted)}
.ar-about>summary{cursor:pointer;padding:16px 0;min-height:48px}
html[data-ar-view="intro"] .ar-method{margin-top:0;padding:0 0 12px}
html[data-ar-view="intro"] .ar-method summary{min-height:48px;padding:16px 0}
@media(min-width:768px){
 #ar-intro .ar-modes{justify-items:center}
 #ar-intro .ar-mode-daily{align-items:center;text-align:center}
 #ar-intro .hero-sub{max-width:640px}
}
#ar-intro .ar-mode-job .ar-mode-head{display:none}
#ar-intro .ar-mode-daily .ar-mode-ic,#ar-intro .ar-mode-daily h2{display:none}
#ar-intro .ar-mode-head p{margin:0;font-size:14.5px}
#ar-intro .ar-mode-daily{cursor:default;transform:none}
#ar-intro .ar-mode-daily:hover{transform:none}
.ar-search{width:100%;max-width:640px;z-index:5;isolation:isolate}
.ar-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}
.ar-search:focus-within::before{opacity:calc(var(--halo) + .16)}
.ar-search input{height:60px;padding:0 18px 0 52px;border-radius:18px;background:var(--glass);border-color:var(--glass-b);box-shadow:var(--shadow-2),inset 0 1px 0 var(--hl);font-size:17px;backdrop-filter:blur(18px)}
.ar-search>svg{left:18px;top:19px;width:22px;height:22px;z-index:1}
.ar-search input:focus{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)}
.ar-mode-go.btn{height:48px;max-width:340px;border-radius:14px;font-size:15px;font-weight:600}
.ar-mode-go.btn:hover{background:var(--inv)}
.ar-mode-alt{margin:0;padding:4px 0;min-height:32px}
.ar-result-actions{gap:8px;margin-top:16px}
.ar-result-actions .btn{min-height:48px;border-radius:14px;font-size:15px;font-weight:600}
/* Existing subscribers retain cancellation; no signup or guide surface. */
#ar-subscribe-status:empty{display:none}
#ar-subscribe-status{margin:8px 0;font:400 13px/1.6 var(--f-body);color:var(--muted)}
/* 2026-10-29 viral pass: the share area right under the card — the two buttons, the row of channels (src/client/quiz-share.js,
   themed through its --yqs-* properties: KakaoTalk / LINE / WhatsApp keep their own colours), then the other mode. Phones: the two
   buttons stand above the bottom bar (nav#yn-dock) on the first screen at 390×844, so there the lanyard is shorter and the badge
   sits closer to the back link (the saved image, .ar-shot, keeps its own lanyard). */
.ar-share-row{grid-column:1/-1;--yqs-margin:0;--yqs-gap:6px;--yqs-h:58px;--yqs-min:52px;--yqs-radius:14px;--yqs-fs:11.5px;--yqs-font:var(--f-body);
  --yqs-bg:var(--surface);--yqs-bg-h:var(--surface-2);--yqs-line:var(--border);--yqs-line-h:var(--border-2);--yqs-fg:var(--text)}
.ar-share-row:empty{display:none}
/* labels never cut: two balanced lines where a word must ('リンクを / コピー'), a step smaller in the six-button rows (US, CA) */
.ar-share-row .yqs-b{padding:9px 2px 8px}
.ar-share-row .yqs-b span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12;text-align:center;line-break:strict;text-wrap:balance}
.ar-share-row .yqs:has(>.yqs-b:nth-child(6):not([hidden])){--yqs-gap:4px;--yqs-fs:10px}
.ar-share-row .yqs:has(>.yqs-b:nth-child(6):not([hidden])) .yqs-b span{letter-spacing:-.01em}
@media(max-width:767px){
  .ar-result{padding-top:0}
  .idc-scene{margin-top:-44px}
  .idc-hang{--lan:64px}
  .ar-result-actions{margin-top:12px}
}

/* ---------- the dark values the light pass replaced (2026-10-30), kept for the future toggle ---------- */
:root[data-theme="dark"] .ar-status{box-shadow:0 10px 30px rgba(0,0,0,.4)}
:root[data-theme="dark"] .ar-mode{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))}
:root[data-theme="dark"] .ar-opt-ic{background:var(--card-glass)}
:root[data-theme="dark"] :is(.ar-month,.ar-inline-btn,.ar-mode-go svg,.ar-axis-map span,.ar-method .ar-gate,.ar-review-row button){color:#3de8c6}
:root[data-theme="dark"] .ar-result,:root[data-theme="dark"] .ar-shot{--tt:var(--tc)}
:root[data-theme="dark"] .idc-bg .b1{opacity:.7}
:root[data-theme="dark"] .idc-bg .b2{opacity:.62}
:root[data-theme="dark"] .idc-bg .b3{opacity:.5}
:root[data-theme="dark"] .idc-bg .grid{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
:root[data-theme="dark"] .idc{box-shadow:0 3px 8px rgba(0,0,0,.35),0 34px 70px -14px rgba(0,0,0,.72)}
:root[data-theme="dark"] .idc-face{background:linear-gradient(162deg,rgba(255,255,255,.09),rgba(255,255,255,.025) 34%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.06)),rgba(15,18,28,.62)}
:root[data-theme="dark"] .ar-next-up{color:#AEB8CA}
:root[data-theme="dark"] .ar-result-actions .ar-img-btn{background:linear-gradient(#191D29,#191D29) padding-box,linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%) border-box}
:root[data-theme="dark"] .ar-result-actions .ar-img-btn:hover{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)}
:root[data-theme="dark"] .ar-img-btn::before{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.26) 50%,transparent 100%)}
:root[data-theme="dark"] .ar-ov,:root[data-theme="dark"] .ar-reset-dialog::backdrop{background:rgba(4,7,11,.74)}

/* The quiz: one question, five tappable answers (the item's own anchors). One tap saves and moves on. */
.ar-content:has(>#ar-quiz:not([hidden])){max-width:none;padding:22px clamp(20px,4vw,64px) 40px}
.ar-content:has(>#ar-quiz:not([hidden]))>.ar-method,.ar-content:has(>#ar-quiz:not([hidden]))>.ar-footer{display:none}
body:has(#ar-quiz:not([hidden])) #yn-dock{display:none}
#ar-quiz{width:100%;max-width:820px;margin:0 auto;font-family:var(--f-body)}
.ar-quiz-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
#ar-count{display:flex;align-items:baseline;gap:7px;margin:0 auto 0 0;font:500 14px/1.4 'Instrument Sans',sans-serif;color:var(--faint);font-variant-numeric:tabular-nums}
#ar-count strong{font-size:24px;font-weight:650;color:var(--text)}
.ar-quiz-tools{display:flex;align-items:center;gap:8px}
.ar-nav-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 12px;border:1px solid #ffffff1c;border-radius:10px;background:#ffffff03;font:500 12.5px/1.4 var(--f-body);color:#c5cedb;white-space:nowrap}
.ar-nav-button:hover{border-color:#ffffff45;background:#ffffff08;color:#fff}
.ar-nav-button svg{width:16px;height:16px;flex:none}
.ar-exit-button{width:42px;padding:9px;color:#8c99ab}
.ar-context{margin:0 0 14px;font:500 14px/1.45 var(--f-body);color:var(--muted)}
.ar-context b{color:var(--text);font-weight:700}
.ar-temp{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px dashed #ffc83d99;color:var(--med);font-size:11.5px;font-weight:600;vertical-align:1px}
.ar-axis-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0 0 18px;padding:0}
.ar-axis-steps li{min-width:0;color:var(--faint);font:500 12px/1.4 var(--f-body)}
.ar-axis-steps li>div{height:4px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.ar-axis-steps i{display:block;height:100%;background:#659b8e;border-radius:4px;transition:width .2s}
.ar-axis-steps li[aria-current]{color:var(--low);font-weight:600}
.ar-axis-steps li[aria-current] i{background:#3de8c6}
.ar-axis-steps li.is-complete:not([aria-current]){color:var(--muted)}
.ar-question-panel{padding:24px 28px 20px;border:1px solid #ffffff16;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#3de8c608,transparent 55%),#10141c;box-shadow:0 16px 50px #00000020}
.ar-question-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ar-question-meta .ar-eyebrow{margin:0;padding:6px 11px;border:1px solid #3de8c622;border-radius:8px;background:#3de8c609;font:600 13px/1.4 var(--f-body);color:#3de8c6}
.ar-question-meta>span{font:500 12px var(--f-body);color:var(--faint)}
#ar-quiz h2{margin:0 0 10px;font:700 27px/1.45 var(--f-display);letter-spacing:-.03em;color:var(--text);text-wrap:pretty;word-break:keep-all}
#ar-quiz h2:focus{outline:0}
.ar-quiz-hint{margin:0 0 16px;font:400 13.5px/1.6 var(--f-body);color:var(--muted)}
#ar-quiz fieldset{display:grid;gap:9px;margin:0;padding:0;border:0;min-width:0}
.ar-option{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 46px;align-items:center;gap:14px;min-width:0;min-height:58px;padding:11px 16px;border:1px solid #ffffff1c;border-radius:14px;background:#ffffff03;color:var(--text);text-align:left;transition:background .15s,border-color .15s,transform .15s}
.ar-option:hover{border-color:#ffffff60;background:#ffffff08}
.ar-option:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.ar-option[aria-pressed=true]{border-color:#3de8c6;background:#3de8c612;box-shadow:inset 0 0 0 1px #3de8c638}
.ar-option:disabled{opacity:1;cursor:default}
.ar-option kbd{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff22;border-radius:8px;font:600 13px/1 'Instrument Sans',sans-serif;color:#a3adbe}
.ar-option[aria-pressed=true] kbd{color:#3de8c6;border-color:#3de8c666;background:#3de8c60f}
.ar-option-label{font:500 15.5px/1.45 var(--f-body);color:#e4e8ef;word-break:keep-all;overflow-wrap:anywhere}
.ar-level{display:flex;align-items:flex-end;justify-content:flex-end;gap:3px;height:22px}
.ar-level i{display:block;width:5px;border-radius:2px;background:#ffffff14;height:7px}
.ar-level i:nth-child(2){height:10px}.ar-level i:nth-child(3){height:14px}.ar-level i:nth-child(4){height:18px}.ar-level i:nth-child(5){height:22px}
.ar-level i.is-lit{background:#a5b2c6}
.ar-option[aria-pressed=true] .ar-level i.is-lit{background:#3de8c6}
/* scenario items: the scene in a soft card above the question; options without numbers, a neutral marker */
.ar-situation{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:rgba(92,184,255,.07);border:1px solid rgba(92,184,255,.22)}
.ar-situation-tag{display:inline-block;margin-bottom:6px;font:700 11.5px/1.3 var(--f-body);letter-spacing:.02em;color:var(--sky)}
.ar-situation p{margin:0;font:500 16px/1.6 var(--f-body);color:var(--text);text-wrap:pretty}
.ar-option.is-choice{grid-template-columns:20px minmax(0,1fr) 22px}
.ar-marker{display:block;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-2)}
.ar-option.is-choice[aria-pressed=true] .ar-marker{border-color:#3de8c6;background:radial-gradient(circle,#3de8c6 0 45%,transparent 50%)}
.ar-option.is-choice .ar-option-check{position:static;margin:0}
.ar-option-check{display:none;position:absolute;top:50%;right:14px;width:18px;height:18px;margin-top:-9px;color:#3de8c6}
.ar-option[aria-pressed=true] .ar-option-check{display:block}
.ar-option[aria-pressed=true] .ar-level{visibility:hidden}
.ar-answer-guidance{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.ar-answer-guidance p{margin:0;font:400 12.5px/1.6 var(--f-body);color:var(--faint)}
.ar-keyboard-hint kbd{display:inline-grid;place-items:center;min-width:20px;height:22px;border:1px solid var(--border-2);border-radius:4px;background:var(--surface);font:500 11px 'Instrument Sans',sans-serif;color:var(--muted);vertical-align:1px}
.ar-save-note{margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--faint)}
.ar-map-dialog{width:min(440px,calc(100% - 32px));max-height:calc(100svh - 48px);padding:22px;border:1px solid var(--border-2);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-2);overscroll-behavior:contain;font-family:'Instrument Sans','Noto Sans KR',sans-serif}
.ar-map-dialog::backdrop{background:var(--ov);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.ar-map-heading{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;margin-bottom:20px}
.ar-map-heading h2{font:700 19px/1.3 'Sora','Noto Sans KR',sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.ar-map-heading p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0;word-break:keep-all}
.ar-map-heading button{flex:none;width:38px;min-height:38px;padding:8px}
.ar-question-map{display:grid;gap:16px}
.ar-question-map h3{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;margin:0 0 8px;color:var(--text)}
.ar-question-map h3>span{font-size:11.5px;color:var(--faint);font-weight:400}
.ar-question-map section>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ar-map-question{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font:500 14px 'Instrument Sans',sans-serif}
.ar-map-question:hover{background:var(--surface-2);border-color:var(--border-2)}
.ar-map-question.is-answered{border-color:#3de8c666;color:var(--low);background:#3de8c610}
.ar-map-question[aria-current]{box-shadow:0 0 0 1px #3de8c6;border-color:#3de8c6;color:var(--text)}
.ar-map-mark{font-size:11px;color:var(--faint)}.is-answered .ar-map-mark{color:var(--low)}
.ar-map-legend{display:flex;justify-content:center;gap:20px;padding-top:16px;margin:20px 0 0;border-top:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.ar-map-legend span{display:flex;gap:6px;align-items:center}.ar-map-legend i{display:inline-block;width:7px;height:7px;border:1px solid #758499;border-radius:2px}.ar-map-legend span:first-child i{background:#3de8c68c;border-color:#3de8c68c}
@media(max-width:767px){
  .ar-content:has(>#ar-quiz:not([hidden])){padding:14px 16px 32px}
  .ar-quiz-top{gap:10px;margin-bottom:12px}
  #ar-count strong{font-size:21px}
  .ar-context{font-size:13.5px;margin-bottom:12px}
  .ar-axis-steps{gap:7px;margin-bottom:14px}.ar-axis-steps li{font-size:11px;white-space:nowrap}
  .ar-question-panel{padding:18px 16px 16px;border-radius:18px}
  .ar-question-meta{margin-bottom:12px}
  .ar-question-meta .ar-eyebrow{font-size:12px;padding:5px 9px}
  #ar-quiz h2{font-size:22px;line-height:1.45}
  .ar-quiz-hint{font-size:12.5px;margin-bottom:14px}
  #ar-quiz fieldset{gap:8px}
  .ar-option{grid-template-columns:26px minmax(0,1fr) 34px;gap:11px;min-height:56px;padding:10px 12px;border-radius:12px}
  .ar-option kbd{width:26px;height:26px;font-size:12px}
  .ar-option.is-choice{grid-template-columns:18px minmax(0,1fr) 20px}
  .ar-situation{padding:12px 14px}.ar-situation p{font-size:15px}
  .ar-option-label{font-size:15px}
  .ar-level{transform:scale(.82);transform-origin:right center}
  .ar-option-check{right:10px}
  .ar-answer-guidance{justify-content:center;text-align:center;margin-top:14px;padding-top:12px}
  .ar-answer-guidance .ar-keyboard-hint{display:none}
  .ar-nav-button{min-height:40px;padding:8px 10px;font-size:12px}
  .ar-exit-button{width:40px;padding:8px}
  .ar-quiz-tools{gap:6px}
  .ar-map-dialog{padding:20px;max-height:calc(100svh - 32px)}
}
@media(max-width:359px){
  .ar-content:has(>#ar-quiz:not([hidden])){padding-left:12px;padding-right:12px}
  .ar-question-panel{padding:16px 12px 14px}
  #ar-quiz h2{font-size:20px}
  .ar-option{grid-template-columns:24px minmax(0,1fr) 28px;gap:9px;padding:10px}
  .ar-option-label{font-size:14px}
  .ar-axis-steps li{font-size:10px}
  #ar-count{font-size:12px;gap:5px}#ar-count strong{font-size:19px}
  .ar-nav-button{padding:8px;font-size:11px;gap:4px}
  .ar-map-dialog{padding:16px}.ar-map-question{padding:10px 6px}.ar-question-map section>div{gap:6px}
}
@media(hover:none){.ar-option:hover{border-color:#ffffff1c;background:#ffffff03}.ar-option[aria-pressed=true]:hover{border-color:#3de8c6;background:#3de8c612}}
@media(prefers-reduced-motion:reduce){.ar-axis-steps i,.ar-option{transition:none}}

/* The career quiz's column, plain question and answer-button grammar; scoring/data order is unchanged. */
.ar-content:has(>#ar-quiz:not([hidden])){max-width:720px;margin:0 auto;padding:20px 20px 40px}
#ar-quiz{max-width:680px}
.ar-nav-button{border-color:transparent;background:none;border-radius:12px;font-size:13px;color:var(--muted)}
.ar-nav-button:hover{border-color:transparent;background:var(--surface-2);color:var(--text)}
.ar-question-panel{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.ar-question-meta{margin-top:24px}
.ar-question-meta .ar-eyebrow{padding:0;border:0;background:none;color:var(--faint);font-size:11px;letter-spacing:.09em}
#ar-quiz h2{font:800 26px/1.25 var(--f-display);letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
#ar-quiz fieldset{gap:8px}
.ar-option{grid-template-columns:minmax(0,1fr) 24px;gap:12px;min-height:56px;padding:12px 16px 12px 18px;border-radius:16px;background:var(--surface);border-color:var(--border)}
.ar-option:hover{background:var(--surface-2);border-color:var(--border-2)}
.ar-option-label{grid-column:1;grid-row:1;font:600 16px/1.45 var(--f-body);color:inherit}
.ar-option kbd{grid-column:2;grid-row:1;width:24px;height:24px;font:500 11px var(--f-mono);border-color:var(--border);color:var(--muted);border-radius:6px}
.ar-level{display:none}
.ar-option[aria-pressed=true]{background:var(--inv);color:var(--inv-text);border-color:var(--inv);box-shadow:none}
.ar-option[aria-pressed=true] kbd{background:none;color:inherit;border-color:currentColor;opacity:.6}
.ar-option:not(.is-choice) .ar-option-check{display:none}
.ar-option.is-choice{grid-template-columns:20px minmax(0,1fr) 22px}
.ar-option.is-choice .ar-option-label{grid-column:2}
.ar-option.is-choice .ar-marker{grid-column:1;grid-row:1}
.ar-option.is-choice .ar-option-check{grid-column:3;grid-row:1;color:inherit}
.ar-option.is-choice[aria-pressed=true] .ar-marker{border-color:currentColor;background:radial-gradient(circle,currentColor 0 45%,transparent 50%)}
@media(hover:none){.ar-option:hover{background:var(--surface);border-color:var(--border)}.ar-option[aria-pressed=true]:hover{background:var(--inv);border-color:var(--inv)}}
@media(max-width:359px){.ar-content:has(>#ar-quiz:not([hidden])){padding-left:16px;padding-right:16px}.ar-option{padding:12px 14px;gap:10px}.ar-option-label{font-size:15px}}
/* 2026-10-29: the end of the quiz is a real link to the result document (app.js resultLink): full width under the answers */
.ar-result-go{margin:16px 0 0}
.ar-result-go .btn{display:flex;width:100%;height:52px;border-radius:16px;font-size:16px}

/* the dark values the light pass replaced (2026-10-30), kept for the future toggle */
:root[data-theme="dark"] #ar-count{color:#8792a5}:root[data-theme="dark"] #ar-count strong{color:#f2f4f8}
:root[data-theme="dark"] .ar-temp{color:#ffc83d}
:root[data-theme="dark"] .ar-axis-steps li{color:#697588}:root[data-theme="dark"] .ar-axis-steps li>div{background:#ffffff12}
:root[data-theme="dark"] .ar-axis-steps li[aria-current]{color:#3de8c6}:root[data-theme="dark"] .ar-axis-steps li.is-complete:not([aria-current]){color:#b3c2c0}
:root[data-theme="dark"] .ar-question-meta>span{color:#8792a5}:root[data-theme="dark"] .ar-quiz-hint{color:#aab6c8}
:root[data-theme="dark"] .ar-option:focus-visible{outline-color:#3de8c6}
:root[data-theme="dark"] .ar-situation-tag{color:#8fcbff}:root[data-theme="dark"] .ar-situation p{color:#e4e8ef}
:root[data-theme="dark"] .ar-marker{border-color:#ffffff38}
:root[data-theme="dark"] .ar-answer-guidance{border-top-color:#ffffff0c}:root[data-theme="dark"] .ar-answer-guidance p{color:#8290a4}
:root[data-theme="dark"] .ar-keyboard-hint kbd{border-color:#ffffff1c;background:#ffffff03;color:#acb7c8}
:root[data-theme="dark"] .ar-save-note{color:#69788b}
:root[data-theme="dark"] .ar-map-dialog{border-color:#ffffff25;background:#11161e;box-shadow:0 24px 100px #0008}
:root[data-theme="dark"] .ar-map-dialog::backdrop{background:#04070bbd}
:root[data-theme="dark"] .ar-map-heading p{color:#95a4b8}:root[data-theme="dark"] .ar-question-map h3{color:#c3cddb}:root[data-theme="dark"] .ar-question-map h3>span{color:#74869b}
:root[data-theme="dark"] .ar-map-question{border-color:#ffffff15;background:#ffffff02;color:#8b99ac}
:root[data-theme="dark"] .ar-map-question:hover{background:#ffffff09;border-color:#ffffff50}
:root[data-theme="dark"] .ar-map-question.is-answered{border-color:#3de8c629;color:#9adbc9;background:#3de8c608}
:root[data-theme="dark"] .ar-map-question[aria-current]{color:#e0fff7}
:root[data-theme="dark"] .ar-map-mark{color:#586a7e}:root[data-theme="dark"] .is-answered .ar-map-mark{color:#3de8c6}
:root[data-theme="dark"] .ar-map-legend{border-top-color:#ffffff10;color:#8c9aaf}
:root[data-theme="dark"] .ar-option:not([aria-pressed=true]) kbd{color:var(--faint)}

/* Shared title screen: extracted from the career quiz in demo/index.html. */
:root{
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#F5F6F9;--bg-2:#FFFFFF;--surface:#FFFFFF;--surface-2:#EFF1F6;--surface-3:#E2E6EF;
  --glass:rgba(255,255,255,.88);--glass-b:rgba(28,38,56,.11);--hl:rgba(255,255,255,.95);
  --border:rgba(28,38,56,.10);--border-2:rgba(28,38,56,.24);
  --text:#161B26;--muted:#5B6476;--faint:#667185;
  --inv:#202735;--inv-text:#FFFFFF;--ring:#B52464;--ring-rgb:181,36,100;
  --shadow-1:0 1px 2px rgba(28,38,56,.03),0 4px 12px rgba(28,38,56,.04);
  --shadow-2:0 2px 6px rgba(28,38,56,.03),0 12px 34px rgba(28,38,56,.07);
  --glow-a:.12;--grid:rgba(28,38,56,.025);--top-bg:rgba(255,255,255,.91);--ov:rgba(22,29,43,.42);
  --low:#087D69;--med:#936100;--high:#BC471D;--vhigh:#BF245D;--sky:#2464B7;--pos:#087D69;--neg:#BF245D;--neg-soft:rgba(191,36,93,.08);
  --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='%235B6476' 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:linear-gradient(90deg,#087D69 0%,#936100 38%,#BC471D 66%,#BF245D 100%);
  --spectrum-vivid:linear-gradient(90deg,#3DE8C6 0%,#FFC83D 38%,#FF7A45 66%,#FF3D8A 100%);
  --seg-on:#FFFFFF;--halo:.07;
  color-scheme:light;
}
#ar-intro,.ar-intro-body{--f-display:'Sora',yn-so-a,yn-so-r,'Noto Sans KR',yn-kr-m,system-ui,-apple-system,sans-serif;--f-body:'Instrument Sans',yn-is-a,yn-is-r,'Noto Sans KR',yn-kr-m,system-ui,-apple-system,'Segoe UI',sans-serif;font:400 15px/1.5 var(--f-body);word-break:keep-all}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}

.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}
#ar-intro[lang="ko"] .h1,#ar-intro[lang="ja"] .h1{letter-spacing:-.02em;font-weight:700;line-height:1.18}
#ar-intro[lang="ja"] .h1 .hero-phrase{display:inline-block}
@media(max-width:767px){#ar-intro[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}
  #ar-intro[lang="ko"] .h1,#ar-intro[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}}
/* 첫 화면 큰 제목의 최대 폭은 글꼴에 매이지 않는 em 으로(2026-10-23 광고 런타임에 있던 것을 옮김): ch 는 먼저 온 글꼴의 '0' 폭이라 Noto Sans KR 이
   Sora 보다 먼저 오면 20ch 가 540px 로 줄어 제목이 세 줄로 꺾였다가 돌아왔다(/ko/ 데스크톱 CLS 0.13). Sora 의 ch(ko · ja 0.7625em, 그 밖 0.769em)로 잰 같은 폭 */
@media(min-width:768px){#ar-intro #app .hero .h1{max-width:11.535em}
#ar-intro[lang="ko"] #app .hero .h1,#ar-intro[lang="ja"] #app .hero .h1{max-width:15.25em}
#ar-intro[lang="zh-TW"] #app .fl-hero .h1,#ar-intro[lang="zh-HK"] #app .fl-hero .h1{max-width:15.38em}}


@media(max-width:767px){.hero{padding-top:16px}.hero .h1{margin-top:8px}.hero .hero-sub{margin-bottom:12px}.hero .seg{margin-bottom:8px}}

.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}



.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="daily"] .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)}


.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)}
:root:not([data-theme="dark"]) .trend .chip{background:var(--surface);box-shadow:var(--shadow-1)}
:root:not([data-theme="dark"]) .trend .chip .tile{background:var(--surface-2)}
:root:not([data-theme="dark"]) .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}}

.fl-hero{--fl:61,232,198;--fl-t:var(--low)}   /* --fl = 채움 · 테두리(네온), --fl-t = 글자(라이트에서는 진한 청록, 다크에서는 --low 가 네온이라 그대로) */
.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:var(--fl-t)}
.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:var(--fl-t)}

@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}
}
@media(min-width:768px){.hero.fl-hero{padding-bottom:32px}}
@media(min-width:961px){#ar-intro .wrap,.ar-intro-body.wrap{margin-left:auto;margin-right:auto}}
.yn-more.yn-more>summary{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:0;padding:0 18px;border:1px solid var(--border-2);border-radius:14px;background:var(--surface-3);color:var(--text);font-family:inherit;font-size:15px;font-weight:700;line-height:1.3;text-align:center;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s,transform .12s}
@supports (color:color-mix(in srgb,red 9%,blue)){.yn-more.yn-more>summary{border-color:color-mix(in srgb,var(--text) 22%,transparent);background:color-mix(in srgb,var(--text) 9%,var(--yn-more-base,var(--bg)))}}
.yn-more.yn-more>summary::-webkit-details-marker{display:none}
.yn-more.yn-more>summary::after{content:'';flex:none;display:block;width:26px;height:26px;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat,radial-gradient(circle closest-side,rgba(0,0,0,.13) calc(100% - .75px),transparent 100%);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat,radial-gradient(circle closest-side,rgba(0,0,0,.13) calc(100% - .75px),transparent 100%);transition:transform .2s ease}
.yn-more.yn-more[open]>summary{margin-bottom:12px}
.yn-more.yn-more[open]>summary::after{transform:rotate(180deg)}
@media(hover:hover){.yn-more.yn-more>summary:hover{background:var(--surface-3)}@supports (color:color-mix(in srgb,red 9%,blue)){.yn-more.yn-more>summary:hover{background:color-mix(in srgb,var(--text) 14%,var(--yn-more-base,var(--bg)))}}}
.yn-more.yn-more>summary:active{transform:scale(.99)}
.yn-more.yn-more>summary:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.yn-more.yn-more>summary,.yn-more.yn-more>summary::after{transition:none}}
.no-motion .yn-more.yn-more>summary,.no-motion .yn-more.yn-more>summary::after{transition:none}
.yn-more-b>.wrap{padding:0;max-width:none}