@charset "utf-8";
/* 도래 피아노 교습소 — MUSIC_ACADEMY_MULTI_DORAE
   HOW: virtualpianoacademy.co (남색+골드 · 세리프 워드마크 · 원형 다이어그램 · 사진 밴드) */

:root{
  --bg:#FFFFFF;
  --surface:#F5F4F1;
  --surface-2:#EDEBE5;
  --ink:#101B3A;
  --ink-2:#0A1128;
  --body:#2C3244;
  --muted:#616a7e;
  --line:#E2E0DA;
  --gold:#CDAF6A;
  --gold-d:#A2833E;

  --en:"Abril Fatface","Pretendard Variable",Georgia,serif;
  --ui:"DM Sans","Pretendard Variable",system-ui,sans-serif;
  --scr:"Yellowtail","Pretendard Variable",cursive;

  --wrap:1180px;
  --pad:clamp(20px,5vw,56px);
  --mm-top:0px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--ui);font-size:15px;line-height:1.75;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
[hidden]{display:none!important}
.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 공통 타입 ---------- */
.kick{
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-d);margin-bottom:14px;
}
.dh{font-family:var(--en);font-weight:400;color:var(--ink);line-height:1.08;letter-spacing:-.005em}
.sec-h{font-size:clamp(34px,4.6vw,54px)}
.lead-ko{font-size:16.5px;line-height:1.85;color:var(--body)}
.rule{width:56px;height:2px;background:var(--gold);margin:22px auto 0}
.center{text-align:center}
.sect{padding:clamp(72px,9vw,124px) 0}
.sect--tint{background:var(--surface)}

