@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   말리쉬 — style.css

   디자인 방향 (2차)
     순백 배경 · 고딕 단일 서체 · 잉크 블루 강조.

     1차는 따뜻한 종이색(#FCFBF9)에 명조 제목과 딥 틸이었습니다.
     차분했지만 화면에서 다소 흐릿하고 예스러운 인상이 남았습니다.
     2차는 반대로 갑니다 — 배경을 완전한 흰색으로 두고, 잉크를
     더 검게 내려 대비를 세우고, 제목은 명조 대신 고딕 굵은 두께와
     좁은 자간으로 무게를 만듭니다. 서체가 하나로 줄어 로딩도 가볍습니다.

     시그니처 — 시간 자
       상품이 10분·20분·30분 단위로 정의돼 있다는 점은 그대로입니다.
       다만 1차의 눈금 세 개는 화면에서 끊어진 선처럼 보였습니다.
       하나의 가는 선으로 바꾸고 앞 구간만 강조색으로 채웁니다.
       "짧은 단위가 이어진다"는 뜻은 남기고 파편적인 인상만 없앴습니다.

     라인 구분
       회화는 코발트, 내신은 플럼. 두 서비스가 별개라는 구조를
       색으로도 드러냅니다. 강조색을 페이지마다 바꾸는 것이 아니라
       라인 단위로만 바뀌므로 산만해지지 않습니다.

   한글 조판
     word-break: keep-all 이 없으면 어절 중간에서 끊깁니다.
     본문 최대 폭을 34rem 으로 제한합니다 — 한 줄이 길면
     다음 줄 첫 글자를 찾는 데 시선이 흔들립니다.

   개행: LF / 인코딩: UTF-8 (BOM 없음)
   ═══════════════════════════════════════════════════════════ */

/* ── 토큰 ─────────────────────────────────────────────── */

:root {
  /* 색 — 순백 배경 */
  --ink:        #12161C;
  --ink-2:      #3F4854;
  --ink-3:      #6B7683;
  --ink-4:      #9AA3AD;
  --paper:      #FFFFFF;
  --surface:    #F5F6F8;
  --surface-2:  #EAECEF;
  --rule:       #DDE1E6;
  --rule-soft:  #ECEEF1;

  /* 강조 — 기본은 회화(코발트) */
  --accent:     #1A4D8F;
  --accent-ink: #12386A;
  --accent-bg:  #EDF3FA;

  /* 라인별 */
  --conv:       #1A4D8F;
  --conv-bg:    #EDF3FA;
  --tut:        #7E3358;
  --tut-bg:     #F9EFF4;

  /* 서체 — 고딕 하나로 통일 */
  --font-body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
               "Malgun Gothic", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);

  /* 크기 */
  --fs-h1:  1.9375rem;
  --fs-h2:  1.25rem;
  --fs-h3:  1.0625rem;
  --fs-lede: 1.03125rem;
  --fs-body: 0.9875rem;
  --fs-sm:  0.875rem;
  --fs-xs:  0.8125rem;

  /* 간격 */
  --gap:      1rem;
  --gap-2:    1.5rem;
  --section:  3rem;
  --measure:  34rem;
  --wide:     62rem;

  --radius: 5px;
}

@media (min-width: 48rem) {
  :root {
    --fs-h1: 2.5rem;
    --fs-h2: 1.4375rem;
    --fs-lede: 1.0625rem;
    --section: 3.75rem;
  }
}

/* 내신 라인은 강조색이 바뀝니다. body 클래스로 전환합니다. */
body.line-tut {
  --accent:     var(--tut);
  --accent-ink: #632844;
  --accent-bg:  var(--tut-bg);
}

/* ── 기본 ─────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;   /* 앵커 이동 시 헤더에 가리지 않게 */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.8;
  word-break: keep-all;         /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;      /* 긴 URL 은 예외적으로 끊기 */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--accent-ink); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.625rem 1rem;
  z-index: 100;
}
.skip:focus { left: 0; }

/* ── 레이아웃 ─────────────────────────────────────────── */

