@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   이룸코칭 — style.css

   주제      초·중·고 학부모가 "우리 아이 학교 시험을 누가 어떻게
             봐주는가" 를 확인하러 오는 사이트
   주요 동작 학교명 · 출제 경향 · 등록번호 · 교습비를 대조해 판단
   시각 언어 성적표 · 학사 일정표 · 등록 원부 — 카드가 아니라 괘선

   힘을 준 곳은 한 군데, 지점 페이지의 교습비 표입니다.
   학원법 필수 표시사항이자 학부모가 가장 먼저 찾는 정보이므로
   굵은 괘선과 큰 숫자로 처리하고 나머지는 조용하게 둡니다.

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

:root {
  /* 따뜻한 잉크. 검정 대신 진한 갈색기 — 남색보다 부드럽게 읽힙니다 */
  --ink:        #3a342e;
  --ink-soft:   #6f6459;
  --ink-faint:  #9b9086;

  /* 살짝 노란기 도는 흰색. 크림베이지가 아닙니다 */
  --paper:      #fffcf8;
  --paper-alt:  #fdf1e7;   /* 연한 살구 — 표 머리 · 보조 영역 */

  --rule:       #ede0d2;   /* 따뜻한 회갈색 괘선 */
  --rule-bold:  #d9a877;   /* 표 상하단 — 진하지만 딱딱하지 않게 */

  /* 감귤. 와와학습코칭 로고 계열입니다 */
  --accent:     #e4661f;
  --accent-ink: #c1500f;
  --accent-pale:#fdece0;

  /* 잔디 — 잘된 것 · 확인 표시에만 */
  --ok:         #2e9873;

  --wrap: 60rem;
  --gap:  clamp(2.5rem, 6vw, 4.5rem);
  --r:    10px;            /* 모서리 */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  font-feature-settings: "tnum";      /* 숫자 대조가 이 사이트의 일 */
  -webkit-font-smoothing: antialiased;
}

/* 제목은 크기가 아니라 굵기와 자간으로 세웁니다 */
h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: keep-all;               /* 한글 어절 단위 줄바꿈 */
}
h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); }
h2 { font-size: clamp(1.2rem, 2.6vw, 1.4rem); }
h3 { font-size: 1.02rem; font-weight: 600; }

p { margin: 0 0 1rem; max-width: 62ch; }

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

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

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

/* ── 머리글 ─────────────────────────────────────────────
   로고 아래 가는 선 하나. 그림자 없음.                     */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 1.5rem;
  display: flex; align-items: baseline; gap: 2rem; flex-wrap: wrap;
}
.brand {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.04em;
  color: var(--ink); text-decoration: none;
}
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] {
  color: var(--ink); font-weight: 700;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}

main { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem 5rem; }

/* ── 현재 위치 ──────────────────────────────────────── */
.crumb {
  font-size: .84rem; color: var(--ink-faint);
  padding: 1.25rem 0 0; letter-spacing: -0.01em;
}
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { margin: 0 .35rem; color: var(--rule); }

/* ── 히어로 ─────────────────────────────────────────────
   문서의 표제부. 제목 아래 굵은 선으로 본문과 끊습니다.   */
.hero {
  padding: 2rem 0 1.75rem;
  border-bottom: 2px solid var(--rule-bold);
  margin-bottom: var(--gap);
}
.eyebrow {
  margin: 0 0 .5rem;
  font-size: .82rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0;
}
.hero h1 { margin-bottom: .75rem; }
.lede { font-size: 1.05rem; color: var(--ink-soft); margin: 0; max-width: 58ch; }
.lede mark {
  background: none; color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -0.4em 0 rgba(200, 71, 47, .14);
}

/* 허니팟 — 사람에게 보이면 안 됩니다.
   display:none 은 일부 봇이 건너뛰므로 화면 밖으로 밀어냅니다. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── 섹션 ───────────────────────────────────────────────
   제목 위 가는 선. 카드로 감싸지 않습니다.                 */
