@charset "utf-8";
/* mc.css — 모두코딩
 *
 * 이 사이트의 본체는 글입니다. 한 페이지에 1,200자 이상 읽어야 하고,
 * 읽다가 상담 신청으로 넘어가는 것이 유일한 동선입니다.
 * 그래서 장식보다 읽는 속도와 구조 인식을 우선합니다.
 *
 * 한 가지만 강하게 씁니다 — 단계 페이지의 '막히는 지점' 문답.
 * 나머지는 조용하게 둡니다.
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --ink:      #1a1d24;   /* 본문. 순검정 대신 푸른기 있는 먹 */
  --ink-mid:  #545c6b;   /* 보조 설명 */
  --rule:     #e3e7ee;   /* 실선 */
  --surface:  #f4f6fb;   /* 표·문답 바탕 */
  --accent:   #2f4bd8;   /* 링크와 실행 */
  --accent-d: #1f34a6;

  /* 절의 성격별 색. 장식이 아니라 무엇을 다루는 절인지 알려주는 표시입니다.
     같은 성격의 절은 어느 페이지에서든 같은 색을 씁니다. */
  --t-core:   #2f4bd8;   /* 이 과정이 무엇인가 — 목표·개념 */
  --t-seq:    #0f8a5f;   /* 순서가 있는 것 — 차시·단계·시작 지점 */
  --t-stuck:  #b5720a;   /* 막히는 지점과 대응 */
  --t-tool:   #6b45c9;   /* 도구·명령어·쓰임새 */
  --t-school: #0d7a9c;   /* 학교·교육과정·시험 */
  --t-money:  #3c4353;   /* 수업료 */
  --t-video:  #c93a3f;   /* 영상 */

  --measure: 36rem;      /* 한글 본문 기준 한 줄 길이 */
  --gap: 1.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system,
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ink);
  background: #fff;
  word-break: keep-all;      /* 한글 단어 중간에서 줄이 끊기지 않게 */
  overflow-wrap: anywhere;
}

/* ── 머리·바닥 ───────────────────────────────── */

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: #fff; z-index: 10;
}
.brand { font-weight: 700; font-size: 1.0625rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.cta-top {
  font-size: 0.9375rem; font-weight: 600;
  color: #fff; background: var(--accent);
  padding: 0.45rem 0.9rem; border-radius: 6px; text-decoration: none;
}
.cta-top:hover { background: var(--accent-d); }

main { max-width: var(--measure); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 1.25rem 3rem;
  color: var(--ink-mid); font-size: 0.9375rem;
}
footer p { max-width: var(--measure); margin: 0 auto 0.4rem; }
footer .note { font-size: 0.875rem; }

/* ── 본문 ────────────────────────────────────── */

h1 {
  font-size: 1.8125rem; line-height: 1.32; font-weight: 700;
  letter-spacing: -0.025em; margin: 0 0 1.5rem;
}

/* 지금 어느 축의 어디인지 — 페이지 첫 줄에서 위치를 잡아줍니다 */
.crumb { font-size: 0.875rem; color: var(--ink-mid); margin: 0 0 0.6rem; }
.crumb a { color: var(--ink-mid); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb i { font-style: normal; padding: 0 0.4rem; color: #b9c0cd; }

/* 사실을 서술하는 절 — 색 띠로 무엇을 다루는 절인지 표시합니다 */
main > section {
  margin: 0 0 0.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--tone, var(--rule));
  border-radius: 10px;
  background: #fff;
}

h2 {
  font-size: 1.125rem; line-height: 1.45; font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--tone, var(--rule));
  display: inline-block;
}

/* 절의 성격별 배정 */
#s-goal,  #c-why,  #l-sum,   #go-intro, #t-pain,  #a-time   { --tone: var(--t-core); }
#s-ses,   #c-first,#l-stage, #g-start,  #s-nav,   #c-lv     { --tone: var(--t-seq); }
#s-why,   #s-stuck,#go-note, #t-check                       { --tone: var(--t-stuck); }
#s-cmd,   #c-use,  #t-fit,   #go-range, #a-city             { --tone: var(--t-tool); }
#g-lead,  #g-school,#g-design,#g-output,#g-fit,   #g-course,
#c-vs,    #c-who,  #go-cert, #a-cal,    #a-pain,  #s-video  { --tone: var(--t-school); }
#m-price                                                    { --tone: var(--t-money); }
#m-video                                                    { --tone: var(--t-video); }

h3 { font-size: 1rem; line-height: 1.5; font-weight: 600; margin: 0 0 0.4rem; }

p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }

