/* ============================================================
   데일카네기 두 번째 사이트 — 스타일
   build.js가 docs/style.css로 복사한다. 여기(src)만 고칠 것
   ============================================================ */
:root{
  --ink:#0b0c10; --ink-2:#15161c; --ink-3:#22242d;
  --paper:#fff; --ivory:#f6f4ef; --ivory-2:#efece4; --peach:#fff3ea;
  --wine:#1c0b12;
  --line:#e6e2d9; --line-d:rgba(255,255,255,.14);
  --text:#15151a; --text-2:#56534d; --text-3:#6e6b64;
  --accent:#ff5a2b; --accent-2:#ffb45c; --accent-ink:#c2380b;
  --ok:#0f7a48;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px; --gut:24px; --hd-h:76px;
  --serif:"Instrument Serif","Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 8px)}
body{margin:0;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;font-size:17px;line-height:1.7;color:var(--text);background:var(--paper);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(255,90,43,.35)}
.hero :focus-visible,.stats :focus-visible,.voices :focus-visible,.ft :focus-visible,.mnav :focus-visible,.hd:not(.is-solid) :focus-visible{outline-color:#fff}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:#fff;color:var(--ink);font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- 글자 ---------- */
.ln{display:block}
.h-xl{font-size:clamp(30px,4.1vw,52px);line-height:1.2;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.h-lg{font-size:clamp(25px,2.7vw,34px);line-height:1.3;letter-spacing:-.032em;font-weight:700;text-wrap:balance}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;color:var(--accent-ink);margin-bottom:14px}
.lead{font-size:clamp(16px,1.35vw,18px);line-height:1.75;color:var(--text-2);text-wrap:pretty}
.on-dark{color:#fff}
.eyebrow.on-dark{color:var(--accent-2)}
.lead.on-dark{color:rgba(255,255,255,.68)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn .ic-arrow{transition:transform .3s var(--ease)}
.btn:hover .ic-arrow{transform:translateX(4px)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--accent);color:var(--ink)}
.btn-line{border-color:rgba(255,255,255,.32);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--accent);color:var(--ink)}
.btn-soft{background:var(--ivory);border-color:var(--line);color:var(--text)}
.btn-soft:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--text-2);transition:background .25s,color .25s,border-color .25s}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- 등장 효과 (JS가 있을 때만 숨겼다가 보인다) ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ============================================================
   헤더
   ============================================================ */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hd-h);color:#fff;transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.hd-in{height:100%;display:flex;align-items:center;gap:clamp(14px,3.4vw,48px)}
.hd-brand{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo{height:38px;width:auto}
.logo-b{display:none}
.hd-tag{padding-left:14px;border-left:1px solid currentColor;font-size:13.5px;font-weight:600;letter-spacing:-.01em;opacity:.78;white-space:nowrap}
.hd-nav{display:flex;gap:clamp(12px,2.2vw,30px);font-size:16px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;min-width:0}
.hd-nav a{position:relative;padding:8px 0;opacity:.86;transition:opacity .25s}
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hd-nav a:hover{opacity:1}
.hd-nav a:hover::after{transform:scaleX(1)}
.hd-act{margin-left:auto;display:flex;align-items:center;gap:10px}
.hd-pill{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s}
.hd-pill-new{background:linear-gradient(95deg,var(--accent-2),var(--accent));color:var(--ink)}
.hd-pill-new b{display:inline-grid;place-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;letter-spacing:.04em}
.hd-pill-new:hover{transform:translateY(-1px)}
.hd-pill-cta{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08)}
.hd-pill-cta:hover{background:#fff;color:var(--ink)}
.hd-burger{display:none;position:relative;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1)}
.hd-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.hd-burger span:nth-child(1){top:17px}
.hd-burger span:nth-child(2){top:25px}
.hd-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.hd-burger[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}

