/* 강사 사이트 공용 스타일 — 따라하기 가이드(수업들/_따라하기-가이드-틀/guide_kit.py STYLE)와 같은 값 */
:root {
  --bg: #fffdfb; --paper: #fff; --ink: #24221e; --ink2: #4f5b6b; --muted: #797774; --line: #e9e8e7;
  --brand: #1d38d8; --brand-deep: #243c9b; --brand-surface: #eef2ff; --brand-quiet: #f6f8fd; --brand-line: #d4def6;
  --sand: #f3f0eb; --mark: #e54836;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 17px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brand); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
.nb { white-space: nowrap; }
[id] { scroll-margin-top: 90px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.ic { width: 22px; height: 22px; flex-shrink: 0; }

/* 머리글 */
.site-head { position: sticky; top: 0; z-index: 10; background: rgba(255, 253, 251, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.logo small { font-weight: 600; color: var(--ink2); font-size: 15px; margin-left: 6px; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a { color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 14px; border-radius: 99px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); background: var(--brand-surface); }
.nav a.cta { background: var(--brand); color: #fff; }
.nav a.cta:hover { background: var(--brand-deep); }

/* 첫 화면 (교안의 훅) */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.eyebrow { display: inline-block; padding: 6px 14px; border: 1px solid var(--brand-line); border-radius: 99px; color: var(--brand); font-size: 14px; font-weight: 700; background: var(--brand-quiet); }
.hero h1 { font-size: 56px; line-height: 1.22; letter-spacing: -0.045em; margin: 22px 0; font-weight: 800; }
h1 em { font-style: normal; color: var(--brand); }
.hero .lead { font-size: 21px; line-height: 1.7; color: var(--ink2); max-width: 720px; }
.hero .lead b { color: var(--ink); }
.hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 99px; font-weight: 700; text-decoration: none; font-size: 17px; }
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-deep); }
.btn.ghost { border: 1px solid var(--brand-line); background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: var(--brand-quiet); }

.portrait { margin: 0; border-radius: 24px; overflow: hidden; background: var(--sand); max-width: 380px; justify-self: end; width: 100%; }
.portrait img { width: 100%; height: auto; }

.creds { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; }
.creds li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; font-weight: 700; }
.creds li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); transform: translateY(-2px); }
.creds span { font-weight: 500; color: var(--muted); font-size: 15.5px; }

/* 한눈에 보기 — 교안의 비교 칸처럼 베이지 바탕 */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 48px 0 0; }
.facts div { background: var(--sand); border-radius: 18px; padding: 20px 22px; }
.facts dt { font-size: 14px; font-weight: 700; color: var(--muted); }
.facts dd { margin: 6px 0 0; font-weight: 700; font-size: 17px; line-height: 1.5; }

/* 구역 */
section { padding: 72px 0 8px; }
section + section { border-top: 1px solid var(--line); margin-top: 56px; }
.sec-head { margin-bottom: 28px; max-width: 780px; }
.sec-head h2 { font-size: 38px; line-height: 1.35; letter-spacing: -0.04em; font-weight: 800; }
.sec-head p { margin-top: 12px; font-size: 18px; color: var(--ink2); }
.sub-title { font-size: 22px; letter-spacing: -0.03em; margin: 0 0 16px; }

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

/* 카드 — 교안의 장점 카드 */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.card .b-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-surface); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px; }
.card h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.45; }
.card .who { margin-top: 6px; color: var(--brand); font-weight: 700; font-size: 15px; }
.card p, .card ul { margin-top: 10px; color: var(--ink2); font-size: 15.5px; line-height: 1.7; }
.card ul { padding-left: 18px; }
.card li + li { margin-top: 4px; }
.card .meta { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d9d6d1; font-size: 14.5px; font-weight: 600; color: var(--muted); }

/* 출강 이력 — 교안의 할 일 목록 */
.timeline { list-style: none; margin: 0; padding: 6px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 22px 0; }
.timeline li + li { border-top: 1px solid var(--line); }
.timeline time { align-self: start; justify-self: start; background: var(--brand); color: #fff; font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 99px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.timeline h3 { font-size: 19px; line-height: 1.5; letter-spacing: -0.02em; }
.timeline p { margin-top: 6px; color: var(--ink2); font-size: 16px; }
.timeline .meta-line { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d9d6d1; font-size: 14.5px; color: var(--muted); }
.tag { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--brand-surface); color: var(--brand); margin-left: 8px; vertical-align: 2px; }

