/* ===========================================================
   담담스탠다드 · 사이트 공통 스타일 (예비 시안)
   흑백 모노톤 · Freesentation
   =========================================================== */

@font-face{
  font-family:"Freesentation";
  src:url("fonts/Freesentation-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Freesentation";
  src:url("fonts/Freesentation-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Freesentation";
  src:url("fonts/Freesentation-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --bg:#FFFFFF;
  --bg-sub:#F4F4F2;
  --card:#FFFFFF;
  --ink:#0E0E0E;
  --ink-soft:#3D3D3D;
  --mute:#8C8C8C;
  --faint:#B5B5B5;
  --line:#DCDCDC;
  --line-soft:#ECECEC;
  --green:#4F9B3C;
  --kakao:#FEE500;
  --kakao-ink:#191600;
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  word-break:keep-all;
  overflow-wrap:break-word;
  font-family:"Freesentation",-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-weight:400; line-height:1.72;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important;}
img{max-width:100%;}
a{color:inherit; text-decoration:none;}

.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}
.narrow{max-width:740px;}

/* ---------- 예비 배지 ---------- */
.draft{
  position:relative; z-index:60;
  background:var(--ink); color:#fff;
  font-size:10.5px; letter-spacing:.16em; text-align:center;
  padding:6px 12px; font-weight:400;
}


/* ---------- 상단 바 ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h); background:var(--bg);
  border-bottom:1px solid var(--ink);
}
.nav-in{
  max-width:1000px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; gap:18px;
}
.nav-logo{flex:none; display:flex; align-items:center;}
.nav-logo img{width:50px; height:auto; display:block;}
.nav-menu{
  flex:1; display:flex; align-items:center; justify-content:flex-end;
  gap:0; list-style:none; height:100%; padding-right:44px;
}
.nav-menu > li{position:relative; height:100%; display:flex; align-items:center;}
.nav-menu > li > a{
  font-size:14px; color:var(--ink-soft); padding:8px 11px;
  letter-spacing:-.01em; white-space:nowrap;
  border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s;
}
.nav-menu > li > a:hover,
.nav-menu > li.has-sub:hover > a{color:var(--ink);}
.nav-menu > li.on > a{color:var(--ink); font-weight:600;}
.has-sub > a:after{
  content:""; display:inline-block; width:4px; height:4px; margin:0 0 3px 7px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); opacity:.5;
}
.sub-toggle{display:none;}

/* 하위 메뉴 */
.sub{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:0; min-width:240px;
}
.sub-in{
  background:#fff; border:1px solid var(--ink); border-radius:0;
  padding:14px 12px; display:flex; gap:18px;
}
.has-sub:hover .sub, .has-sub:focus-within .sub{display:block;}
.sub-group{min-width:214px; display:flex; flex-direction:column; gap:0;}
.sub-group + .sub-group{border-left:1px solid var(--line); padding-left:18px;}
.sub-label{
  display:block; font-size:10.5px; letter-spacing:.14em; color:var(--mute);
  padding:6px 12px 9px; font-weight:400;
}
.sub a{
  display:block; font-size:14px; color:var(--ink-soft); padding:11px 12px;
  white-space:nowrap; line-height:1.4; transition:background .13s, color .13s;
}
.sub a:hover{background:var(--ink); color:#fff;}

.nav-cta{
  flex:none; font-size:13px; font-weight:400; letter-spacing:.02em;
  padding:10px 18px; border-radius:0;
  background:var(--ink); color:#fff;
  transition:opacity .15s; white-space:nowrap;
}
.nav-cta:hover{opacity:.78;}
.nav-toggle{display:none;}

/* 좁은 화면: 메뉴를 접지 않고 한 줄로 펼쳐 둔다. 누르면 바로 이동. */
@media (max-width:900px){
  .nav{height:auto; background:var(--bg);}
  .nav-in{height:auto; flex-wrap:wrap; gap:10px; padding:11px 24px 0;}
  .nav-logo{order:1;}
  .nav-logo img{width:46px;}
  .nav-cta{order:2; margin-left:auto; padding:9px 15px; font-size:12.5px;}
  .nav-menu{
    order:3; flex:0 0 100%; width:100%; height:auto; justify-content:flex-start;
    gap:0; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-top:2px;
  }
  .nav-menu::-webkit-scrollbar{display:none;}
  .nav-menu > li{height:auto; flex:none;}
  .nav-menu > li > a{
    display:block; font-size:14px; padding:10px 0 12px; margin-right:20px;
    white-space:nowrap; border-bottom:2px solid transparent;
  }
  .nav-menu > li.on > a{border-bottom-color:var(--ink);}
  .nav-menu > li:last-child > a{margin-right:0;}
  .has-sub > a:after{display:none;}
  .nav-toggle, .sub-toggle, .sub{display:none !important;}
}

[id]{scroll-margin-top:calc(var(--nav-h) + 44px);}

/* ---------- 페이지 머리 ---------- */
.phead{padding:76px 0 48px; text-align:left; border-bottom:1px solid var(--ink);}
.kicker{
  font-size:10.5px; letter-spacing:.26em; text-indent:.26em;
  color:var(--mute); font-weight:400; margin-bottom:20px;
  text-transform:uppercase;
}
h1{
  font-size:clamp(30px,6.4vw,50px); font-weight:600;
  line-height:1.26; letter-spacing:-.035em;
  text-wrap:balance;
}
.phead p{
  margin-top:22px; font-size:16px; color:var(--ink-soft);
  font-weight:300; line-height:1.85; max-width:48em;
}

/* ---------- 섹션 ---------- */
section{padding:60px 0;}
section + section{border-top:1px solid var(--line-soft);}
h2{
  font-size:clamp(21px,3.8vw,27px); font-weight:600;
  line-height:1.38; letter-spacing:-.03em; margin-bottom:10px;
  text-wrap:balance;
}
.sec-sub{font-size:14.5px; color:var(--mute); font-weight:300; margin-bottom:32px; text-wrap:pretty;}

/* 강조 섹션: 제목을 한 단계 크게 */
.feature h2{font-size:clamp(25px,4.6vw,34px); line-height:1.32; letter-spacing:-.035em;}
.feature .sec-sub{font-size:16px; color:var(--ink-soft); margin-bottom:36px;}
h3{font-size:clamp(16.5px, 1.5vw, 19.5px); font-weight:600; margin-bottom:9px; letter-spacing:-.025em; line-height:1.45; text-wrap:balance;}
p{font-size:15.5px; line-height:1.88; color:var(--ink-soft); font-weight:300; text-wrap:pretty;}
p + p{margin-top:16px;}

/* 본문 문단 폭 — 한 줄이 너무 길어지지 않게 */
section > p,
section > .sec-sub{max-width:46em;}
.course .desc, .course .lead{max-width:42em;}
.card p, .track ul, .step-body, .teacher-bio, .cv li, .qa .a{max-width:none;}

/* ---------- 카드 ---------- */
.grid{display:grid; gap:1px; background:var(--line);}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
@media (max-width:720px){ .g2,.g3{grid-template-columns:1fr;} }

.card{
  background:var(--card); border:none;
  border-radius:0; padding:30px 26px;
}
.card .num{
  font-size:11.5px; letter-spacing:.2em; color:var(--mute);
  font-weight:400; margin-bottom:15px;
}
.card p{font-size:clamp(14px, 1.15vw, 15.5px); color:var(--ink-soft); font-weight:300; line-height:1.85;}

/* 강사진 카드 */
.card.person{padding:0; overflow:hidden;}
.card.person img{
  display:block; width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center center;
  background:var(--bg-sub);
}
.card.person .num{padding:22px 24px 0; margin-bottom:6px;}
.card.person h3{padding:0 24px;}
.card.person p{padding:0 24px 26px;}
@media (max-width:720px){
  .card.person{display:flex; align-items:center; gap:18px; padding:18px;}
  .card.person img{width:92px; height:92px; aspect-ratio:auto; flex:none;}
  .card.person .box{flex:1; min-width:0;}
  .card.person .num{padding:0; margin-bottom:4px;}
  .card.person h3{padding:0; font-size:15px;}
  .card.person p{padding:0; margin-top:4px; font-size:13px; line-height:1.68;}
}

/* 클래스 트랙 카드 */
.track{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:0; padding:28px 26px;
  transition:background .16s, color .16s, border-color .16s;
}
a.track:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
a.track:hover .tag,
a.track:hover .who,
a.track:hover ul{color:#fff;}
a.track:hover .tag{border-color:rgba(255,255,255,.5);}
a.track:hover li:before{background:rgba(255,255,255,.55);}
.track .tag{
  display:inline-block; font-size:10px; letter-spacing:.16em;
  font-weight:400; color:var(--mute); background:none;
  border:1px solid var(--line); padding:4px 9px; border-radius:0; margin-bottom:16px;
  transition:color .16s, border-color .16s;
}
.track.owner .tag{color:var(--mute);}
.track h3{margin-bottom:8px;}
.track .who{font-size:clamp(13px, 1.1vw, 14px); color:var(--mute); font-weight:300; margin-bottom:14px; transition:color .16s;}
.track ul{list-style:none; font-size:clamp(14px, 1.15vw, 15px); color:var(--ink-soft); transition:color .16s;}
.track li{padding:4px 0 4px 13px; position:relative;}
.track li:before{
  content:""; position:absolute; left:0; top:13px;
  width:3px; height:3px; background:var(--faint); transition:background .16s;
}

/* ---------- 대상: 원형 5개 가로 배열 ---------- */
.who-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
}
.who-item{text-align:center; display:flex; flex-direction:column; align-items:center;}
.who-circle{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1/1; max-width:138px; margin:0 auto;
  border-radius:50%; border:none; background:var(--bg-sub);
  font-size:19px; font-weight:600; line-height:1.3; letter-spacing:-.035em;
  color:var(--ink); text-align:center;
}
.who-item p{
  margin-top:16px; padding-top:14px; position:relative;
  font-size:12.5px; color:var(--mute); font-weight:300;
  line-height:1.6; letter-spacing:0;
}
.who-item p:before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14px; height:1px; background:var(--ink);
}
@media (max-width:780px){
  .who-row{grid-template-columns:repeat(3,1fr); gap:26px 16px;}
  .who-circle{max-width:112px; font-size:17px;}
  .who-item p{margin-top:13px; padding-top:12px;}
}
@media (max-width:460px){
  .who-row{grid-template-columns:repeat(2,1fr);}
  .who-circle{max-width:124px; font-size:18px;}
}

/* 홈 리드 문장 */
.phead p.lead-lg{
  font-size:clamp(16px,2.4vw,18.5px); color:var(--ink-soft);
  font-weight:300; line-height:1.8; max-width:none;
}

/* ---------- 표 ---------- */
.tbl-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:460px;}
thead th{
  background:none; color:var(--ink); font-weight:400; text-align:left;
  padding:12px 14px 12px 0; font-size:12px; letter-spacing:.06em;
  border-bottom:1px solid var(--ink); white-space:nowrap; color:var(--mute);
}
tbody td{
  padding:16px 14px 16px 0; border-bottom:1px solid var(--line-soft);
  vertical-align:top; line-height:1.68; color:var(--ink-soft); font-weight:300;
}
tbody td:first-child{font-weight:600; color:var(--ink); white-space:nowrap;}
tbody tr:last-child td{border-bottom:1px solid var(--line-soft);}
.hold{
  display:inline-block; font-size:11.5px; color:var(--mute);
  border:1px solid var(--line); padding:2px 8px; border-radius:0;
}

/* ---------- 목록 ---------- */
.qa{border-top:1px solid var(--ink);}
.qa details{border-bottom:1px solid var(--line-soft);}
.qa summary{
  cursor:pointer; padding:20px 30px 20px 0; position:relative;
  font-size:15.5px; font-weight:400; list-style:none; letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:after{
  content:""; position:absolute; right:8px; top:28px;
  width:11px; height:1px; background:var(--ink);
}
.qa summary:before{
  content:""; position:absolute; right:13px; top:23px;
  width:1px; height:11px; background:var(--ink); transition:opacity .15s;
}
.qa details[open] summary:before{opacity:0;}
.qa .a{padding:0 0 22px; font-size:14.5px; color:var(--mute); font-weight:300; line-height:1.88;}

/* ---------- 자리 표시 ---------- */
.ph{
  background:var(--bg-sub); border:1px solid var(--line); border-radius:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:12.5px; font-weight:300; letter-spacing:.02em;
  min-height:210px; text-align:center; padding:20px;
}
.ph.tall{min-height:300px;}

/* 지도 (카카오맵 퍼가기) */
.map-embed{width:100%; border:1px solid var(--line); background:var(--bg-sub);}
.map-embed .root_daum_roughmap{width:100% !important;}
.map-embed .root_daum_roughmap .wrap_map{height:400px !important;}
.map-embed .root_daum_roughmap .wrap_controllers{display:none;}
@media (max-width:620px){
  .map-embed .root_daum_roughmap .wrap_map{height:320px !important;}
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-block; font-size:14.5px; font-weight:400; letter-spacing:.01em;
  padding:15px 30px; border-radius:0;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  transition:opacity .16s, background .16s, color .16s; cursor:pointer;
}
.btn:hover{opacity:.78;}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink); opacity:1;}
.btn.ghost:hover{background:var(--ink); color:#fff; opacity:1;}
.btn.kakao{
  background:var(--kakao); border-color:var(--kakao); color:var(--kakao-ink);
  font-weight:600; display:inline-flex; align-items:center; gap:9px;
}
.btn.kakao:before{
  content:""; flex:none; width:20px; height:20px;
  background:url("kakao-mark.png") center/contain no-repeat;
}
.btn.kakao:hover{opacity:.86;}
.btns{display:flex; gap:10px; flex-wrap:wrap;}

/* ---------- 강조 블록 ---------- */
.band{
  background:var(--ink); color:#fff; border-radius:0;
  padding:48px 38px; text-align:left;
}
.band h2{margin-bottom:12px; color:#fff;}
.band p{color:rgba(255,255,255,.72); font-size:15px; font-weight:300;}
.band .btns{justify-content:flex-start; margin-top:28px;}
.band .btn{background:#fff; color:var(--ink); border-color:#fff;}
.band .btn:hover{opacity:.84;}
.band .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5);}
.band .btn.ghost:hover{background:#fff; color:var(--ink); border-color:#fff;}
.band .btn.kakao{background:var(--kakao); color:var(--kakao-ink); border-color:var(--kakao);}
.band .btn.kakao:hover{opacity:.86;}

/* ---------- 우측 하단 고정 버튼 ---------- */
.fab-stack{
  position:fixed; right:24px; bottom:24px; z-index:70;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.fab-stack a, .fab-stack button{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; cursor:pointer; font:inherit;
  transition:transform .16s, box-shadow .16s, opacity .2s, visibility .2s;
}

/* 위로 가기 */
.top-fab{
  width:48px; height:48px; padding:0;
  background:var(--ink); border:1px solid var(--ink); color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
}
.top-fab.on{opacity:1; visibility:visible; pointer-events:auto;}
.top-fab:hover{background:#fff; color:var(--ink); transform:translateY(-2px);}
.top-fab svg{
  width:19px; height:19px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* 카카오톡 상담 */
.kakao-fab{
  width:58px; height:58px; padding:0;
  background:var(--kakao); border:none;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.kakao-fab:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22);}
.kakao-fab img{width:52%; height:52%; display:block; object-fit:contain;}
.kakao-fab span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

@media (max-width:720px){
  .fab-stack{right:16px; bottom:16px; gap:10px;}
  .kakao-fab{width:54px; height:54px;}
  .top-fab{width:44px; height:44px;}
  .top-fab svg{width:17px; height:17px;}
}
@media (prefers-reduced-motion:reduce){
  .fab-stack a, .fab-stack button{transition:opacity .2s, visibility .2s;}
  .fab-stack a:hover, .fab-stack button:hover{transform:none;}
}

.aside{
  border:none; border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  padding:24px 0; background:none; border-radius:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.aside .t{font-size:15px; font-weight:400;}
.aside .s{font-size:13px; color:var(--mute); font-weight:300; margin-top:4px;}
.aside a{
  font-size:13.5px; color:var(--ink); font-weight:400;
  border:1px solid var(--ink); border-radius:0; padding:10px 18px;
  white-space:nowrap; transition:background .15s, color .15s;
}
.aside a:hover{background:var(--ink); color:#fff;}

/* ---------- 푸터 ---------- */
footer{
  margin-top:0; border-top:1px solid var(--ink);
  padding:52px 0 60px; text-align:left;
}
.foot-top{
  display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap;
  padding-bottom:40px;
}
.foot-brand img{width:62px; height:auto; display:block; margin-bottom:18px;}
.foot-brand p{font-size:14px; color:var(--ink-soft); font-weight:300; line-height:1.8;}
.foot-nav{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col{display:flex; flex-direction:column; gap:9px;}
.foot-label{
  font-size:10.5px; letter-spacing:.18em; color:var(--mute);
  margin-bottom:5px; font-weight:400;
}
.foot-col a{
  font-size:13.5px; color:var(--ink-soft); font-weight:300;
  border-bottom:1px solid transparent; align-self:flex-start;
  transition:color .15s, border-color .15s;
}
.foot-col a:hover{color:var(--ink); border-bottom-color:var(--ink);}
.foot-bottom{
  border-top:1px solid var(--line-soft); padding-top:26px;
  display:flex; flex-direction:column; gap:10px;
}
footer p{font-size:12.5px; color:var(--mute); font-weight:300; line-height:1.9;}
footer .sep{color:var(--line); margin:0 8px;}
footer .tbd{font-size:12px; color:var(--faint);}
footer .copy{font-size:11.5px; color:var(--faint); letter-spacing:.04em; margin-top:4px;}
@media (max-width:720px){
  .foot-top{gap:34px; padding-bottom:32px;}
  .foot-nav{gap:30px 40px;}
}

/* ---------- 페이지 안 바로가기 ---------- */
.jump{display:flex; flex-wrap:wrap; gap:0; justify-content:flex-start; margin-top:30px;}
.jump a{
  font-size:13px; color:var(--mute); background:none;
  border:none; border-radius:0; padding:6px 0; margin-right:22px;
  border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.jump a:hover{color:var(--ink); border-bottom-color:var(--ink);}

/* ---------- 과정 카드 ---------- */
.group-head{margin:10px 0 22px;}
.group-head .tag{
  display:inline-block; font-size:10px; letter-spacing:.16em; font-weight:400;
  color:var(--mute); background:none; border:1px solid var(--line);
  padding:4px 9px; border-radius:0; margin-bottom:12px;
}
.owner-page .group-head .tag{color:var(--mute);}
.course{
  background:var(--card); border:none; border-top:1px solid var(--ink); border-radius:0;
  padding:30px 0 34px; margin-bottom:0;
}
.course h3{font-size:21px; margin-bottom:7px; letter-spacing:-.03em;}
.course .lead{font-size:clamp(15px, 1.3vw, 17px); color:var(--ink); font-weight:600; letter-spacing:-.02em; margin-bottom:0;}
.course .desc{font-size:clamp(14px, 1.15vw, 15.5px); color:var(--mute); font-weight:300; line-height:1.85; margin-top:8px;}
.course-pair .desc{font-size:14px;}

/* 같은 강사가 맡는 두 과정을 좌우로 */
.course-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--ink);
}
.course-pair .course{
  background:#fff; border-top:none; padding:28px 24px 30px; margin:0;
}
.course-pair .course-head{flex-direction:column; gap:16px; align-items:flex-start;}
.course-pair .course-fee{align-items:flex-start; text-align:left;}
.course-pair .course h3{font-size:18px;}
.course-pair .meta{grid-template-columns:1fr;}
.course-pair .meta div{padding:13px 14px;}
@media (max-width:720px){
  .course-pair{grid-template-columns:1fr;}
}

/* 과정 머리: 제목과 수강료를 한 줄에 */
.course-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:24px;
}
.course-title{flex:1; min-width:0;}
.course-fee{
  flex:none; text-align:right; margin:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:3px;
}
.course-fee span{
  font-size:10.5px; letter-spacing:.16em; color:var(--mute); font-weight:400;
}
.course-fee strong{
  font-size:23px; font-weight:600; letter-spacing:-.035em; color:var(--ink);
  line-height:1.2; white-space:nowrap;
}
@media (max-width:560px){
  .course-head{flex-direction:column; gap:14px;}
  .course-fee{align-items:flex-start; text-align:left;}
  .course-fee strong{font-size:21px;}
}

/* 수업 안내: 칸을 나눠 한눈에 */
.meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
}
.meta div{padding:16px 16px; background:#fff;}
.meta dt{font-size:10.5px; color:var(--mute); letter-spacing:.14em; margin-bottom:7px;}
.meta dd{font-size:14.5px; color:var(--ink); line-height:1.55; font-weight:400;}
.meta dd .note{font-size:12.5px; margin-top:4px;}
@media (max-width:720px){
  .meta{grid-template-columns:1fr;}
  .meta div{padding:13px 14px;}
}

/* 강사 담당 과정 */
.teacher-charge{
  font-size:13px; color:var(--ink-soft); font-weight:400;
  margin:0 0 9px; letter-spacing:-.01em;
}

/* 약력 */
.cv{margin-top:14px; border-top:1px solid var(--line-soft);}
.cv-row{
  display:grid; grid-template-columns:52px 1fr; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.cv-row:last-child{border-bottom:none;}
.cv dt{font-size:10.5px; color:var(--mute); letter-spacing:.12em; padding-top:3px;}
.cv dd, .cv ul{list-style:none; margin:0;}
.cv li{
  font-size:12.5px; color:var(--ink-soft); font-weight:300;
  line-height:1.72; padding-left:9px; position:relative;
}
.cv li:before{content:"·"; position:absolute; left:0; color:var(--faint);}
@media (max-width:480px){
  .cv-row{grid-template-columns:1fr; gap:4px;}
  .cv dt{padding-top:0;}
}
.course h4{font-size:13px; font-weight:600; margin:20px 0 8px; color:var(--ink); letter-spacing:.02em;}
.tbd{font-size:13.5px; color:var(--faint); font-weight:300;}
.note{font-size:14px; color:var(--mute); font-weight:300; margin-top:4px;}

/* ---------- 네 단계 도식 ---------- */
.steps{display:flex; align-items:stretch; margin:6mm 0 0; margin:0;}
.step{
  flex:1; min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--ink); background:#fff;
}
.step-head{
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-bottom:1px solid var(--ink);
  font-size:clamp(15px,1.4vw,17px); font-weight:600; letter-spacing:-.02em;
}
.step-no{font-size:11px; letter-spacing:.1em; color:var(--mute); font-weight:400;}
.step-body{
  flex:1; padding:16px; font-size:13px; color:var(--mute);
  font-weight:300; line-height:1.75;
}
.step-plus{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:34px; font-size:17px; color:var(--faint); font-weight:300;
}
@media (max-width:780px){
  .steps{flex-direction:column;}
  .step-plus{width:auto; height:26px;}
  .step-body{font-size:13.5px;}
}

/* ---------- 문장 강조 ---------- */
.quote{
  font-size:clamp(23px,4.6vw,34px); font-weight:600; line-height:1.46;
  letter-spacing:-.04em; color:var(--ink); text-wrap:balance;
}
.quote em{font-style:normal; color:var(--faint);}

/* 글자를 따라 그어지는 밑줄 */
.draw-line{
  display:inline-block;
  padding-bottom:3px;
  background-image:linear-gradient(var(--green), var(--green));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 2.5px;
  transition:background-size .95s cubic-bezier(.16,.84,.26,1);
}
.js .draw-line{background-size:0 2.5px;}
.js .draw.on .draw-line{background-size:100% 2.5px;}
.draw.on .draw-line:nth-of-type(2){transition-delay:.32s;}
@media (max-width:560px){
  .draw-line{padding-bottom:2px;}
  .js .draw-line{background-size:0 2px;}
  .js .draw.on .draw-line{background-size:100% 2px;}
}
@media (prefers-reduced-motion:reduce){
  .draw-line{transition:none; background-size:100% 2.5px;}
}

/* 검정 박스가 흰 글자와 함께 드러난다 */
.box-in{
  display:inline-block; position:relative;
  padding:8px 18px 10px; margin-left:-18px;
  background:var(--ink); color:#fff;
}
.js .box-in{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .5s cubic-bezier(.32,.86,.3,1);
}
.js .js-in.on .box-in{clip-path:inset(0 0 0 0);}
@media (max-width:560px){
  .box-in{padding:6px 14px 8px; margin-left:-14px;}
}
@media (prefers-reduced-motion:reduce){
  .js .box-in{transition:none; clip-path:inset(0 0 0 0);}
}

/* 이유 카드: 아래에서 살짝 올라오며 나타난다 */
.js .cards-in .card{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}
.js .cards-in.on .card{opacity:1; transform:translateY(0);}
.js .cards-in.on .card:nth-child(1){transition-delay:.05s;}
.js .cards-in.on .card:nth-child(2){transition-delay:.17s;}
.js .cards-in.on .card:nth-child(3){transition-delay:.29s;}
@media (prefers-reduced-motion:reduce){
  .js .cards-in .card{opacity:1; transform:none; transition:none;}
}

/* ---------- 과정별 강사 ---------- */
.teachers{display:grid; grid-template-columns:1fr; gap:0;}
.teacher{
  display:grid; grid-template-columns:148px 1fr; gap:28px; align-items:start;
  background:none; border:none; border-top:1px solid var(--line-soft);
  border-radius:0; padding:22px 0;
}
.teacher:first-child{border-top:none;}
.teacher-photo{
  width:148px; aspect-ratio:3/4; border-radius:0; background:var(--bg-sub);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--faint); font-size:11.5px; overflow:hidden;
}
.teacher-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.teacher-role{font-size:11px; color:var(--mute); font-weight:400; letter-spacing:.14em;}
.teacher-name{font-size:16px; font-weight:600; margin:4px 0 9px; letter-spacing:-.02em;}
.teacher-bio{list-style:none; font-size:13.5px; color:var(--ink-soft); line-height:1.75; font-weight:300;}
.teacher-bio li{padding-left:10px; position:relative;}
.teacher-bio li:before{content:"·"; position:absolute; left:0; color:var(--faint);}
.teacher-bio li.tbd:before{content:none;}
.teacher-bio li.tbd{padding-left:0;}
.teacher-note{margin-top:8px; font-size:13px;}
@media (max-width:620px){
  .teacher{grid-template-columns:112px 1fr; gap:18px; padding:20px 0;}
  .teacher-photo{width:112px;}
}
@media (max-width:420px){
  .teacher{grid-template-columns:92px 1fr; gap:14px;}
  .teacher-photo{width:92px;}
}
.course h4{border-top:1px solid var(--line-soft); padding-top:20px; margin-top:22px; margin-bottom:14px;}
.course .lead{margin-bottom:0;}

/* ---------- 공간 슬라이드 ---------- */
.slider{position:relative; overflow:hidden; border-radius:0; border:1px solid var(--line);}
.slides{display:flex; transition:transform .7s cubic-bezier(.4,0,.2,1);}
.slide{flex:0 0 100%;}
.slide .ph, .slide img{
  aspect-ratio:16/10; width:100%; min-height:0; border:none; border-radius:0;
  display:flex; object-fit:cover;
}
.slide-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.92);
}
.slide-btn:after{
  content:""; position:absolute; top:15px; width:9px; height:9px;
  border-left:1px solid var(--ink); border-bottom:1px solid var(--ink);
}
.slide-btn.prev{left:0;} .slide-btn.prev:after{left:16px; transform:rotate(45deg);}
.slide-btn.next{right:0;} .slide-btn.next:after{left:13px; transform:rotate(-135deg);}
.dots{position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:6px;}
.dots button{
  width:6px; height:6px; border-radius:0; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.dots button.on{background:var(--ink); width:18px; box-shadow:none;}
@media (prefers-reduced-motion:reduce){ .slides{transition:none;} }

/* 수업 소개 본문 */
.course .intro{font-size:14.5px; line-height:1.95; color:var(--ink); font-weight:300; max-width:46em;}

/* 섹션 첫 과정 카드는 상단 선 중복 방지 */
section > .course:first-child{border-top:none; padding-top:0;}

/* 아래에서 살짝 올라오며 등장 */
.js .rise{opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);}
.js .rise.on{opacity:1; transform:translateY(0);}

/* 위로가기 버튼은 항상 노출 */
.top-fab{opacity:1; visibility:visible; pointer-events:auto;}