/* 선생님AI연구소 — 공용 스타일 */
:root{
  --cream:#FFFFFF;
  --paper:#F4F6F7;
  --ink:#1B2227;
  --ink-soft:#56626C;
  --line:#DCE1E6;
  --teal:#00695C;
  --teal-soft:#E6F0EE;
  --orange:#C75B12;
  --blue:#1F6F8B;
  --purple:#6B4C9A;
  --green:#2E6B4F;
  --wine:#8E3550;
  --navy:#33517A;
  --white:#fff;
  --radius:6px;
  --shadow:0 1px 3px rgba(20,30,40,.07);
  /* 트랙 페이지가 덮어쓰는 값 */
  --accent:#00695C;
  --accent-soft:#E3EFED;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background:var(--cream); color:var(--ink);
  line-height:1.75; font-size:16px; word-break:keep-all;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 20px}

/* ---------- 상단 바 ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,30,40,.03);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.4px}
.brand .mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:var(--teal);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:800;letter-spacing:-.5px;
}
.brand .bname{display:flex;flex-direction:column;line-height:1.2}
.brand .bname em{
  font-style:normal;font-size:12px;font-weight:700;color:#6B6157;
  letter-spacing:-.2px;margin-bottom:2px;
}
@media(max-width:420px){.brand{font-size:15px}.brand .bname em{font-size:10.5px}}
.nav ul{display:flex;gap:22px;list-style:none;font-size:15px;color:var(--ink-soft)}
.nav ul a:hover{color:var(--teal)}
.nav-cta{
  background:var(--teal);color:#fff;padding:9px 17px;border-radius:4px;
  font-size:14px;font-weight:700;white-space:nowrap;
}
@media(max-width:900px){.nav ul{
    /* ★ 휴대폰에서 메뉴를 통째로 감추면 「책」·「심화과정」으로 갈 길이 없어진다.
       감추는 대신 한 줄로 눕혀 손가락으로 옆으로 밀어 보게 한다. (2026-08-08) */
    display:flex; gap:14px; margin:8px -18px 0; padding:2px 18px 8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; flex:1 0 100%; order:3;
  }
  .nav ul::-webkit-scrollbar{display:none}
  .nav ul li{flex:0 0 auto}
  .nav ul a{white-space:nowrap; font-size:14px}
  .nav{flex-wrap:wrap}}