.hd.is-solid{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);color:var(--text);box-shadow:0 1px 0 var(--line)}
.hd.is-solid .logo-w{display:none}
.hd.is-solid .logo-b{display:block}
.hd.is-solid .hd-pill-cta{border-color:var(--ink);background:var(--ink);color:#fff}
.hd.is-solid .hd-pill-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hd.is-solid .hd-burger{background:var(--ivory)}
/* 모바일 메뉴가 열려 있는 동안은 어두운 배경 위 흰 글자 */
.hd.is-menu{background:transparent;color:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hd.is-menu .logo-w{display:block}
.hd.is-menu .logo-b{display:none}
.hd.is-menu .hd-burger{background:rgba(255,255,255,.1)}
.hd.is-menu .hd-pill{display:none}

.mnav{position:fixed;inset:0;z-index:55;background:var(--ink);color:#fff;padding:calc(var(--hd-h) + 24px) var(--gut) 40px;overflow-y:auto;animation:fadeIn .3s var(--ease)}
.mnav-in{display:flex;flex-direction:column;max-width:560px;margin:0 auto}
.mnav-in a{display:flex;align-items:baseline;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-d);font-size:26px;font-weight:700;letter-spacing:-.035em;animation:riseIn .6s var(--ease) both}
.mnav-in a small{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;color:var(--accent-2)}
.mnav-in a:nth-child(2){animation-delay:.04s}.mnav-in a:nth-child(3){animation-delay:.08s}.mnav-in a:nth-child(4){animation-delay:.12s}.mnav-in a:nth-child(5){animation-delay:.16s}.mnav-in a:nth-child(6){animation-delay:.2s}
.mnav-in .mnav-cta{margin-top:28px;justify-content:center;align-items:center;gap:10px;height:58px;padding:0;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:17px;letter-spacing:-.01em}
@keyframes fadeIn{from{opacity:0}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}}

/* ============================================================
   히어로
   ============================================================ */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;background:var(--ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
.glow{position:absolute;border-radius:50%;filter:blur(80px)}
.hero .g1{width:56vw;height:56vw;right:-14vw;top:-22vw;background:radial-gradient(circle,var(--accent) 0,transparent 62%);opacity:.3}
.hero .g2{width:44vw;height:44vw;left:-16vw;bottom:-24vw;background:radial-gradient(circle,#b3205a 0,transparent 62%);opacity:.26}
.grain{position:absolute;inset:0;opacity:.1;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.hero-in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(32px,5vw,72px);align-items:center;padding-top:calc(var(--hd-h) + 28px);padding-bottom:20px}
.hero-copy{display:grid}
.slide{grid-area:1/1;align-self:center;visibility:hidden;transition:visibility 0s .55s}
.slide.is-on{visibility:visible;transition-delay:0s}
.slide > *{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.slide.is-on > *{opacity:1;transform:none;transition-duration:.9s}
.slide.is-on > :nth-child(1){transition-delay:.1s}
.slide.is-on > :nth-child(2){transition-delay:.17s}
.slide.is-on > :nth-child(3){transition-delay:.24s}
.slide.is-on > :nth-child(4){transition-delay:.34s}
.slide.is-on > :nth-child(5){transition-delay:.44s}

.hero-badge{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);font-size:13px;font-weight:600;letter-spacing:.01em}
.hero-eyebrow{margin-top:20px;font-size:clamp(15px,1.4vw,18px);font-weight:500;color:rgba(255,255,255,.76)}
/* 데스크톱에서 글자 크기를 뷰포트(vw)에 맞추면, 오른쪽 모자이크가 폭을 가져가는 구간(981~1010px)에서
   제목 줄이 어절 중간에 끊긴다. 컬럼 폭(cqw)에 맞춰 줄이고 vw는 예비로만 둔다 */
.hero-title{margin-top:10px;font-size:clamp(33px,5.1vw,66px);line-height:1.17;letter-spacing:-.048em;font-weight:700}
.hero-copy{container-type:inline-size}
@supports (font-size:1cqw){
  .hero-title{font-size:clamp(33px,10.4cqw,66px)}
}
.hero-title .hl{color:var(--accent-2);background:linear-gradient(92deg,var(--accent-2) 0%,var(--accent) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.08em}
.hero-sub{margin-top:24px;max-width:560px;font-size:clamp(16px,1.4vw,18.5px);line-height:1.75;color:rgba(255,255,255,.72);text-wrap:pretty}
.hero-actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px}

/* 도형 모자이크 — 슬라이드가 바뀌면 모서리 반경이 바뀌며 모양이 달라진다 */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:14px;aspect-ratio:1;width:100%}
.tile{position:relative;overflow:hidden;min-width:0;min-height:0;display:grid;place-items:center;text-align:center;transition:border-radius 1.2s var(--ease)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.tile.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,90,43,.62),rgba(11,12,16,.3));mix-blend-mode:multiply}
.tile span{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.75vw,24px);line-height:1.12}
.tile::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.t1{border-radius:100% 0 0 0}
.t2{border-radius:50%;background:linear-gradient(140deg,var(--accent-2),var(--accent))}
.t2::before{background:var(--ivory)}
.t3{border-radius:0 100% 0 100%;border:1.5px solid rgba(255,255,255,.3)}
.t3 b{display:block;margin-top:2px;font-family:"Pretendard Variable",Pretendard,sans-serif;font-style:normal;font-weight:700;font-size:1.25em;letter-spacing:-.04em}
.t4{border-radius:0 999px 999px 0;background:var(--ivory);color:var(--ink)}
.t4::before{background:linear-gradient(140deg,var(--accent-2),var(--accent))}
/* 아치: 가로 반경 50% + 세로 반경을 같은 길이로(두 칸 높이의 약 24%) — 999px로 주면 아래 모서리 반경까지 같이 줄어든다 */
.t5{grid-column:2;grid-row:2 / span 2;border-radius:50% 50% 22px 22px / 24% 24% 22px 22px}
.t5 img{object-position:44% 40%;filter:grayscale(1) contrast(1.05) brightness(1.02)}
.t5.ph::after{background:linear-gradient(180deg,transparent 50%,rgba(11,12,16,.6));mix-blend-mode:normal}
.t6{border-radius:0 0 100% 0}
.t7{border-radius:22px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.t8{border-radius:0 0 0 100%;background:linear-gradient(200deg,var(--accent),#a3224f)}
.hero[data-slide="1"] .t1{border-radius:50%}
.hero[data-slide="1"] .t2{border-radius:0 100% 0 0}
.hero[data-slide="1"] .t2::before,.hero[data-slide="1"] .t4::before{opacity:1}
.hero[data-slide="1"] .t3{border-radius:50%}
.hero[data-slide="1"] .t4{border-radius:999px 0 0 999px}
.hero[data-slide="1"] .t5{border-radius:22px 22px 50% 50% / 22px 22px 24% 24%}
.hero[data-slide="1"] .t6{border-radius:100% 0 0 0}
.hero[data-slide="1"] .t7{border-radius:50%}
.hero[data-slide="1"] .t8{border-radius:0 100% 0 0}

.hero-ctrl{display:flex;align-items:center;gap:18px;padding-top:8px;padding-bottom:38px}
.hero-count{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.hero-count b{color:#fff}
.hero-count i{font-style:normal}
.hero-bar{width:104px;height:3px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}
.hero-bar i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-bar i.is-run{animation:heroBar var(--hero-dur,7s) linear forwards}
.hero.is-paused .hero-bar i,.hero.is-hold .hero-bar i,.hero.is-away .hero-bar i{animation-play-state:paused}
@keyframes heroBar{to{transform:scaleX(1)}}
.hero-btns{display:flex;gap:2px}
.hero-btns button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.8);transition:background .25s,color .25s}
.hero-btns button:hover{background:rgba(255,255,255,.12);color:#fff}
.hero-btns .ic-play{display:none}
.hero.is-paused .hero-btns .ic-play{display:block}
.hero.is-paused .hero-btns .ic-pause{display:none}
.hero-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.hero-scroll i{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{translate:0 0;opacity:.5}50%{translate:0 5px;opacity:1}}

/* ============================================================
   인트로 + 고민 띠
   ============================================================ */
.intro{padding:clamp(88px,11vw,140px) 0 clamp(36px,5vw,64px);overflow:hidden}
.intro-in{max-width:calc(820px + var(--gut)*2);text-align:center}
.intro-in .lead{max-width:640px;margin:22px auto 0}
.mq-wrap{margin-top:clamp(44px,6vw,72px);display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq{display:flex;gap:14px;overflow:hidden}
.mq-track{display:flex;flex-shrink:0;gap:14px;min-width:100%;justify-content:space-around;animation:mq 56s linear infinite}
.mq-rev .mq-track{animation-direction:reverse}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
.mq-wrap.is-stopped .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-100% - 14px))}}
.mq li{padding:14px 24px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:16px;font-weight:500;white-space:nowrap;color:var(--text)}
.mq li::before{content:"“";color:var(--accent);font-weight:700;margin-right:2px}
.mq li::after{content:"”";color:var(--accent);font-weight:700;margin-left:2px}
.mq-rev li{background:var(--ivory);border-color:transparent}

/* ============================================================
   교육 대상 01~04
   ============================================================ */
.sols{padding:clamp(20px,3vw,40px) 0 clamp(60px,8vw,110px)}
.sol{padding:clamp(44px,5.4vw,76px) 0}
.sol-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6.5vw,96px);align-items:center}
.sol-flip .sol-media{order:2}
.sol-media{position:relative}
.sol-fig{position:relative;margin:0;aspect-ratio:29/24;border-radius:28px;overflow:hidden;background:var(--ivory-2);box-shadow:0 8px 8px -4px rgba(12,12,12,.04),0 26px 36px -10px rgba(12,12,12,.16)}
.sol-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.js .sol-media .sol-fig img{transform:scale(1.08)}
.js .sol-media.is-in .sol-fig img{transform:none}
.sol-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(11,12,16,.55))}
.sol-fig figcaption{position:absolute;left:22px;bottom:22px;z-index:1;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:14px;font-weight:500}
.sol-live{position:absolute;right:-20px;top:30px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px -10px rgba(12,12,12,.28);font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.sol-flip .sol-live{right:auto;left:-20px}
.sol-live i{width:8px;height:8px;border-radius:50%;background:#19c37d;animation:pulse 2.2s infinite}
.sol-live b{color:var(--accent-ink);font-weight:800;margin-right:1px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(25,195,125,.55)}70%{box-shadow:0 0 0 9px rgba(25,195,125,0)}100%{box-shadow:0 0 0 0 rgba(25,195,125,0)}}

.sol-no{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sol-no strong{font-size:clamp(44px,4.4vw,58px);font-weight:800;letter-spacing:-.055em;line-height:1}
.tag{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--text-2)}
.sol-desc{margin-top:16px;font-size:16.5px;color:var(--text-2);text-wrap:pretty}
.steps{margin-top:30px}
.steps li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding-bottom:20px}
.steps li:last-child{padding-bottom:0}
.steps li:not(:last-child)::before,.steps li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:32px;bottom:4px;width:1px;background:var(--line)}
.steps li:not(:last-child)::after{background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.step-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
.steps h4{margin-top:1px;font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.steps p{margin-top:3px;font-size:15px;line-height:1.62;color:var(--text-2)}
/* JS가 있으면 흐리게 시작해서 화면에 들어올 때 1→2→3 순서로 켠다 */
.js .steps li > div{opacity:.38;transition:opacity .6s var(--ease)}
.js .steps li .step-n{background:#fff;border-color:var(--line);color:var(--text-3)}
.js .steps li.is-on > div{opacity:1}
.js .steps li.is-on .step-n{background:var(--ink);border-color:var(--ink);color:#fff}
.js .steps li.is-on::after{transform:scaleY(1)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 30px}
.chips li{padding:6px 12px;border-radius:8px;background:var(--ivory);font-size:13.5px;font-weight:600;color:var(--text-2)}
/* 탭 영역 — 흐르는 문구 알약 24개(52px / 18px), 칩 목록 11개(35px / 16px) — 홈 (2026-09-23)
   껍데기 안에 inline <a> 하나만 있으면 눌리는 곳이 글자줄뿐이라 손가락으로 놓치기 쉽다.
   ::after 를 껍데기 전체에 깔아 어디를 눌러도 링크가 열리게 한다. 보이는 건 그대로다.
   ⚠ :has() 를 쓰지 말 것 — 지원 안 되는 브라우저에서 껍데기에 position 이 안 걸려
     ::after 가 훨씬 큰 조상 기준으로 퍼지고, 엉뚱한 자리의 클릭을 먹는다. */
.mq li,.chips li,.chips-lg li{position:relative}
.mq li>a::after,.chips li>a::after,.chips-lg li>a::after{content:"";position:absolute;inset:0}
.mq li>a:focus-visible,.chips li>a:focus-visible,.chips-lg li>a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   숫자 띠
   ============================================================ */
.stats{position:relative;isolation:isolate;overflow:hidden;padding:clamp(88px,10vw,136px) 0;background:var(--wine);color:#fff}
.stats-bg{position:absolute;inset:0;z-index:-1}
.stats .g1{width:50vw;height:50vw;left:-18vw;top:-26vw;background:radial-gradient(circle,var(--accent) 0,transparent 62%);opacity:.26}
.stats .g2{width:46vw;height:46vw;right:-16vw;bottom:-28vw;background:radial-gradient(circle,#b3205a 0,transparent 62%);opacity:.34}
.stats-head{max-width:900px}
.stats-head .h-xl{font-size:clamp(26px,3.3vw,44px);line-height:1.3}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(44px,6vw,72px);border-top:1px solid var(--line-d)}
/* column-reverse에서는 flex-end가 위쪽 — 라벨이 두 줄이어도 숫자 높이가 서로 맞는다 */
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:34px 20px 6px 0}
.stat + .stat{padding-left:28px;border-left:1px solid var(--line-d)}
.stat dd{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;white-space:nowrap;font-size:clamp(40px,5.2vw,70px);font-weight:700;line-height:1.05;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat dd em{font-style:normal;font-size:.46em;letter-spacing:-.02em;color:var(--accent-2);margin-left:4px}
.stat dd small{font-size:.36em;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.62);margin-right:8px}
.stat dt{margin-top:12px;font-size:15px;color:rgba(255,255,255,.62)}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(44px,6vw,72px)}
.trust li{padding:22px 22px 24px;border-radius:18px;border:1px solid var(--line-d);background:rgba(255,255,255,.045)}
.trust strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}
.trust span{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.6)}

/* ============================================================
   개강 일정
   ============================================================ */
.sch{padding:clamp(88px,10vw,136px) 0;background:var(--ivory)}
.sec-head{max-width:760px}
.sec-head .lead{margin-top:18px}
.sch-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:40px}
.sch-select select{height:42px;padding:0 42px 0 18px;border-radius:999px;border:1px solid var(--line);font:inherit;font-size:15px;font-weight:600;color:var(--text);-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='m5 8 5 5 5-5' fill='none' stroke='%2315151a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center/16px;cursor:pointer}
.sch-count{margin:22px 2px 12px;font-size:14.5px;color:var(--text-3)}
.sch-count b{color:var(--text);font-weight:700}
.sch-list{border-radius:24px;border:1px solid var(--line);background:#fff;overflow:hidden}
.sch-row{display:grid;grid-template-columns:104px minmax(0,1fr) 124px 92px 88px;align-items:center;gap:20px;padding:22px 28px;border-top:1px solid var(--line);transition:background .25s}
.sch-row:first-child,.sch-row.is-first{border-top-color:transparent}
.sch-row:hover{background:#fcfbf8}
.sch-end{display:contents}
.sch-date strong{display:block;font-size:27px;font-weight:700;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
.sch-date span{font-size:13.5px;font-weight:600;color:var(--text-3)}
.sch-main h3{font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.4}
.sch-main h3 em{font-style:normal;font-weight:600;font-size:.84em;color:var(--text-3);margin-left:3px}
.sch-main p{margin-top:2px;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.sch-venue{font-size:14.5px;line-height:1.5;color:var(--text-2)}
.sch-fee{font-size:15.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-badge{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.st-open .st-badge{background:#e6f6ee;color:var(--ok)}
.st-soon .st-badge{background:#ffeadf;color:var(--accent-ink)}
.st-tba .st-badge{background:#edf0f5;color:#47536a}
.st-past .st-badge,.st-done .st-badge{background:var(--ivory-2);color:var(--text-3)}
.st-past .sch-date strong,.st-done .sch-date strong,.st-past .sch-main h3,.st-done .sch-main h3,.st-past .sch-fee,.st-done .sch-fee{color:var(--text-3)}
.sch-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:999px;border:1px solid var(--line);font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.sch-cta .ic{width:15px;height:15px}
.sch-row:hover .sch-cta,.sch-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.sch-empty{margin-top:4px;padding:36px 28px;border-radius:24px;border:1px dashed var(--line);background:#fff;font-size:16px;color:var(--text-2);text-align:center}
.sch-empty a{font-weight:700;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sch-foot{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:20px}
.sch-past{padding:4px 2px;border:0;background:none;font-size:14.5px;color:var(--text-3);text-decoration:underline;text-underline-offset:4px;transition:color .25s}
.sch-past:hover{color:var(--ink)}
.sch-past i{font-style:normal}
.sch-more{display:flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:15px;font-weight:600;color:var(--text-2);transition:border-color .25s,color .25s}
.sch-more:hover{border-color:var(--ink);color:var(--ink)}
.sch-more .ic-plus{width:16px;height:16px;transition:transform .35s var(--ease)}
.sch-more[aria-expanded="true"] .ic-plus{transform:rotate(45deg)}

/* ============================================================
   추천의 글 · 수강 후기
   ============================================================ */
.voices{padding:clamp(88px,10vw,136px) 0;background:var(--ink);color:#fff;overflow:hidden}
.voices-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:32px;align-items:end}
.vc-wrap{margin-top:clamp(40px,5vw,64px)}
.vc-track{--pad:max(var(--gut),calc((100% - var(--wrap)) / 2));display:flex;gap:20px;overflow-x:auto;padding:4px var(--pad) 28px;scroll-padding-left:var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.vc-track::-webkit-scrollbar{display:none}
.vc{flex:0 0 min(440px,82vw);scroll-snap-align:start}
.vc blockquote{margin:0;height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:34px 32px 30px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:var(--ink-2);transition:border-color .35s,transform .35s var(--ease)}
.vc blockquote:hover{border-color:rgba(255,180,92,.5);transform:translateY(-4px)}
.vc p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.88);text-wrap:pretty}
.vc p::before{content:"“";display:block;height:34px;font-family:var(--serif);font-size:76px;line-height:1;color:var(--accent)}
.vc footer strong{display:block;font-size:16px;font-weight:700}
.vc footer span{font-size:14px;color:rgba(255,255,255,.55)}
.vc-nav{display:flex;justify-content:flex-end;gap:8px}
.vc-nav button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;transition:background .25s,color .25s,border-color .25s}
.vc-nav button:hover{background:#fff;border-color:#fff;color:var(--ink)}
.rv-title{margin-top:clamp(56px,7vw,88px);font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.03em}
.rv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.rv{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;height:100%;padding:24px 22px 22px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);text-align:left;color:#fff;transition:background .3s,border-color .3s,transform .35s var(--ease)}
.rv:hover{background:rgba(255,255,255,.07);border-color:rgba(255,180,92,.55);transform:translateY(-4px)}
.rv-no{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1;color:var(--accent-2)}
.rv strong{font-size:16.5px;font-weight:700;line-height:1.45;letter-spacing:-.02em}
.rv-ex{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.62);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rv-by{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;width:100%;font-size:13px;color:rgba(255,255,255,.5)}
.rv-by i{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:600;color:var(--accent-2);white-space:nowrap}
.rv-by .ic{width:14px;height:14px}

.rv-dialog{width:min(680px,calc(100vw - 32px));max-height:min(86vh,860px);padding:44px 44px 40px;border:0;border-radius:24px;background:#fff;color:var(--text);overflow-y:auto;box-shadow:0 40px 80px -20px rgba(0,0,0,.5)}
.rv-dialog::backdrop{background:rgba(11,12,16,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rv-dialog[open]{animation:riseIn .45s var(--ease)}
.rv-dialog h3{font-size:clamp(22px,2.4vw,28px);line-height:1.35;letter-spacing:-.035em;padding-right:36px}
.rv-dialog-by{margin-top:8px;font-size:14.5px;color:var(--text-3)}
.rv-dialog #rvP p{margin-top:18px;font-size:16.5px;line-height:1.85;color:var(--text-2)}
.dlg-x{position:sticky;float:right;top:0;margin:-14px -14px 0 0;z-index:1;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--ivory);transition:background .25s,color .25s}
.dlg-x:hover{background:var(--ink);color:#fff}

/* ============================================================
   데일 카네기 이야기
   ============================================================ */
.story{padding:clamp(88px,10vw,140px) 0}
.story-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,104px);align-items:center}
.story-fig{position:relative;margin:0}
.story-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:46% 50%;border-radius:50% 50% 28px 28px / 40% 40% 28px 28px;filter:grayscale(1) contrast(1.04)}
.story-year{position:absolute;right:-10px;bottom:36px;display:grid;place-items:center;width:clamp(92px,10vw,128px);aspect-ratio:1;border-radius:50%;background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--ink);font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,40px)}
.story-body p:not(.eyebrow){margin-top:18px;font-size:17px;line-height:1.85;color:var(--text-2);text-wrap:pretty}
.story-body .h-xl + p{margin-top:28px}
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--ink)}
.tl li{position:relative;padding:18px 14px 0 0}
.tl li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tl b{display:block;font-size:22px;font-weight:700;letter-spacing:-.04em;line-height:1.2}
.tl span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--text-2)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:clamp(88px,10vw,136px) 0;background:var(--ivory)}
.faq-in{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:start}
.faq-head{position:sticky;top:calc(var(--hd-h) + 32px)}
.faq-head .lead{margin:18px 0 30px}
.faq-panel{margin-top:22px;border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:24px 4px;cursor:pointer;list-style:none;font-size:clamp(16.5px,1.5vw,18.5px);font-weight:600;letter-spacing:-.02em;line-height:1.5;transition:color .25s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-ink)}
.qa-no{font-family:var(--serif);font-style:italic;font-weight:400;font-size:20px;color:var(--accent-ink)}
.qa .ic-plus{transition:transform .4s var(--ease)}
.qa[open] .ic-plus{transform:rotate(45deg)}
.qa-a{padding:0 44px 28px 62px;font-size:16.5px;line-height:1.85;color:var(--text-2)}
.qa[open] .qa-a{animation:riseIn .45s var(--ease)}

/* ============================================================
   상담 신청
   ============================================================ */
/* 상담 신청은 팝업이다. 페이지마다 하나씩 들어 있고 #consult 링크를 app.js가 받아 연다 */
.consult-dlg{width:min(1000px,calc(100vw - 28px));max-height:min(92vh,980px);padding:44px 44px 40px;border:0;border-radius:24px;background:var(--peach);color:var(--text);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 40px 80px -20px rgba(0,0,0,.5)}
.consult-dlg::backdrop{background:rgba(11,12,16,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.consult-dlg[open]{animation:riseIn .45s var(--ease)}
.consult-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,4vw,64px);align-items:start}
.consult-copy{padding-right:8px}
.consult-copy .lead{margin-top:20px}
.ticks{margin-top:30px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='m5.8 10.4 2.8 2.8 5.6-6' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}

.form{padding:clamp(24px,3.4vw,44px);border-radius:28px;background:#fff;box-shadow:0 8px 8px -4px rgba(12,12,12,.03),0 30px 60px -20px rgba(120,60,20,.18)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.fd{display:block;min-width:0}
.fd-wide{grid-column:1 / -1}
.fd > span:first-child{display:block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--text)}
.fd b{color:var(--accent-ink)}
.fd input,.fd select,.fd textarea{width:100%;min-width:0;height:54px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:#fbfaf7;font:inherit;font-size:16px;color:var(--text);transition:border-color .2s,box-shadow .2s,background .2s}
.fd textarea{height:auto;min-height:124px;padding:14px 16px;line-height:1.65;resize:vertical}
.fd select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fbfaf7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='m5 8 5 5 5-5' fill='none' stroke='%2315151a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center/16px}
.fd input::placeholder,.fd textarea::placeholder{color:#aaa79f}
.fd input:focus,.fd select:focus,.fd textarea:focus{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(21,21,26,.07)}
.fd input:focus-visible,.fd select:focus-visible,.fd textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fd .is-bad{border-color:#d9302a;box-shadow:0 0 0 4px rgba(217,48,42,.1)}
.fd-tel{display:flex;gap:8px}
/* 010 선택 칸: 화살표 없이 가운데 정렬·좁게 (첫 사이트에서 모바일 잘림 때문에 정한 방식) */
.fd-tel select{flex:0 0 58px;padding:0;text-align:center;text-align-last:center;background-image:none}
.fd-tel input{flex:1}
.agree{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;font-weight:600}
.agree input{flex-shrink:0;width:22px;height:22px;margin:0;accent-color:var(--ink);cursor:pointer}
.agree label{cursor:pointer}
.agree em{font-style:normal;color:var(--accent-ink)}
.agree-more{margin-top:10px;font-size:13.5px;color:var(--text-3)}
.agree-more summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.agree-more div{margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--ivory);line-height:1.75;color:var(--text-2)}
.form-submit{width:100%;height:60px;margin-top:24px;font-size:17px}
.form-submit[disabled]{opacity:.6;pointer-events:none}
.form-fine{margin-top:12px;font-size:13.5px;text-align:center;color:var(--text-3)}
.form-done{padding:48px 12px;text-align:center}
.form-done strong{display:block;font-size:22px;letter-spacing:-.03em}
.form-done p{margin-top:8px;color:var(--text-2)}
.form-done::before{content:"";display:block;width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='m5.8 10.4 2.8 2.8 5.6-6' fill='none' stroke='%23ffb45c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/34px no-repeat}

/* ============================================================
   푸터 · 따라다니는 버튼
   ============================================================ */
.ft{padding:clamp(64px,8vw,96px) 0 calc(40px + env(safe-area-inset-bottom));background:var(--ink);color:#fff}
.ft-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,96px)}
.ft-brand img{height:52px;width:auto}
.ft-brand p{margin:18px 0 26px;font-size:15px;color:rgba(255,255,255,.6)}
.ft-regions h3{font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}
.ft-regions div{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ft-regions a{padding:7px 14px;border-radius:999px;border:1px solid var(--line-d);font-size:14px;color:rgba(255,255,255,.82);transition:background .25s,color .25s,border-color .25s}
.ft-regions a:hover{background:#fff;border-color:#fff;color:var(--ink)}
.ft-fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-d);font-size:13.5px;color:rgba(255,255,255,.45)}
.ft-fine span{white-space:nowrap}

.float{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:50;display:flex;gap:8px;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .float:not(.is-on){opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden}
.float a{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;box-shadow:0 14px 30px -10px rgba(12,12,12,.4);transition:transform .3s var(--ease),background .3s,opacity .3s}
.float a:hover{transform:translateY(-2px)}
.float-tel{background:#fff;color:var(--ink);border:1px solid var(--line)}
.float-cta{background:var(--accent);color:var(--ink)}
.float-cta.is-off{display:none}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1180px){
  .hd-tag{display:none}
  .sch-row{grid-template-columns:96px minmax(0,1fr) 124px 92px 84px}
  .sch-venue{display:none}
  .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--hd-h:64px}
  .hd-nav,.hd-pill-cta{display:none}
  .hd-burger{display:block}
  .hd-tag{display:block}
  .logo{height:32px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:calc(var(--hd-h) + 36px);align-content:center}
  .mosaic{grid-template-rows:repeat(2,1fr);aspect-ratio:3/2;max-width:520px;gap:10px}
  .t5{grid-row:2;border-radius:50% 50% 16px 16px / 50% 50% 16px 16px}
  .hero[data-slide="1"] .t5{border-radius:16px 16px 50% 50% / 16px 16px 50% 50%}
  .t7,.t8{display:none}
  .hero-scroll{display:none}
  .hero-ctrl{padding-bottom:28px}
  .sol-in,.story-in,.faq-in,.consult-in,.ft-top{grid-template-columns:minmax(0,1fr)}
  .sol-flip .sol-media{order:0}
  .sol-live,.sol-flip .sol-live{right:14px;left:auto;top:14px}
  .faq-head,.consult-copy{position:static}
  .voices-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){padding-left:0;border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line-d)}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-fig{max-width:440px}
}
@media (max-width:760px){
  .sch-list{border-radius:20px}
  .sch-row{grid-template-columns:70px minmax(0,1fr);gap:4px 14px;align-items:start;padding:20px 18px}
  .sch-date strong{font-size:22px}
  /* 수강료·상태·상담 버튼 줄은 카드 전체 폭을 쓴다 (오른쪽 칸 안에 두면 버튼이 밀려 나간다) */
  .sch-end{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
  .sch-fee{text-align:left;font-size:15px;margin-right:auto}
  .sch-cta{padding:0 14px;height:36px}
  .sch-tools{align-items:stretch}
  .sch-select,.sch-select select{width:100%}
}
@media (max-width:640px){
  :root{--gut:20px}
  body{font-size:16px}
  /* 좁은 화면에서는 제목의 강제 줄나눔을 풀고 자연 줄바꿈(balance)에 맡긴다 — 히어로 제목만 두 줄 유지 */
  .ln{display:inline}
  .hero-title .ln{display:block}
  .hd-tag{display:none}
  .hd-in{gap:12px}
  .hd-pill-new{height:36px;padding:0 13px;font-size:13px}
  .hd-pill-new b{display:none}
  .hero-actions .btn{flex:1 1 auto}
  .btn{height:52px;padding:0 22px;font-size:15.5px}
  .mq li{padding:12px 18px;font-size:15px}
  .sol-fig{border-radius:22px}
  .sol-fig figcaption{left:16px;bottom:16px;font-size:13px}
  .stat{padding:26px 12px 4px 0}
  .stat + .stat{padding-left:18px}
  .stat:nth-child(3){padding-left:0}
  .trust{gap:10px}
  .trust li{padding:18px 16px 20px}
  .trust strong{font-size:16.5px}
  .trust span{font-size:13.5px}
  /* 한 번에 한 장만 보이는 화면에서는 카드 높이를 글 길이에 맞춘다 */
  .vc-track{align-items:flex-start}
  .vc blockquote{padding:28px 24px 26px}
  /* 후기 8장은 세로로 쌓지 않고 옆으로 넘긴다 */
  .rv-grid{display:flex;gap:12px;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding:0 var(--gut) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);scrollbar-width:none}
  .rv-grid::-webkit-scrollbar{display:none}
  .rv-grid li{flex:0 0 min(300px,80vw);scroll-snap-align:start}
  .rv-dialog{padding:36px 24px 30px}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .tl li:nth-child(n+3)::before{top:-4px}
  .tl li:nth-child(n+3){border-top:1px solid var(--ink);margin-top:0}
  .story-year{right:4px;bottom:20px}
  .qa summary{grid-template-columns:40px minmax(0,1fr) 22px;padding:20px 2px}
  .qa-a{padding:0 8px 24px 52px;font-size:15.5px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form{border-radius:22px}
  .ft-fine{flex-direction:column}
  .float{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .float a{flex:1;height:52px;padding:0 12px}
}
@media (max-width:350px){
  .hd-pill-new{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .tile{animation:floaty 8s ease-in-out infinite}
  .t2,.t6{animation-duration:10s;animation-delay:-3s}
  .t4,.t8{animation-duration:9s;animation-delay:-5s}
  .t5{animation-duration:12s;animation-delay:-2s}
}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
  .mq{overflow-x:auto}
}

/* 상담 팝업 — 좁은 화면에서는 화면을 꽉 채운다. 항목이 많아 판으로 띄우면 스크롤이 답답하다 */
@media (max-width:640px){
  .consult-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:54px 18px 32px}
  .consult-dlg .dlg-x{margin:-40px -4px 0 0}
  .consult-in{gap:26px}
}

/* ============================================================
   하위 페이지 — 낮은 히어로 · 브레드크럼 · 카드 · 목록 · 표
   build.js가 style.css 뒤에 이어 붙여 docs/style.css를 만든다
   ============================================================ */
.hero-sm{min-height:0;padding:calc(var(--hd-h) + clamp(36px,5vw,64px)) 0 clamp(44px,6vw,76px)}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:26px;font-size:13.5px;color:rgba(255,255,255,.55)}
.crumbs li{display:flex;gap:10px;min-width:0}
.crumbs li+li::before{content:"/";opacity:.45}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs span{color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,var(--wrap))}
.hero-sm .hero-eyebrow{margin-top:18px}
.hero-sm .hero-title{font-size:clamp(30px,4.6vw,58px);max-width:920px}
.hero-sm .hero-sub{max-width:680px}
.hero-sm .hero-actions{margin-top:30px}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px 44px;margin:30px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hero-meta div{min-width:0;max-width:340px}
.hero-meta dt{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.5)}
.hero-meta dd{margin:5px 0 0;font-size:15.5px;font-weight:600;line-height:1.5;color:#fff}
.hero-chips{margin-top:26px}

.sec{padding:clamp(72px,9vw,120px) 0}
.sec-alt{background:var(--ivory)}
.sec-tight{padding-top:clamp(40px,5vw,64px)}
.sec .sec-head{margin-bottom:clamp(32px,4vw,52px)}
.sec-link{margin-top:26px;font-size:15px;font-weight:600}
.sec-link a{text-decoration:underline;text-underline-offset:4px;color:var(--text-2);transition:color .2s}
.sec-link a:hover{color:var(--accent-ink)}
.narrow{max-width:calc(780px + var(--gut)*2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start}
.split-fig{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--ivory-2);box-shadow:0 8px 8px -4px rgba(12,12,12,.04),0 26px 36px -10px rgba(12,12,12,.14)}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split-fig figcaption{position:absolute;left:18px;bottom:18px;padding:6px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:13.5px;font-weight:500}
.prose p:not(.eyebrow){margin-top:16px;font-size:17px;line-height:1.85;color:var(--text-2);text-wrap:pretty}
.prose .h-lg+p,.prose .h-xl+p{margin-top:24px}

.grid-2,.grid-3,.grid-4{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;border-radius:22px;border:1px solid var(--line);background:#fff;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.card:hover,.js .card.reveal.is-in:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 8px 8px -4px rgba(12,12,12,.04),0 26px 40px -14px rgba(12,12,12,.18)}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.card>p{font-size:14.5px;line-height:1.6;color:var(--text-2)}
.card-code,.card-word{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1;color:var(--accent-ink)}
.card-meta{display:grid;gap:6px;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.card-meta div{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;font-size:13.5px;line-height:1.5}
.card-meta dt{color:var(--text-3);font-weight:600}
.card-meta dd{margin:0;color:var(--text-2)}
.card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.card-foot .dot{width:7px;height:7px;border-radius:50%;background:#19c37d;flex-shrink:0}
.card-foot b{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ivory);transition:background .3s,color .3s;flex-shrink:0}
.card:hover .card-foot b{background:var(--ink);color:#fff}
/* 과정이 하나뿐인 묶음에 쓰는 가로형 카드 */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:stretch;border-radius:24px;border:1px solid var(--line);background:#fff;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.feature:hover,.js .feature.reveal.is-in:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 8px 8px -4px rgba(12,12,12,.04),0 26px 40px -14px rgba(12,12,12,.18)}
.feature:hover .card-foot b{background:var(--ink);color:#fff}
.feature-fig{position:relative;display:block;min-height:260px;background:var(--ivory-2)}
.feature-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-body{display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3vw,40px)}
.feature-body strong{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.035em;line-height:1.35}
.feature-lead{font-size:16px;line-height:1.7;color:var(--text-2);text-wrap:pretty}
.feature-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.feature-meta i{padding:6px 12px;border-radius:8px;background:var(--ivory);font-style:normal;font-size:13.5px;font-weight:600;color:var(--text-2)}
.sec-alt .feature-meta i{background:var(--ivory-2)}
.feature .card-foot{border-top:1px solid var(--line);margin-top:auto}
.card-concern h3{font-size:17.5px}
.card-region h3{font-size:20px}
.reg-group+.reg-group{margin-top:clamp(40px,5vw,64px)}
.reg-group h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px;font-size:20px;letter-spacing:-.03em}
.reg-group h3 small{font-size:13.5px;font-weight:500;color:var(--text-3)}

.chips-lg{display:flex;flex-wrap:wrap;gap:8px}
.chips-lg a,.chips-lg span{display:inline-flex;align-items:center;min-height:42px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;font-weight:600;color:var(--text);transition:background .25s,color .25s,border-color .25s}
.chips-lg a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.chips-lg a small{margin-left:7px;font-size:12.5px;font-weight:700;color:var(--accent-ink)}
.chips-lg a:hover small{color:var(--accent-2)}
.regs-strip{margin-top:clamp(40px,5vw,56px)}
.regs-strip h3{margin-bottom:14px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.intro-more{margin-top:clamp(36px,4vw,48px);text-align:center}
.mq li a{color:inherit}
.stats-more,.voices-more{margin-top:clamp(32px,4vw,44px)}
.story-body .story-more{margin-top:32px}
.faq-more{margin-top:18px;font-size:15px;font-weight:600}
.faq-more a{text-decoration:underline;text-underline-offset:4px;color:var(--text-2)}
.faq-more a:hover{color:var(--accent-ink)}

.o-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.o-grid li{padding:24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.sec-alt .o-grid li{border-color:transparent}
.o-grid .n{display:block;margin-bottom:12px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1;color:var(--accent-ink)}
.o-grid strong{display:block;font-size:17.5px;font-weight:700;letter-spacing:-.025em;line-height:1.4}
.o-grid strong em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.95em;color:var(--accent-ink);margin-left:4px}
.o-grid p{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.o-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.o-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.cur{border-top:1px solid var(--ink)}
.cur li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6}
.cur b{font-weight:700;letter-spacing:-.02em}
.cur span{color:var(--text-2)}
.note{margin-top:14px;font-size:14px;color:var(--text-3)}
.dl{border-top:1px solid var(--ink)}
.dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 4px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.65}
.dl dt{font-weight:700;letter-spacing:-.02em}
.dl dd{margin:0;color:var(--text-2)}

.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;padding:26px 28px;border-radius:20px;background:var(--peach);border:1px solid #ffd9c2}
.callout strong{padding-top:2px;font-size:15px;font-weight:700;color:var(--accent-ink);white-space:nowrap}
.callout p{font-size:16px;line-height:1.75;color:var(--text-2)}

.ticks-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.ticks-2 li{position:relative;padding-left:34px;font-size:17px;line-height:1.6;font-weight:500}
.ticks-2 li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='m5.8 10.4 2.8 2.8 5.6-6' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat}

.venue{padding:28px 30px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.venue h3{font-size:14px;font-weight:600;color:var(--text-3)}
.venue p{margin-top:10px;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.5}
.venue small{display:block;margin-top:12px;font-size:14px;line-height:1.6;color:var(--text-2)}
.alumni+.alumni{margin-top:26px}
.alumni h3{margin-bottom:14px;font-size:18px;letter-spacing:-.025em}
.alumni-sub{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.alumni-sub h3{font-size:15px;color:var(--text-3)}
.alumni-sub p{margin-top:6px;font-size:15px;line-height:1.7;color:var(--text-2)}
.alumni-sub p b{color:var(--text);margin-right:6px}

.quote-big{margin:0;padding:clamp(40px,5vw,64px);border-radius:28px;background:var(--ink);color:#fff}
.quote-big p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.6vw,34px);line-height:1.45;text-wrap:pretty}
.quote-big p::before{content:"“ ";color:var(--accent)}
.quote-big footer{margin-top:22px;font-size:15px;color:rgba(255,255,255,.6)}
.quote-big footer b{color:#fff;margin-right:8px}

.endorse{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.endorse blockquote{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:30px 30px 26px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.endorse p{font-size:16.5px;line-height:1.8;color:var(--text);text-wrap:pretty}
.endorse p::before{content:"“";display:block;height:30px;font-family:var(--serif);font-size:64px;line-height:1;color:var(--accent)}
.endorse footer strong{display:block;font-size:15.5px}
.endorse footer span{font-size:13.5px;color:var(--text-3)}
.review{padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--line)}
.review:first-child{border-top:0;padding-top:0}
.review-no{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--accent-ink)}
.review h3{margin-top:8px;font-size:clamp(21px,2.2vw,26px);letter-spacing:-.035em;line-height:1.35}
.review-by{margin-top:6px;font-size:14.5px;color:var(--text-3)}
.review p:not(.review-by){margin-top:16px;font-size:16.5px;line-height:1.85;color:var(--text-2);text-wrap:pretty}

.sch-main h3 a:hover,.sch-main p a:hover{text-decoration:underline;text-underline-offset:3px}
.sec .sch-empty{margin-top:0}

/* 푸터 열 */
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ft-col h3{font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}
.ft-col div{display:grid;gap:9px;margin-top:14px}
.ft-col a{font-size:14.5px;color:rgba(255,255,255,.82);transition:color .2s}
.ft-col a:hover{color:var(--accent-2)}
.ft-regions{margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-d)}
.ft-regions h3{font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}

@media (max-width:980px){
  .split,.ticks-2,.endorse,.feature{grid-template-columns:minmax(0,1fr)}
  .feature-fig{min-height:0;aspect-ratio:16/9}
  .grid-3,.grid-4,.o-grid,.o-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-meta{gap:12px 28px}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4,.o-grid,.o-grid-2,.o-grid-4{grid-template-columns:minmax(0,1fr)}
  .cur li,.dl div{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 2px}
  .callout{grid-template-columns:minmax(0,1fr);gap:8px;padding:22px 20px}
  .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .crumbs{font-size:12.5px;margin-bottom:20px}
  .hero-sm{padding-top:calc(var(--hd-h) + 28px)}
  .hero-meta{gap:10px 22px;padding-top:20px}
  .venue{padding:22px 20px}
  .chips-lg a,.chips-lg span{height:38px;padding:0 14px;font-size:14px}
  .ticks-2 li{font-size:16px}
  .card{padding:22px 20px 20px}
}

/* 접수 실패 안내 */
.form-fail{margin-top:14px;padding:14px 16px;border-radius:12px;background:#fdecea;border:1px solid #f5c6c0;font-size:14.5px;line-height:1.65;color:#8a2018}
.form-fail a{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* 동의를 켜지 않은 채 제출했을 때 */
.agree input.is-bad{outline:2px solid #d9302a;outline-offset:2px}
/* 과정·지역 페이지의 지난 기수 접기 버튼 */
.sec .sch-foot{margin-top:18px}

/* 어두운 히어로 위의 칩 — .chips-lg 뒤에 와야 덮이지 않는다 */
.hero-chips a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.hero-chips a:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* 흐르는 띠 멈춤 버튼 */
.mq-stop{display:block;margin:16px auto 0;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--text-2);transition:border-color .2s,color .2s}
.mq-stop:hover{border-color:var(--ink);color:var(--ink)}

/* 지역 페이지 — 같은 지사 관할의 모집 중인 기수 */
.near-sched{margin-top:clamp(32px,4vw,48px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.near-sched h3{font-size:19px;font-weight:700;letter-spacing:-.025em}
.near-sched>p{margin:8px 0 20px;font-size:15px;line-height:1.65;color:var(--text-2)}
/* 수강료 포함 항목 안내 */
.fee-note{display:block;margin-top:4px;padding:0;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.fee-note:hover{color:var(--ink)}

@media (max-width:640px){
  .chips-lg a,.chips-lg span{min-height:38px;padding:7px 14px}
  .stat dd{white-space:normal}
}

/* 검색 키워드 페이지 */
.card-topic .card-word{font-size:16px}
.card-topic h3{font-size:20px}
.topic-regions+.topic-regions{margin-top:clamp(28px,3vw,40px)}
.topic-regions h3{margin-bottom:14px;font-size:19px;letter-spacing:-.025em}
.topic-regions h3 a{text-decoration:underline;text-underline-offset:4px}
.topic-regions h3 a:hover{color:var(--accent-ink)}

/* ============================================================
   모바일에서 접는 목록 (details.fold)
   링크 목록·반복 목록만 접는다. 넓은 화면에서는 build.js 의 FOLD_OPEN 이
   파싱 도중에 열어 두므로 예전 모습 그대로다
   ============================================================ */
.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;opacity:.55;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.fold[open] > summary::after{transform:translateY(1px) rotate(-135deg)}

/* 주제별 안내 — 주제 16개 × 지역 24개 */
.topic-regions > summary{font-size:19px;font-weight:700;letter-spacing:-.025em}
.topic-regions > summary small{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-3)}
.topic-regions > summary::after{margin-left:0}
.topic-regions .sec-link{margin-top:14px}

/* 푸터 */
.ft-col > summary,.ft-regions > summary{font-size:14px;font-weight:600;color:rgba(255,255,255,.5)}

/* 후기 전문 */
.review-more > summary{display:inline-flex;margin-top:14px;font-size:15px;font-weight:600;color:var(--accent-ink)}
.review-more[open] > summary{display:none}

@media (min-width:900px){
  .fold > summary{cursor:default;pointer-events:none}
  .fold > summary::after,.topic-regions > summary small{display:none}
  .topic-regions > summary{margin-bottom:14px}
  .review-more > summary{display:none}
}
@media (max-width:899px){
  .topic-regions{border-top:1px solid var(--line)}
  .topic-regions:last-of-type{border-bottom:1px solid var(--line)}
  .topic-regions+.topic-regions{margin-top:0}
  .topic-regions > summary{padding:17px 2px;font-size:17px}
  .topic-regions[open] > summary{padding-bottom:12px}
  .topic-regions .sec-link{margin:14px 0 20px}

  .ft-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .ft-col,.ft-regions{border-top:1px solid var(--line-d)}
  .ft-regions{margin-top:0;padding-top:0}
  .ft-col > summary,.ft-regions > summary{padding:15px 0;font-size:15px;color:rgba(255,255,255,.82)}
  .ft-col div,.ft-regions div{margin:0 0 18px}
  .ft-top{gap:28px}
}

/* ============================================================
   옆으로 넘기는 목록의 위치 표시 (app.js 가 실제로 넘칠 때만 붙인다)
   ============================================================ */
.hs-meta{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13.5px;color:var(--text-3)}
.hs-hint{white-space:nowrap;transition:opacity .3s}
.hs-meta.is-moved .hs-hint{opacity:.55}
.hs-count{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.hs-count b{font-weight:700;color:var(--text)}
.hs-bar{flex:1;min-width:40px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.hs-bar i{display:block;height:100%;background:var(--ink);transform-origin:left center;transform:scaleX(.1);transition:transform .2s var(--ease)}
.voices .hs-meta{color:rgba(255,255,255,.62)}
.voices .hs-count b{color:#fff}
.voices .hs-bar{background:rgba(255,255,255,.2)}
.voices .hs-bar i{background:#fff}
.vc-nav{align-items:center}
.vc-nav .hs-meta{flex:1;margin:0 8px 0 0}

/* ============================================================
   모바일 길이 — 내용은 그대로 두고 여백과 크기만 줄인다
   ============================================================ */
@media (max-width:760px){
  .sch-row{padding:15px 16px;gap:2px 12px}
  .sch-date strong{font-size:20px}
  .sch-main h3{font-size:16.5px}
  .sch-main p{font-size:13.5px;line-height:1.5}
  .sch-end{margin-top:9px;padding-top:9px}
  .sch-cta{height:34px}
}
@media (max-width:640px){
  .sol-fig{aspect-ratio:16/10}
  .steps{margin-top:20px}
  .steps li{gap:12px;padding-bottom:13px}
  .steps h4{font-size:15.5px}
  .steps p{font-size:14px;line-height:1.55}
  .review p:not(.review-by){font-size:15.5px;line-height:1.75}
}

/* 긴 링크 목록 — 좁은 화면에서는 앞 8개만 (app.js 가 "N개 더 보기" 버튼을 붙인다) */
.chips-more-btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;height:42px;padding:0 18px;border-radius:999px;border:1px dashed var(--line);background:transparent;font-size:14.5px;font-weight:600;color:var(--text-2)}
.chips-more-btn:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}
@media (max-width:899px){
  .js .chips-more:not(.is-open) > :nth-child(n+9){display:none} /* 스크립트가 없으면 버튼도 없으니 숨기지 않는다 */
}
@media (min-width:900px){
  .chips-more-btn{display:none}
}

/* 홈 교육 대상 블록의 진행 방식 */
.sol-steps > summary{margin-top:22px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--text)}
.sol-steps[open] > summary{border-bottom-color:transparent}
.sol-steps .steps{margin-top:8px;margin-bottom:6px}
@media (min-width:900px){
  .sol-steps > summary{display:none}
  .sol-steps .steps{margin-top:30px;margin-bottom:0}
}

/* 따라다니는 버튼(높이 54 + 아래 여백 24)이 푸터 마지막 줄(정보 업데이트 날짜)을 덮지 않게 */
.ft{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media (max-width:640px){
  .ft{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}