/* 표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }
table { width: 100%; border-collapse: collapse; font-size: 16.5px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--sand); font-size: 14px; color: var(--muted); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

/* 섭외 단계 — 교안의 STEP 카드 */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--brand-line); border-radius: 14px; padding: 18px; }
.steps li::before { content: "STEP " counter(step); align-self: flex-start; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 11px; border-radius: 99px; letter-spacing: 0.02em; }
.steps strong { font-size: 17px; }
.steps span { color: var(--ink2); font-size: 15.5px; line-height: 1.6; }

/* 자주 묻는 질문 — 교안의 Q&A */
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.faq .qa { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.faq .q { display: flex; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.faq .q::before { content: "Q"; color: var(--brand); }
.faq .a { margin-top: 10px; color: var(--ink2); font-size: 16px; }

/* 채울 자리 — 공개 전에 모두 지운다 */
.todo { border: 2px dashed var(--mark); color: var(--mark); background: #fff7f4; border-radius: 18px; padding: 16px 18px; font-size: 15px; font-weight: 600; }
.photo.todo { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; }
mark.todo-inline { background: #fff7f4; color: var(--mark); border: 1px dashed var(--mark); border-radius: 6px; padding: 0 6px; font-size: 0.9em; font-weight: 600; }

/* 강사 소개 */
.about { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; }
.about .portrait { border-radius: 18px; justify-self: stretch; }
.bio { color: var(--ink2); font-size: 18px; max-width: 760px; }
.bio + .bio { margin-top: 12px; }
.profile { display: grid; grid-template-columns: 84px 1fr; gap: 10px 16px; margin: 16px 0 0; font-size: 15.5px; }
.profile dt { color: var(--muted); font-weight: 700; }
.profile dd { margin: 0; color: var(--ink2); }

/* 문의 — 교안의 '다리' 상자 */
.contact { background: var(--brand-quiet); border: 1px solid var(--brand-line); border-radius: 28px; padding: 48px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; }
.contact h2 { font-size: 30px; line-height: 1.4; letter-spacing: -0.03em; font-weight: 800; }
.contact p { margin-top: 12px; color: var(--ink2); font-size: 17px; }
.contact .lines { margin-top: 24px; display: grid; gap: 10px; }
.contact .lines a { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); font-size: 22px; font-weight: 800; text-decoration: none; letter-spacing: -0.01em; }
.contact .lines a:hover { text-decoration: underline; }
.contact h3 { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.contact ol { list-style: none; margin: 0; padding: 6px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; counter-reset: ask; }
.contact ol li { counter-increment: ask; display: flex; gap: 12px; padding: 11px 0; font-size: 16px; }
.contact ol li + li { border-top: 1px solid var(--line); }
.contact ol li::before { content: counter(ask); width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }

/* 과정 비교표 */
table.compare td { font-size: 15.5px; color: var(--ink2); }
table.compare td:first-child { white-space: normal; color: var(--ink); font-weight: 400; min-width: 200px; }
table.compare td:first-child b { display: block; font-size: 16.5px; font-weight: 800; }
table.compare td:first-child a { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; text-decoration: none; }
table.compare td span { color: var(--muted); font-size: 14px; }

/* 출강 조건 */
.ops { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 4px 24px; }
.ops > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 18px 0; }
.ops > div + div { border-top: 1px solid var(--line); }
.ops dt { font-weight: 800; color: var(--brand); }
.ops dd { margin: 0; font-weight: 700; }
.ops dd span { display: block; margin-top: 4px; font-weight: 400; font-size: 15.5px; color: var(--ink2); }
.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.dl { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: 18px; background: var(--brand-quiet); border: 1px solid var(--brand-line); text-decoration: none; color: var(--ink); }
.dl:first-child { background: var(--brand); border-color: var(--brand); color: #fff; }
.dl:first-child span { color: #dfe5ff; }
.dl:hover { border-color: var(--brand); }
.dl strong { font-size: 18px; letter-spacing: -0.02em; }
.dl span { font-size: 14.5px; color: var(--ink2); }
.dl .dl-k { font-size: 13px; font-weight: 800; color: var(--brand); }
.dl:first-child .dl-k { color: #fff; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.toc a { padding: 8px 14px; border: 1px solid var(--brand-line); border-radius: 99px; background: var(--paper); color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.toc a:hover { background: var(--brand-surface); color: var(--brand); }

.link-card { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
.link-card:hover { border-color: var(--brand); }
.link-card .meta { color: var(--brand); }

/* 문의 폼 */
.inquiry { display: grid; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.inquiry label { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.inquiry label > input, .inquiry label > select, .inquiry label > textarea { display: block; margin-top: 6px; }
.inquiry b { color: var(--mark); font-weight: 800; }
.inquiry i { font-style: normal; font-weight: 500; color: var(--muted); font-size: 13px; }
.inquiry input:not([type=radio]):not([type=checkbox]), .inquiry select, .inquiry textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); width: 100%;
  border: 1px solid #d9d6d1; border-radius: 12px; padding: 11px 14px; background: var(--bg);
}
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.f-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inquiry fieldset { border: 0; margin: 0; padding: 0; }
.inquiry legend { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { display: inline-flex; align-items: center; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { padding: 8px 14px; border: 1px solid #d9d6d1; border-radius: 99px; background: var(--bg); }
.chips label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.chips label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.inquiry .agree { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.inquiry .agree input { width: 18px; height: 18px; accent-color: var(--brand); }
.f-note { font-size: 13.5px; color: var(--muted); }
.inquiry .btn { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.f-status { font-size: 15px; font-weight: 700; min-height: 1em; }
.f-status.ok { color: var(--brand); }
.f-status.err { color: var(--mark); }

.note { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d9d6d1; font-size: 15.5px; color: var(--muted); }

/* 바닥글 — 교안의 colophon */
.site-foot { margin-top: 80px; }
.site-foot .wrap { padding-top: 36px; padding-bottom: 56px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14.5px; }
.site-foot strong { color: var(--ink); font-size: 17px; letter-spacing: -0.02em; }
.site-foot a { color: var(--ink2); }

@media (max-width: 900px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: 40px; }
  .hero .lead { font-size: 18px; }
  .hero-grid { grid-template-columns: 1fr 240px; gap: 24px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .grid.three, .steps { grid-template-columns: repeat(2, 1fr); }
  section { padding-top: 48px; }
  section + section { margin-top: 40px; }
  .sec-head h2 { font-size: 29px; }
  .contact { grid-template-columns: 1fr; padding: 32px 20px; }
  .contact h2 { font-size: 24px; }
  .downloads { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-head .wrap { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .nav { width: 100%; justify-content: space-between; gap: 2px; }
  .nav a { padding: 6px 8px; font-size: 13px; }
  [id] { scroll-margin-top: 110px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid .portrait { order: -1; width: 140px; justify-self: start; border-radius: 18px; }
  .grid.two, .grid.three, .steps, .faq { grid-template-columns: 1fr; }
  .timeline { padding: 4px 18px; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .about { grid-template-columns: 1fr; gap: 0; }
  .about .portrait { display: none; }
  .profile { grid-template-columns: 1fr; gap: 2px; }
  .profile dd + dt { margin-top: 10px; }
  .ops { padding: 4px 18px; }
  .ops > div { grid-template-columns: 1fr; gap: 4px; }
  .f-row.two { grid-template-columns: 1fr; }
  .inquiry { padding: 18px; }
  table.compare thead { display: none; }
  table.compare, table.compare tbody, table.compare tr, table.compare td { display: block; width: 100%; }
  table.compare tr { padding: 14px 18px; border-bottom: 1px solid var(--line); }
  table.compare tr:last-child { border-bottom: 0; }
  table.compare td { border: 0; padding: 2px 0; }
  table.compare td:first-child { margin-bottom: 4px; }
}
.inquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== 메인 — 섹션마다 번호 알약 · 키워드 제목 · 한 줄 설명 (교안 부품을 크게) ===== */
.hero2, .blk, .band { border-top: 0; margin-top: 0; }
.btn .ic, .more .ic, .go .ic { width: 18px; height: 18px; }
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hero2 { padding: 72px 0 0; }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero2 h1 { font-size: 64px; line-height: 1.18; letter-spacing: -0.05em; font-weight: 800; margin: 22px 0 20px; }
.hero2 h1 em { font-style: normal; color: var(--brand); }
.hero2 .lead { font-size: 21px; line-height: 1.65; color: var(--ink2); }
.hero2 .lead b { color: var(--ink); }
.hero2 .actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero2-photo { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 400px; }
.hero2-photo img { width: 100%; height: auto; border-radius: 28px; background: var(--sand); }
.badge { position: absolute; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 11px 16px 11px 12px; font-size: 13.5px; line-height: 1.35; color: var(--ink2); box-shadow: 0 12px 32px -14px rgba(36, 34, 30, 0.28); }
.badge b { display: block; color: var(--ink); font-size: 15px; }
.badge .ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--brand); background: var(--brand-surface); }
.badge.b1 { left: -56px; bottom: 88px; }
.badge.b2 { right: -24px; top: 36px; }

.stats { list-style: none; margin: 72px 0 0; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { padding: 0 28px; }
.stats li:first-child { padding-left: 0; }
.stats li + li { border-left: 1px solid var(--line); }
.stats strong { display: block; font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats small { font-size: 22px; font-weight: 800; margin-left: 2px; }
.stats span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink2); }

.blk { padding: 120px 0; }
.blk.sand { background: #f7f5f1; }
.blk.tight { padding: 24px 0 120px; }
.blk-head { margin-bottom: 52px; max-width: 780px; }
.no { display: inline-block; vertical-align: middle; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.02em; padding: 4px 11px; border-radius: 99px; }
.kick { vertical-align: middle; margin-left: 10px; color: var(--brand); font-weight: 700; font-size: 15px; }
.blk h2, .band h2, .about2 h2 { font-size: 46px; line-height: 1.28; letter-spacing: -0.045em; font-weight: 800; margin-top: 18px; }
.blk h2 em, .about2 h2 em, .contact h2 em { font-style: normal; color: var(--brand); }
.blk-head p { margin-top: 14px; font-size: 20px; color: var(--ink2); }

/* 01 전/후 비교 — 교안의 '치면 / 말하면' */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-col { display: flex; flex-direction: column; min-height: 330px; border-radius: 24px; padding: 34px 36px; }
.vs-col.before { background: var(--sand); color: var(--muted); }
.vs-col.after { background: var(--brand); color: #fff; }
.vs-title { display: flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 800; margin-bottom: 22px; }
.vs-col ol { list-style: none; margin: 0; padding: 0; counter-reset: v; display: grid; gap: 14px; }
.vs-col li { counter-increment: v; display: flex; gap: 14px; align-items: center; font-size: 20px; font-weight: 600; }
.vs-col li::before { content: counter(v); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: #fff; }
.before li::before { color: var(--muted); }
.after li::before { color: var(--brand); }
.vs-end { margin-top: auto; padding-top: 30px; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; }
.before .vs-end { font-size: 22px; }

/* 02 교안 — 교안의 2부 간지(파란 전폭 띠) */
.band { background: var(--brand); color: #fff; padding: 100px 0 92px; }
.band h2 { color: #fff; }
.band h2 u { text-decoration: none; background: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.3) 60%); }
.band p { margin-top: 14px; font-size: 20px; color: #dfe5ff; }
.no.light { background: #fff; color: var(--brand); }
.kick.light { color: #fff; }
.mats { padding-top: 100px; }
.mat { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 56px; align-items: center; }
.mat + .mat { margin-top: 120px; }
.mat.flip .mat-text { order: 2; }
.mat-kick { color: var(--brand); font-weight: 700; font-size: 15px; }
.mat h3 { font-size: 32px; line-height: 1.35; letter-spacing: -0.04em; margin-top: 8px; }
.mat-text > p:not(.mat-kick) { margin-top: 16px; font-size: 18px; color: var(--ink2); }
.mat-text b { color: var(--ink); }
.chips-s { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips-s li { font-size: 13.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--brand-surface); color: var(--brand); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 800; font-size: 16px; text-decoration: none; }
.mat-text > p.more.muted { color: var(--muted); font-weight: 600; font-size: 15px; }
.mat-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mat-shots img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.mat-shots .main { grid-column: 1 / -1; }
.mat-shots img:not(.main) { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }

/* 03 과정 카드 */
.courses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.course { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; color: var(--ink); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.course:hover { border-color: var(--brand); transform: translateY(-2px); }
.course .b-ic, .benefits2 .b-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-surface); color: var(--brand); display: grid; place-items: center; margin-bottom: 18px; }
.course h3 { font-size: 19px; line-height: 1.4; letter-spacing: -0.02em; }
.course p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink2); }
.course .chips-s { margin-top: auto; padding-top: 16px; }
.course .chips-s li { background: var(--sand); color: var(--ink2); }
.course.custom { background: var(--brand-quiet); border-color: var(--brand-line); }
.course .go { margin-top: auto; padding-top: 16px; display: inline-flex; gap: 6px; align-items: center; color: var(--brand); font-weight: 800; }
.center-link { margin-top: 40px; text-align: center; }

/* 04 출강 이력 */
.hist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hist li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.hist time { grid-row: span 2; align-self: start; white-space: nowrap; background: var(--brand-surface); color: var(--brand); font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.hist b { font-size: 18px; letter-spacing: -0.02em; }
.hist span { font-size: 15px; color: var(--ink2); }
.hist li.big { background: var(--brand); border-color: var(--brand); color: #fff; padding: 28px; }
.hist li.big time { background: #fff; }
.hist li.big b { font-size: 22px; }
.hist li.big span { color: #dfe5ff; }
.fine { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* 05 담당자 지원 — 교안의 장점 카드 3×2 */
.benefits2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.benefits2 > div { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.benefits2 h3 { font-size: 19px; letter-spacing: -0.02em; }
.benefits2 p { margin-top: 6px; font-size: 15.5px; color: var(--ink2); }
#support .downloads { margin-top: 20px; }

/* 06 출강 조건 */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.tiles > div { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.tiles .ic { width: 26px; height: 26px; color: var(--brand); margin-bottom: 12px; }
.tiles span { font-size: 14px; font-weight: 700; color: var(--muted); }
.tiles b { font-size: 21px; letter-spacing: -0.03em; }
.tiles small { font-size: 14.5px; color: var(--ink2); }

/* 섭외 절차 — 교안의 '어떻게 하지?' 다리 */
.bridge2 { text-align: center; background: var(--brand-quiet); border: 1px solid var(--brand-line); border-radius: 32px; padding: 56px 40px; }
.bq { font-size: 24px; font-weight: 600; color: var(--muted); }
.ba { margin: 10px 0 32px; font-size: 36px; font-weight: 800; letter-spacing: -0.04em; }
.ba b { color: var(--brand); }
.road { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: left; }
.road li { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--brand-line); border-radius: 16px; padding: 16px 18px; }
.road span { font-size: 12.5px; font-weight: 800; color: var(--brand); }
.road b { font-size: 17px; }
.road small { font-size: 14px; color: var(--ink2); }

/* 07 강사 소개 */
.about2 { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: center; }
.about2 figure { margin: 0; }
.about2 img { width: 100%; height: auto; border-radius: 24px; }
.bio2 { margin-top: 18px; font-size: 19px; color: var(--ink2); max-width: 640px; }
.chips-l { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-l li { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 14.5px; font-weight: 600; }
.works { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.works div { display: flex; gap: 12px; font-size: 15px; }
.works dt { min-width: 72px; color: var(--brand); font-weight: 800; }
.works dd { margin: 0; color: var(--ink2); }

#contact .contact { background: #fff; }
#contact .contact h2 { font-size: 34px; margin-top: 16px; }

@media (max-width: 900px) {
  .hero2 { padding-top: 32px; }
  .hero2-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero2-photo { order: -1; justify-self: start; max-width: 300px; }
  .hero2 h1 { font-size: 42px; }
  .hero2 .lead { font-size: 18px; }
  .badge.b1 { left: auto; right: -40px; bottom: 28px; }
  .badge.b2 { display: none; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 24px; margin-top: 44px; }
  .stats li, .stats li:first-child { padding: 0; border-left: 0 !important; }
  .stats strong { font-size: 36px; }
  .blk { padding: 76px 0; }
  .blk.tight { padding: 0 0 76px; }
  .blk h2, .band h2, .about2 h2 { font-size: 32px; }
  .blk-head { margin-bottom: 32px; }
  .blk-head p, .band p { font-size: 17px; }
  .band { padding: 64px 0 56px; }
  .mats { padding-top: 64px; }
  .versus, .mat, .hist, .about2 { grid-template-columns: 1fr; }
  .vs-col { min-height: 0; padding: 26px 24px; }
  .vs-end { font-size: 26px; }
  .mat { gap: 24px; }
  .mat + .mat { margin-top: 72px; }
  .mat.flip .mat-text { order: 0; }
  .mat h3 { font-size: 26px; }
  .courses, .benefits2, .tiles, .road { grid-template-columns: 1fr 1fr; }
  .bridge2 { padding: 36px 18px; border-radius: 24px; }
  .ba { font-size: 26px; }
  .about2 { gap: 24px; }
  .about2 figure { max-width: 200px; }
  .works { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero2 h1 { font-size: 36px; }
  .courses, .benefits2, .tiles, .road { grid-template-columns: 1fr; }
  .vs-col li { font-size: 18px; }
  .hist li.big b { font-size: 19px; }
}
.mat.flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
@media (max-width: 900px) { .mat.flip { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .benefits2 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefits2 > div { padding: 18px; }
  .benefits2 .b-ic { width: 38px; height: 38px; margin-bottom: 12px; }
  .benefits2 h3 { font-size: 16px; }
  .benefits2 p { font-size: 14px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles > div { padding: 20px 16px; }
  .tiles b { font-size: 17px; }
}