.pill{
  display:inline-block;padding:14px 34px;border:1px solid var(--gold);border-radius:999px;
  font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--gold-d);
  text-decoration:none;transition:background .25s,color .25s;
}
.pill:hover{background:var(--gold);color:#fff}
.pill--light{color:#F0E5CE;border-color:rgba(205,175,106,.85)}
.pill--light:hover{background:var(--gold);color:var(--ink-2)}
.pill--solid{background:var(--ink);border-color:var(--ink);color:#fff}
.pill--solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink-2)}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line)}
.hd-in{
  width:min(100% - var(--pad)*2,1320px);margin-inline:auto;height:78px;
  display:flex;align-items:center;gap:26px;
}
.brand{
  display:inline-block;padding:8px 0;
  font-family:var(--en);font-size:30px;line-height:1;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;
}
.brand-dot{color:var(--gold)}
.hd-nav{margin-left:auto;display:flex;gap:30px}
.nl{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:6px 0;position:relative;
}
.nl .nl-ko{display:none}
.nl::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s}
.nl:hover::after,.nl.is-on::after{right:0}
.hd-cta{
  padding:11px 22px;border:1px solid var(--gold);border-radius:999px;color:var(--gold-d);
  font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s;
}
.hd-cta:hover{background:var(--gold);color:#fff}
.burger{display:none;width:46px;height:46px;border:0;background:none;padding:11px 10px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .3s,opacity .2s}
body.mm-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.mm-open .burger span:nth-child(2){opacity:0}
body.mm-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 모바일 드로어 */
.mobile-nav{
  position:fixed;inset:var(--mm-top) 0 0 0;z-index:999;background:var(--ink);
  transform:translateY(-102%);transition:transform .38s cubic-bezier(.4,.02,.2,1);
  overflow-y:auto;visibility:hidden;
}
.mobile-nav.open{transform:none;visibility:visible}
.mn-in{padding:38px var(--pad) 60px}
.mnl{display:block;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none;color:#fff}
.mnl .nl-en{display:block;font-family:var(--en);font-size:30px;line-height:1.1}
.mnl .nl-ko{display:block;font-size:13.5px;color:var(--gold);letter-spacing:.02em;margin-top:2px}
.mnl.is-on .nl-en{color:var(--gold)}
.mn-foot{margin-top:30px;color:#C9CEDB;font-size:14px}
.mn-foot a{display:inline-block;font-family:var(--en);font-size:28px;color:#fff;text-decoration:none}
.mn-foot p{margin-top:6px;font-size:13.5px}
body.mm-open{overflow:hidden}

/* ---------- 히어로 ---------- */
.hero{padding:clamp(48px,6vw,86px) 0 clamp(40px,5vw,64px)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,54px);align-items:center}
.hero-l{min-width:0}
.hero-h{font-family:var(--en);font-weight:400;color:var(--ink);font-size:clamp(34px,3.7vw,52px);line-height:1.02;letter-spacing:-.015em}
.hero-h span{display:block}
.hero-kt{margin-top:18px;font-size:clamp(21px,2.2vw,28px);font-weight:700;line-height:1.45;letter-spacing:-.03em;color:var(--ink);max-width:22em}
.hero-tag{margin:30px 0 0;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:11px 0}
.hero-tag b{
  display:block;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.hero-tag b+b{color:var(--gold-d);letter-spacing:.01em;text-transform:none;font-size:13.5px;font-weight:500;margin-top:5px}
.hero-ko{margin-top:24px;font-size:17px;line-height:1.8;color:var(--body);max-width:30em}
.hero-btns{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-r{position:relative;min-width:0;display:flex;justify-content:center}
.disc{
  position:relative;width:min(100%,470px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);overflow:hidden;
}
.disc img{width:100%;height:100%;object-fit:cover;object-position:52% 40%}
.arrow{position:absolute;left:-6px;bottom:6%;width:104px;height:92px;color:var(--gold)}
.hero-line{margin-top:clamp(34px,5vw,58px);height:1px;background:var(--line)}

/* ---------- 사진 밴드(문장) ---------- */
.stmt{
  position:relative;background:var(--ink-2) center/cover no-repeat;
  padding:clamp(76px,10vw,132px) 0;text-align:center;
}
.stmt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,40,.62),rgba(10,17,40,.72))}
.stmt .wrap{position:relative}
.stmt h2{
  font-family:var(--ui);font-weight:700;color:#fff;
  font-size:clamp(23px,2.6vw,33px);line-height:1.42;letter-spacing:-.02em;max-width:20em;margin-inline:auto;
}
.stmt .kick{color:var(--gold)}
.stmt p{margin:18px auto 0;max-width:34em;color:#DCE0EA;font-size:15.5px}
.stmt .pill{margin-top:34px}

/* ---------- 소개 ---------- */
.badge{
  width:74px;height:74px;border:2px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;margin:0 auto 24px;color:var(--ink);
}
.badge svg{width:36px;height:36px}
.intro-p{max-width:46em;margin:26px auto 0;text-align:center;font-size:16.5px;line-height:1.9}
.intro-p+.intro-p{margin-top:16px}

/* ---------- 레슨 흐름 다이어그램 ---------- */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px) clamp(24px,5vw,72px);margin-top:clamp(40px,5vw,70px)}
.fl{position:relative;text-align:center;min-width:0}
.fl:nth-child(2),.fl:nth-child(5){margin-top:clamp(26px,4vw,62px)}
.fl-disc{
  position:relative;width:min(100%,210px);aspect-ratio:1;margin:0 auto 20px;
  border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--gold);
}
.fl:nth-child(2) .fl-disc,.fl:nth-child(5) .fl-disc{width:min(100%,166px)}
.fl-disc svg{width:58px;height:58px}
.fl-no{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink-2);
  font-family:var(--en);font-size:19px;display:grid;place-items:center;
}
.fl h3{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.fl .min{display:block;font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--gold-d);margin-bottom:6px}
.fl p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.7}
.fl-arc{position:absolute;top:24%;right:-24%;width:30%;height:70px;color:var(--gold);overflow:visible}
.fl:nth-child(2) .fl-arc,.fl:nth-child(5) .fl-arc{top:auto;bottom:44%;transform:scaleY(-1)}

