/* 신강서요양보호사교육원 — 하양 + 파랑 + 세리프 (구성은 E06 재해석, 색은 2026-11-12 대표 지시로 와인·금색 → 하양·파랑)
   글자 크기는 전부 rem → "글자 크게"(html.fs-big) 한 번에 커진다. */
:root{
  --bg:#FFFFFF;--bg-alt:#F2F7FE;--bg-foot:#E8F0FC;--bg-hover:#E1ECFC;--bg-deep:#CFE0FA;
  --ink:#0F2244;--ink-2:#2C4066;--muted:#3B4E73;
  --line:rgba(15,34,68,.14);--line-2:rgba(15,34,68,.28);
  --accent:#1247B5;--accent-2:#0D3890;--on-accent:#FFFFFF;--accent-mid:#9CC0FF;
  --serif:'SGSerif','Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;
  --serif-top:'SGSerifTop','SGSerif','Noto Serif KR','Nanum Myeongjo','AppleMyungjo',serif;
  --num:'SGNum','SGSerif',Georgia,serif;
  --sans:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --wrap:1320px;--gut:clamp(20px,4.2vw,44px);--hd-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:112.5%;-webkit-text-size-adjust:100%;font-synthesis:none;scroll-padding-top:calc(var(--hd-h) + 16px);scroll-padding-bottom:5rem}
html.fs-1{font-size:125%}
html.fs-2{font-size:140%}
[hidden]{display:none!important}
html{scrollbar-color:var(--bg-deep) var(--bg-foot)}
.nw{white-space:nowrap}
@media (min-width:900px){html{scroll-padding-bottom:1rem}html.fs-2{font-size:137.5%}:root{--hd-h:76px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.72;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
address{font-style:normal}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.26;letter-spacing:-.025em;text-wrap:balance}
p,li,dd,figcaption,.strip-t{text-wrap:pretty}
.vision li,.plist li>span,.facts dd,.itable dd,.addr>span,.ways li>span,.crow-meta b{text-wrap:balance}
b,strong{font-weight:700}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--accent);color:var(--on-accent);padding:10px 16px;font-weight:700;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.ico{width:1.25em;height:1.25em;flex:none}
.num{font-family:var(--num);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;font-weight:560;letter-spacing:-.03em;font-feature-settings:'lnum' 1}

/* ── 버튼 ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3.1rem;padding:.7rem 1.5rem;font-weight:700;font-size:.95rem;line-height:1.2;letter-spacing:0;border:1px solid transparent;white-space:nowrap;isolation:isolate;overflow:hidden;transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:3.6rem;padding:.85rem 1.9rem;font-size:1.02rem}
.btn-main{background:var(--accent);color:var(--on-accent)}
.btn-main::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-ink{background:var(--on-accent);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn-main:hover{background:var(--accent-2)}
  .btn-main:hover::after{transform:translateX(120%);transition:transform .7s var(--ease-out)}
  .btn-line:hover{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}
  .btn-ink:hover{background:#E1ECFC}
}
.tlink{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.95rem;padding:.35rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .35s var(--ease-out),color .2s ease}
.tlink .ico{width:1.05em;height:1.05em;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.tlink:hover{color:var(--accent-2);background-size:0 1px;background-position:100% 100%}.tlink:hover .ico{transform:translateX(4px)}}

/* 전화 아이콘이 가끔 울린다 */
@keyframes ring{0%,86%,100%{transform:rotate(0)}88%{transform:rotate(-14deg)}90%{transform:rotate(12deg)}92%{transform:rotate(-10deg)}94%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.ring{transform-origin:50% 60%;animation:ring 5.5s ease-in-out 2s infinite}

/* ── 스크롤 진행 ── */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:200;pointer-events:none}
.progress span{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* ── 헤더 ── */
.hd{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--hd-h);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);view-transition-name:site-header}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%}
.brand{display:inline-flex;align-items:center;gap:.5rem;flex:none}
.brand-mark{width:1.75rem;height:1.75rem;color:var(--accent)}
.brand-name{font-family:var(--serif-top);font-weight:700;font-size:1.08rem;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.brand-name i{font-style:normal;font-weight:700;opacity:.92}
.nav{display:none}
.hd-r{display:flex;align-items:center;gap:.6rem}
.hd-call{display:none}
.fs-btn{display:none}
.menu-btn{position:relative;display:inline-flex;align-items:center;gap:.5rem;height:48px;padding:0 .8rem 0 2.5rem;border:1px solid var(--line-2);font-weight:700;font-size:.9rem}
.menu-btn .bar{position:absolute;left:.75rem;width:1.15rem;top:50%;height:1.6px;margin-top:-.8px;background:var(--ink);transition:transform .35s var(--ease-out)}
.menu-btn .bar:nth-child(1){transform:translateY(-4px)}
.menu-btn .bar:nth-child(2){transform:translateY(4px)}
.menu-btn[aria-expanded="true"] .bar:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bar:nth-child(2){transform:rotate(-45deg)}
@media (min-width:1000px){
  .nav{display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);font-weight:600;font-size:.92rem}
  .nav a{position:relative;padding:.6rem 0}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease-out)}
  .nav a[aria-current="page"]{color:var(--accent-2)}
  .nav a[aria-current="page"]::after{transform:scaleX(1)}
  .hd-call{display:inline-flex;min-height:2.7rem;padding:.5rem 1.15rem;font-family:var(--sans);font-size:.95rem;font-variant-numeric:tabular-nums}
  .fs-btn{display:inline-flex;align-items:baseline;gap:1px;height:2.7rem;padding:0 .7rem;border:1px solid var(--line);font-weight:700;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
  .fs-btn .fs-a{font-size:.78rem}.fs-btn .fs-b{font-size:1.08rem}
  .fs-btn[aria-pressed="true"]{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}
  .menu-btn{display:none}
}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}.fs-btn:hover{border-color:var(--line-2)}}

