/* 하위 페이지 공통 스타일: 메인과 같은 토큰 · 헤더 · 버튼 · 카드 · 푸터 */
:root{color-scheme:light;--paper:#FAFBFD;--paper-2:#F1F4F9;--ink:#0B0D12;--ink-2:#394152;--ink-3:#6B7385;--line:#E3E7EF;--blue:#0070F0;--blue-hi:#0082FF;--mint:#6AFFBE;
  --liquid:linear-gradient(110deg,#2BDCA8 0%,#12C8F0 22%,#1A86FF 46%,#3A5CFF 64%,#12C8F0 84%,#2BDCA8 100%);
  --f-sans:'SOL Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;--wrap:1160px;--gut:max(16px,3vw)}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f-sans);font-size:16px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;word-break:keep-all}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative}
.label{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:var(--blue);text-transform:uppercase}
.lbl-line{display:inline-flex;align-items:center;gap:12px}.lbl-line::before,.lbl-line::after{content:"";width:28px;height:1px;background:var(--line)}
.h1{margin:0;font-size:clamp(34px,5vw,62px);line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.h2{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.lead{margin:0;max-width:40em;font-size:17px;line-height:1.7;color:var(--ink-3)}
@keyframes liquid{to{background-position:300% 50%}}
.g{background:var(--liquid);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:liquid 10s linear infinite}
/* 헤더 */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.hdr .bar{margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;width:calc(100% - 32px);max-width:1160px;padding-inline:18px 8px;border-radius:16px;border:1px solid transparent;transition:background .35s,border-color .35s,box-shadow .35s}
.hdr.scrolled .bar,.hdr.solid .bar{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border-color:rgba(214,221,233,.9);box-shadow:0 12px 32px -20px rgba(10,40,110,.4),inset 0 1px 0 #fff}
.hdr .logo img{height:17px;aspect-ratio:674.17/107.61} /* 로고 이미지가 뜨기 전에도 자리 확보 */
.hdr nav{display:flex;gap:2px;padding:4px}
.hdr nav a{position:relative;text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-3);padding:7px 15px;border-radius:999px;transition:color .2s,background .2s}
.hdr nav a:hover{color:var(--ink)}
.hdr nav a.on{color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 6px -2px rgba(10,30,80,.12)}
/* 메뉴 알약: JS 가 켜면(has-pill) 배경은 움직이는 .pill 이 그림 */
.hdr nav{position:relative}.hdr nav .pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 6px -2px rgba(10,30,80,.12);opacity:0;pointer-events:none;transition:left .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1),opacity .2s}
.hdr nav.has-pill a{z-index:1}.hdr nav.has-pill a.on{background:none;box-shadow:none}
.hdr nav a.on::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;border-radius:50%;background:#2F7BFF;transform:translateX(-50%)}
.hdr .act{display:flex;align-items:center;gap:8px}
.hdr nav{margin-left:clamp(8px,2.6vw,40px);margin-right:auto} /* 메뉴를 로고 기준으로 고정 */
/* 버튼 (Specular) */
.btn{--h:46px;display:inline-flex;align-items:center;justify-content:center;height:var(--h);padding:0 24px;border-radius:13px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:0;position:relative;isolation:isolate;overflow:hidden;font-family:inherit;white-space:nowrap;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from calc(var(--la,200deg) - 32deg),transparent 0deg,rgba(255,255,255,var(--li,.55)) 32deg,transparent 64deg,transparent 180deg,rgba(255,255,255,calc(var(--li,.55) * .8)) 212deg,transparent 244deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.btn.dark{background:linear-gradient(180deg,#1A1F2B,#0B0D12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 26px -12px rgba(0,40,120,.55)}
.btn.ghost{background:rgba(255,255,255,.78);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 6px 18px -10px rgba(10,40,110,.2)}
.btn.ghost::after,.btn.light::after{background:conic-gradient(from calc(var(--la,200deg) - 32deg),transparent 0deg,rgba(26,134,255,var(--li,.55)) 32deg,transparent 64deg,transparent 180deg,rgba(43,220,168,calc(var(--li,.55) * .8)) 212deg,transparent 244deg)}
.btn.light{background:#fff;color:var(--ink)}
.btn.sm{--h:38px;font-size:13.5px;padding:0 16px;border-radius:11px}
.btn:active{transform:scale(.97)}
/* + 모서리 · 카드 · 빛 테두리 */
.xc{position:absolute;width:13px;height:13px;pointer-events:none;z-index:6;background:linear-gradient(var(--blue-hi),var(--blue-hi)) center/1px 100% no-repeat,linear-gradient(var(--blue-hi),var(--blue-hi)) center/100% 1px no-repeat}
.xc.tl{left:-7px;top:-7px}.xc.tr{right:-7px;top:-7px}.xc.bl{left:-7px;bottom:-7px}.xc.br{right:-7px;bottom:-7px}
[data-x]{position:relative}
.card{position:relative;border:1px solid var(--line);border-radius:16px;background:#fff;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 54px -28px rgba(10,40,110,.3)}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from calc(var(--cang,0deg) - 55deg),transparent 0deg,#3FE0A6 40deg,#0082FF 70deg,transparent 110deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--edge,0);transition:opacity .35s;pointer-events:none;z-index:4}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:all .2s}
.chip:hover{border-color:#BFCBE0}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tag{font-family:var(--f-mono);font-size:11.5px;color:var(--blue)}
canvas[data-glyph]{display:block}
/* 페이지 머리 */
.phead{padding:150px 0 48px;position:relative;overflow:hidden}
.phead .field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 70px,rgba(0,0,0,.35) 130px,rgba(0,0,0,.8) 190px,#000 230px,transparent 94%);mask-image:linear-gradient(180deg,transparent 0,transparent 70px,rgba(0,0,0,.35) 130px,rgba(0,0,0,.8) 190px,#000 230px,transparent 94%)}
.phead .wrap{display:flex;flex-direction:column;gap:16px}
.crumb{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
/* 푸터 */
.foot{position:relative;background:linear-gradient(180deg,var(--paper) 0,#0B1220 150px,#070A12 280px);color:#9AA6BC;overflow:hidden;padding-top:clamp(190px,17vw,250px);margin-top:60px}
.foot .wrap{position:relative;z-index:2}
.ft-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-brand img{height:18px}
.ft-brand p{margin:18px 0 22px;font-size:14.5px;line-height:1.7;max-width:26em}
.ft-brand .row{display:flex;gap:8px;flex-wrap:wrap}
.ft-sub{margin-top:22px}
.ft-col h3{margin:0 0 14px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:#6AFFBE;font-weight:500;text-transform:uppercase}
.ft-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.ft-col a{text-decoration:none;color:#C9D2E3;transition:color .2s}.ft-col a:hover{color:#fff}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 40px;padding-top:26px;font-size:12.5px;line-height:1.8}
.ft-legal dl{margin:0;display:flex;flex-wrap:wrap;gap:2px 18px;max-width:760px}
.ft-legal dl div{display:flex;gap:6px}.ft-legal dt{color:#6E7A90}.ft-legal dd{margin:0;color:#B4BFD2}
.ft-links{display:flex;gap:18px}.ft-links a{text-decoration:none;color:#C9D2E3}.ft-links a:first-child{color:#fff;font-weight:600}.ft-links a:hover{color:#fff}
.ft-copy{padding:14px 0 24px;font-size:12.5px;color:#6E7A90}
.ft-mark{position:relative;height:clamp(140px,22vw,300px)}
.ft-mark canvas{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 45%);mask-image:linear-gradient(180deg,transparent 0,#000 45%)}
@media (max-width:900px){
  .hdr nav{display:none}.hdr .act .ghost{display:none}.hdr .bar{width:calc(100% - 20px);padding-inline:14px 6px}
  .ft-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.ft-brand{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.foot .btn.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}