/* ---------- 3열 약속 ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);margin-top:clamp(36px,4vw,56px)}
.tr{text-align:center;min-width:0}
.tr svg{width:42px;height:42px;color:var(--gold);margin:0 auto 18px}
.tr h3{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.tr .en{display:block;font-family:var(--en);font-size:22px;color:var(--ink);margin-bottom:4px;line-height:1.2}
.tr p{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.8}

/* ---------- 맞아요 / 맞지 않아요 ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:clamp(36px,4vw,56px)}
.fit-card{padding:clamp(28px,3.4vw,44px);min-width:0}
.fit-yes{background:var(--ink);color:#E6E9F1}
.fit-no{background:var(--surface-2);color:var(--body)}
.fit-card h3{font-family:var(--en);font-size:clamp(24px,2.6vw,32px);font-weight:400;line-height:1.15}
.fit-yes h3{color:#fff}
.fit-no h3{color:var(--ink)}
.fit-card .ko{display:block;font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.02em;margin-top:8px}
.fit-yes .ko{color:var(--gold)}
.fit-no .ko{color:var(--gold-d)}
.fit-card ul{margin-top:24px;display:grid;gap:14px}
.fit-card li{display:flex;gap:12px;font-size:14.5px;line-height:1.7}
.fit-card li svg{width:18px;height:18px;flex:none;margin-top:5px}
.fit-yes li svg{color:var(--gold)}
.fit-no li svg{color:#9AA0AE}

/* ---------- 원장 ---------- */
.teach{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,66px);align-items:center}
.teach-ph{position:relative;min-width:0}
.teach-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--surface-2);position:relative;z-index:1}
.teach-ph::after{content:"";position:absolute;left:-14px;bottom:-14px;width:120px;height:120px;border:2px solid var(--gold);z-index:0}
.teach-t{min-width:0}
.teach-h{font-family:var(--en);font-weight:400;color:var(--ink);font-size:clamp(32px,4.2vw,52px);line-height:1.06}
.script{
  display:block;font-family:var(--scr);color:var(--gold);
  font-size:clamp(30px,3.7vw,46px);line-height:1;margin-top:-6px;padding-left:1.2em;
}
.teach-t .q{margin-top:26px;font-size:17px;line-height:1.85;color:var(--ink)}
.teach-t p+p{margin-top:14px}
.teach-t .body{color:var(--body);font-size:15px}
.sign{margin-top:26px;font-size:14px;color:var(--muted)}
.sign b{font-family:var(--en);font-size:20px;color:var(--ink);font-weight:400;margin-right:8px}