/* 모바일 메뉴 */
.mnav{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem;padding:calc(var(--hd-h) + 1.4rem) var(--gut) calc(1.6rem + env(safe-area-inset-bottom));background:var(--bg-alt);overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--ease-in-out)}
.mnav[hidden]{display:none}
.mnav.open{clip-path:inset(0)}
.mnav-links a{display:flex;align-items:baseline;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:700;font-size:1.9rem;letter-spacing:-.03em;line-height:1.2;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mnav.open .mnav-links a{opacity:1;transform:none}
.mnav.open .mnav-links a:nth-child(1){transition-delay:.12s}.mnav.open .mnav-links a:nth-child(2){transition-delay:.17s}.mnav.open .mnav-links a:nth-child(3){transition-delay:.22s}.mnav.open .mnav-links a:nth-child(4){transition-delay:.27s}.mnav.open .mnav-links a:nth-child(5){transition-delay:.32s}
.mnav-foot{display:grid;gap:.6rem}
.mnav-foot p{margin-top:.4rem;font-size:.84rem;color:var(--muted)}
.mnav-fs{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;border:1px dashed var(--line-2);font-weight:700;font-size:.95rem}
.mnav-fs[aria-pressed="true"]{background:var(--ink);color:var(--on-accent);border-style:solid}

/* ── 등장 모션 (JS가 돌 때만 숨김, 첫 화면 요소에는 쓰지 않는다) ── */
.js [data-reveal]:not([data-reveal="lines"]){opacity:0;transform:translateY(22px)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.ln{display:block;overflow:hidden;padding-block:.09em;margin-block:-.09em}
.ln>span{display:block}
.js [data-reveal="lines"] .ln>span{transform:translateY(112%)}
.js [data-reveal="lines"].in .ln>span{transform:none;transition:transform 1s var(--ease-out)}
.js [data-reveal="lines"].in .ln:nth-child(2)>span{transition-delay:.09s}
.js [data-reveal="lines"].in .ln:nth-child(3)>span{transition-delay:.18s}
.js .rule{transform:scaleX(0);transform-origin:0 50%}
.js .rule.in{transform:none;transition:transform 1.1s var(--ease-in-out)}

/* ── 히어로 ── */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:flex-end;padding:calc(var(--hd-h) + .5rem) 0 1rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 78% 22%,#D6E6FF 0%,#EBF3FF 46%,#FFFFFF 100%)}
.glow{position:absolute;border-radius:50%;opacity:.6;will-change:transform}
.g1{width:52vmax;height:52vmax;right:-14vmax;top:-18vmax;background:radial-gradient(circle,rgba(64,132,246,.22) 0%,rgba(64,132,246,.08) 40%,transparent 70%);animation:drift1 19s ease-in-out infinite alternate}
.g2{width:42vmax;height:42vmax;left:-16vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(120,190,255,.3) 0%,rgba(120,190,255,.1) 40%,transparent 70%);animation:drift2 23s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(-7vmax,6vmax,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(8vmax,-5vmax,0) scale(1.08)}}
.hero-mark{position:absolute;right:-6%;top:50%;width:min(92vh,78vw);height:auto;transform:translateY(-50%);color:rgba(18,71,181,.13);overflow:visible}
.hero-mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease-in-out) .25s forwards}
.hero-mark path:nth-child(2){animation-delay:.75s}
.hero-mark circle{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:pop .9s var(--ease-out) 1.9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.hero-spot{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,rgba(64,132,246,.14),transparent 60%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.hero-spot.on{opacity:1}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h h" "facts cert" "cta cta";gap:.8rem 1rem;align-items:end;width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.hero-h1{grid-area:h;font-family:var(--serif-top);font-size:clamp(2.6rem,12.8vw,4rem);line-height:1.17;letter-spacing:-.03em;padding-bottom:.75rem;border-bottom:1px solid var(--line-2)}
.hero-cert{grid-area:cert;justify-self:end;align-self:center;width:min(29vw,19svh,132px);margin:1.1rem 1.5vw .2rem 0;position:relative;z-index:1}
.cert-btn{position:relative;display:block;width:100%;transform-origin:50% -12%;transform:rotate(2.4deg);animation:hang 2.4s cubic-bezier(.3,.6,.3,1) .1s both;filter:drop-shadow(0 20px 26px rgba(15,34,68,.28));-webkit-tap-highlight-color:transparent}
.cert-btn img{width:100%;transition:transform .5s var(--ease-out)}
.cert-btn::before{content:"";position:absolute;left:50%;top:-11%;width:54%;aspect-ratio:1;border:1px solid rgba(15,34,68,.3);border-bottom:0;border-right:0;transform:translateX(-50%) rotate(45deg);transform-origin:50% 50%;clip-path:polygon(0 0,100% 0,0 100%)}
.nail{position:absolute;left:50%;top:-13%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent)}
@keyframes hang{0%{transform:rotate(7deg)}22%{transform:rotate(-1.4deg)}44%{transform:rotate(4deg)}66%{transform:rotate(1.4deg)}84%{transform:rotate(2.9deg)}100%{transform:rotate(2.4deg)}}
.sheen{position:absolute;inset:6% 7%;overflow:hidden;pointer-events:none}
.sheen::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);transform:translateX(-70%);animation:sheen 1.6s var(--ease-in-out) 2.6s 1 both}
@keyframes sheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
.hero-cert figcaption{margin-top:.9rem;font-size:.74rem;line-height:1.45;color:var(--muted);text-align:right;display:none}
.hero-cert figcaption span{display:inline-flex;align-items:center;gap:.3em;color:var(--accent);font-weight:700}
.hero-foot{display:contents}
.hero-facts{grid-area:facts;display:grid;gap:.5rem;font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.hero-facts b{display:block;font-size:.95rem;color:var(--ink)}
.hero-cta{grid-area:cta;display:grid;gap:.5rem}
.hero-cta .btn{width:100%}
@media (min-width:760px){
  .hero{padding:calc(var(--hd-h) + 1.6rem) 0 2rem}
  .hero-in{grid-template-areas:"h cert" "foot foot";gap:2rem 3rem}
  .hero-h1{font-size:clamp(3.8rem,min(8.4vw,13.4svh),7.6rem);line-height:1.13;padding-bottom:0;border-bottom:0}
  .hero-cert{width:min(clamp(210px,23vw,330px),36svh);margin:1.6rem clamp(0px,3vw,48px) .6rem 0}
  .hero-cert figcaption{display:block}
  .hero-foot{grid-area:foot;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding-top:1.3rem;border-top:1px solid var(--line-2)}
  .hero-facts{grid-area:auto;display:flex;flex-wrap:wrap;gap:.6rem clamp(1.4rem,3vw,2.8rem);font-size:.84rem}
  .hero-cta{grid-area:auto;display:flex}
  .hero-cta .btn{width:auto}
}
@media (hover:hover) and (pointer:fine){.cert-btn:hover img{transform:scale(1.025)}}

/* ── 띠 (마퀴) ── */
.band{position:relative;border-block:1px solid var(--line);background:var(--bg-alt);overflow:hidden;padding:.95rem 0}
.band-toggle{position:absolute;right:0;top:0;bottom:0;z-index:1;display:inline-flex;align-items:center;gap:.4rem;padding:0 var(--gut) 0 1.6rem;background:linear-gradient(90deg,transparent,var(--bg-alt) 26%);font-size:.82rem;font-weight:700;color:var(--ink-2)}
.band-toggle i{display:block;width:.7rem;height:.8rem;border-inline:.22rem solid currentColor}
.band-toggle[aria-pressed="true"] i{width:0;height:0;border:.42rem solid transparent;border-left:.7rem solid currentColor;border-right:0}
@media (hover:hover) and (pointer:fine){.band-toggle:hover{color:var(--accent-2)}}
.band-track{display:flex;width:max-content;animation:marquee 38s linear infinite;will-change:transform}
.band-set{display:flex;align-items:center;flex:none}
.band-set span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;white-space:nowrap}
.band-set span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}