.site-header,
.site-footer,
main > * {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

main {
  display: block;
  max-width: var(--wide);
  margin: 0 auto;
  padding-bottom: 4rem;
}

main > section,
main > article,
main > nav,
main > header,
main > div {
  max-width: calc(var(--measure) + 2.5rem);
  margin-inline: auto;
}

/* 표와 칩은 더 넓게 */
main > section.teachers,
main > section.price-plan,
main > section.region-grid {
  max-width: calc(var(--wide));
}

/* ── 헤더 ─────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header .inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 3.5rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand:hover { color: var(--ink); }

.site-nav {
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav ul {
  display: flex;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius);
}
.site-nav a:hover { background: var(--surface); color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

/* ── 이동 경로 ────────────────────────────────────────── */

.crumb {
  margin: 1.25rem auto 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.6;
}
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.crumb .sep { margin: 0 0.35em; color: var(--rule); }

/* ── 히어로 ───────────────────────────────────────────── */

.hero { margin: 1.25rem auto 0; }

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.035em;
  margin: 0 0 0.75rem;
  color: var(--ink);
  max-width: 20ch;
}

/* 시그니처 — H1 아래 시간 눈금.
   10분·20분·30분 세 단위를 폭이 다른 세 눈금으로 표현합니다. */
/* 시그니처 — 시간 자.
   앞 구간만 강조색으로 채워 "짧은 단위에서 시작해 이어진다"를 나타냅니다.
   1차의 끊어진 눈금 세 개는 화면에서 깨진 선처럼 보여 폐기했습니다. */
h1::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 2px;
  margin-top: 1.125rem;
  background: linear-gradient(
    to right,
    var(--accent) 0 1.75rem,
    var(--rule) 1.75rem 100%
  );
}

.lede {
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 33rem;   /* 한 줄이 길면 다음 줄 첫 글자를 찾기 어렵습니다 */
  letter-spacing: -0.01em;
}

/* ── 섹션 · 시간 눈금 레일 ────────────────────────────── */

main > section {
  position: relative;
  margin-top: var(--section);
}

main > section > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 0 0 1.125rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
  color: var(--ink);
}

/* 1차에서는 경계선 위에 앰버 막대를 따로 띄웠는데,
   화면에서 선과 분리돼 떠 있는 것처럼 보였습니다.
   지금은 제목 위 굵은 선 자체가 구분자 역할을 합니다. */

main > section > h2 .sub,
main > section > h2 .cnt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-left: 0.5rem;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.55;
  margin: 1.5rem 0 0.375rem;
  color: var(--ink);
}

p { margin: 0 0 1rem; }
main > section p:last-child { margin-bottom: 0; }