/* 관점을 말하는 절 — 사실 서술과 성격이 달라 면으로 구분합니다 */
section.frames { --tone: #8b93a4; background: var(--surface); border-color: #dfe4ee; }
section.frames > h2 { color: var(--ink-mid); font-size: 1rem; }
.frame {
  background: #fff; border: 1px solid #e6eaf2; border-radius: 8px;
  padding: 1rem 1.15rem; margin-bottom: 0.5rem;
}
.frame:last-child { margin-bottom: 0; }
.frame h3 { font-weight: 700; letter-spacing: -0.01em; }
.frame p { color: #3d4450; margin-bottom: 0; }

/* 묻고 답하는 절 */
section.qa-group { --tone: var(--t-school); }
section.qa-group > h2 { font-size: 1rem; }
.qa { padding: 0.9rem 0; border-bottom: 1px dashed var(--rule); }
.qa:last-child { border-bottom: 0; padding-bottom: 0; }
.qa h3 { color: var(--ink); }
.qa h3::before { content: "Q "; color: var(--accent); font-weight: 700; }
.qa p { color: var(--ink-mid); margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-d); }

ul, ol { margin: 0 0 0.9rem; padding-left: 1.15rem; }
li { margin-bottom: 0.35rem; }
li:last-child { margin-bottom: 0; }

/* 차시 목록은 실제로 순서가 있는 내용이라 번호를 그대로 씁니다 */
#s-ses ol { padding-left: 1.4rem; }
#s-ses li::marker { color: var(--ink-mid); font-variant-numeric: tabular-nums; }

/* 명령어는 코드입니다. 고정폭이 정보를 전달합니다 */
#s-cmd ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
#s-cmd li {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.875rem;
  background: var(--surface); color: var(--ink-mid);
  padding: 0.2rem 0.5rem; border-radius: 4px;
}

/* ── 막히는 지점 문답 (이 사이트에서 가장 강한 요소) ── */

dl { margin: 0; }
dt {
  font-weight: 600;
  padding: 0.85rem 0 0.35rem 1.15rem;
  border-left: 3px solid var(--accent);
  margin-left: -0.1rem;
}
dd {
  margin: 0 0 0.25rem 0;
  padding: 0 0 0.85rem 1.15rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-mid);
}
dd:last-child { padding-bottom: 0.5rem; }

/* ── 요금표 ──────────────────────────────────── */

table.price { width: 100%; border-collapse: collapse; margin: 0 0 0.9rem; }
table.price caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
table.price th, table.price td {
  border-bottom: 1px solid var(--rule);
  padding: 0.65rem 0; text-align: left; font-weight: 400;
}
table.price td { text-align: right; font-variant-numeric: tabular-nums; }

.shot { margin: 0 0 0.75rem; }
/* 교육 자료 슬라이드 — 16:9 원본이라 비율 그대로 둡니다 */
.slides { margin-top: 0.9rem; }
.slides figure { margin: 0 0 0.9rem; }
.slides figure:last-child { margin-bottom: 0; }
.slides img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 8px; border: 1px solid var(--rule); background: #fff;
}
.slides figcaption { font-size: 0.8125rem; color: var(--ink-mid); margin-top: 0.4rem; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.9rem; align-items: start; }
.shots figure { margin: 0; }
/* 원본 비율이 제각각이라 틀을 고정하고 잘라 맞춥니다 */
.shots img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: center;
  border-radius: 8px; border: 1px solid var(--rule); background: var(--surface);
}
.shots figcaption { font-size: 0.8125rem; color: var(--ink-mid); margin-top: 0.35rem; }
@media (max-width: 30rem) { .shots { grid-template-columns: 1fr; } }
.shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--rule);
  background: var(--surface);
}