/* ── 섹션 공통 ── */
.sec{padding:clamp(4.2rem,10vw,8.5rem) 0}
.sec-head{display:grid;gap:1.1rem;margin-bottom:clamp(2rem,5vw,3.6rem);max-width:46rem}
.sec-head h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.sec-head p{color:var(--ink-2);max-width:34rem}
.sec-head .tlink{justify-self:start}
.note{margin-top:1.4rem;font-size:.84rem;color:var(--muted);max-width:52rem}
.note a{text-decoration:underline;text-underline-offset:3px}

/* ── 과정 목록 (큰 세리프 이름 · 설명 · 시간) ── */
.clist{border-top:1px solid var(--line-2)}
.crow{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"name hours" "meta hours";align-items:end;gap:.2rem 1rem;padding:1.25rem 0 1.3rem;border-bottom:1px solid var(--line-2);isolation:isolate}
.crow::before{content:"";position:absolute;inset:0 calc(var(--gut)*-1);z-index:-1;background:var(--bg-hover);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease-out)}
.crow-name{grid-area:name;font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,8vw,5.6rem);line-height:1.16;letter-spacing:-.03em;transition:transform .5s var(--ease-out),color .3s ease}
.crow-meta{grid-area:meta;display:grid;gap:.1rem;font-size:.9rem;line-height:1.45}
.crow-meta b{font-size:.98rem}
.crow-meta small{font-size:.84rem;color:var(--muted)}
.crow-hours{grid-area:hours;display:flex;align-items:baseline;gap:.25rem;justify-self:end;white-space:nowrap}
.crow-hours b{font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:540;font-size:clamp(2.2rem,7vw,4rem);line-height:1;letter-spacing:-.04em;color:var(--accent)}
.crow-hours small{font-size:.9rem;font-weight:700;color:var(--ink-2)}
.crow-go{display:none}
.crow-hours.is-range b{font-size:clamp(1.5rem,4.4vw,2.6rem)}
@media (min-width:860px){
  .crow{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) 11rem 2.2rem;grid-template-areas:"name meta hours go";align-items:center;gap:1.5rem;padding:.9rem 0 1.05rem}
  .crow-go{grid-area:go;display:block;width:1.9rem;height:1.9rem;color:var(--accent);opacity:0;transform:translateX(-12px);transition:opacity .3s ease,transform .5s var(--ease-out)}
}
@media (hover:hover) and (pointer:fine){
  .crow:hover::before{transform:scaleY(1)}
  .crow:hover .crow-name{transform:translateX(.9rem);color:var(--accent-2)}
  .crow:hover .crow-go{opacity:1;transform:none}
}
.crow:active .crow-name{color:var(--accent-2)}
/* 커서를 따라다니는 시간 구성 카드 (PC) */
.cprev{position:fixed;left:0;top:0;z-index:90;width:16.5rem;padding:1rem 1.1rem 1.1rem;background:var(--ink);color:var(--on-accent);pointer-events:none;opacity:0;transform:translate3d(0,0,0) scale(.94);transform-origin:0 0;transition:opacity .25s ease;box-shadow:0 22px 44px rgba(15,34,68,.3)}
.cprev.on{opacity:1}
.cprev-h{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:-.03em;margin-bottom:.7rem}
.cprev-bar{display:flex;height:10px;gap:3px;margin-bottom:.7rem}
.cprev-bar i{display:block;background:var(--on-accent);min-width:6px;transition:flex-grow .45s var(--ease-out)}
.cprev-bar i:nth-child(2){background:var(--accent-mid)}
.cprev-bar i:nth-child(3){background:#4C86F2}
.cprev dl{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;font-size:.82rem;line-height:1.5}
.cprev dd{font-weight:700;font-variant-numeric:tabular-nums}

/* ── 320시간 구성 ── */
.hours{background:var(--bg-alt);border-block:1px solid var(--line)}
.hours-head{display:grid;gap:1.4rem;margin-bottom:clamp(2rem,5vw,3.4rem)}
.hours-head h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.hours-head h2 .num{color:var(--accent);font-size:1.12em;letter-spacing:-.04em}
.hours-head p{color:var(--ink-2);max-width:32rem}
@media (min-width:900px){.hours-head{grid-template-columns:1.2fr 1fr;align-items:end;gap:3rem}}
.htrack{position:relative;display:grid;gap:5px;height:16px;margin-bottom:.6rem}
.hseg{position:relative;background:rgba(15,34,68,.1);overflow:hidden}
.hseg i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.js .htrack .hseg i{will-change:transform}
html:not(.js) .hseg i{transform:none}
.hscale{display:flex;justify-content:space-between;font-family:var(--num);font-size:.8rem;color:var(--muted);margin-bottom:clamp(1.6rem,4vw,2.8rem)}
.hcols{display:grid;gap:0;border-top:1px solid var(--line)}
.hcol{padding:1.5rem 0 1.6rem;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.2rem;align-items:baseline;transition:opacity .5s ease}
.hcol .hcol-n{grid-row:span 2;min-width:5.6rem;font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:540;font-size:clamp(3rem,9vw,5.4rem);line-height:.95;letter-spacing:-.05em;color:var(--ink);transition:color .5s ease}
.hcol .hcol-n small{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:0;margin-left:.2rem;color:var(--ink-2)}
.hcol h3{font-size:1.35rem;letter-spacing:-.03em}
.hcol p:not(.hcol-n){grid-column:2;color:var(--ink-2);font-size:.95rem}
.js .hcol .hcol-n{color:var(--muted)}
.js .hcol.on{opacity:1}
.js .hcol.on .hcol-n,.hcol .hcol-n{color:var(--accent)}
@media (min-width:900px){
  .hcols{grid-template-columns:repeat(3,1fr);border-top:0;gap:0 2.4rem}
  .hcol{grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:0;padding:1.6rem 0 0;gap:.7rem}
  .hcol .hcol-n{grid-row:auto}
  .hcol p:not(.hcol-n){grid-column:auto}
}

/* ── 다섯 걸음 (왼쪽 고정 그림 + 오른쪽 번호 단계) ── */
.steps-in{display:grid;gap:2.4rem}
.sv{display:none}
.steps-head{display:grid;gap:1rem;margin-bottom:1.6rem}
.steps-head h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.steps-head p{color:var(--ink-2);max-width:30rem}
.step{position:relative;display:grid;grid-template-columns:3.7rem 1fr;grid-template-rows:auto 1fr;gap:.3rem 1rem;padding:1.5rem 0 1.6rem;border-top:1px solid var(--line-2)}
.step>.step-n{grid-area:1 / 1}
.step>div{grid-area:1 / 2 / 3 / 3}
.step:last-child{border-bottom:1px solid var(--line-2)}
.step-n{font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:520;font-size:clamp(2.6rem,7vw,3.9rem);line-height:.9;letter-spacing:-.04em;color:var(--accent);min-width:3.4rem}
.step h3{font-size:1.42rem;letter-spacing:-.03em;margin-bottom:.45rem}
.step p{color:var(--ink-2);font-size:.97rem}
.step p+p{margin-top:.5rem}
.step p a,.itable dd a,.hours a{text-decoration:underline;text-underline-offset:3px}
.dday{font-style:normal;font-family:var(--num);font-weight:600;margin-left:.35em;white-space:nowrap}
.step .chip{display:inline-block;margin-top:.7rem;padding:.2rem .65rem;border:1px solid var(--line-2);font-size:.8rem;font-weight:700;color:var(--ink)}
.step-ico{grid-area:2 / 1;align-self:start;margin-top:.5rem;width:2.8rem;height:2.8rem;color:var(--ink);opacity:.9;stroke-width:6.5;stroke-dasharray:1;stroke-dashoffset:0}
.js .step:not(.in) .step-ico{stroke-dashoffset:1}
.js .step.in .step-ico{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-in-out) .15s}
.steps-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.8rem}
@media (min-width:980px){
  .steps-in{grid-template-columns:minmax(0,5fr) minmax(0,6.2fr);gap:clamp(2.4rem,6vw,6rem);align-items:start}
  .sv{display:block;position:sticky;top:calc(var(--hd-h) + 1.6rem)}
  .sv-frame{position:relative;height:min(76vh,700px);border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--bg-deep),var(--bg-hover) 55%,var(--bg-alt));border:1px solid var(--line);overflow:hidden;isolation:isolate}
  .sv-frame::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(closest-side,rgba(64,132,246,.22),transparent);z-index:-1}
  .sv-num{position:absolute;left:50%;top:9%;transform:translateX(-50%);height:1.1em;overflow:hidden;font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:480;font-size:clamp(4.6rem,8vw,7.2rem);line-height:1.1;letter-spacing:-.04em;color:var(--accent)}
  .sv-num span{display:block;transition:transform .7s var(--ease-in-out)}
  .sv-art{position:absolute;left:50%;top:54%;width:56%;aspect-ratio:1;stroke-width:2.2;transform:translate(-50%,-50%) scale(.94);color:var(--ink);opacity:0;stroke-dasharray:1;stroke-dashoffset:1;transition:opacity .45s ease,transform .7s var(--ease-out)}
  .sv-art.on{opacity:1;transform:translate(-50%,-50%);stroke-dashoffset:0;transition:opacity .45s ease .1s,transform .7s var(--ease-out) .1s,stroke-dashoffset 1.9s var(--ease-in-out) .15s}
  .sv-cap{position:absolute;left:0;right:0;bottom:7%;text-align:center;font-family:var(--serif);font-weight:700;font-size:1.08rem;letter-spacing:-.03em;color:var(--ink-2)}
  .sv-dots{position:absolute;left:50%;bottom:3.2%;display:flex;gap:6px;transform:translateX(-50%)}
  .sv-dots i{width:18px;height:2px;background:var(--line-2);transition:background-color .4s ease}
  .sv-dots i.on{background:var(--accent)}
  .step{grid-template-columns:6.2rem 1fr;grid-template-rows:auto;padding:2.3rem 0 2.6rem;transition:opacity .5s ease}
  .step>div{grid-area:1 / 2}
  .step-ico{display:none}
  .step-n{font-size:clamp(3.4rem,5vw,4.6rem);transition:transform .6s var(--ease-out)}
  .js .steps .step{opacity:.8}
  .js .steps .step.is-active{opacity:1}
  .step.is-active .step-n{transform:translateX(6px)}
  .step h3{font-size:1.6rem}
}