.note,
.privacy,
.hub-note {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.more {
  margin-top: 1rem;
  font-size: var(--fs-sm);
}
.more a { font-weight: 600; text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ── 버튼 ─────────────────────────────────────────────── */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover {
  background: var(--surface);
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
}

/* ── 칩 (지역·태그) ───────────────────────────────────── */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.chips a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.chips .cnt {
  margin-left: 0.3em;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.area-nav,
.tag-summary { margin-bottom: 1.5rem; }

/* ── 지역별 안내 ──────────────────────────────────────── */

.areas-lede {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  max-width: 36rem;
}

.area {
  padding: 1.125rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.area:last-child { border-bottom: 0; }
.area h3 { margin-top: 0; }
/* 1차의 앞머리 대시는 화면에서 오타처럼 보였습니다.
   왼쪽 세로선으로 바꿔 목록임을 드러냅니다. */
.area {
  padding-left: 0.875rem;
  border-left: 2px solid var(--rule);
}
.area:hover { border-left-color: var(--accent); }
.area p { margin: 0; color: var(--ink-2); max-width: 36rem; }
.area:target {
  background: var(--surface);
  box-shadow: -0.75rem 0 0 var(--surface), 0.75rem 0 0 var(--surface);
}

/* ── 링크 목록 (과정 · 상황 · 정보글) ─────────────────── */

.courses ul,
.situations ul,
.articles ul,
.gu-cards {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .courses ul,
  .situations ul,
  .articles ul { grid-template-columns: repeat(2, 1fr); }
  .gu-cards { grid-template-columns: repeat(3, 1fr); }
}

.courses a,
.situations a,
.articles a,
.gu-cards a {
  display: block;
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.courses a:hover,
.situations a:hover,
.articles a:hover,
.gu-cards a:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.courses strong,
.situations strong,
.articles strong,
.gu-cards strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
}
.courses span,
.situations span,
.articles span,
.gu-cards span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-3);
}
.articles time {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ── 진행 단계 · 대상 ─────────────────────────────────── */

.target ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.target li {
  position: relative;
  padding-left: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--ink-2);
}
.target li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.5rem;
  height: 1px;
  background: var(--ink-3);
}

.steps h3 { display: flex; gap: 0.625rem; align-items: baseline; }
.steps .num {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps p { color: var(--ink-2); }

.how ol {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how li {
  counter-increment: step;
  position: relative;
  padding: 0.875rem 0 0.875rem 2.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.how li:last-child { border-bottom: 0; }
.how li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.how strong { display: block; font-weight: 700; }
.how span { display: block; font-size: var(--fs-sm); color: var(--ink-2); }

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

.price-brief table,
.price-plan table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.price-brief caption,
.price-plan caption {
  text-align: left;
  padding-bottom: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.price-brief th,
.price-plan th {
  text-align: left;
  font-weight: 600;
}
.price-brief thead th,
.price-plan thead th {
  padding: 0.5rem 0.625rem;
  border-bottom: 2px solid var(--ink);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
}
.price-brief thead th:not(:first-child),
.price-plan thead th:not(:first-child) { text-align: right; }
.price-brief td,
.price-plan td,
.price-brief tbody th,
.price-plan tbody th {
  padding: 0.6rem 0.625rem;
  border-bottom: 1px solid var(--rule-soft);
}
.price-brief td,
.price-plan td { text-align: right; }

.plan-name { margin-bottom: 0.25rem; }
.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-bg);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  vertical-align: 0.15em;
}

/* ── 자주 묻는 질문 ───────────────────────────────────── */

.faq h3 {
  margin: 1.5rem 0 0.5rem;
  padding-left: 1.25rem;
  position: relative;
}
.faq h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
}
.faq p {
  padding-left: 1.25rem;
  color: var(--ink-2);
}

/* ── 본문 (정보글) ────────────────────────────────────── */

article { margin-top: 0; }
article h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
  color: var(--ink);
}
article p { color: var(--ink-2); }
.meta {
  margin: 1rem 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

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

.form form {
  display: grid;
  gap: 0.875rem;
  max-width: 26rem;
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
}
.form label {
  display: grid;
  gap: 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
}
.form input:focus-visible { border-color: var(--accent); }
.form button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
}
.form button:hover { background: var(--accent-ink); }
.form .privacy { margin: 0; }

/* ── 푸터 ─────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.site-footer .inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .legal {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.8;
}
.site-footer .brand-line {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

/* ── 404 ──────────────────────────────────────────────── */

body.e404 { display: grid; place-items: center; min-height: 100vh; text-align: center; }
body.e404 h1::after { margin-inline: auto; }

/* ── 레벨테스트 ───────────────────────────────────────── */

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lt-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.lt-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);    /* 진행 = 시간의 경과. 시그니처와 같은 색 */
  transition: width 0.25s ease;
}

.lt-meta {
  margin: 0.75rem 0 0.25rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.lt-q {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.lt-opts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-opt {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.lt-opt:hover { border-color: var(--accent); background: var(--accent-bg); }
.lt-opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-bg);
  font-weight: 600;
}

.lt-nav { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.lt-nav .btn { font-size: var(--fs-xs); padding: 0.5rem 0.9rem; }
.lt-nav .btn[disabled] { opacity: 0.4; cursor: default; }

.lt-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-bg);
  margin-bottom: 0.75rem;
}
.lt-badge strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
}
.lt-badge span { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-ink); }

.lt-score {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
}
.lt-weak { color: var(--ink-2); }
.lt-why {
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--rule);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.lt-loading { color: var(--ink-3); }

.lt-about ul,
.lt-about li { list-style: none; }
.lt-about ul { margin: 0; padding: 0; }
.lt-about li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.lt-about li:last-child { border-bottom: 0; }

/* ── 내신 · 학교 ─────────────────────────────────────── */

