/* Canonical service banners: extracted unchanged from the approved main-page component.
   Main and side panels load this same asset; only container placement differs. */
.yn-service-banner{box-sizing:border-box;font-family:var(--f-body,"Instrument Sans","Noto Sans KR",system-ui,sans-serif);text-align:left;text-decoration:none;touch-action:manipulation}
.yn-service-banner .keyword{font-style:normal;color:var(--low,#3DE8C6);font-weight:inherit}
.yn-service-banner:focus-visible{outline:2px solid var(--ring,#F5F6FA);outline-offset:3px}

.service-card{display:flex;gap:13px;align-items:center;padding:16px;border:1px solid var(--card-border,rgba(255,255,255,.10));border-radius:12px;background:var(--card-bg,#0F121A);min-width:0;max-width:none;flex:0 0 calc((100% - 24px)/3);color:var(--text,#F2F4F8);transition:border-color .16s,background .16s;position:relative;isolation:isolate}
.service-card:hover{border-color:var(--border-2,rgba(255,255,255,.20));background:var(--surface-2,#191D29)}
.service-icon{display:grid;place-items:center;flex:0 0 80px;width:80px;height:80px;border-radius:12px;background:var(--surface-3,#232838);color:var(--text,#F2F4F8);overflow:hidden}
.service-icon img{display:block;width:100%;height:100%;object-fit:cover}
.service-icon svg{width:27px;height:27px;stroke-width:1.5}
.service-copy{display:block;min-width:0;flex:1}
.service-topline{display:flex;gap:6px;align-items:center;min-height:17px;font-size:10px;color:var(--faint,#858CA0);margin-bottom:4px;letter-spacing:.01em}
.service-topline>b{font-weight:600;color:var(--muted,#A3A9BA)}
.service-topline .new-label{font-size:9px;color:var(--mint,#3DE8C6);padding:1px 5px;background:#3de8c611;border-radius:3px}
.service-copy>strong{font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.035em;display:block}
.service-description{font-size:14px;line-height:1.5;color:var(--muted,#A3A9BA);display:block;margin-top:4px;word-break:keep-all;overflow-wrap:anywhere}
.card-direction{display:none}
.service-job .service-icon,.service-rankings .service-icon,.service-major .service-icon,.service-ai-readiness .service-icon{color:var(--mint,#3DE8C6);background:#3de8c60d}
.service-survive .service-icon,.service-rich .service-icon,.service-restart .service-icon{color:var(--yellow,#FFC83D);background:#ffc83d0d}
.service-fit .service-icon,.service-difficulty .service-icon,.service-luck .service-icon{color:var(--pink,#FF3D8A);background:#ff3d8a0d}
.service-region .service-icon,.service-emigrate .service-icon,.service-university .service-icon{color:var(--orange,#FF7A45);background:#ff7a450d}

.yn-service-banner[data-group=survival] .keyword{color:var(--med,#FFC83D)}
.yn-service-banner[data-group=fun] .keyword{color:var(--vhigh,#FF3D8A)}

.service-card{position:relative;max-width:none;flex:0 0 calc((100% - 24px)/3)}
.theme-carousel .service-card{flex-direction:row;padding:15px;gap:10px;min-height:94px}
.theme-carousel .service-icon{width:76px;height:76px;flex-basis:76px;border-radius:10px}
.theme-carousel .service-copy>strong{font-size:17px}
.quick-group .service-card{padding:13px 0;gap:12px;border:0;border-radius:0;background:none}
.quick-group .service-card+.service-card{border-top:1px solid var(--border,rgba(255,255,255,.08))}
.quick-group .service-copy>strong{font-size:17px}
.quick-group .service-topline{display:none}
.quick-group .service-icon{width:68px;height:68px;flex-basis:68px;border-radius:10px}
.quick-group .service-icon svg{width:23px;height:23px}
.quick-group .service-description{font-size:14px}
.catalog-grid .service-card{min-height:180px;align-items:flex-start}
.catalog-card .service-icon{margin-top:23px}
.catalog-card .service-copy>strong{line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.catalog-card .service-description{margin-top:9px;line-height:1.6}@media(max-width:1050px){
 .service-card{padding:13px;gap:10px}
 .service-icon{width:72px;height:72px;flex-basis:72px}
 .service-copy>strong{font-size:17px}
 .service-description{font-size:14px}}@media(max-width:800px){
 .quick-group .service-card{align-items:flex-start;flex-direction:column;border:0!important;padding:6px 0}}@media(max-width:600px){
 .service-card{padding:15px;gap:12px;min-height:108px;max-width:none}
 .service-icon{width:72px;height:72px;flex-basis:72px}
 .service-copy>strong{font-size:18px}
 .service-topline{font-size:10px}
 .service-description{font-size:14px}
 .theme-carousel .service-card{padding:14px;min-height:112px}
 .quick-group .service-card{flex-direction:row;align-items:center;min-height:0;padding:14px 0}
 .quick-group .service-card+.service-card{border-top:1px solid var(--border,rgba(255,255,255,.08))!important}.catalog-grid .service-card{min-height:160px}}@media(max-width:1050px){.service-card{align-items:center}.theme-carousel .service-icon{width:66px;height:66px;flex-basis:66px}}@media(max-width:800px) and (min-width:601px){.quick-group .service-icon{width:64px;height:64px;flex-basis:64px}}@media(max-width:600px){
 .theme-carousel .service-icon{width:68px;height:68px;flex-basis:68px}
 .quick-group .service-icon{width:64px;height:64px;flex-basis:64px}}@media(max-width:600px){
 .theme-carousel .service-card{padding:14px;min-height:116px}
 .catalog-grid .service-card{padding:16px 14px;gap:12px}.catalog-card .service-icon{width:64px;height:64px;flex-basis:64px}}@media(max-width:600px){
 .theme-carousel .service-card{flex:none;max-width:none;width:100%;min-height:86px;padding:12px 0;gap:12px;align-items:center;border:0;border-radius:0;background:none;scroll-snap-align:none}
 .theme-carousel .service-card+.service-card{border-top:1px solid var(--border,rgba(255,255,255,.08))}
 .theme-carousel .service-card:nth-child(n+4){display:none}
 .theme-carousel .service-icon{width:52px;height:52px;flex-basis:52px;border-radius:9px}
 .theme-carousel .service-topline{display:none}.theme-carousel .service-copy>strong{font-size:16px;line-height:1.45}
 .theme-carousel .service-description{font-size:13px;line-height:1.5;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* ---- Cards v2 (2026-10-25). Portal, desktop side rails and the mobile shelf share these rules; layout
   containers decide only the width. Every colour and face is set here so a service page's own CSS can't leak in. */
.yn-bn{--ynb-text:#F2F4F8;--ynb-muted:#A3A9BA;--ynb-faint:#7D8497;--ynb-line:rgba(255,255,255,.08);--ynb-bg:#0B0D12;--ynb-c:#3DE8C6;--ynb-c-rgb:61,232,198;
  --ynb-display:'Sora','Noto Sans KR',system-ui,sans-serif;--ynb-body:'Instrument Sans','Noto Sans KR',system-ui,sans-serif;--ynb-kr:'Noto Sans KR','Instrument Sans',system-ui,sans-serif;
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;min-width:0;margin:0;border-radius:20px;border:1px solid var(--ynb-line);
  background:linear-gradient(180deg,#131722,#0E1119);color:var(--ynb-text);font:400 14px/1.55 var(--ynb-body);text-decoration:none;text-align:left;word-break:normal;line-break:strict;overflow-wrap:anywhere;letter-spacing:normal;text-transform:none;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;-webkit-font-smoothing:antialiased}
.yn-bn *,.yn-bn *::before,.yn-bn *::after{box-sizing:border-box}
.yn-bn:lang(ja){--ynb-kr:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;--ynb-body:'Instrument Sans','Noto Sans JP',system-ui,sans-serif;--ynb-display:'Sora','Noto Sans JP',system-ui,sans-serif}
.yn-bn:lang(zh-Hant-TW),.yn-bn:lang(zh-Hant-HK),.yn-bn:lang(zh-TW),.yn-bn:lang(zh-HK){--ynb-kr:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;--ynb-body:'Instrument Sans','Noto Sans TC',system-ui,sans-serif;--ynb-display:'Sora','Noto Sans TC',system-ui,sans-serif}
.yn-bn:lang(th){--ynb-kr:'Noto Sans Thai','Instrument Sans',system-ui,sans-serif;--ynb-body:'Instrument Sans','Noto Sans Thai',system-ui,sans-serif;--ynb-display:'Sora','Noto Sans Thai',system-ui,sans-serif}
.yn-bn:lang(en){--ynb-kr:'Instrument Sans',system-ui,sans-serif}
.yn-bn:lang(en) .ynb-q{letter-spacing:-.018em}
.yn-bn:lang(ja) .ynb-q,.yn-bn:lang(zh-Hant-TW) .ynb-q,.yn-bn:lang(zh-Hant-HK) .ynb-q,.yn-bn:lang(zh-TW) .ynb-q,.yn-bn:lang(zh-HK) .ynb-q{letter-spacing:-.02em}
.yn-bn:lang(th) .ynb-q{letter-spacing:0;line-height:1.45}
.yn-bn:lang(ko){word-break:keep-all}
.yn-bn:lang(ja) .ynb-q,.yn-bn:lang(ja) .ynb-qs{word-break:auto-phrase}
.yn-bn:lang(zh-Hant-TW) .ynb-qs,.yn-bn:lang(zh-Hant-HK) .ynb-qs,.yn-bn-row:lang(zh-Hant-TW) .ynb-q,.yn-bn-row:lang(zh-Hant-HK) .ynb-q,.yn-bn:lang(zh-TW) .ynb-qs,.yn-bn:lang(zh-HK) .ynb-qs{word-break:keep-all}
.yn-bn.ynb-t-forecast{--ynb-c:#3DE8C6;--ynb-c-rgb:61,232,198}
.yn-bn.ynb-t-prepare{--ynb-c:#FFC83D;--ynb-c-rgb:255,200,61}
.yn-bn.ynb-t-fun{--ynb-c:#FF3D8A;--ynb-c-rgb:255,61,138}
.yn-bn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(75% 65% at 100% 100%,rgba(var(--ynb-c-rgb),.15),transparent 70%)}
.yn-bn:hover{transform:translateY(-3px);border-color:rgba(var(--ynb-c-rgb),.42);box-shadow:var(--ynb-lift,0 14px 34px rgba(28,38,56,.18));color:var(--ynb-text);text-decoration:none}
.yn-bn:focus-visible{outline:2px solid var(--ring,#B52464);outline-offset:3px}   /* the ring sits on the page around the card */
/* the card stays dark on the light page (2026-10-30); its lift shadow is the light page's; the dark page's values under data-theme="dark" */
:root[data-theme="dark"] .yn-bn{--ynb-lift:0 18px 50px rgba(0,0,0,.45)}
:root[data-theme="dark"] .yn-bn:focus-visible{outline-color:var(--ynb-text)}
.ynb-label{display:flex;align-items:center;gap:7px;min-width:0;font:600 12.5px/1.2 var(--ynb-body);color:var(--ynb-muted)}
.ynb-label>i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ynb-c);box-shadow:0 0 10px var(--ynb-c)}
.ynb-sep{color:var(--ynb-faint)}
.ynb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ynb-new{margin-left:2px;padding:3px 6px;border-radius:5px;background:rgba(61,232,198,.12);color:#3DE8C6;font:700 10.5px/1 var(--ynb-body);letter-spacing:.03em}
.ynb-rank{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:rgba(255,255,255,.07);color:var(--ynb-text);font:800 12px/1 var(--ynb-display)}
.ynb-q{display:block;margin:14px 0 0;font:800 21px/1.38 var(--ynb-kr);letter-spacing:-.04em;color:var(--ynb-text)}
.ynb-q em{font-style:normal;color:var(--ynb-c)}
.ynb-qs{display:none;text-wrap:pretty}
.ynb-q{text-wrap:pretty}
.ynb-d{display:block;margin-top:8px;padding-right:12px;color:var(--ynb-muted);font-size:14px;line-height:1.55}
.ynb-foot{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:12px;padding-right:104px}
.ynb-ans{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 2px;font:800 27px/1 var(--ynb-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ynb-text)}
.ynb-ans small{font:700 14px/1 var(--ynb-kr);color:var(--ynb-muted);letter-spacing:-.02em;margin:0 7px 0 3px}
.ynb-ans small:first-child{margin-left:0}
.ynb-ans .ynb-dig{color:var(--ynb-c);text-shadow:0 0 18px rgba(var(--ynb-c-rgb),.5)}
.ynb-meta{display:flex;flex-wrap:wrap;gap:6px}
.ynb-meta span{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:var(--ynb-muted);font:600 12px/1 var(--ynb-body);white-space:nowrap}
.ynb-art{position:absolute;right:-6px;bottom:-6px;width:122px;height:122px;max-width:none;pointer-events:none;-webkit-mask:radial-gradient(closest-side,#000 64%,transparent 100%);mask:radial-gradient(closest-side,#000 64%,transparent 100%);transition:transform .35s ease}
.yn-bn:hover .ynb-art{transform:scale(1.06) rotate(-3deg)}
.ynb-go{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--ynb-muted);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s,background .2s,color .2s}
.ynb-go svg{width:16px;height:16px}
.yn-bn:hover .ynb-go{opacity:1;transform:none;background:var(--ynb-c);color:var(--ynb-bg)}
.yn-bn-card{padding:22px 22px 20px;min-height:250px;container-type:inline-size}
.yn-bn-card.ynb-wide .ynb-q{font-size:24px;max-width:22em}
.yn-bn-card.ynb-wide .ynb-art{width:190px;height:190px;right:6px;bottom:-14px}
.yn-bn-card.ynb-wide .ynb-foot{padding-right:200px}
/* narrow slots (desktop side rails, tablet columns): the art shrinks and the line under the question goes */
@container (max-width:330px){
  .yn-bn-card .ynb-d{display:none}
  .yn-bn-card .ynb-art{width:112px;height:112px}
  .yn-bn-card .ynb-foot{padding-right:92px}
  .yn-bn-card .ynb-q{font-size:19px}
}
/* compact row: list pages, the side rails below the first cards, phones */
.yn-bn-row{flex-direction:row;align-items:center;gap:14px;padding:14px 16px 14px 14px;border-radius:16px;min-height:92px}
.yn-bn-row::before{background:radial-gradient(60% 120% at 100% 50%,rgba(var(--ynb-c-rgb),.10),transparent 70%)}
.ynb-thumb{width:64px;height:64px;flex:none;border-radius:16px;overflow:hidden;background:#161B27;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ynb-thumb-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.08)}
.ynb-body{min-width:0;flex:1}
.ynb-row1{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.ynb-row1 .ynb-label{flex:1}
.yn-bn-row .ynb-ans{font-size:15px;flex:none}
.yn-bn-row .ynb-ans small{font-size:11px;margin:0 3px 0 2px}
.yn-bn-row .ynb-q{margin-top:5px;font-size:16px;line-height:1.4;font-weight:700;letter-spacing:-.03em}
.yn-bn-row .ynb-d{margin-top:4px;font-size:13px;line-height:1.5;padding-right:0}
.ynb-chev{width:18px;height:18px;flex:none;color:var(--ynb-faint);transition:transform .2s,color .2s}
.yn-bn-row:hover .ynb-chev{color:var(--ynb-c);transform:translateX(3px)}
@media (max-width:640px){
  .yn-bn-card{min-height:0}
  .yn-bn-card .ynb-q,.yn-bn-card.ynb-wide .ynb-q{font-size:19px}
  .yn-bn-card.ynb-wide .ynb-art{width:136px;height:136px;right:-8px;bottom:-8px}
  .yn-bn-card.ynb-wide .ynb-foot{padding-right:112px}
  .yn-bn-row{min-height:84px}
}
@media (prefers-reduced-motion:reduce){.yn-bn,.ynb-art,.ynb-go,.ynb-chev{transition:none}.yn-bn:hover{transform:none}.yn-bn:hover .ynb-art{transform:none}}