/* ---------- 히어로 ---------- */
.hero{padding:64px 0 56px;text-align:center;background:
  radial-gradient(1100px 380px at 50% -120px, #EAF3F1 0%, rgba(234,243,241,0) 70%);}
.eyebrow{
  display:inline-block;background:var(--teal-soft);color:var(--teal);
  font-size:13.5px;font-weight:700;padding:6px 15px;border-radius:4px;margin-bottom:20px;
}
.hero h1{font-size:41px;line-height:1.35;letter-spacing:-1.2px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero .sub{margin-top:20px;font-size:18px;color:var(--ink-soft);line-height:1.8}
.btns{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-block;padding:15px 30px;border-radius:4px;font-weight:700;font-size:16px;transition:.15s}
.btn-main{background:var(--teal);color:#fff;box-shadow:0 4px 16px rgba(0,105,92,.25)}
.btn-main:hover{background:#00564B}
.btn-sub{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-sub:hover{border-color:var(--teal);color:var(--teal)}
.hero-note{margin-top:18px;font-size:14px;color:#6B7680}
@media(max-width:640px){.hero h1{font-size:29px}.hero .sub{font-size:16px}}

/* ---------- 사실 띠 ---------- */
.facts{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:26px;padding-bottom:26px}
.fact{text-align:center}
.fact b{display:block;font-size:26px;color:var(--teal);letter-spacing:-.8px}
.fact span{font-size:13.5px;color:var(--ink-soft)}
@media(max-width:640px){.facts .wrap{grid-template-columns:repeat(2,1fr);gap:20px}}

/* ---------- 공통 섹션 ---------- */
section{padding:66px 0}
.sec-head{text-align:center;margin-bottom:40px}
.sec-tag{font-size:13.5px;font-weight:700;color:var(--teal);letter-spacing:.4px}
.sec-head h2{font-size:31px;letter-spacing:-1px;margin-top:9px;line-height:1.4;font-weight:800}
.sec-head p{margin-top:14px;color:var(--ink-soft);font-size:16.5px}
@media(max-width:640px){.sec-head h2{font-size:24px}}

/* ---------- 공감 ---------- */
.pain{background:var(--paper)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.pain-card .q{font-size:17px;font-weight:700;line-height:1.6;letter-spacing:-.4px}
.pain-card .who{font-size:13px;color:var(--orange);font-weight:700;margin-bottom:12px}
.pain-card p{margin-top:12px;font-size:15px;color:var(--ink-soft)}
@media(max-width:900px){.pain-grid{grid-template-columns:1fr}}

.turn{margin-top:34px;text-align:center;background:#fff;border:2px solid var(--teal);border-radius:var(--radius);padding:30px 24px}
.turn b{font-size:21px;letter-spacing:-.6px;line-height:1.6}
.turn p{margin-top:12px;color:var(--ink-soft);font-size:16px}

/* ---------- 트랙 카드 ---------- */
.tracks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.track{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.15s;
}
a.track:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(20,30,40,.12)}
.track .top{padding:22px 24px 18px;color:#fff}
.track.t1 .top{background:var(--orange)}
.track.t2 .top{background:var(--blue)}
.track.t3 .top{background:var(--purple)}
.track.t4 .top{background:var(--green)}
.track.t5 .top{background:var(--wine)}
.track.t6 .top{background:var(--navy)}
.track .top h3{font-size:21px;letter-spacing:-.6px}
.track .top span{font-size:13.5px;opacity:.92}
.track .body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column}
.track ul{list-style:none;font-size:15px;color:var(--ink-soft)}
.track li{padding:6px 0 6px 17px;position:relative}
.track li:before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.badge{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:4px;margin-bottom:14px}
.badge.on{background:#E6F4EA;color:#1B7A3E}
.badge.soon{background:#EDF1F3;color:#6B7680}
.track .foot{margin-top:auto;padding-top:18px;font-size:14.5px;font-weight:700}
.track.t1 .foot{color:var(--orange)}
.track.t2 .foot{color:var(--blue)}
.track.t3 .foot{color:var(--purple)}
.track.t4 .foot{color:var(--green)}
.track.t5 .foot{color:var(--wine)}
.track.t6 .foot{color:var(--navy)}
@media(max-width:900px){.tracks{grid-template-columns:1fr}}

/* ---------- 표 ---------- */
.curri{background:var(--paper)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:#fff;min-width:640px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:#EEF2F4;font-weight:700;font-size:14px;color:var(--ink-soft);white-space:nowrap}
td.num{text-align:right;white-space:nowrap;color:var(--ink-soft)}
tr:last-child td{border-bottom:none}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:middle}
.tfoot{margin-top:16px;font-size:14.5px;color:var(--ink-soft);text-align:center}

/* ---------- 영상 ---------- */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.video{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ratio{position:relative;width:100%;padding-top:56.25%;background:#111}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .cap{padding:15px 18px;font-size:15px;font-weight:700}
.video .cap span{display:block;font-weight:400;font-size:13.5px;color:var(--ink-soft);margin-top:3px}
@media(max-width:900px){.videos{grid-template-columns:1fr}}

/* ---------- 3분할 카드 ---------- */
.why{background:var(--paper)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow)}
.why-card .no{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:1px}
.why-card h3{font-size:19px;margin:10px 0 12px;letter-spacing:-.5px;line-height:1.5}
.why-card p{font-size:15px;color:var(--ink-soft)}
.quote{margin-top:30px;text-align:center;font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-.5px;padding:26px;background:#fff;border:1px dashed var(--accent);border-radius:var(--radius)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}

/* ---------- 수강 방식 ---------- */
.ways{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.way{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.way h3{font-size:18.5px;letter-spacing:-.5px;margin-bottom:8px}
.way h3 i{font-style:normal;color:var(--accent);margin-right:7px}
.way p{font-size:15px;color:var(--ink-soft)}
.way .tagline{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--orange)}
@media(max-width:900px){.ways{grid-template-columns:1fr}}

/* ---------- 자료집 ---------- */
.book{background:var(--paper)}
.book-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}
.book-box h3{font-size:24px;letter-spacing:-.7px;line-height:1.45}
.book-box p{margin-top:14px;color:var(--ink-soft);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:700;padding:6px 13px;border-radius:8px}
.sample{background:#EEF2F4;border-radius:12px;padding:20px 22px;font-size:14.5px;line-height:1.85}
.sample .lbl{display:block;margin-bottom:10px;font-size:12.5px;font-weight:800;color:var(--orange);letter-spacing:.5px}
.sample .warn{display:block;margin-top:10px;color:var(--accent);font-weight:700}
@media(max-width:900px){.book-box{grid-template-columns:1fr;gap:22px}}

/* ---------- FAQ ---------- */
details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
summary{padding:18px 22px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--accent);font-size:21px;font-weight:800;flex:0 0 auto}
details[open] summary:after{content:"−"}
details .ans{padding:0 22px 20px;color:var(--ink-soft);font-size:15.5px;border-top:1px solid var(--line);padding-top:16px}

/* ---------- 문의 ---------- */
.contact{background:var(--accent);color:#fff;text-align:center}
.contact h2{font-size:29px;letter-spacing:-1px;line-height:1.45}
.contact p{margin-top:16px;font-size:16.5px;opacity:.92;line-height:1.8}
.mailbox{display:inline-block;margin-top:28px;background:#fff;color:var(--accent);padding:18px 34px;border-radius:var(--radius);font-size:21px;font-weight:800;letter-spacing:.3px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
.contact .small{margin-top:18px;font-size:14px;opacity:.85}
@media(max-width:640px){.contact h2{font-size:23px}.mailbox{font-size:16px;padding:16px 22px}}

/* ---------- 푸터 ---------- */
footer{background:#EEF2F4;border-top:1px solid var(--line);padding:34px 0;font-size:14px;color:var(--ink-soft)}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a:hover{color:var(--teal)}
.notice{margin-top:16px;font-size:13px;color:#6B7680;line-height:1.7}

/* ---------- 소장 인사말 ---------- */
.greet{background:var(--paper)}
.greet-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 44px;box-shadow:var(--shadow);max-width:840px;margin:0 auto;
  border-top:5px solid var(--teal);
}
.greet-box .lead{
  font-size:21px;font-weight:800;letter-spacing:-.6px;line-height:1.6;
  color:var(--ink);margin-bottom:22px;
}
.greet-box p{font-size:16.5px;color:var(--ink-soft);line-height:1.95;margin-bottom:16px}
.greet-box p b{color:var(--ink)}
.greet-sign{
  margin-top:30px;padding-top:24px;border-top:1px dashed var(--line);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.greet-sign .org{font-size:14.5px;color:var(--ink-soft)}
.greet-sign .who{font-size:19px;font-weight:800;letter-spacing:-.4px}
.greet-sign .who span{font-size:14.5px;font-weight:600;color:var(--ink-soft);margin-left:7px}
@media(max-width:640px){
  .greet-box{padding:30px 24px}
  .greet-box .lead{font-size:18.5px}
  .greet-box p{font-size:15.5px}
}

/* ---------- 수강 흐름 (4단계) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:st}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 20px;box-shadow:var(--shadow);position:relative;
}
.step:before{
  counter-increment:st;content:counter(st);
  position:absolute;top:-13px;left:20px;
  width:27px;height:27px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.step h3{font-size:17.5px;letter-spacing:-.5px;margin:8px 0 9px}
.step p{font-size:14.5px;color:var(--ink-soft)}
.step .tag{
  display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;
  padding:4px 11px;border-radius:4px;background:#EDF1F3;color:#6B7680;
}
.step .tag.free{background:#E6F4EA;color:#1B7A3E}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- 심화과정 카드 ---------- */
.deep{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.deep-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;box-shadow:var(--shadow);border-top:4px solid var(--teal);
}
.deep-card h3{font-size:18px;letter-spacing:-.5px;margin-bottom:10px}
.deep-card p{font-size:14.5px;color:var(--ink-soft)}
.deep-card .who2{margin-top:12px;font-size:13px;font-weight:700;color:var(--teal)}
@media(max-width:900px){.deep{grid-template-columns:1fr}}

/* ---------- 로드맵 ---------- */
.roadmap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 26px;box-shadow:var(--shadow)}
.rm{display:flex;gap:18px;padding:20px 0;border-bottom:1px dashed var(--line);align-items:flex-start}
.rm:last-child{border-bottom:none}
.rm .when{flex:0 0 92px;font-size:13.5px;font-weight:800;color:var(--teal);padding-top:2px}
.rm .what b{display:block;font-size:16.5px;letter-spacing:-.4px;margin-bottom:5px}
.rm .what p{font-size:14.5px;color:var(--ink-soft)}
.rm.now .when{color:var(--orange)}
@media(max-width:640px){.rm{flex-direction:column;gap:6px}.rm .when{flex:none}}

/* ---------- 강의 화면 스트립 ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shot{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.shot span{display:block;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shots{grid-template-columns:1fr}}

/* ---------- 커리큘럼 아코디언 (강의실) ---------- */
.acc{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow)}
.acc summary{
  padding:18px 22px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";color:var(--accent);font-size:21px;font-weight:800;margin-left:auto}
.acc[open] summary:after{content:"−"}
.acc .sdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.acc .stitle{font-weight:800;font-size:16.5px;letter-spacing:-.4px}
.acc .smeta{font-size:13px;color:#6B7680;white-space:nowrap}
.acc .schip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:4px;white-space:nowrap}
.schip.free{background:#E6F4EA;color:#1B7A3E}
.schip.link{background:var(--accent-soft);color:var(--accent)}
.schip.wait{background:#EDF1F3;color:#6B7680}
.lec{border-top:1px solid var(--line)}
.lec-row{
  display:flex;align-items:center;gap:12px;padding:12px 22px;
  border-bottom:1px dashed var(--line);font-size:14.5px;
}
.lec-row:last-child{border-bottom:none}
.lec-row .no{flex:0 0 34px;font-size:12.5px;font-weight:800;color:#B5AC9F}
.lec-row .nm{color:var(--ink)}
.lec-row .keep{margin-left:auto;font-size:12.5px;color:#6B7680;white-space:nowrap}
a.lec-row{transition:.12s}
a.lec-row:hover{background:var(--accent-soft)}
a.lec-row .keep{color:var(--accent);font-weight:700}

/* =========================================================
   트랙 상세 페이지 전용
   ========================================================= */
.t-hero{padding:56px 0 50px;color:#fff;background:var(--accent);text-align:center}
.t-hero .back{display:inline-block;font-size:14px;opacity:.85;margin-bottom:16px}
.t-hero .back:hover{opacity:1}
.t-hero h1{font-size:38px;letter-spacing:-1.2px;line-height:1.35;font-weight:800}
.t-hero .who{margin-top:14px;font-size:16.5px;opacity:.93}
.t-hero .state{
  display:inline-block;margin-top:22px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);padding:8px 18px;border-radius:4px;
  font-size:14px;font-weight:700;
}
@media(max-width:640px){.t-hero h1{font-size:27px}}

.t-why{background:var(--paper)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.comp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow)}
.comp .lb{font-size:13px;font-weight:800;letter-spacing:.5px;margin-bottom:10px}
.comp.a .lb{color:#6B7680}
.comp.b .lb{color:var(--accent)}
.comp p{font-size:15.5px;color:var(--ink-soft)}
.comp b{color:var(--ink)}
@media(max-width:900px){.compare{grid-template-columns:1fr}}

.risk{background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:28px 26px;margin-top:22px}
.risk h3{font-size:19px;letter-spacing:-.5px;margin-bottom:16px;color:var(--accent)}
.risk ul{list-style:none}
.risk li{padding:9px 0 9px 26px;position:relative;font-size:15.5px;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.risk li:last-child{border-bottom:none}
.risk li:before{content:"★";position:absolute;left:0;top:9px;color:var(--accent);font-size:13px}
.risk li b{color:var(--ink)}

.legal{background:var(--accent-soft);border-radius:var(--radius);padding:26px 24px;margin-top:22px}
.legal h3{font-size:18px;color:var(--accent);margin-bottom:12px;letter-spacing:-.4px}
.legal p{font-size:15.5px;color:var(--ink-soft)}
.legal .caution{margin-top:14px;font-size:14px;color:#8B5A2B;background:#FFF6E5;border-radius:9px;padding:12px 15px;line-height:1.7}

.stage-list{display:grid;gap:12px}
.stage{
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--accent);
  border-radius:12px;padding:20px 22px;box-shadow:var(--shadow);
}
.stage .hd{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.stage .hd b{font-size:17.5px;letter-spacing:-.5px}
.stage .hd span{font-size:13.5px;color:#6B7680;white-space:nowrap}
.stage .docs{margin-top:10px;font-size:15px;color:var(--ink-soft)}
.stage .core{
  margin-top:12px;font-size:14.5px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);display:inline-block;padding:6px 13px;border-radius:8px;
}