.lines ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .lines ul { grid-template-columns: repeat(2, 1fr); } }
.lines a {
  display: block;
  height: 100%;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
}
.lines a:hover { border-color: var(--accent); background: var(--accent-bg); }
.lines strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}
.lines span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-3);
}

.school {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.school:last-of-type { border-bottom: 0; }
.school h3 { margin-top: 0; }
.school .loc {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 0.4rem;
}
.school p { margin: 0 0 0.35rem; color: var(--ink-2); font-size: var(--fs-sm); }
.school .exam {
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-3);
}
.school .exam strong { color: var(--ink-2); }

.formats ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.formats li { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: 0.25rem; }

.price-plan .c-desc { text-align: left; color: var(--ink-3); font-size: var(--fs-xs); }
.price-brief .c-desc { text-align: left; color: var(--ink-3); font-size: var(--fs-xs); }
.price-intro strong { color: var(--ink); }


/* ── 2차 조정 ─────────────────────────────────────────
   실제 화면에서 확인된 문제들을 고칩니다.
   ───────────────────────────────────────────────────── */

/* 헤더 — 흰 배경에 맞춰 경계만 남깁니다 */
.site-header {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.1875rem;
}
.site-nav a { font-weight: 500; }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

/* 본문 — 줄 길이와 자간 */
main > section p,
article p { max-width: 36rem; }
body { letter-spacing: -0.005em; }

/* 눈에 띄는 강조 대신 밑줄로 — 흰 배경에서 링크 색만으로는 약합니다 */
.areas-lede, .note, .privacy, .hub-note { max-width: 34rem; }

/* 버튼 — 각지고 단단하게 */
.btn {
  border-radius: 3px;
  letter-spacing: -0.01em;
  padding: 0.72rem 1.15rem;
}
.btn.primary { box-shadow: none; }

/* 칩 — 높이 통일 */
.chips a {
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  font-weight: 500;
}

/* 카드형 링크 */
.courses a, .situations a, .articles a, .gu-cards a, .lines a {
  border-radius: 4px;
}
.lines strong { font-weight: 800; letter-spacing: -0.03em; }

/* ── 강사 표 ──
   화면 확인 결과 세 가지가 문제였습니다.
     1) 사진이 72px 정사각으로 잘려 인물 얼굴이 아래에서 잘림
     2) 담당 영역 태그가 세 줄까지 늘어나 행 높이가 들쭉날쭉
     3) 경력 칸이 좁아 두 줄로 접힘
   사진을 세로로 키우고 위쪽 기준으로 자르며,
   태그는 두 개까지만 보이고 나머지는 개수로 접습니다. */

.teacher-table thead th {
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
}
.teacher-table td { padding: 0.9rem 0.75rem; }
.teacher-table .c-img   { width: 76px; }
.teacher-table .c-name  { width: 18%; }
.teacher-table .c-desc  { width: 40%; }
.teacher-table .c-area  { width: 34%; }

.teacher-table .c-img img {
  width: 60px;
  height: 76px;
  border-radius: 3px;
  object-fit: cover;
  object-position: center 18%;   /* 얼굴이 아래에서 잘리던 문제 */
}

.teacher-table .c-name strong { font-weight: 700; letter-spacing: -0.02em; }
.teacher-table .c-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
}

.teacher-table .c-area ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  max-height: 3.4rem;
  overflow: hidden;              /* 세 줄까지 늘어나던 것을 두 줄로 */
}
.teacher-table .c-area li {
  margin: 0;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: var(--surface);
  border-color: transparent;
  font-size: 0.75rem;
  line-height: 1.5;
}

.teacher-table tbody + tbody td { border-top: 2px solid var(--rule); }
.teacher-table tr:target td {
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}



/* 학교 블록 — 지역 항목과 같은 형태로 통일 */
.school {
  padding: 0.9rem 0 0.9rem 0.875rem;
  border-left: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
}
.school:hover { border-left-color: var(--accent); }
.school h3 { margin-top: 0; }
.school .exam { border-left: 0; padding-left: 0; background: none; }

/* 요금표 */
.price-brief table, .price-plan table { font-variant-numeric: tabular-nums; }
.price-brief thead th, .price-plan thead th { border-bottom: 2px solid var(--ink); }
.badge {
  border-radius: 3px;
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

/* FAQ — Q 표식을 각지게 */
.faq h3::before {
  content: "Q";
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--accent);
}