/* ── 교육원 소개 ── */
.about{background:var(--bg-alt);border-top:1px solid var(--line)}
.about-top{display:grid;gap:2rem;margin-bottom:clamp(2.4rem,6vw,4.2rem)}
.about-top h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.about-top p{color:var(--ink-2);max-width:33rem}
.about-top p+p{margin-top:.8rem}
.facts{border-top:1px solid var(--line-2)}
.facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{font-weight:700}
.facts dd small{display:block;font-weight:500;font-size:.8rem;color:var(--muted)}
@media (min-width:900px){.about-top{grid-template-columns:1.15fr 1fr;gap:4rem;align-items:end}}
.strips-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;font-size:.86rem;color:var(--muted)}
.strips-h b{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.strips{display:grid;border-top:1px solid var(--line-2)}
.strip{position:relative;display:grid;gap:.3rem;padding:1.3rem 0 1.4rem;border-bottom:1px solid var(--line-2);text-align:left;width:100%}
.strip-k{font-family:var(--serif);font-weight:700;font-size:2.3rem;line-height:1.16;letter-spacing:-.03em}
.strip-t{color:var(--ink-2);font-size:.97rem;line-height:1.65}
@media (min-width:900px){
  .strips{display:flex;border:1px solid var(--line-2);border-width:1px 0;min-height:25rem}
  .strip{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:1.2rem;padding:1.6rem 1.5rem 1.7rem;border-bottom:0;border-left:1px solid var(--line-2);overflow:hidden;cursor:default;transition:flex-grow .7s var(--ease-in-out),background-color .5s ease}
  .strip:first-child{border-left:0}
  .strip-k{font-size:clamp(3.2rem,5.6vw,5.4rem);line-height:1;transition:color .4s ease,transform .7s var(--ease-in-out)}
  .strip-t{width:21rem;max-width:none;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .5s var(--ease-out)}
  .strip.is-open{flex-grow:2.6;background:var(--bg-hover)}
  .strip.is-open .strip-k{color:var(--accent-2)}
  .strip.is-open .strip-t{opacity:1;transform:none;transition-delay:.25s}
  html:not(.js) .strip-t{opacity:1;transform:none;width:auto}
}
.vision{display:grid;gap:0;margin-top:clamp(2rem,5vw,3.4rem)}
.vision h3{font-size:1.25rem;margin-bottom:1rem;letter-spacing:-.03em}
.vision ul{display:grid;gap:0;border-top:1px solid var(--line)}
.vision li{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:var(--ink-2)}
.vision li::before{content:"";width:.8rem;height:1px;margin-top:.85em;background:var(--accent)}
@media (min-width:760px){.vision ul{grid-template-columns:1fr 1fr;column-gap:2.4rem}}

/* ── 금색 모집 포스터 ── */
.poster{position:relative;background:var(--accent);color:var(--on-accent);padding:1.4rem 0 clamp(2.6rem,6vw,4.4rem);overflow:hidden;isolation:isolate}
.poster :focus-visible{outline-color:#fff}
.poster ::selection{background:var(--on-accent);color:var(--accent)}
.poster-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.5rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.42);font-size:.8rem;font-weight:700}
.poster-main{position:relative;display:grid;padding:clamp(1rem,3vw,2rem) 0 clamp(1.4rem,3vw,2.4rem)}
.poster-h{font-family:'SGSerifBlack',var(--serif);font-weight:900;font-size:clamp(4.6rem,21.5vw,17rem);line-height:1.04;letter-spacing:-.03em;margin-left:-.03em}
.poster-h .ln{padding-block:.06em;margin-block:-.06em}
.poster-h .px{display:inline-block;will-change:transform}
.poster-seal{position:absolute;right:0;bottom:clamp(1.6rem,5vw,4rem);width:clamp(6.8rem,19vw,14rem);aspect-ratio:1;color:var(--on-accent)}
.poster-seal .spin{width:100%;height:100%;animation:spin 26s linear infinite}
.poster-seal text{font-family:var(--sans);font-size:11.4px;font-weight:700;letter-spacing:.14em;fill:currentColor}
.poster-seal .mk{position:absolute;inset:30%;width:40%;height:40%}
@keyframes spin{to{transform:rotate(360deg)}}
.poster-grid{display:grid;gap:2rem}
.plist{display:grid;border-top:1px solid rgba(255,255,255,.42)}
.plist li{display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem;align-items:baseline;padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.42);font-size:.95rem}
.plist li b{font-weight:800}
.poster-side p{font-size:.97rem;font-weight:500;margin-bottom:1.2rem;max-width:26rem}
.poster-side .btns{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem}
.poster .tlink{color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.poster .tlink:hover{color:#CFE0FF}}
@media (min-width:900px){
  .poster-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3.4rem;align-items:start}
  .plist{grid-template-columns:1fr 1fr;column-gap:2.4rem}
}

/* ── 경영원칙 인용 ── */
.quote{position:relative;padding:clamp(4.2rem,10vw,8.5rem) 0;overflow:hidden;isolation:isolate}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 15% 50%,rgba(64,132,246,.12),transparent 70%)}
.quote-in{display:grid;gap:2.6rem;align-items:center}
.pinned{position:relative;width:min(70%,17rem);margin:0 auto;transform:rotate(-2.2deg);filter:drop-shadow(0 22px 26px rgba(15,34,68,.26))}
.pinned button{display:block;width:100%}
.pinned img{width:100%}
.pinned::before,.pinned::after{content:"";position:absolute;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9d2c8 45%,#9d9388);box-shadow:0 3px 5px rgba(0,0,0,.45);z-index:2}
.pinned::before{left:5%}.pinned::after{right:5%}
.pinned figcaption{margin-top:.9rem;font-size:.78rem;color:var(--muted);text-align:center;transform:rotate(2.2deg)}
.quote blockquote{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,4.2vw,3.3rem);line-height:1.4;letter-spacing:-.03em}
.quote blockquote .w{display:inline-block;transition:opacity .35s ease}
.js .quote blockquote .w{opacity:.55}
.js .quote blockquote .w.on{opacity:1}
.quote cite{display:block;margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--line-2);font-style:normal;font-size:.88rem;color:var(--muted)}
.quote cite b{color:var(--ink);margin-right:.7rem}
@media (min-width:900px){.quote-in{grid-template-columns:minmax(0,.62fr) minmax(0,1.5fr);gap:clamp(3rem,7vw,7rem)}.pinned{width:100%;max-width:19rem}}