section { margin: 0 0 var(--gap); }
section > h2 {
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  margin-bottom: .9rem;
}
.hero + section > h2 { border-top: 0; padding-top: 0; }
.areas-lede, .flow-lede, .price-intro, .form-lede, .cmp-lede {
  color: var(--ink-soft); margin: 0 0 1.25rem;
}

/* 섹션 래퍼 — 공통 section 규칙을 그대로 씁니다.
   개별 스타일이 아니라 이름을 남겨두는 목적입니다. */
.reg, .price, .schools, .areas, .area-detail, .school-detail,
.where, .grades, .branches, .courses, .nearby, .articles,
.flow, .how, .faq, .lines, .toc, .bridge, .form, .note-box { }

/* ── 목록형 링크 (지점 · 정보글 · 과정) ───────────────
   행 단위 괘선. 표처럼 훑어 내려가는 동작에 맞춥니다.      */
.branches ul, .articles ul, .courses ul, .how ul {
  list-style: none; margin: 0; padding: 0;
}
.branches li, .articles li, .courses li { border-bottom: 1px solid var(--rule); }
.branches li:first-child, .articles li:first-child, .courses li:first-child {
  border-top: 1px solid var(--rule);
}
.branches li a, .articles li a, .courses li a {
  display: block; padding: .95rem .25rem; text-decoration: none; color: var(--ink);
}
.branches li a:hover, .articles li a:hover, .courses li a:hover {
  background: var(--paper-alt);
  border-radius: var(--r);
}
.branches li strong, .articles li strong, .courses li strong {
  display: block; font-weight: 600; font-size: 1rem;
}
.branches li span, .articles li span, .courses li span {
  display: block; font-size: .88rem; color: var(--ink-soft); margin-top: .15rem;
}
.how li { padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.how li:last-child { border-bottom: 0; }

/* ── 칩 (지역 · 과목 · 학년) ───────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.chips a {
  display: inline-block; padding: .35rem .7rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  font-size: .9rem; text-decoration: none; color: var(--ink);
}
.chips a:hover { border-color: var(--ink); background: var(--paper-alt); }

/* ── 라인 선택 (메인) ───────────────────────────────────
   메인의 첫 갈림길. 세로 괘선으로 나란히 세웁니다.         */
.lines .gu-cards { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.gu-card {
  display: block; padding: 1.5rem .25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.gu-card:hover { background: var(--paper-alt); }
.gu-card strong { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em; }
.gu-card .badge {
  display: block; margin: .1rem 0 .5rem;
  font-size: .85rem; color: var(--accent); font-weight: 600;
}
.gu-card p { margin: 0 0 .35rem; color: var(--ink-soft); }
.gu-card .meta { font-size: .85rem; color: var(--ink-faint); }

@media (min-width: 48rem) {
  .lines .gu-cards { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
  .gu-card { border-bottom: 0; border-left: 1px solid var(--rule); padding: 1.5rem 1.25rem; }
  .gu-card:first-child { border-left: 0; padding-left: .25rem; }
}

/* ══════════════════════════════════════════════════════
   교습비 표 — 이 사이트에서 힘을 준 유일한 곳
   학원법 필수 표시사항이자 학부모가 가장 먼저 찾는 정보
   ══════════════════════════════════════════════════════ */
table.fee {
  width: 100%; border-collapse: collapse;
  margin: 0 0 1rem;
  border-top: 2px solid var(--rule-bold);
  border-bottom: 2px solid var(--rule-bold);
}
table.fee thead { background: var(--paper-alt); }
table.fee thead th {
  padding: .7rem .5rem;
  font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  text-align: left; border-bottom: 1px solid var(--rule-bold);
}
table.fee tbody th, table.fee tbody td {
  padding: .85rem .5rem;
  border-bottom: 1px solid var(--rule);
  text-align: left; font-weight: 400;
}
table.fee tbody tr:last-child th, table.fee tbody tr:last-child td { border-bottom: 0; }
table.fee tbody th { font-weight: 600; }
table.fee td:last-child {
  text-align: right; font-size: 1.12rem; font-weight: 700; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.fee thead th:last-child { text-align: right; }

/* ── 일반 표 (과목별 가능 학년 · 시간표) ──────────────── */
.grades table, .how table {
  width: 100%; border-collapse: collapse; font-size: .95rem;
  border-top: 1px solid var(--rule-bold);
}
.grades th, .grades td, .how table th, .how table td {
  padding: .65rem .5rem; border-bottom: 1px solid var(--rule); text-align: left;
}
.grades thead th, .how table thead th {
  font-size: .8rem; color: var(--ink-soft); font-weight: 600;
}
.grades tbody th, .how table tbody th {
  width: 5.5rem; font-weight: 600; color: var(--ink);
}

/* ── 등록 정보 — 등록 원부의 시각 언어 ─────────────────── */
.reg-list {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0;
  margin: 0; font-size: .95rem;
  border-top: 1px solid var(--rule-bold);
}
.reg-list dt {
  padding: .7rem .5rem .7rem 0;
  color: var(--ink-soft); font-weight: 600; font-size: .85rem;
  border-bottom: 1px solid var(--rule);
}
.reg-list dd {
  margin: 0; padding: .7rem 0 .7rem .5rem;
  border-bottom: 1px solid var(--rule);
}

/* ── 학교 · 지역 서술 ──────────────────────────────────── */
.school-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.school, .area {
  padding: 1.15rem .25rem; border-bottom: 1px solid var(--rule);
}
.school h3, .area h3 { margin: 0 0 .4rem; }
.school h3 .loc { font-weight: 400; font-size: .85rem; color: var(--ink-faint); margin-left: .4rem; }
.school p, .area p { margin: 0 0 .4rem; }
.exam { font-size: .92rem; color: var(--ink-soft); }
.meta { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .3rem; }
.meta strong { color: var(--ink); font-weight: 600; margin-right: .4rem; }

.areas > div:last-child, .school-list > div:last-child { border-bottom: 1px solid var(--rule); }

/* ── 정보글 ─────────────────────────────────────────────
   읽는 페이지이므로 행간을 넓히고 폭을 좁힙니다.           */
.toc {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1rem .25rem; margin: 0 0 2.5rem;
}
.toc h2 {
  border: 0; padding: 0; margin: 0 0 .5rem;
  font-size: .82rem; color: var(--ink-soft); font-weight: 600;
}
.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.toc li { margin: .2rem 0; font-size: .92rem; break-inside: avoid; }

.post { max-width: 38rem; }
.post h2 {
  border: 0; padding: 2.5rem 0 0; margin: 0 0 .6rem;
  font-size: 1.25rem;
}
.post p { line-height: 1.9; }

.bridge {
  border-top: 1px solid var(--rule); padding-top: 1.25rem;
  font-size: .95rem; color: var(--ink-soft);
}

/* ── FAQ ────────────────────────────────────────────────
   질문 왼쪽에 강조선. 훑을 때 질문만 눈에 들어오게.        */
.faq dl { margin: 0; border-top: 1px solid var(--rule); }
.faq dt {
  padding: 1rem 0 .35rem .9rem;
  font-weight: 600; border-left: 3px solid var(--accent);
}
.faq dd {
  margin: 0 0 0 .85rem; padding: 0 0 1rem;
  color: var(--ink-soft); border-bottom: 1px solid var(--rule);
}

/* ── 진행 흐름 (허브 전용) ─────────────────────────────
   실제로 순서가 있는 내용이므로 번호를 씁니다.             */
.flow-steps { list-style: none; counter-reset: st; margin: 0 0 1.5rem; padding: 0; }
.flow-steps li {
  counter-increment: st; position: relative;
  padding: .8rem 0 .8rem 2.4rem; border-bottom: 1px solid var(--rule);
}
.flow-steps li::before {
  content: counter(st); position: absolute; left: 0; top: .85rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.flow-steps strong { display: block; font-weight: 600; }
.flow-steps span { color: var(--ink-soft); font-size: .95rem; }

/* ── 전환 블록 (지역 · 지점 · 과정) ─────────────────────
   허브의 4단계 흐름과 달리, 그 페이지의 실제 데이터를
   문장에 넣는 짧은 블록입니다. 전환 동선을 유지하면서
   페이지마다 문자열이 갈리게 하는 것이 목적입니다.         */
.cta-local {
  background: var(--paper-alt);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem; margin-top: var(--gap);
}
.cta-local h2 { border: 0; padding: 0; margin: 0 0 .5rem; }
.cta-local .flow-lede { font-size: 1.02rem; color: var(--ink); margin-bottom: .5rem; }
.cta-local .note { margin-bottom: 1.25rem; }

/* ── 버튼 ───────────────────────────────────────────────
   모서리 거의 없음. 그림자 없음.                           */
.cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.btn {
  display: inline-block; padding: .7rem 1.3rem;
  border: 1px solid var(--ink); border-radius: var(--r);
  font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--ink);
  background: var(--paper);
}
.btn:hover { background: var(--paper-alt); 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; }

/* ── 상담 폼 ────────────────────────────────────────────── */
.form {
  border-top: 1px solid var(--rule); padding-top: 1.5rem;
}
.form label { display: block; margin: 0 0 .9rem; font-size: .9rem; font-weight: 600; }
.form input, .form select, .form textarea {
  display: block; width: 100%; margin-top: .3rem;
  padding: .65rem .75rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--ink); outline: none;
}
.privacy { font-size: .85rem; color: var(--ink-faint); }

/* ── 안내 상자 ─────────────────────────────────────────── */
.note {
  font-size: .88rem; color: var(--ink-soft); margin: 0 0 .4rem;
}
.note-box {
  border-left: 3px solid var(--rule); padding: .1rem 0 .1rem 1rem;
}
.more { margin: 1rem 0 0; font-size: .92rem; }
.badge {
  font-size: .82rem; color: var(--accent); font-weight: 600;
}

/* ── 바닥글 ─────────────────────────────────────────────── */
.site-footer {
  border-top: 2px solid var(--rule-bold);
  background: var(--paper-alt);
  padding: 2.5rem 0 3rem;
}
.site-footer .inner { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.brand-line { font-weight: 700; letter-spacing: -0.03em; margin: 0 0 1.5rem; }
.site-footer nav { display: grid; gap: 1.75rem; margin-bottom: 2rem; }
.fgroup strong { display: block; font-size: .85rem; margin-bottom: .5rem; }
.fgroup ul { list-style: none; margin: 0; padding: 0; }
.fgroup li { margin: .3rem 0; }
.fgroup a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.fgroup a:hover { color: var(--ink); text-decoration: underline; }
.legal { font-size: .84rem; color: var(--ink-faint); max-width: 68ch; margin: 0 0 .5rem; }

@media (min-width: 40rem) {
  .site-footer nav { grid-template-columns: repeat(4, 1fr); }
}

/* ── 404 ────────────────────────────────────────────────── */
.e404 { max-width: var(--wrap); margin: 5rem auto; padding: 0 1.5rem; }

/* ── 좁은 화면 ──────────────────────────────────────────── */
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .site-header .inner { gap: .75rem; padding: .9rem 1.25rem; }
  .site-nav ul { gap: 1rem; }
  main { padding: 0 1.25rem 3.5rem; }
  .reg-list { grid-template-columns: 1fr; }
  .reg-list dt { border-bottom: 0; padding-bottom: 0; }
  .reg-list dd { padding-left: 0; padding-top: .1rem; }
  .toc ol { columns: 1; }
  table.fee td:last-child { font-size: 1rem; }
  .cta .btn { flex: 1 1 100%; text-align: center; }
}

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

/* ── 인쇄 (교습비 표를 출력해 비교하는 경우) ────────────── */
@media print {
  .site-header, .site-footer, .cta, .form, .crumb { display: none; }
  body { font-size: 11pt; }
  a { color: var(--ink); text-decoration: none; }
}

/* ── 핵심 답변 ─────────────────────────────────────────
   페이지 맨 위 한 문단. 네이버 AI 브리핑과 생성형 검색이
   인용하는 형태입니다. 질문에 대한 답을 여기서 완결합니다. */
.answer {
  background: var(--accent-pale);
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  margin: 0 0 var(--gap);
}
.answer p { margin: 0; font-size: 1.02rem; line-height: 1.8; max-width: 62ch; }

/* ── 상담 신청 폼 ─────────────────────────────────────── */
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.chips-field { border: 0; padding: 0; margin: 0 0 .9rem; }
.chips-field legend { font-size: .9rem; font-weight: 600; padding: 0; margin-bottom: .45rem; }
.chip { display: inline-block; margin: 0 .4rem .4rem 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; padding: .4rem .8rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  font-size: .9rem; font-weight: 500;
}
.chip input:checked + span {
  border-color: var(--accent); background: var(--accent); color: #fff;
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.agree { margin: 1.25rem 0; font-size: .9rem; }
.agree > label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.agree input[type="checkbox"] { width: auto; margin: .35rem 0 0; flex-shrink: 0; }
.agree em { font-style: normal; color: var(--accent); font-weight: 600; }
.agree details { margin: .5rem 0 0 1.6rem; }
.agree summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft); }
.agree ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--ink-soft); }
.agree li { margin: .2rem 0; }

.lead { display: block; }
.form button[type="submit"] { border: 0; cursor: pointer; font-family: inherit; }

/* 접이식 상세 (수업 시간 선택지 등) */
.how details { border-top: 1px solid var(--rule); padding-top: .9rem; }
.how summary { cursor: pointer; font-weight: 600; }
.how details ul { margin-top: .7rem; }

/* ── 강조 밑줄 ─────────────────────────────────────────
   훑어 내려갈 때 핵심 구절이 눈에 걸리게 합니다.
   문단당 한두 곳까지. 많이 치면 강조가 강조 아닌 것이 됩니다. */
mark {
  background: none;
  color: inherit;
  font-weight: 600;
  box-shadow: inset 0 -0.42em 0 rgba(228, 102, 31, .17);
  padding: 0 .06em;
}
.answer mark { box-shadow: inset 0 -0.42em 0 rgba(228, 102, 31, .28); }
.flow-steps mark { font-weight: 600; }

/* 목록·표의 가독성 — 행 사이 여백과 괘선을 조금 더 */
.how li, .branches li a, .articles li a, .courses li a { line-height: 1.7; }
.how li strong { color: var(--ink); }
.how li span { color: var(--ink-soft); }

/* 본문 링크는 밑줄로 구분 */
.post a, .answer a, .bridge a, p a { text-decoration: underline; }
.chips a, .btn, .branches a, .articles a, .courses a { text-decoration: none; }

/* ── 자유 입력란 ───────────────────────────────────────
   과목 체크박스와 시간대 입력을 한 칸으로 합쳤습니다.
   학부모가 정말 하고 싶은 말은 '수학' 이 아니라
   '중2 수학이 어려워해요' 입니다. */
.ask { display: block; margin: 0 0 1rem; }
.ask-help {
  display: block; margin: .2rem 0 .45rem;
  font-size: .85rem; font-weight: 400; color: var(--ink-soft); line-height: 1.6;
}
.form textarea { resize: vertical; min-height: 6.5rem; line-height: 1.7; }
.form textarea::placeholder { color: var(--ink-faint); }