/* 폼 */
.form form { border-radius: 4px; background: var(--surface); }
.form input { border-radius: 3px; }
.form button { border-radius: 3px; letter-spacing: -0.01em; }

/* 푸터 */
.site-footer { background: var(--surface); }
.site-footer .fgroup { margin-bottom: 1.25rem; }
.site-footer .fgroup strong {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.site-footer .fgroup ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .site-footer nav { display: flex; gap: 3rem; }
}

.teacher-table .c-area .more-n {
  background: transparent;
  color: var(--ink-4);
  font-weight: 600;
}

/* ── 비교표 (메인) ────────────────────────────────────
   1차에서 클래스만 두고 스타일을 빠뜨려 열 구분이 안 됐습니다.
   두 서비스를 나란히 놓는 표라 열 경계가 분명해야 읽힙니다. */

.compare table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.compare thead th {
  padding: 0.7rem 1rem;
  border-bottom: 2px solid var(--ink);
  text-align: left;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
/* 두 라인을 각자의 색으로 — 어느 쪽 열인지 한눈에 */
.compare thead th:nth-child(2) { color: var(--conv); }
.compare thead th:nth-child(3) { color: var(--tut); }

.compare tbody th {
  width: 6.5rem;
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  vertical-align: top;
}

.compare tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: top;
}
/* 두 열 사이 경계 — 값이 붙어 보이던 문제 */
.compare tbody td:nth-child(2) { border-right: 1px solid var(--rule); }
.compare tbody td:nth-child(2),
.compare thead th:nth-child(2) { background: var(--conv-bg); }
.compare tbody td:nth-child(3),
.compare thead th:nth-child(3) { background: var(--tut-bg); }

.compare tbody tr:last-child td { border-bottom: 0; }
.compare .note { margin-top: 0.875rem; }

/* 모바일 — 가로 스크롤 대신 세로로 쌓기 */
@media (max-width: 34rem) {
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tbody tr {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .compare tbody th { padding: 0 0 0.35rem; font-size: var(--fs-xs); }
  .compare tbody td {
    padding: 0.4rem 0.75rem;
    border: 0;
    border-left: 3px solid transparent;
    margin-bottom: 0.25rem;
  }
  .compare tbody td:nth-child(2) { border-left-color: var(--conv); background: var(--conv-bg); }
  .compare tbody td:nth-child(3) { border-left-color: var(--tut);  background: var(--tut-bg); }
  .compare tbody td::before {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-3);
  }
  .compare tbody td:nth-child(2)::before { content: "영어회화"; color: var(--conv); }
  .compare tbody td:nth-child(3)::before { content: "내신 대비"; color: var(--tut); }
}

/* ── 3차 조정 — 모바일 세로 길이 ────────────────────────
   실기기에서 확인한 문제들입니다. 페이지가 지나치게 길어져
   스크롤만으로 지치는 구간이 여러 곳 있었습니다.
   ───────────────────────────────────────────────────── */

/* 비교표 — 항목마다 두 라인이 세로로 번갈아 나와 길이가 두 배였습니다.
   모바일에서도 두 열을 나란히 놓아 한눈에 비교되게 합니다. */
@media (max-width: 34rem) {
  .compare tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    padding: 0.75rem 0;
  }
  .compare tbody th {
    grid-column: 1 / -1;
    padding: 0 0 0.2rem;
    font-size: var(--fs-xs);
  }
  .compare tbody td {
    margin: 0;
    padding: 0.5rem 0.625rem;
    font-size: var(--fs-xs);
    line-height: 1.5;
    border-left-width: 3px;
    border-radius: 0 3px 3px 0;
  }
  .compare tbody td::before {
    margin-bottom: 0.15rem;
    font-size: 0.6875rem;
  }
}

/* 지역 카드 — 25개가 한 줄씩 쌓여 화면 세 개 분량이었습니다.
   구 이름만 보이면 충분하므로 격자로 압축합니다. */
