*{box-sizing:border-box;margin:0;padding:0}
:root{
  --oat:#F6F1E7; --ink:#2A2621; --olive:#7C8A55; --olived:#5C6939; --clay:#D8B7A4; --line:#DED5C4;
  --paper:#FBF8F2; --deep:#221F1A;
  --s1:14px; --s2:28px; --s3:50px; --s4:84px;
  --inset:32px; --maxw:1240px;
  --serif:"Noto Serif KR",serif;
  --sans:Pretendard,-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{
  background:var(--oat); color:var(--ink); font-family:var(--sans); font-weight:300;
  font-size:17px; line-height:1.78; word-break:keep-all; overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--olive); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--inset)}
section{padding-block:var(--s4)}
.dsp{font-family:var(--serif); font-weight:500; letter-spacing:-.015em; line-height:1.42}
h2.dsp{font-size:clamp(26px,3.1vw,40px); margin-bottom:var(--s2)}
h3.dsp{font-size:20px; line-height:1.5}
p{max-width:58ch}
.lab{font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.12em; color:var(--olived); text-transform:none}
.muted{color:#6B6459}

/* ── 섹션 머리 (반복 장식 문법) ── */
.shead{display:flex; align-items:center; gap:16px; margin-bottom:var(--s2)}
.sno{flex:0 0 auto; white-space:nowrap; font-family:var(--serif); font-weight:500; font-size:15px; color:var(--olived)}
.shead .hair{flex:1 1 auto; height:1px; background:var(--line); transform-origin:left; transition:transform .9s var(--ease)}
.js .shead .hair{transform:scaleX(0)}
.js .shead .hair.in{transform:scaleX(1)}

/* ── 헤더 ── */
body>header{position:sticky; top:0; z-index:40; background:rgba(246,241,231,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hbar{display:flex; align-items:center; gap:24px; min-height:72px}
.brand{display:flex; flex-direction:column; line-height:1.15; text-decoration:none; flex:0 0 auto}
.brand b{font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:-.01em}
.brand span{font-size:10px; letter-spacing:.16em; color:var(--olived)}
nav.main{margin-left:auto; display:flex; gap:26px}
nav.main a{font-size:15px; text-decoration:none; padding:6px 0; border-bottom:1px solid transparent; transition:border-color .3s var(--ease), color .3s}
nav.main a:hover{border-color:var(--olived); color:var(--olived)}
.hcta{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  border:1px solid var(--ink); padding:9px 16px; font-size:15px; text-decoration:none; color:var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease)}
.hcta:hover{background:var(--ink); color:var(--oat)}
.hcta svg{width:.95em;height:.95em;fill:currentColor;flex:0 0 auto}
.burger{display:none; flex:0 0 auto; margin-left:auto; width:44px; height:38px; border:1px solid var(--line); background:none; cursor:pointer; position:relative}
.burger i{position:absolute; left:11px; width:20px; height:1px; background:var(--ink)}
.burger i:nth-child(1){top:13px} .burger i:nth-child(2){top:19px} .burger i:nth-child(3){top:25px}
#mnav{display:none; border-top:1px solid var(--line); padding-block:var(--s1) var(--s2)}
#mnav a{display:block; padding:11px 0; text-decoration:none; border-bottom:1px solid var(--line); font-size:16px}

/* ── 히어로 ── */
.hero{position:relative; height:clamp(480px,70vh,600px); padding:0; display:flex; align-items:flex-end; overflow:hidden}
.hero-media{position:absolute; inset:0; overflow:hidden; background:none}
.hero-media img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto; max-width:none; max-height:none;
  filter:saturate(.9) contrast(1.04) brightness(.96)}
.hero-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,18,14,.40) 0%,rgba(20,18,14,.10) 24%,rgba(20,18,14,.46) 46%,rgba(20,18,14,.72) 72%,rgba(20,18,14,.88) 100%)}
.hero .wrap{position:relative; z-index:2; width:100%; padding-bottom:var(--s3)}
.hero .eyebrow{color:#F7F0E3; font-size:15px; letter-spacing:.14em; margin-bottom:var(--s1); max-width:none}
.hero .eyebrow em{font-style:normal; font-family:var(--serif); font-size:18px; letter-spacing:.02em}
.hero h1{font-family:var(--serif); font-weight:500; color:#FCF8F0; font-size:clamp(28px,4.1vw,52px); line-height:1.34; letter-spacing:-.02em; text-shadow:0 2px 18px rgba(20,18,14,.42)}
.hero p{color:#EDE4D5; margin-top:var(--s2); max-width:52ch; font-size:16.5px}
.hero .hrule{width:64px; height:1px; background:var(--clay); margin-bottom:var(--s2)}

/* ── 전환 카피 ── */
.bridge{padding-block:var(--s3)}
.bridge p{font-family:var(--serif); font-weight:400; font-size:clamp(18px,2vw,23px); color:var(--olived); max-width:44ch; line-height:1.62}

/* ── 2열 ── */
.two{display:grid; grid-template-columns:1.02fr 1fr; gap:var(--s3); align-items:start}
.two.flip .col-media{order:2}
.col-media,.col-text{min-width:0}
.fig{overflow:hidden; background:#E8E1D2}
.fig img{width:100%; height:100%; object-fit:cover; filter:saturate(.92) sepia(.06) contrast(1.02)}
.r-1610{aspect-ratio:1280/800} .r-bull{aspect-ratio:960/426} .r-rose{aspect-ratio:860/426}
.r-room{aspect-ratio:1600/1066} .r-oil{aspect-ratio:600/392} .r-stk{aspect-ratio:660/456}
figcaption{font-size:13px; letter-spacing:.06em; color:#6B6459; margin-top:10px}

/* 재료 표본 스트립 */
.strip{display:grid; grid-template-columns:1.531fr 1.447fr; gap:var(--s1); margin-top:var(--s1)}

/* 세 가지 동선 */
.paths{list-style:none; margin-top:var(--s3); border-top:1px solid var(--line)}
.paths li{display:grid; grid-template-columns:52px 1fr; gap:var(--s2); padding-block:var(--s2); border-bottom:1px solid var(--line)}
.paths .n{font-family:var(--serif); font-size:15px; color:var(--olived)}
.paths h3{margin-bottom:4px}
.paths p{font-size:16.5px; color:#5C564C; max-width:46ch}

/* ── 커리큘럼 모듈 ── */
.mods{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s3)}
.mod{background:var(--paper); padding:var(--s2) 22px var(--s3); font-size:16.5px; min-width:0}
.mod .mno{font-family:var(--serif); font-size:14px; color:var(--olived); display:block; margin-bottom:10px}
.mod h3{font-size:18px; margin-bottom:14px}
.mod ul{list-style:none}
.mod li{font-size:16.5px; line-height:1.62; color:#5C564C; padding-left:12px; position:relative; margin-bottom:6px}
.mod li::before{content:"·"; position:absolute; left:0; color:var(--clay)}
.finish-note{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); align-items:baseline; margin-top:var(--s2)}
.finish-note .k{font-size:16.5px}
.note{font-size:15px; color:#6B6459; margin-top:var(--s1)}

/* ── 기법 칩 ── */
.duo{display:grid; grid-template-columns:2.25fr 2.02fr; gap:var(--s1); margin-bottom:var(--s3)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s2)}
.chips span{font-size:17px; border:1px solid var(--line); padding:7px 15px; background:var(--paper)}
.chips span.key{border-color:var(--olived); color:var(--olived)}

/* ── SIGNATURE: 교육원 코드판 ── */
.codewrap{display:grid; grid-template-columns:minmax(0,560px) 1fr; gap:var(--s3); margin-top:var(--s3); align-items:start}
.board{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; min-width:0}
.cell{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:17px; white-space:nowrap; font-variant-numeric:tabular-nums; color:#B4A992; border:1px solid var(--line); background:var(--paper);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease)}
.cell.on{background:var(--olived); border-color:var(--olived); color:#FBF8F2}
.cell.hot{background:var(--ink); border-color:var(--ink); color:var(--clay)}
.legend{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); margin-top:var(--s2); font-size:15px; color:#5C564C}
.legend i{display:inline-block; width:13px; height:13px; border:1px solid var(--line); background:var(--paper); margin-right:8px; vertical-align:-1px}
.legend i.on{background:var(--olived); border-color:var(--olived)}
.roster{border-top:1px solid var(--line); min-width:0}
.roster li{list-style:none; display:grid; grid-template-columns:56px 1fr; gap:16px; padding-block:9px; border-bottom:1px solid var(--line); font-size:17px; transition:background .5s var(--ease), color .5s var(--ease)}
.roster li .rc{font-variant-numeric:tabular-nums; color:var(--olived); white-space:nowrap}
.roster li.hot{background:var(--paper); color:var(--ink)}
.roster li.hot .rc{color:var(--ink); font-weight:500}
.rlist{columns:2; column-gap:var(--s2)}
.rlist li{break-inside:avoid}
.nowline{margin-top:var(--s2); border-left:2px solid var(--olive); padding-left:16px; font-size:16.5px; min-height:56px}
.nowline b{font-family:var(--serif); font-weight:500}
.nowline .sub{display:block; font-size:15px; color:#6B6459}

/* ── 지표 밴드 ── */
.stats{background:var(--deep); color:#EFE7D8}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2)}
.stats .st{border-top:1px solid rgba(216,183,164,.4); padding-top:var(--s2); min-width:0}
.stats .num{display:block; font-family:var(--serif); font-weight:500; font-size:clamp(38px,4.6vw,60px); line-height:1.1; color:#FBF8F2; font-variant-numeric:tabular-nums}
.stats .num sub{font-size:.42em; vertical-align:baseline; color:var(--clay); margin-left:4px}
.stats .cap{display:block; font-size:15px; color:#C9BFAC; margin-top:10px}
.stats h2{color:#FBF8F2}
.stats .lab{color:var(--clay)}
.stats .shead .hair{background:rgba(216,183,164,.35)}

/* ── 문의 ── */
.contact .lines{border-top:1px solid var(--line); margin-top:var(--s3)}
.crow{display:grid; grid-template-columns:120px 1fr; gap:var(--s2); align-items:baseline; padding-block:var(--s2); border-bottom:1px solid var(--line)}
.crow .k{font-size:15px; letter-spacing:.08em; color:#6B6459}
.crow .v{font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.2vw,26px)}
.crow .v a{text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .35s var(--ease)}
.crow .v a:hover{border-color:var(--olive)}
.crow .v svg{width:.72em; height:.72em; fill:currentColor; margin-right:10px; vertical-align:baseline}
.crow .sub{display:block; font-size:15px; font-family:var(--sans); font-weight:300; color:#6B6459; margin-top:6px}

/* ── 푸터 ── */
footer{border-top:1px solid var(--line); padding-block:var(--s3) 26px; font-size:15px; color:#6B6459}
footer .fbrand{font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink); margin-bottom:var(--s1)}
footer .fbrand span{display:block; font-family:var(--sans); font-weight:400; font-size:10px; letter-spacing:.16em; color:var(--olived)}
footer p{margin-bottom:6px; max-width:74ch}

/* ── 리빌 ── */
.js .rv{opacity:0; transform:translateY(64px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .rv.in{opacity:1; transform:none}

@media (max-width:900px){
  :root{--s1:11px; --s2:20px; --s3:30px; --s4:48px; --inset:20px}
  body{font-size:16.5px; line-height:1.68}
  nav.main,.hcta{display:none}
  .burger{display:block}
  .hbar{min-height:64px}
  .hero{height:clamp(440px,72vh,540px)}
  .two,.codewrap{grid-template-columns:1fr; gap:var(--s2)}
  .two.flip .col-media{order:0}
  .duo{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr 1fr; gap:var(--s2)}
  .paths li{grid-template-columns:40px 1fr; gap:var(--s1); padding-block:var(--s1)}
  .paths{margin-top:var(--s2)}
  .crow{grid-template-columns:1fr; gap:4px; padding-block:var(--s2) var(--s1)}
  .bridge{padding-block:var(--s2)}
  .board{gap:3px}
  .cell{font-size:16.5px; letter-spacing:-.03em}
  .chips span{padding:6px 12px}
  h2.dsp{margin-bottom:var(--s1)}

  /* 모듈은 가로 스와이프 레일로 접어 높이를 줄인다 */
  .mods{display:grid; grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:250px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; gap:1px; margin-top:var(--s2); padding-bottom:2px}
  .mod{scroll-snap-align:start; padding:var(--s2) 18px var(--s2)}
  .mods .mod.rv{opacity:1 !important; transform:none !important}

  /* 명부는 칩으로 접는다 */
  .roster{border-top:0; display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s1)}
  .rlist{columns:auto}
  .roster li{display:inline-flex; grid-template-columns:none; gap:7px; padding:4px 10px;
    border:1px solid var(--line); background:var(--paper); font-size:16.5px; align-items:baseline}
  .nowline{margin-top:var(--s2)}
}
@media (max-width:480px){
  .hero .eyebrow .en{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.js .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .shead .hair,.js .shead .hair{transform:scaleX(1) !important; transition:none !important}
  *{animation:none !important}
}