/* 과정 페이지의 레벨 목록 — 썸네일과 설명을 나란히 */
.lvrow { list-style: none; margin: 0 0 0.85rem; }
ul:has(> .lvrow) { padding-left: 0; }
.lvrow a { display: block; text-decoration: none; color: var(--ink); }
.lvrow img {
  display: block; width: 100%; height: auto; aspect-ratio: 720 / 366; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--rule);
}
.lvrow a span { display: block; font-weight: 700; margin: 0.45rem 0 0.15rem; }
.lvrow a:hover span { color: var(--accent); }
.lvrow a:hover img { border-color: var(--accent); }
.lvrow em { font-style: normal; color: var(--ink-mid); font-size: 0.9375rem; }

/* ── 영상 ────────────────────────────────────── */

#m-video .vidrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0; }
.vidcard {
  display: block; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: #fff; padding: 0; font: inherit; color: inherit;
}
/* 썸네일 비율을 고정해 이미지가 늦게 와도 레이아웃이 흔들리지 않게 합니다 */
.vidcard-img { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--surface); }
.vidcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vidcard-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3rem; height: 2.1rem; border-radius: 6px;
  background: rgba(20, 22, 28, 0.72);
}
.vidcard-play::after {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.4rem 0 0.4rem 0.66rem;
  border-color: transparent transparent transparent #fff;
}
.vidcard-t { display: block; padding: 0.6rem 0.7rem; font-size: 0.875rem; line-height: 1.5; }
.vidcard:hover { border-color: var(--accent); }
.vidcard:hover .vidcard-play { background: var(--accent); }

.ytmodal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 14, 20, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ytmodal-in { width: 100%; max-width: 44rem; position: relative; }
.ytmodal-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: 8px; overflow: hidden; }
.ytmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytmodal-x {
  position: absolute; top: -2.4rem; right: 0;
  background: none; border: 0; color: #fff; font-size: 1.25rem;
  cursor: pointer; padding: 0.35rem 0.5rem;
}

/* ── 공통 하단 ───────────────────────────────── */

.sib, .common {
  margin-top: 2rem; padding: 1.3rem 1.25rem;
  background: var(--surface); border-radius: 10px;
}
.sib { margin-bottom: 0.75rem; }
.sib h2, .common h2 { font-size: 1rem; color: var(--ink-mid); }
ul.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
ul.inline li { margin: 0; font-size: 0.9375rem; }

.sib ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.sib li { margin: 0; font-size: 0.9375rem; }

/* ── 상담 폼 ─────────────────────────────────── */

#consult { margin-top: 2rem; padding: 1.5rem 1.25rem 1.75rem; border-top: 0; background: var(--surface); border-radius: 10px; }
#consult h2 { font-size: 1.25rem; margin-bottom: 1rem; }
#mc-consult label { display: block; font-size: 0.9375rem; font-weight: 600; margin: 0.9rem 0 0.35rem; }
#mc-consult input[type="text"], #mc-consult input[type="tel"],
#mc-consult select, #mc-consult textarea {
  width: 100%; padding: 0.6rem 0.7rem;
  border: 1px solid #cdd4e0; border-radius: 6px;
  font: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
#mc-consult textarea { resize: vertical; }
#mc-consult label.chk {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-weight: 400; font-size: 0.9375rem; line-height: 1.6;
}
#mc-consult label.chk input { margin-top: 0.35rem; flex: none; }
#mc-consult button {
  width: 100%; margin-top: 1.25rem; padding: 0.85rem;
  background: var(--accent); color: #fff; border: 0; border-radius: 6px;
  font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer;
}
#mc-consult button:hover { background: var(--accent-d); }

.form-done {
  padding: 1.5rem 1.25rem; background: var(--surface); border-radius: 10px;
  border-left: 4px solid var(--t-seq);
}
.form-done h3 { margin-bottom: 0.4rem; }
.form-done p { color: var(--ink-mid); margin: 0; }

.privacy { margin-top: 0.9rem; font-size: 0.875rem; color: var(--ink-mid); }
.privacy summary { cursor: pointer; }
.privacy p { margin: 0.5rem 0 0; }

/* ── 접근성·반응형 ───────────────────────────── */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  h1 { font-size: 1.5rem; }
  main { padding: 2rem 1.1rem 3rem; }
  #m-video .vidrow { grid-template-columns: 1fr; }
  .ytmodal-x { top: auto; bottom: -2.6rem; right: 50%; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}