.gu-cards { gap: 0.375rem; }
.gu-cards a { padding: 0.625rem 0.75rem; }
.gu-cards strong { font-size: var(--fs-sm); font-weight: 700; }
.gu-cards span {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ink-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 47.9375rem) {
  .gu-cards { grid-template-columns: repeat(2, 1fr); }
  .gu-cards span { display: none; }   /* 좁은 화면에서는 구 이름만 */
}
@media (min-width: 62rem) {
  .gu-cards { grid-template-columns: repeat(4, 1fr); }
}

/* 지역별 안내 — 8곳 전문이 세로로 이어져 가장 긴 구간이었습니다.
   넓은 화면에서는 두 단으로 나눕니다. */
@media (min-width: 48rem) {
  .areas .area-list {
    column-count: 2;
    column-gap: 2rem;
  }
  .areas .area { break-inside: avoid; margin-bottom: 1rem; }
}
.area { padding: 0.75rem 0 0.75rem 0.875rem; }
.area h3 { font-size: var(--fs-sm); margin-bottom: 0.25rem; }
.area p { font-size: var(--fs-sm); line-height: 1.65; }

/* 학교 블록도 같은 방식 */
@media (min-width: 48rem) {
  .schools .school-list { column-count: 2; column-gap: 2rem; }
  .schools .school { break-inside: avoid; margin-bottom: 1rem; }
}
.school h3 { font-size: var(--fs-sm); }
.school p { font-size: var(--fs-sm); }

/* 목록 카드 — 설명 두 줄로 제한해 높이를 고르게 */
.courses span, .situations span, .articles span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 두 라인 카드 — 모바일에서 세로 여백 축소 */
@media (max-width: 39.9375rem) {
  .lines a { padding: 0.875rem 1rem; }
  .lines span { font-size: var(--fs-xs); line-height: 1.6; }
}

/* ── 전환 블록 ────────────────────────────────────────
   모든 동적 페이지 하단에 같은 흐름을 둡니다.
   검색으로 한 페이지만 보고 나가는 경우가 대부분이라,
   그 한 페이지 안에서 다음 행동이 끝나야 합니다.
   ───────────────────────────────────────────────────── */

.flow-lede {
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 4px 4px 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 34rem;
}
.flow-lede strong { color: var(--accent-ink); }