/* ── 자주 묻는 질문 ── */
.faq-in{display:grid;gap:1.6rem}
.faq-in h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.faq-side p{margin-top:1rem;color:var(--ink-2);max-width:24rem}
.faq-side .btn{margin-top:1.4rem}
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-q{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;width:100%;padding:1.25rem 0;text-align:left;font-family:var(--serif);font-weight:700;font-size:1.22rem;line-height:1.4;letter-spacing:-.03em}
.faq-q .ico{width:1.5rem;height:1.5rem;color:var(--accent);transition:transform .45s var(--ease-out)}
.faq-q[aria-expanded="true"] .ico{transform:rotate(135deg)}
.faq-a{display:grid;grid-template-rows:1fr}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.js .faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 2.4rem 1.4rem 0;color:var(--ink-2)}
.faq-a p+p{margin-top:-.6rem}
.faq-a a{text-decoration:underline;text-underline-offset:3px;color:var(--accent-2)}
@media (min-width:900px){.faq-in{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(3rem,7vw,7rem);align-items:start}.faq-side{position:sticky;top:calc(var(--hd-h) + 2rem)}}
@media (hover:hover) and (pointer:fine){.faq-q:hover{color:var(--accent-2)}}

/* ── 오시는 길 ── */
.loc{background:var(--bg-alt);border-top:1px solid var(--line)}
.loc-in{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem}
.loc h2{font-size:clamp(2.1rem,5.4vw,4.2rem);margin-bottom:1.2rem}
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:-.03em;line-height:1.4}
.copy-btn{display:inline-flex;align-items:center;gap:.35em;min-height:2.8rem;padding:.3rem .9rem;border:1px solid var(--line-2);font-family:var(--sans);font-size:.84rem;font-weight:700;letter-spacing:0;transition:transform .16s var(--ease-out),background-color .2s ease,color .2s ease}
.copy-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.copy-btn:hover{background:var(--ink);color:var(--on-accent)}}
.ways{margin-top:1.5rem;border-top:1px solid var(--line-2)}
.ways li{display:grid;grid-template-columns:1.8rem 3.6rem minmax(0,1fr);gap:.6rem;align-items:start;padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.96rem}
.ways .ico{width:1.4rem;height:1.4rem;color:var(--accent);margin-top:.15rem}
.ways b{font-weight:700}
.ways span{color:var(--ink-2)}
.ways small{display:block;font-size:.82rem;color:var(--muted)}
.loc-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.loc-btns .btn{flex:1 1 9.5rem}
.map{position:relative;width:100%;aspect-ratio:4/3;background:var(--bg-hover);border:1px solid var(--line-2);overflow:hidden}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) contrast(1.02)}
/* 화곡역 → 교육원 걸음 표시 */
.walk{margin-top:1.1rem;padding:1.1rem 1.2rem 1.2rem;border:1px solid var(--line-2)}
.walk-top{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;font-weight:700}
.walk-top span:last-child{text-align:right}
.walk-line{position:relative;height:2.6rem;margin:.2rem .5rem 0}
.walk-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dotted var(--line-2)}
.walk-fill{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.walk-dot{position:absolute;left:0;top:50%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);transform:translateX(0)}
.walk-dot .ico{width:1.2rem;height:1.2rem}
.walk-end{position:absolute;right:-.5rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;border-radius:50%;border:2px solid var(--accent);background:var(--bg-alt)}
.walk.in .walk-fill{transform:none;transition:transform 3.6s linear .3s}
.walk.in .walk-dot{transform:translateX(var(--walk-w,240px));transition:transform 3.6s linear .3s}
html:not(.js) .walk-fill{transform:none}
.walk-bot{display:flex;justify-content:center;gap:.5rem;font-size:.9rem;color:var(--ink-2)}
.walk-bot b{color:var(--accent);font-family:var(--num);font-size:1.05rem}
@media (min-width:900px){.loc-in{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.4rem,5vw,5rem);align-items:start}}