/* ---------- 정원 밴드 ---------- */
.cap{background:var(--ink);color:#DDE2EE}
.cap-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.cap .kick{color:var(--gold)}
.cap h2{font-family:var(--en);font-weight:400;color:#fff;font-size:clamp(30px,3.8vw,48px);line-height:1.1}
.cap .num{display:flex;align-items:baseline;gap:14px;margin:26px 0 18px}
.cap .num b{font-family:var(--en);font-weight:400;font-size:clamp(56px,7vw,84px);color:var(--gold);line-height:1}
.cap .num span{font-size:15px;color:#C4CBDB}
.cap p{font-size:15.5px;line-height:1.85;max-width:34em}
.cap-ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--ink-2)}

/* ---------- 표·목록(하위 페이지) ---------- */
.page-head{background:var(--ink);color:#fff;padding:clamp(56px,7vw,96px) 0 clamp(52px,6vw,84px);text-align:center}
.page-head .kick{color:var(--gold)}
.page-head h1{font-family:var(--en);font-weight:400;font-size:clamp(40px,6vw,74px);line-height:1.05}
.page-head p{margin:18px auto 0;max-width:36em;color:#CBD2E2;font-size:15.5px}
.crumb{margin-top:20px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:14.5px}
.tbl caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:10px}
.tbl th,.tbl td{padding:15px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);
  border-bottom:2px solid var(--ink);font-weight:700;
}
.tbl td b{color:var(--ink)}
.tbl .num-c{font-family:var(--en);font-size:18px;color:var(--ink);font-weight:400;white-space:nowrap}

.fee-card{background:var(--ink);color:#E4E8F2;padding:clamp(30px,4vw,48px);display:grid;gap:8px}
.fee-card .kick{color:var(--gold);margin-bottom:6px}
.fee-card h2{font-family:var(--en);font-weight:400;color:#fff;font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.fee-card .price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.fee-card .price b{font-family:var(--en);font-weight:400;font-size:clamp(44px,5.6vw,66px);color:var(--gold);line-height:1}
.fee-card .price span{font-size:15px;color:#C6CDDD}
.fee-card ul{margin-top:20px;display:grid;gap:10px;font-size:14.5px}
.fee-card li{padding-left:18px;position:relative}
.fee-card li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;background:var(--gold);border-radius:50%}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.note{background:var(--surface);padding:clamp(22px,3vw,34px);font-size:14.5px;line-height:1.8}
.note h3{font-size:15.5px;color:var(--ink);font-weight:700;margin-bottom:10px}
.dl-info{display:grid;gap:0;margin-top:8px}
.dl-info div{display:grid;grid-template-columns:104px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl-info dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:700;padding-top:3px}
.dl-info dd{margin:0;font-size:15px;color:var(--ink)}
.dl-info dd small{display:block;color:var(--muted);font-size:13.5px;margin-top:4px;letter-spacing:0}

.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:10px;height:10px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq .a{padding:0 0 22px;font-size:14.5px;line-height:1.85;color:var(--body)}

.steps{counter-reset:s;display:grid;gap:0;margin-top:26px}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);font-family:var(--en);font-size:24px;color:var(--gold);line-height:1.1;
}
.steps h3{font-size:16px;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.steps p{margin-top:6px;font-size:14.5px;color:var(--muted)}

/* ---------- 사진 띠 · 문의 · 푸터 ---------- */
.strip{display:grid;grid-template-columns:repeat(3,1fr)}
.strip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.ask{padding:clamp(66px,8vw,110px) var(--pad);text-align:center;background:#fff}
.ask-h{font-family:var(--en);font-weight:400;color:var(--ink);font-size:clamp(32px,4.4vw,52px);line-height:1.1}
.ask-p{margin:22px auto 0;max-width:40em;font-size:15.5px;line-height:1.9}
.ask .pill{margin-top:30px}
.ft{background:var(--ink-2);color:#AEB6C8;padding:clamp(44px,5vw,66px) 0 clamp(34px,4vw,46px)}
.ft-in{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.ft-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.14)}
.ft-brand{color:#fff;font-size:30px}
.ft-nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.ft-nav a{display:inline-block;padding:13px 0;font-size:11.5px;letter-spacing:.18em;color:var(--gold);text-decoration:none}
.ft-nav a:hover{color:#fff}
.ft-legal{padding-top:24px;font-size:13px;line-height:1.9}
.ft-legal p{color:#99A2B6}
.ft-cr{margin-top:12px!important;color:#6F7A92!important;font-size:12px}

/* ---------- 하단 고정 CTA ---------- */
.ctabar{display:none}

/* ---------- 등장 모션 ---------- */
.js .pop{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.7,.3,1)}
.js .pop.go{opacity:1;transform:none}
.js .pop-stag>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)}
.js .pop-stag.go>*{opacity:1;transform:none}
.js .pop-stag.go>*:nth-child(2){transition-delay:.09s}
.js .pop-stag.go>*:nth-child(3){transition-delay:.18s}
.js .pop-stag.go>*:nth-child(4){transition-delay:.27s}
.js .pop-stag.go>*:nth-child(5){transition-delay:.36s}
.js .pop-stag.go>*:nth-child(6){transition-delay:.45s}

/* ---------- 반응형 ---------- */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-r{order:-1}
  .disc{width:min(100%,380px)}
  .arrow{display:none}
  .teach{grid-template-columns:1fr;gap:30px}
  .cap-in{grid-template-columns:1fr}
  .flow{gap:34px 40px}
  .fl-arc{display:none}
}
@media (max-width:860px){
  .hd-nav,.hd-cta{display:none}
  .burger{display:block;margin-left:auto}
  .hd-in{height:62px}
  .flow{grid-template-columns:repeat(2,1fr)}
  .fl:nth-child(2),.fl:nth-child(5){margin-top:0}
  .fl-disc,.fl:nth-child(2) .fl-disc,.fl:nth-child(5) .fl-disc{width:min(100%,180px)}
  .trio,.cols3{grid-template-columns:1fr;gap:34px}
  .fit{grid-template-columns:1fr}
  .cols2{grid-template-columns:1fr}
  .ctabar{
    display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:var(--ink);border-top:1px solid rgba(255,255,255,.14);
  }
  .ctabar a{
    min-height:54px;display:grid;place-items:center;color:#fff;text-decoration:none;
    font-size:14px;font-weight:500;letter-spacing:-.01em;
  }
  .ctabar a+a{border-left:1px solid rgba(255,255,255,.14)}
  .ctabar a[data-cta=tel]{background:var(--gold);color:var(--ink-2);font-weight:700}
  body{padding-bottom:54px}
}
@media (max-width:560px){
  body{font-size:15px}
  .hero{padding-top:30px}
  .disc{width:min(100%,320px)}
  .strip{grid-template-columns:1fr}
  .strip img{aspect-ratio:2/1}
  .flow{grid-template-columns:1fr;gap:30px}
  .fl-disc,.fl:nth-child(2) .fl-disc,.fl:nth-child(5) .fl-disc{width:172px}
  .dl-info div{grid-template-columns:1fr;gap:4px}
  .steps li{grid-template-columns:40px 1fr;gap:12px}
  .tbl th,.tbl td{padding:12px 8px;font-size:14px}
}

/* ---------- 모션 축소 ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .pop,.js .pop-stag>*{opacity:1!important;transform:none!important}
}
html.reduce .pop,html.reduce .pop-stag>*{opacity:1!important;transform:none!important;transition:none!important}

/* == 2026-09-24 되돌림 ==
   2026-09-19 재구성(전체 왼쪽 정렬 · 띠를 둥근 판으로 · 지그재그 6원을 2열 가로 카드로)은
   사용자 지적("수정 전이 더 나았다")으로 폐기했다. 아래 구획은 수정 전 조판으로 되돌린다.
   레퍼런스와의 차별점은 아래 넷만 최소로 남긴다(§0-5-9 하한선). */
.tr{background:var(--surface);border-radius:20px;padding:28px 26px}
/* 같은 크기 카드 줄(§0-5-4)을 피하려고 열 폭만 어긋나게 준다 — 조판은 수정 전 그대로 */
.trio{grid-template-columns:1.18fr .95fr .87fr}
@media (max-width:900px){.trio{grid-template-columns:minmax(0,1fr)}}
.fit-card{border-radius:24px}
.teach-ph img,.cap-ph img{border-radius:24px}
.teach-ph::after{border-radius:16px}

/* 첫 화면 — 사용자 요청: 가운데 정렬.
   레퍼런스처럼 두 단 묶음을 지면 가운데에 두고 글 단도 가운데로 맞춘다. */
.hero-in{max-width:1080px;margin-inline:auto;justify-content:center}
.hero-l{text-align:center}
.hero-tag{margin-left:auto;margin-right:auto;max-width:34em}
.hero-ko{margin-left:auto;margin-right:auto}
.hero-btns{justify-content:center}
@media (max-width:900px){
  .hero-tag,.hero-ko{max-width:none}
}

/* == langmix heads 2026-09-21 == */
/* 구획 제목 위 영문 오버라인 — 한글 제목은 그대로 둔다 */
.lx-over{display:block;margin:0 0 .5em;
  font-family:var(--font-latin,var(--flatin,var(--font-display,var(--display,var(--serif,inherit)))));
  font-weight:700;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent,currentColor);opacity:.72}
@media (max-width:900px){.lx-over{font-size:11px;letter-spacing:.13em}}


/* == nav-single 2026-09-21 == */
/* 메뉴는 영문만 남긴다(한글 부제는 모바일 전체 메뉴에만 남는다) */
#site-header .lx-ko, header .lx-ko, .hd .lx-ko { display: none !important; }
#site-header nav a > small, header nav a > small, .hd nav a > small { display: none !important; }