.flow-steps {
  counter-reset: fstep;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.flow-steps li {
  counter-increment: fstep;
  position: relative;
  padding: 0.75rem 0 0.75rem 2.25rem;
  border-bottom: 1px solid var(--rule-soft);
  max-width: 36rem;
}
.flow-steps li:last-child { border-bottom: 0; }
.flow-steps li::before {
  content: counter(fstep);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.flow-steps strong {
  display: block;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}
.flow-steps span {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
}

/* 한 회차 구성 */
.lesson-flow {
  margin: 1rem 0 0;
  max-width: 36rem;
}
.lesson-flow dt {
  margin-top: 0.875rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: -0.02em;
}
.lesson-flow dd {
  margin: 0.25rem 0 0 0.75rem;
  padding-left: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
}

/* 정보글 하단 전환 */
.bridge p { max-width: 36rem; }
.form-lede {
  max-width: 34rem;
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

@media (max-width: 34rem) {
  .flow-steps li { padding-left: 2rem; }
  .lesson-flow dd { margin-left: 0.75rem; }
}

/* ── 4차 — 흰 배경 위 가독성 ────────────────────────────
   순백 배경에 흰 카드만 놓으니 경계가 테두리 하나뿐이라
   화면이 평평했습니다. 두 가지로 층을 만듭니다.
     1) 카드는 옅은 회색 면으로 — 흰 종이 위의 블록처럼
     2) 본문에서 짚어야 할 말에만 밑줄
   밑줄은 문단당 한두 곳으로 제한합니다. 많으면 지저분해지고
   강조가 강조 아닌 것이 됩니다.
   ───────────────────────────────────────────────────── */

/* ── 강조 밑줄 ── */
main p strong,
.lede strong,
.flow-lede strong,
.area p strong,
.school p strong,
.cmp-lede {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.05em;
}
/* 카드·표 안에서는 밑줄을 빼 산만해지지 않게 합니다 */
.courses strong, .situations strong, .articles strong, .gu-cards strong,
.lines strong, .flow-steps strong, .teacher-table strong,
.compare td strong, .price-brief strong, .price-plan strong {
  box-shadow: none;
  padding: 0;
}

/* ── 카드 — 흰 위에 흰이 아니라 옅은 면으로 ── */
.courses a, .situations a, .articles a, .gu-cards a, .lines a {
  background: var(--surface);
  border-color: transparent;
}
.courses a:hover, .situations a:hover, .articles a:hover,
.gu-cards a:hover, .lines a:hover {
  background: var(--paper);
  border-color: var(--accent);
}

/* 칩도 같은 층으로 */
.chips a { background: var(--surface); border-color: transparent; }
.chips a:hover { background: var(--paper); border-color: var(--accent); }

/* ── 표 — 줄무늬로 행을 구분 ── */
.price-brief tbody tr:nth-child(odd),
.price-plan  tbody tr:nth-child(odd),
.teacher-table tbody tr:nth-child(odd) { background: #FAFBFC; }

.price-plan .rec th,
.price-plan .rec td,
.price-brief .rec th,
.price-brief .rec td {
  background: var(--accent-bg);
  font-weight: 600;
}
.t-price th[scope="row"] { white-space: nowrap; }
.t-price .badge {
  margin-left: 0.4rem;
  font-size: 0.6875rem;
  padding: 0.05rem 0.4rem;
  vertical-align: 0.1em;
}

/* ── 섹션 사이 호흡 ── */
main > section + section { margin-top: var(--section); }
.faq h3 { margin-top: 1.75rem; }
.faq p { padding-bottom: 0.25rem; }

/* 본문 첫 문단은 조금 크게 — 어디서 읽기 시작할지 분명해집니다 */
main > section > p:first-of-type { color: var(--ink-2); }

/* 폼 — 흰 배경에서 확실히 구분되게 */
.form form { border-color: var(--rule); }


/* ── 5차 — 비교 카드 · 접기 · 정적 칩 ────────────────── */

/* 비교표를 두 카드로.
   1차 3열 표는 항목마다 두 라인이 번갈아 나와 세로로 길었습니다.
   한 카드 안에서 한 서비스 이야기만 이어지게 묶습니다. */
.cmp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
.cmp {
  padding: 1rem 1.125rem 1.125rem;
  border-radius: 5px;
  border-top: 3px solid var(--conv);
  background: var(--conv-bg);
}
.cmp.tut { border-top-color: var(--tut); background: var(--tut-bg); }

.cmp h3 { margin: 0 0 0.15rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.03em; }
.cmp h3 a { color: var(--conv); text-decoration: none; }
.cmp.tut h3 a { color: var(--tut); }
.cmp h3 a:hover { text-decoration: underline; }

.cmp-lede {
  margin: 0 0 0.875rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  border: 0 !important;
  font-weight: 500 !important;
}

.cmp dl { margin: 0; }
.cmp dt {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-4);
  margin-top: 0.7rem;
}
.cmp dd {
  margin: 0.1rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 26rem) {
  .cmp { padding: 0.875rem 0.875rem 1rem; }
  .cmp dd { font-size: var(--fs-xs); }
}

/* 접기 — 지역·학교 목록이 길어지는 것을 막습니다.
   접힌 내용도 HTML 에 그대로 있어 크롤러는 전부 읽습니다. */
.area-more { margin-top: 1rem; }
.area-more summary {
  cursor: pointer;
  padding: 0.6rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
}
.area-more summary::-webkit-details-marker { display: none; }
.area-more summary::after { content: " ▾"; color: var(--ink-4); }
.area-more[open] summary::after { content: " ▴"; }
.area-more summary:hover { border-color: var(--accent); color: var(--accent); }
.area-more > .area-list,
.area-more > .school-list { margin-top: 1rem; }

/* 담당 영역 칩 — 링크가 아니라 안내 */
.chips.static span {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* 강사 표 — 행 높이를 한 번 더 줄입니다 */
.teacher-table td { padding: 0.6rem 0.7rem; }
.teacher-table .c-img img { width: 46px; height: 58px; }
.teacher-table .c-img { width: 60px; }
/* 모바일 강사 카드 규칙은 teacher-table.css 한 곳에만 둡니다.
   두 파일에 나뉘어 있으면 어느 쪽이 이겼는지 추적이 어려워집니다. */