/* ── 서브 페이지 머리 ── */
.phero{position:relative;isolation:isolate;padding:calc(var(--hd-h) + clamp(2.4rem,7vw,5rem)) 0 clamp(2.2rem,5vw,3.6rem);border-bottom:1px solid var(--line);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 120% at 85% 0%,#D6E6FF 0%,var(--bg) 60%)}
.phero .hero-mark{right:-4%;width:min(34rem,70vw);color:rgba(18,71,181,.11)}
.crumb{display:flex;gap:.5rem;font-size:.82rem;color:var(--muted);margin-bottom:1.2rem}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.phero h1{font-family:var(--serif-top);font-size:clamp(2.3rem,7.6vw,5.2rem);line-height:1.2;letter-spacing:-.03em;max-width:15em}
.phero .lead{margin-top:1.2rem;max-width:36rem;color:var(--ink-2);font-size:1.05rem}
.phero-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.phero-facts li{padding:.3rem .8rem;border:1px solid var(--line-2);font-size:.86rem;font-weight:700}
.phero-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}

/* ── 교육과정 페이지 ── */
.ccards{display:grid;gap:0;border-top:1px solid var(--line-2)}
.ccard{display:grid;gap:1.2rem;padding:clamp(1.8rem,4vw,2.8rem) 0;border-bottom:1px solid var(--line-2);scroll-margin-top:calc(var(--hd-h) + 12px)}
.ccard-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.ccard h3{font-size:clamp(2rem,5.6vw,3.6rem);letter-spacing:-.03em;line-height:1.16}
.ccard-h .tag{padding:.15rem .6rem;border:1px solid var(--accent);color:var(--accent);font-size:.8rem;font-weight:700}
.ccard-who{color:var(--ink-2);max-width:32rem}
.ccard-total{display:flex;align-items:baseline;gap:.3rem;white-space:nowrap}
.ccard-total b{font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:540;font-size:clamp(3rem,9vw,5rem);line-height:.9;letter-spacing:-.05em;color:var(--accent)}
.ccard-total span{font-weight:700}
.ccard-total.is-range b{font-size:clamp(2.1rem,5.6vw,3.2rem)}
.bars{display:grid;gap:.75rem}
.bar-row{display:grid;grid-template-columns:3rem 1fr 4.2rem;gap:.8rem;align-items:center;font-size:.92rem}
.bar-row b{font-weight:700}
.bar-row em{font-style:normal;font-family:var(--num);font-size:1.05rem;text-align:right;white-space:nowrap}
.bar-row em small{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-left:.1rem}
.bar{position:relative;height:10px;background:rgba(15,34,68,.1);overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%}
.js .bar i{transform:scaleX(0)}
.js .ccard.in .bar i{transform:scaleX(var(--w,1));transition:transform 1.3s var(--ease-out) .2s}
.js .ccard.in .bar-row:nth-child(2) .bar i{transition-delay:.32s}
.js .ccard.in .bar-row:nth-child(3) .bar i{transition-delay:.44s}
html:not(.js) .bar i{transform:scaleX(var(--w,1))}
@media (min-width:900px){
  .ccard{grid-template-columns:minmax(0,1.1fr) 11rem minmax(0,1fr);gap:2.4rem;align-items:center}
  .ccard-total{justify-self:end}
}
.split{display:grid;gap:2rem}
.split h2{font-size:clamp(1.9rem,4.6vw,3.4rem)}
.split .lead{color:var(--ink-2);margin-top:1rem;max-width:30rem}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(3rem,7vw,7rem);align-items:start}.split>:first-child{position:sticky;top:calc(var(--hd-h) + 2rem)}}
.itable{border-top:1px solid var(--line-2)}
.itable div{display:grid;grid-template-columns:6.8rem 1fr;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.itable dt{font-weight:700;color:var(--accent)}
.itable dd{color:var(--ink)}
.itable dd small{display:block;margin-top:.2rem;font-size:.84rem;color:var(--muted)}
@media (min-width:600px){.itable div{grid-template-columns:9.5rem 1fr}}
.cards3{display:grid;gap:0;border-top:1px solid var(--line-2)}
.card3{padding:1.5rem 0 1.6rem;border-bottom:1px solid var(--line-2)}
.card3 .n{font-family:var(--num);color:var(--accent);font-size:1rem}
.card3 h3{font-size:1.45rem;margin:.5rem 0 .6rem;letter-spacing:-.03em}
.card3 p{color:var(--ink-2);font-size:.96rem}
@media (min-width:900px){.cards3{grid-template-columns:repeat(3,1fr);border-top:0;gap:0 2.4rem}.card3{border-top:1px solid var(--line-2);border-bottom:0;padding:1.5rem 0 0}}
.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.route{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin-top:.6rem;font-size:.9rem;font-weight:700}
.route span{padding:.25rem .7rem;border:1px solid var(--line-2)}
.route .ico{width:1rem;height:1rem;color:var(--accent)}
.route .l5{border-color:#8A5CD0;color:#5B34A6}
.route .l2{border-color:#3C9B4A;color:#1B6E2B}

/* ── 문서(개인정보처리방침·이용약관) ── */
.prose{max-width:46rem;padding:clamp(2.4rem,6vw,4rem) 0 clamp(4rem,9vw,7rem)}
.prose h2{font-size:1.5rem;margin:2.6rem 0 .9rem;letter-spacing:-.03em}
.prose p,.prose li{color:var(--ink-2)}
.prose p+p{margin-top:.8rem}
.prose ul{display:grid;gap:.4rem;margin:.6rem 0;padding-left:1.1rem;list-style:disc}
.prose ol{display:grid;gap:.4rem;margin:.6rem 0;padding-left:1.3rem;list-style:decimal}
.prose a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.prose .tbl{overflow-x:auto;margin:1rem 0;border:1px solid var(--line-2)}
.prose table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9rem}
.prose th,.prose td{padding:.75rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{background:var(--bg-hover);color:var(--ink);font-weight:700;white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose td{color:var(--ink-2)}
.prose .date{color:var(--muted);font-size:.9rem}

/* ── 404 ── */
.nf{min-height:92svh;display:grid;place-items:center;text-align:center;padding:calc(var(--hd-h) + 2rem) 0 4rem}
.nf .num{font-size:clamp(6rem,26vw,15rem);line-height:.9;color:var(--accent)}
.nf h1{font-size:clamp(1.8rem,5vw,3rem);margin:1rem 0}
.nf p{color:var(--ink-2);max-width:26rem;margin:0 auto 1.6rem}
.nf .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}

/* ── 푸터 ── */
.ft{position:relative;background:var(--bg-foot);border-top:1px solid var(--line);overflow:hidden}
.ft-cta{padding:clamp(4rem,10vw,8rem) 0 clamp(3rem,7vw,5rem);border-bottom:1px solid var(--line);text-align:left}
.ft-cta h2{font-size:clamp(2.2rem,6.8vw,5.2rem);line-height:1.2;margin:0 0 1.4rem}
.ft-tel{display:inline-flex;align-items:center;gap:.25em;font-family:var(--num);font-variation-settings:'opsz' 144;font-weight:500;font-size:clamp(2.5rem,11.4vw,8.4rem);line-height:1;letter-spacing:-.045em;color:var(--accent);transition:color .25s ease}
.ft-tel .ico{width:.55em;height:.55em;stroke-width:1.2}
@media (hover:hover) and (pointer:fine){.ft-tel:hover{color:var(--accent-2)}}
.ft-cta-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.9rem}
.ft-cta-note{margin-top:1.1rem;font-size:.88rem;color:var(--muted)}
.ft-in{display:grid;gap:2rem;padding:clamp(2.6rem,6vw,4rem) 0 2rem}
.ft-brand p{margin-top:.9rem;font-size:.86rem;color:var(--muted);line-height:1.6}
.ft-nav{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.5rem;align-content:start;font-weight:600;font-size:.95rem}
.ft-nav a{padding:.45rem 0}
.ft-biz{display:grid;gap:.3rem;font-size:.86rem;color:var(--ink-2);line-height:1.6}
.ft-biz b{font-weight:600;color:var(--muted);margin-right:.35rem}
.ft-biz .sep{display:inline-block;width:1px;height:.8em;margin:0 .55rem;background:var(--line-2);vertical-align:-.05em}
.ft-biz a{text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.ft-nav a:hover,.ft-legal a:hover,.made-by:hover{color:var(--accent-2)}}
@media (min-width:900px){.ft-in{grid-template-columns:1.1fr .9fr 1.5fr;gap:3rem}.ft-nav{grid-template-columns:1fr}}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;padding:1.1rem 0 1.4rem;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}
.ft-legal{display:flex;gap:1.3rem}
.ft-legal a{color:var(--ink);padding:.3rem 0}
.made-by{color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-left:.35rem;white-space:nowrap}
.ft-word{margin:0 0 -.22em;padding:0 2vw;font-family:var(--serif);font-weight:700;font-size:8.3vw;line-height:1;letter-spacing:-.03em;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(18,71,181,.34);user-select:none}
.ft-word span{position:relative;display:inline-block}
.ft-word span::after{content:attr(data-t);position:absolute;inset:0;color:rgba(18,71,181,.1);-webkit-text-stroke:0;clip-path:inset(0 100% 0 0)}
.ft-word.in span::after{clip-path:inset(0 0 0 0);transition:clip-path 2.6s var(--ease-in-out) .2s}
@media (max-width:899px){.ft{padding-bottom:calc(4.2rem + env(safe-area-inset-bottom))}}

/* ── 모바일 하단 고정 바 ── */
.dock{position:fixed;inset:auto 0 0 0;z-index:100;display:grid;grid-template-columns:1.7fr 1fr 1fr;background:var(--bg-foot);border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .45s var(--ease-out)}
.dock.show{transform:none}
.dock a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:3.3rem;font-weight:700;font-size:.95rem;border-left:1px solid var(--line);transition:background-color .15s ease}
.dock a:active{background:var(--bg-hover)}
.dock .dock-call{background:var(--accent);color:var(--on-accent);border-left:0;font-size:1.02rem}
.dock .dock-call:active{background:var(--accent-2)}
@media (min-width:900px){.dock{display:none}}

