/* Navigation C — the existing service bodies retain their own layout and styles. */
.yn-rail,.yn-dock,.yn-peek,.yn-breadcrumb{display:none}
/* 2026-10-30 라이트(오너): 메뉴 · 독 · 피크 · 브레드크럼은 밝은 바탕. 이 블록은 독립 서비스 페이지(/app/navigation/style.css)에도 그대로 실리고
   그 페이지들은 --surface · --text 를 정의하지 않으므로, 내비게이션 전용 토큰을 여기서 직접 둔다. 다크 값은 :root[data-theme="dark"] 아래. */
.yn-rail,.yn-dock,.yn-peek,.yn-breadcrumb,.yn-services{--yn-panel:#FFFFFF;--yn-card:linear-gradient(145deg,#FFFFFF,#F7F8FB);--yn-fill:#EFF1F6;--yn-fill-2:#E2E6EF;--yn-text:#161B26;--yn-muted:#5B6476;--yn-faint:#667185;--yn-line:rgba(28,38,56,.10);--yn-line-2:rgba(28,38,56,.24);--yn-shadow:0 20px 60px rgba(28,38,56,.16);--yn-dock-bg:rgba(255,255,255,.96);--yn-dock-line:rgba(28,38,56,.10);--yn-dock-shadow:0 4px 24px rgba(28,38,56,.094);--yn-tag:#5E4FA6;--yn-cur:#936100;--yn-cur-rgb:225,183,85;--yn-pink:#B52464}
:root[data-theme="dark"] :is(.yn-rail,.yn-dock,.yn-peek,.yn-breadcrumb,.yn-services){--yn-panel:#10151f;--yn-card:linear-gradient(145deg,#19202d,#151b27);--yn-fill:#ffffff0b;--yn-fill-2:#344056;--yn-text:#e4ecf9;--yn-muted:#afbed3;--yn-faint:#8d9eb8;--yn-line:#ffffff10;--yn-line-2:#ffffff25;--yn-shadow:0 20px 80px #0008;--yn-dock-bg:#191f2ef5;--yn-dock-line:#ffffff25;--yn-dock-shadow:0 8px 35px #0008;--yn-tag:#b8b0dd;--yn-cur:#e8bc72;--yn-cur-rgb:225,183,85;--yn-pink:#c897b6}
/* 그룹 색: 채움 · 테두리는 이 rgb 의 옅은 알파, 글자 · 아이콘은 rgb 그대로 — 라이트에서는 진한 단계 색(PALETTE.md) */
[data-yn-group="forecast"]{--yn-rgb:191,36,93}
[data-yn-group="prepare"]{--yn-rgb:8,125,105}
[data-yn-group="community"]{--yn-rgb:8,125,105}
[data-yn-group="fun"]{--yn-rgb:147,97,0}
[data-yn-group="all"]{--yn-rgb:91,100,118}
:root[data-theme="dark"] [data-yn-group="forecast"]{--yn-rgb:255,94,155}
:root[data-theme="dark"] :is([data-yn-group="prepare"],[data-yn-group="community"]){--yn-rgb:61,232,198}
:root[data-theme="dark"] [data-yn-group="fun"]{--yn-rgb:255,200,61}
:root[data-theme="dark"] [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(--yn-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:rgba(22,29,43,.18)}
:root[data-theme="dark"] .yn-services::backdrop{background:#05080d38}  /* 2026-09-25 오너: 뒤 화면을 거의 그대로 보이게 — 아주 옅게만 어둡게, 흐림 없음 */
.yn-menu-panel{background:var(--yn-panel);border:1px solid var(--yn-line-2);border-radius:24px;overflow:hidden;min-height:0;display:flex;flex-direction:column;box-shadow:var(--yn-shadow)}
.yn-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 20px 13px;border-bottom:1px solid var(--yn-line);flex:none;min-height:76px}
.yn-menu-heading small{font-size:10px;line-height:1.4;color:var(--yn-faint);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:var(--yn-muted)}
.yn-menu-actions button:hover,.yn-menu-actions button[aria-expanded="true"]{background:var(--yn-fill);color:var(--yn-text)}
#yn-menu-close{border:1px solid var(--yn-line-2)}
#yn-menu-body{padding:15px 18px 19px;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--yn-fill-2) 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:var(--yn-muted)}
.yn-group-heading h3 small{color:var(--yn-faint);font-size:10px}
.yn-rank-link{display:inline-flex;align-items:center;gap:5px;min-height:32px;font-size:10px;color:var(--yn-muted)}
.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 var(--yn-line);background:var(--yn-card);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:var(--yn-text);letter-spacing:-.25px}
.yn-card-copy>small{font-size:10px;line-height:1.7;color:var(--yn-muted);word-break:keep-all;overflow-wrap:anywhere}
.yn-card-tag{position:absolute;right:11px;top:14px;display:inline-flex;gap:3px;color:var(--yn-tag);font-size:8px;line-height:1.5;white-space:nowrap}
.yn-card-tag.current{color:var(--yn-cur)}
.yn-service-card.is-current{border-color:rgba(var(--yn-cur-rgb),.55);background:linear-gradient(125deg,rgba(var(--yn-cur-rgb),.14),#FFFFFF 75%)}
.yn-service-card.is-current .yn-glyph{color:var(--yn-cur);border-color:#e1b75526;background:#e1b75511}
:root[data-theme="dark"] .yn-service-card.is-current{border-color:#e1b75555;background:linear-gradient(125deg,#b4903715,#151b27 75%)}
:root[data-theme="dark"] .yn-service-card.is-current .yn-glyph{color:#f6cd77}
.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 var(--yn-line-2);background:var(--yn-panel);border-radius:12px;padding:0 12px;min-height:46px;margin-bottom:17px}
:root[data-theme="dark"] .yn-service-search{background:#ffffff04}
.yn-service-search svg{color:var(--yn-muted)}
.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:0}
  .top .top-r1{height:72px;max-width:1280px;margin-inline:auto;padding-left:88px;padding-right:24px}
  .top-r1>.brand{display:inline-flex}
  .yn-breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;min-width:0;flex:1}
  .yn-breadcrumb>span{color:var(--yn-muted)}
  .yn-breadcrumb svg{width:11px;height:11px;color:var(--yn-faint)}
  .yn-breadcrumb b{font-weight:600;color:var(--yn-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Keep the existing accessible menu trigger; the permanent left catalog becomes a header control. */
  .yn-rail{display:contents}
  .yn-rail>.brand,#yn-rail-scroll,#yn-rail-foot{display:none}
  .yn-rail>.brand{font-size:17px;gap:8px;margin-left:6px;flex:none}
  .yn-rail-search{position:fixed;left:max(24px,calc((100vw - 1280px)/2 + 24px));top:14px;z-index:41;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:1px solid var(--yn-line-2);border-radius:12px;background:var(--yn-panel);color:var(--yn-text);cursor:pointer}
  .yn-rail-search:hover,.yn-rail-search[aria-expanded="true"]{background:var(--yn-fill);border-color:rgba(28,38,56,.36)}
  :root[data-theme="dark"] .yn-rail-search{background:#151b27;border-color:#ffffff20}
  :root[data-theme="dark"] .yn-rail-search:hover,:root[data-theme="dark"] .yn-rail-search[aria-expanded="true"]{background:#202a3b;border-color:#ffffff40}
  .yn-rail-search>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .yn-rail-search svg{width:16px;height:16px}
  #yn-rail-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:var(--yn-fill-2) 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:var(--yn-faint);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:var(--yn-muted);font-size:13px;font-weight:600}
  .yn-rail-link:hover{color:var(--yn-text);background:var(--yn-fill)}
  .yn-rail-phrases{word-break:keep-all}
  .yn-rail-link.is-active{background:#FBEAF1;color:#B52464;border-color:#E9B3C9}   /* 라이트: 새 내비(.ynn-tab)와 같은 선택 색 */
  :root[data-theme="dark"] .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:var(--yn-muted);min-height:28px;white-space:nowrap}
  .yn-rail-rank:hover{color:var(--yn-text)}
  .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 var(--yn-line);font-size:11px;color:var(--yn-faint);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) + var(--yn-anchor,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:var(--yn-panel);border-bottom:1px solid var(--yn-line)}
  :root[data-theme="dark"] .yn-peek{background:#10141d}
  .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:var(--yn-text);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:var(--yn-pink)}
  .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:var(--yn-muted);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:var(--yn-fill);color:var(--yn-text)}
  #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 var(--yn-dock-line);border-radius:23px;padding:5px;gap:3px;background:var(--yn-dock-bg);backdrop-filter:blur(20px);box-shadow:var(--yn-dock-shadow)}
  .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:var(--yn-muted);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:#FBEAF1;color:#B52464}
  :root[data-theme="dark"] .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:var(--yn-line)}
  .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) + var(--yn-anchor,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}
}


/* Adapt the existing shell to the standalone page, retaining its content width. */
/* :where() keeps this reset below the app's own rail rules (.yn-rail-search: border, 12px), as on the app pages. */
:where(.yn-rail,.yn-dock,.yn-services) button{border:0;background:none;font:inherit;cursor:pointer}
/* 2026-10-21: the rail's logo and type exactly as on the app pages (body face of the page language, Sora 700 logo, the
   app's ring), not the page's own face ('KDot' on 이민 가챠) or weight. */
#yn-rail{--yr-face:'Noto Sans KR',yn-kr-m,system-ui,-apple-system,'Segoe UI',sans-serif;--yr-logo:'Noto Sans KR',yn-kr-m,system-ui,-apple-system,sans-serif;font-family:'Instrument Sans',yn-is-a,yn-is-r,var(--yr-face);word-break:normal}
html:lang(ko) #yn-rail{word-break:keep-all}
html:lang(ja) #yn-rail{--yr-face:'Noto Sans JP',yn-jp-m,system-ui,-apple-system,'Segoe UI',sans-serif;--yr-logo:'Noto Sans JP',yn-jp-m,system-ui,-apple-system,sans-serif}
html:lang(zh) #yn-rail{--yr-face:'Noto Sans TC',yn-tc-m,'PingFang TC','Microsoft JhengHei',sans-serif;--yr-logo:var(--yr-face)}
html:lang(th) #yn-rail{--yr-face:'Noto Sans Thai',yn-th-s,yn-th-m,'Leelawadee UI','Thonburi',sans-serif;--yr-logo:var(--yr-face)}
#yn-rail>.brand,#yn-rail>.brand>:not(.mark){all:revert;box-sizing:border-box}
#yn-rail>.brand{display:flex;flex:none;align-items:center;gap:8px;margin:0 0 0 6px;padding:0;color:var(--text,#161B26);font:700 17px/1 'Sora',yn-so-a,yn-so-r,var(--yr-logo);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer}
#yn-rail>.brand>.mark{all:revert;box-sizing:border-box;display:block;flex:none;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%)}
/* What the app rail takes from the app body (15px, smoothing and optimizeLegibility, which WebKit honours; the face and 1.5
   of their parent on the group headings; the browser's 1em under the foot line), not from the page: 빠른 재취업 · 취업 서열 give
   h2 their own face and 1.3, the reports a 16px body and their own p margins, most pages no optimizeLegibility. */
#yn-rail{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#yn-rail h2{font-family:inherit;line-height:inherit}
#yn-rail>#yn-rail-foot{margin-bottom:1em}
.yn-service-search input{color:var(--text);font:inherit;outline:none}
.yn-services [hidden]{display:none!important}
.yn-services .yn-empty{margin:0}
.yn-services button:focus-visible,.yn-rail a:focus-visible,.yn-dock a:focus-visible,.yn-dock button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
/* 2026-10-20: the shell also wraps 빠른 재취업 · 인생 난이도 · 취업 서열 (their own #root) and the KR reports (plain article CSS).
   Their element rules (the reports' h2/h3 top rule and 1.75 body line height) must not restyle the shell's headings. */
.yn-rail h2,.yn-services h2,.yn-services h3{padding:0;border:0}
.yn-rail{line-height:1.5}
/* The reports (no #root, no #eg-page) define no --f-display / --f-body / --ring: give the shell the app's values there. */
:root:not(:has(#root,#eg-page)) :is(#yn-rail,#yn-dock,#yn-services){--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;--ring:#B52464}
:root[data-theme="dark"]:not(:has(#root,#eg-page)) :is(#yn-rail,#yn-dock,#yn-services){--ring:#F5F6FA}
@media(min-width:961px){
  #yn-standalone{margin-left:0}
  #yn-standalone>#root{margin-left:0}
}
@media(max-width:960px){
  body:has(>#yn-standalone>.scrim:not([hidden])),body:has(>#yn-standalone>.spin:not([hidden])){overflow:hidden}
  body:has(>#yn-standalone>.scrim:not([hidden]))>#yn-dock,body:has(>#yn-standalone>.spin:not([hidden]))>#yn-dock{display:none}
  #yn-standalone .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px) + var(--yn-anchor,0px))}
  /* pages with their own #root keep their own top-anchored toast (their own header is replaced by #yn-header, header.css) */
  body:has(>#yn-standalone>#root) .toast{bottom:auto}
}
/* 2026-10-20 owner: "하단 네비게이션에 [아이콘] [텍스트] … 크기나 배치가 다 지멋대로". The DOCK block (appended after this file,
   the same bytes the app pages load) lays out every item as one fixed icon box over one 10px/12px label. These pages
   bring their own CSS (body 15px, button{font:inherit}, the gacha's KDot face), so here the dock's own type and box
   settings are locked as well: the DOCK block's values (and the app body's smoothing), with !important, so no page rule
   can reach them. */
@media(max-width:960px){
  #yn-dock.yn-dock,#yn-dock.yn-dock *{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  #yn-dock.yn-dock{box-sizing:border-box!important;margin:0!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;gap:3px!important;padding:5px!important;border-width:1px!important;border-style:solid!important;height:auto!important;min-height:0!important;max-height:none!important;font:400 10px/12px 'Instrument Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif!important;letter-spacing:normal!important;word-spacing:normal!important;word-break:normal!important;text-transform:none!important;text-align:center!important;text-indent:0!important;font-feature-settings:normal!important;font-variation-settings:normal!important;-webkit-font-smoothing:antialiased!important;text-rendering:optimizeLegibility!important}
  #yn-dock.yn-dock:lang(ja){font-family:'Instrument Sans','Noto Sans JP',system-ui,-apple-system,'Segoe UI',sans-serif!important}
  #yn-dock.yn-dock:lang(zh){font-family:'Instrument Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif!important}
  #yn-dock.yn-dock:lang(th){font-family:'Instrument Sans','Noto Sans Thai','Leelawadee UI','Thonburi',sans-serif!important}
}
/* 2026-10-21 owner rule: no blank over 48px anywhere. At dock widths Navigation C's body padding (96px = the dock's 77px + 19px)
   is the only space under the content: each page's own bottom padding (made for pages without a dock) would stack on it, and
   인생 난이도's 100vh #root would make its one-screen intro scroll by those 96px. A sticky bottom bar sits above the dock.
   Above the dock the pages without a footer end 40px under their last line (인생 난이도 had 88px, 취업 서열 64px, the reports 86px). */
@media(max-width:960px){
  #yn-standalone>#root>#app>section.screen{padding-bottom:0}
  #yn-standalone>#root:has(>#app>section.screen){min-height:calc(100vh - 96px - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - 96px - env(safe-area-inset-bottom,0px))}
  #yn-standalone .sticky-cta{bottom:calc(77px + env(safe-area-inset-bottom,0px) + var(--yn-anchor,0px));padding-bottom:12px}
  #yn-standalone>#root>footer.foot{padding-bottom:8px}
  #yn-standalone>div.wrap{padding-bottom:0}
}
@media(min-width:961px){
  #yn-standalone>#root>#app>section.screen{padding-bottom:40px}
  body:has(>#yn-standalone>#root>main#app.wrap){padding-bottom:40px}
  #yn-standalone>div.wrap{padding-bottom:26px}
}
/* LAYOUT:BEGIN centered service content (owner 2026-10-25). The shared desktop header replaces the permanent
   menu; service cards can use the gutters without shifting the service's own reading column. */
@media(min-width:961px){
  #yn-rail>.brand,#yn-rail-scroll,#yn-rail-foot{display:none}
  #yn-standalone>#root>main.wrap:not(#app),#yn-standalone>#root>main#app>.screen>.wrap,
  #yn-standalone>#root>main#app.wrap,#yn-standalone>div.wrap,#yn-standalone>main.wrap,
  #yn-standalone>footer.foot,#yn-standalone>#root>footer.foot{margin-left:auto;margin-right:auto}
  #yn-standalone #ar-main .ar-content,#yn-standalone #ar-intro .wrap,#yn-standalone .ar-intro-body.wrap{margin-left:auto;margin-right:auto}
  /* Historical gacha/luck CSS reserved a 324px empty ad column inside the main box. The ad runtime owns its own gutter. */
  #yn-standalone>main.wrap:has(>#ad-rail-right){width:100%;max-width:720px;padding-left:20px;padding-right:20px}
  #yn-standalone>main.wrap>#ad-rail-right{display:none}
}
/* LAYOUT:END */
/* The app header on the standalone pages (#yn-header, drawn by scripts/navigation/build.py header()).
   2026-10-21 owner: "헤더가 다르잖아. 왜 다른 서비스들처럼 국가 언어를 택하지 않고, 이상한 [다른 서비스] 이런 버튼이나 박는거야".
   Same box, type and colours as the app header in demo/index.html (.top · .wrap.wrap-wide.top-r1 · .brand · .mark · .top-tools ·
   .pick · .pick-k · .pick-v, the 'Navigation C' desktop block and the ≤479 / ≤419 / ≤359 phone rules). The pages bring their own
   CSS (.top, .brand, .pick, .mark, a 'KDot' face, button{font:inherit}), so the header first rolls every property of its own
   elements back to the browser default (all:revert at id strength, svg excluded so the arrow keeps its stroke attributes),
   drops any pseudo-element a page hangs on those class names, and then sets the app's values. scripts/navigation/header-parity.cjs compares the two headers' computed styles. */
#yn-header,#yn-header :where(:not(svg,svg *)){all:revert}
#yn-header::before,#yn-header::after,#yn-header *::before,#yn-header *::after{content:none}   /* 이민 가챠 draws its own .pick::after chevron */
#yn-header,#yn-header *{box-sizing:border-box}
/* colours: light (owner 2026-10-30, research/2026-10-30-light-theme/PALETTE.md), the former dark set under :root[data-theme="dark"] */
#yn-header{--yh-bg:rgba(255,255,255,.91);--yh-line:rgba(28,38,56,.10);--yh-text:#161B26;--yh-muted:#5B6476;--yh-pick:rgba(28,38,56,.035);--yh-pick-line:rgba(28,38,56,.14);--yh-pick-line-2:rgba(28,38,56,.24);--yh-ring:#B52464;--yh-crumb:#5B6476;--yh-crumb-sep:#8A93A6;--yh-crumb-on:#161B26;--yh-scheme:light;
  --yh-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>")}
:root[data-theme="dark"] #yn-header{--yh-bg:rgba(11,13,18,.72);--yh-line:rgba(255,255,255,.08);--yh-text:#F2F4F8;--yh-muted:#A3A9BA;--yh-pick:rgba(255,255,255,.05);--yh-pick-line:rgba(255,255,255,.10);--yh-pick-line-2:rgba(255,255,255,.20);--yh-ring:#5CB8FF;--yh-crumb:#929fb4;--yh-crumb-sep:#75839b;--yh-crumb-on:#d7deea;--yh-scheme:dark;
  --yh-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>")}
#yn-header{--yh-display:'Sora',yn-so-a,yn-so-r,'Noto Sans KR',yn-kr-m,system-ui,-apple-system,sans-serif;--yh-body:'Instrument Sans',yn-is-a,yn-is-r,'Noto Sans KR',yn-kr-m,system-ui,-apple-system,'Segoe UI',sans-serif;
  display:block;position:sticky;top:0;z-index:40;min-width:auto;margin:0;padding:0;border:0;border-bottom:1px solid var(--yh-line);
  background:var(--yh-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color-scheme:var(--yh-scheme);
  color:var(--yh-text);font:400 15px/1.5 var(--yh-body);letter-spacing:normal;text-align:left;text-transform:none;word-break:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#yn-header:lang(ko){word-break:keep-all}
#yn-header:lang(ja){--yh-display:'Sora',yn-so-a,yn-so-r,'Noto Sans JP',yn-jp-m,system-ui,-apple-system,sans-serif;--yh-body:'Instrument Sans',yn-is-a,yn-is-r,'Noto Sans JP',yn-jp-m,system-ui,-apple-system,'Segoe UI',sans-serif}
#yn-header:lang(zh){--yh-display:'Sora',yn-so-a,yn-so-r,'Noto Sans TC',yn-tc-m,'PingFang TC','Microsoft JhengHei',sans-serif;--yh-body:'Instrument Sans',yn-is-a,yn-is-r,'Noto Sans TC',yn-tc-m,'PingFang TC','Microsoft JhengHei',sans-serif}
#yn-header:lang(th){--yh-display:'Sora',yn-so-a,yn-so-r,'Noto Sans Thai',yn-th-s,yn-th-m,'Leelawadee UI','Thonburi',sans-serif;--yh-body:'Instrument Sans',yn-is-a,yn-is-r,'Noto Sans Thai',yn-th-s,yn-th-m,'Leelawadee UI','Thonburi',sans-serif}
#yn-header [hidden]{display:none}
#yn-header .top-r1{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1040px;height:56px;margin:0 auto;padding:0 20px}
#yn-header .brand{display:inline-flex;align-items:center;gap:9px;color:var(--yh-text);font:700 16px/1 var(--yh-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer}
#yn-header .mark{display:inline-block;flex:none;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%)}
#yn-header .brand>span{display:inline}
#yn-header .yn-breadcrumb{display:none}
#yn-header .top-tools{display:flex;align-items:center;flex:none;gap:10px}
#yn-header .pick{position:relative;display:inline-flex;flex-direction:column;justify-content:center;gap:3px;height:44px;min-width:0;margin:0;padding:0 28px 0 13px;border-radius:13px;
  background:var(--yh-pick) var(--yh-chev) no-repeat right 10px center;
  border:1px solid var(--yh-pick-line);color:var(--yh-text);cursor:pointer;transition:border-color .15s}
#yn-header .pick:hover{border-color:var(--yh-pick-line-2)}
#yn-header .pick:focus-within{outline:2px solid var(--yh-ring);outline-offset:2px}
#yn-header .pick-k{display:block;font:600 9.5px/1 var(--yh-body);letter-spacing:.04em;color:var(--yh-muted);white-space:nowrap}
#yn-header .pick-v{display:block;font:600 13px/1.15 var(--yh-body);color:var(--yh-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16ch}
#yn-header .pick-v>.pick-short{display:none}
#yn-header .pick select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;font:400 16px/1.5 var(--yh-body);color:var(--yh-text);border:0;appearance:none;-webkit-appearance:none}
@media(min-width:768px){#yn-header .top-r1{padding:0 32px}}
@media(max-width:479px){
  #yn-header .top-r1{padding:0 14px;gap:8px}
  #yn-header .top-tools{gap:8px}
  #yn-header .pick{padding:0 24px 0 11px;background-position:right 8px center}
  #yn-header .pick-v{font-size:12.5px;max-width:9ch}
  /* the app writes the country code instead of a long name (> 7 characters) on a phone: 🇺🇸 US */
  #yn-header .pick-v[data-long]>.pick-full{display:none}
  #yn-header .pick-v[data-long]>.pick-short{display:inline}
}
@media(max-width:419px){#yn-header .top-r1{gap:6px}}
@media(max-width:359px){
  #yn-header .top-tools{gap:6px}
  #yn-header .pick{padding:0 21px 0 9px;background-position:right 6px center}
  #yn-header .pick-v{max-width:7ch}
  #yn-header .pick-v>.pick-full{display:none}
  #yn-header .pick-v>.pick-short{display:inline}
  #yn-header .brand{font-size:14.5px;gap:7px}
}
@media(min-width:961px){
  #yn-header .top-r1{height:72px;max-width:1280px;margin-inline:auto;padding-left:88px;padding-right:24px}
  #yn-header .top-r1>.brand{display:inline-flex}
  #yn-header .yn-breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.5;min-width:0;flex:1}
  #yn-header .yn-breadcrumb>span{display:block;color:var(--yh-crumb)}
  #yn-header .yn-breadcrumb>svg{display:block;flex:none;width:11px;height:11px;color:var(--yh-crumb-sep)}
  #yn-header .yn-breadcrumb>b{display:block;font-weight:600;color:var(--yh-crumb-on);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:960px){
  #yn-header{position:relative}
  #yn-header .top-r1{height:56px}
}
/* The page's own header stays in the document for its scripts (인생 난이도 fills #lang-select, 취업 서열 reads .top .brand)
   but is not shown: build.py marks it data-yn-own-header (and hidden). */
[data-yn-own-header]{display:none!important}
/* 빠른 재취업's sticky chips (#rj-controls) sat under the page's own 56px sticky header. Under the app header they stick
   below it on a computer (72px + 1px line) and at the top on a phone, where the app header scrolls away. */
@media(min-width:961px){#yn-standalone #rj-controls{top:73px}}
@media(max-width:960px){#yn-standalone #rj-controls{top:0}}
/* 인생 난이도 (and 취업 서열 at dock widths) fill the screen with #root: min-height 100vh (computer) or 100vh − 96px
   (standalone.css, dock widths), so the one-screen intro does not scroll. Their own 57px / 73px header used to sit inside
   that height; #yn-header sits above #root, so #root gives that height back and the page keeps its height. */
@media(min-width:961px){#yn-standalone:has(>#sd-page)>#yn-header~#root{min-height:calc(100vh - 73px);min-height:calc(100dvh - 73px)}}
@media(max-width:960px){#yn-standalone>#yn-header~#root:has(>#app>section.screen){min-height:calc(100vh - 96px - 57px - env(safe-area-inset-bottom,0px));min-height:calc(100dvh - 96px - 57px - env(safe-area-inset-bottom,0px))}}
/* DOCK:BEGIN 하단 메뉴(2026-10-20 오너: "[아이콘] [텍스트]의 크기나 배치가 다 지멋대로"). 모든 항목 = 같은 크기의 아이콘 칸(22×22, 아이콘은 가운데)
   + 한 줄 라벨(10px · 줄높이 12px · 400 · 넘치면 …), 항목 너비는 모두 같다. 'AI vs 인간'의 큰 아이콘(22px)도 같은 칸 안에 들어가 라벨이 내려가지 않고,
   '전체' 앞 구분선은 자리를 차지하지 않는다. 앱 화면과 내비게이션 셸(/assets/navigation/…/style.css, 가챠 · 재취업 · 난이도 · 취업 서열 · 리포트)이
   이 블록을 그대로 쓴다. 페이지 CSS(button{font:inherit} 15px 등)가 덮지 못하게 #yn-dock 로 묶고 !important. 위치 · 표시(display)는 원래 규칙 그대로
   (메뉴가 열리면 독이 시트 안으로 옮겨 가고, 가챠 시트가 열리면 숨는다). */
@media(max-width:960px){
  #yn-dock.yn-dock{-webkit-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:3px;padding:5px;font:400 10px/12px 'Instrument Sans','Noto Sans KR',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:normal;word-break:normal;text-transform:none;text-align:center}
  #yn-dock.yn-dock:lang(ja){font-family:'Instrument Sans','Noto Sans JP',system-ui,-apple-system,'Segoe UI',sans-serif}
  #yn-dock.yn-dock:lang(zh){font-family:'Instrument Sans','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}
  #yn-dock.yn-dock:lang(th){font-family:'Instrument Sans','Noto Sans Thai','Leelawadee UI','Thonburi',sans-serif}
  #yn-dock.yn-dock>.yn-dock-item{position:relative!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;height:51px!important;min-height:51px!important;max-height:none!important;box-sizing:border-box!important;margin:0!important;padding:0!important;gap:4px!important;border:0!important;border-radius:17px!important;background:transparent!important;box-shadow:none!important;color:#a9b6ca!important;font:inherit!important;letter-spacing:normal!important;text-align:center!important;text-decoration:none!important;text-transform:none!important;white-space:nowrap!important;overflow:visible!important;-webkit-appearance:none!important;appearance:none!important;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
  #yn-dock.yn-dock>.yn-dock-item:not([hidden]){display:flex!important}
  #yn-dock.yn-dock>.yn-dock-item.is-active{background:rgba(var(--yn-rgb),.1)!important;color:rgb(var(--yn-rgb))!important}
  #yn-dock.yn-dock>.yn-dock-item>svg{display:block!important;flex:none!important;box-sizing:border-box!important;width:22px!important;height:22px!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;padding:1.5px!important;border:0!important;overflow:visible!important;vertical-align:top!important}
  #yn-dock.yn-dock>.yn-dock-item[data-yn-service="community"]>svg{padding:0!important}
  #yn-dock.yn-dock>.yn-dock-item>span{display:block!important;flex:none!important;align-self:stretch!important;box-sizing:border-box!important;width:auto!important;max-width:100%!important;height:12px!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;font:inherit!important;line-height:12px!important;letter-spacing:normal!important;text-align:center!important;text-decoration:none!important;text-transform:none!important;white-space:nowrap!important;text-wrap:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;word-break:normal!important;color:inherit!important;background:none!important}
  #yn-dock.yn-dock>.yn-dock-item[data-yn-menu="all"]::before{content:''!important;display:block!important;position:absolute!important;left:-2px!important;top:14px!important;bottom:14px!important;width:1px!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:#ffffff10!important}
  /* light page: muted items, the light hairline, the active item in the site's pink on its pale tint (neon on white fails AA) */
  /* literal values, not page tokens: scripts/navigation/build.py copies this block into /app/navigation/style.css, whose standalone
     pages may not define --muted / --border (or define their own) */
  :root:not([data-theme="dark"]) #yn-dock.yn-dock>.yn-dock-item{color:#5B6476!important}
  :root:not([data-theme="dark"]) #yn-dock.yn-dock>.yn-dock-item.is-active{background:#FBEAF1!important;color:#B52464!important}
  :root:not([data-theme="dark"]) #yn-dock.yn-dock>.yn-dock-item[data-yn-menu="all"]::before{background:rgba(28,38,56,.10)!important}
}
/* DOCK:END */