/* ── 크게 보기 ── */
.lightbox{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:3.6rem 1rem 1.2rem;border:0;background:rgba(9,20,44,.95);color:#fff;overflow:auto}
.lightbox[open]{display:grid;place-items:center;align-content:center;gap:.8rem;animation:lb-in .32s var(--ease-out)}
.lightbox::backdrop{background:rgba(9,20,44,.6)}
.lightbox img{max-width:min(100%,46rem);max-height:calc(100dvh - 8rem);width:auto;height:auto;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.lightbox p{font-size:.86rem;color:#DCE6F7;text-align:center;max-width:36rem}
.lb-close{position:fixed;right:.8rem;top:.8rem;width:3rem;height:3rem;display:grid;place-items:center;border:0;background:#fff;color:#0F2244}
.lb-close .ico{width:1.5rem;height:1.5rem}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

/* ── 알림 ── */
.toast{position:fixed;left:50%;bottom:calc(5rem + env(safe-area-inset-bottom));z-index:210;padding:.75rem 1.2rem;background:var(--ink);color:var(--on-accent);font-weight:700;font-size:.92rem;box-shadow:0 14px 30px rgba(15,34,68,.3);opacity:0;transform:translate(-50%,12px);transition:opacity .25s ease,transform .3s var(--ease-out);pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── 페이지 전환 ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .42s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* ── 움직임 줄이기 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-reveal="lines"] .ln>span,.js .rule{opacity:1!important;transform:none!important}
  .hero-mark path{stroke-dashoffset:0}
  .hero-mark circle{opacity:1}
  .band-track{animation:none}
  .band-toggle{display:none}
  .cert-btn{transform:rotate(2.4deg)}
  .js .steps .step,.js .quote blockquote .w{opacity:1}
  .js .hseg i,.walk-fill{transform:none}
  .js .bar i{transform:scaleX(var(--w,1))}
  .step-ico,.sv-art{stroke-dashoffset:0!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media print{.hd,.dock,.progress,.band,.ft-word,.mnav{display:none!important}body{background:#fff;color:#000}}