/* ============================================================
   CODING_ACADEMY_MULTI_HANJUL — 한줄 코딩학원 / hanjul.
   2026-10-15 재구성 — 사용자 지적 "색이랑 전체 페이지 구성이 레퍼런스와 너무 유사해"
   레퍼런스(n19e coding.ne.kr)에서 가져온 것 = 흰 지면 · 굵은 한글 산세리프 · 넉넉한 여백 · 정보의 양 · 신뢰형 동네 학원 격.
   바꾼 것 = 색(파랑 → 고침 펜 초록) · 첫 화면(좌 표제+우 코드 창 → 위 거대 영문 표제 + 아래 넓은 사진) ·
             숫자 띠 제거 · 3×2 카드 → 계단 · 남색 띠 → 종이 첨삭지 · 헤더 1단 → 2단.
   영상 없음 · 외부 요청 없음.
   ============================================================ */

:root {
  --en: 'Mozilla Headline', 'Pretendard Variable', sans-serif;
  --mono: 'JetBrains Mono', 'Pretendard Variable', monospace;
  --kh: 'Paperlogy', 'Pretendard Variable', sans-serif;
  --kr: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;

  --bg: #FBFAF8;        /* 받침 물질 — 출력한 연습지의 흰 종이 */
  --surface: #F2EFEA;   /* 오래 쓴 연습장 종이 */
  --ink: #211E1C;       /* 흑연 · 키보드 먹색 */
  --body: #4A4541;
  --muted: #7A736C;
  --mark: #1F8A5B;      /* 고침 펜 초록 — 첫 사진의 초록 펜 · 코드 비교(diff)의 고친 줄 · 표시·점·큰 글씨에만 */
  --accent: #146B45;    /* 같은 잉크의 진한 상태 — 단추·작은 글씨(흰 글자 대비 6.5:1) */
  --accent-d: #0F5536;
  --accent-soft: #E2F0E8;
  --accent-light: #86D7AE; /* 어두운 면 위 글자용 */
  --line: #E3DED7;
  --dark: #1E1B1A;

  --wrap: 1200px;
  --pad: 20px;
  --ease: cubic-bezier(.25, .8, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--kr); font-size: 15px; line-height: 1.85; letter-spacing: -.015em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; }
.wrap { width: min(100% - (var(--pad) * 2), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 12px 18px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 조판 ---------- */
.h2 { font-family: var(--kh); font-weight: 800; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.24; letter-spacing: -.035em; color: var(--ink); }
.h2 em { font-style: normal; color: var(--mark); }
.h3 { font-family: var(--kh); font-weight: 700; font-size: 19px; line-height: 1.45; letter-spacing: -.03em; color: var(--ink); }
.lead { font-size: 16.5px; line-height: 1.85; color: var(--body); }
.small { font-size: 13px; line-height: 1.75; color: var(--muted); }
.mono { font-family: var(--mono); }
.sec { padding: 104px 0; }
.sec--paper { background: var(--surface); }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }

/* 등장 — 아래에서 살짝 */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.go { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- 단추 — 네모 · 굵은 테 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
  background: var(--accent); color: #fff; border: 2px solid var(--accent); border-radius: 0;
  font-family: var(--kr); font-weight: 700; font-size: 15px; letter-spacing: -.02em; transition: .3s var(--ease);
}
.btn:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn--ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; }
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--light:hover { background: #fff; color: var(--dark); border-color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- 헤더 — 2단: 워드마크 띠 + 메뉴 띠 ---------- */
#site-header { background: var(--bg); position: relative; z-index: 80; }
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.wm { display: inline-flex; align-items: baseline; gap: 12px; min-height: 46px; padding: 6px 0; }
.wm-en { font-family: var(--en); font-weight: 700; font-size: 34px; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.wm-en::after { content: ''; display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--mark); vertical-align: baseline; }
.wm-ko { font-family: var(--kh); font-weight: 700; font-size: 13px; color: var(--muted); letter-spacing: -.01em; }
.hd-call { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.hd-call b { font-family: var(--en); font-weight: 700; font-size: 21px; color: var(--accent); letter-spacing: -.01em; }
.hd-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hd-nav .wrap { display: flex; gap: 34px; }
.hd-nav a { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--kr); font-weight: 700; font-size: 15.5px; color: var(--ink); letter-spacing: -.025em; position: relative; }
.hd-nav a:hover { color: var(--accent); }
.hd-nav a.on { color: var(--accent); }
.hd-nav a.on::after { content: ''; position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--mark); }
.burger { display: none; width: 48px; height: 48px; background: none; border: 0; padding: 15px 12px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--ink); }
.drawer { display: none; }

@media (max-width: 980px) {
  .hd-call, .hd-nav { display: none; }
  .burger { display: flex; }
  .hd-top { min-height: 64px; border-bottom: 1px solid var(--line); }
  .wm-en { font-size: 28px; }
  .drawer {
    display: block; position: fixed; left: 0; right: 0; top: var(--mm-top, 64px); bottom: 0; z-index: 78;
    background: var(--bg); padding: 10px var(--pad) 120px; overflow-y: auto;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: .3s var(--ease);
  }
  .drawer.open { opacity: 1; transform: none; pointer-events: auto; }
  .drawer a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-family: var(--kh); font-weight: 700; font-size: 18px; color: var(--ink); }
  .drawer a.on { color: var(--accent); }
  .drawer .dr-tel { margin-top: 22px; justify-content: center; gap: 8px; border: 2px solid var(--accent); color: var(--accent); font-family: var(--kr); font-size: 16px; }
  .drawer .dr-tel svg { width: 15px; height: 15px; fill: currentColor; }
  body.mm-open { overflow: hidden; }
}

/* ---------- 첫 화면(홈) — 위 거대 영문 표제 · 아래 넓은 사진 + 오른쪽 짧은 글 ---------- */
.hx { padding: 44px 0 0; }
.hx-h1 { font-family: var(--en); font-weight: 700; font-size: clamp(58px, 8.2vw, 120px); line-height: .9; letter-spacing: -.045em; color: var(--ink); }
.hx-h1 span { display: block; }
.hx-h1 .l2 { padding-left: 1.55em; }
.hx-h1 .l2::after { content: ''; display: inline-block; width: .17em; height: .17em; margin-left: .04em; border-radius: 50%; background: var(--mark); }
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 44px; align-items: end; }
.hx-photo { position: relative; margin-top: 40px; }
.hx-photo img { width: 100%; aspect-ratio: 1200 / 470; object-fit: cover; object-position: 50% 63%; }
.hx-side { padding-bottom: 10px; }
.hx-ko { font-family: var(--kh); font-weight: 800; font-size: clamp(30px, 4vw, 58px); line-height: 1.2; letter-spacing: -.035em; color: var(--ink); }
.hx-ko em { font-style: normal; color: var(--mark); }
.hx-side p:not(.hx-ko) { margin-top: 16px; font-size: 18.5px; line-height: 1.7; color: var(--body); }
.hx-side .btn { font-size: 16px; min-height: 56px; padding: 0 30px; }
.hx-side .btns { margin-top: 24px; }

/* ---------- 80분 눈금자 ---------- */
.rule-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.rule-head .lead { max-width: 430px; }
.ruler { margin-top: 56px; display: grid; grid-template-columns: 8fr 47fr 15fr 10fr; }
.ruler > div { min-width: 0; position: relative; padding: 0 14px 0 0; }
.ruler .tm { display: block; font-family: var(--en); font-weight: 600; font-size: 15px; color: var(--muted); letter-spacing: 0; }
.ruler .bar { display: block; height: 46px; margin: 10px 0 16px -2px; background: #fff; border: 2px solid var(--ink); position: relative; }
.ruler > div:first-child .bar { margin-left: 0; }
.ruler > div { padding-right: 0; }
.ruler h3, .ruler p { padding-right: 14px; }
.ruler .bar::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--m, 8) - 1px), rgba(33, 30, 28, .22) calc(100% / var(--m, 8) - 1px) calc(100% / var(--m, 8))); }
.ruler .core .bar { background: var(--mark); border-color: var(--ink); }
.ruler .core .bar::after { background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--m, 8) - 1px), rgba(255, 255, 255, .28) calc(100% / var(--m, 8) - 1px) calc(100% / var(--m, 8))); }
.ruler h3 { font-family: var(--kh); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.03em; line-height: 1.4; }
.ruler p { font-size: 14px; line-height: 1.75; margin-top: 6px; }

/* ---------- 네 단계 계단 ---------- */
.stairs-head { text-align: center; max-width: 860px; margin: 0 auto 60px; }
.stairs-head .lead { max-width: 640px; margin-inline: auto; }
.stairs-head .lead { margin-top: 14px; }
.stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.stairs a { display: block; padding: 26px 24px 30px; background: #fff; border: 1px solid var(--line); margin-left: -1px; transition: background .3s var(--ease); }
.stairs a:first-child { margin-left: 0; }
.stairs a:nth-child(1) { min-height: 300px; }
.stairs a:nth-child(2) { min-height: 360px; }
.stairs a:nth-child(3) { min-height: 420px; }
.stairs a:nth-child(4) { min-height: 480px; background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .78); }
.stairs a:hover { background: var(--accent-soft); }
.stairs a:nth-child(4):hover { background: #2c2826; }
.stairs .en { display: block; font-family: var(--en); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.stairs .en::after { content: ''; display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--mark); margin-left: .05em; }
.stairs a:nth-child(4) .en { color: #fff; }
.stairs h3 { margin-top: 14px; font-family: var(--kh); font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.03em; }
.stairs a:nth-child(4) h3 { color: #fff; }
.stairs p { margin-top: 8px; font-size: 14px; line-height: 1.75; }
.stairs .who { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--accent); }
.stairs a:nth-child(4) .who { border-top-color: rgba(255, 255, 255, .16); color: var(--accent-light); }

/* ---------- 사진 + 글 (교실) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.split figure img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 22% 50%; }
.split figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.rows { margin-top: 30px; border-top: 2px solid var(--ink); }
.rows > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rows dt { font-family: var(--kh); font-weight: 700; color: var(--ink); font-size: 15px; letter-spacing: -.02em; }
.rows dd { font-size: 14.5px; line-height: 1.8; }

/* ---------- 고유 장치 · 빨간 펜 첨삭지 ---------- */
.mark { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 70px; align-items: center; }
.sheet {
  position: relative; background: #fff; padding: 30px 30px 34px 22px; transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -22px rgba(33, 30, 28, .35);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, #ebe6df 33px 34px);
  background-position: 0 22px;
}
.sheet .sh-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.sheet ol { font-family: var(--mono); font-size: 13.5px; line-height: 34px; color: var(--ink); counter-reset: ln; }
.sheet li { counter-increment: ln; white-space: pre; position: relative; padding-left: 38px; }
.sheet li::before { content: counter(ln); position: absolute; left: 0; width: 24px; text-align: right; color: #b9b1a8; font-size: 11.5px; }
.sheet .k { color: var(--accent-d); font-weight: 500; }
.sheet .c { color: var(--muted); }
.sheet .bad { text-decoration: underline wavy var(--mark); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.sheet .ring { display: inline-block; padding: 0 5px; margin: 0 -5px; border: 2px solid var(--mark); border-radius: 50% / 46%; line-height: 24px; }
.sheet .note { position: absolute; font-family: var(--kh); font-weight: 600; font-size: 14.5px; line-height: 1.45; color: var(--accent); transform: rotate(-3deg); white-space: normal; }
.sheet .note-1 { right: 18px; top: 196px; width: 150px; }
.sheet .note-2 { right: 26px; bottom: 22px; width: 210px; }
.pair .sheet .note-1 { top: 70px; }
.mark-txt .lead { margin-top: 16px; }
.mark-txt .btns { margin-top: 28px; }

/* ---------- 게시판 미리보기 (소식 · 자료실) ---------- */
.board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 44px; }
.board-col h3 { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-family: var(--kh); font-weight: 700; font-size: 20px; color: var(--ink); }
.board-col h3 a { font-family: var(--kr); font-size: 13.5px; font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; min-height: 46px; }
.list li { border-bottom: 1px solid var(--line); }
.list a, .list .it { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 15px 0; min-height: 46px; }
.list .d { font-family: var(--en); font-weight: 600; font-size: 14.5px; color: var(--muted); }
.list .t { font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: -.02em; }
.list a:hover .t { color: var(--accent); }

/* ---------- 오시는 길 띠 — 어두운 면 · 위쪽 둥근 판 ---------- */
.visit { background: var(--dark); color: rgba(255, 255, 255, .74); border-radius: 44px 44px 0 0; padding: 92px 0 96px; margin-top: 20px; }
.visit .h2 { color: #fff; }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: end; }
.visit .tel { display: block; min-height: 46px; font-family: var(--en); font-weight: 700; font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -.03em; color: #fff; margin-top: 22px; }
.visit .tel:hover { color: var(--accent-light); }
.visit dl { border-top: 1px solid rgba(255, 255, 255, .2); }
.visit dl > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.visit dt { color: #fff; font-weight: 700; }
.visit .btns { margin-top: 26px; }

/* ---------- 하위 페이지 첫 화면 — 페이지마다 다른 짜임 ---------- */
.pk { display: block; font-family: var(--en); font-weight: 600; font-size: 17px; color: var(--accent); letter-spacing: -.01em; }
.ph-h1 { font-family: var(--kh); font-weight: 800; font-size: clamp(32px, 4.6vw, 60px); line-height: 1.16; letter-spacing: -.04em; color: var(--ink); }
.ph-h1 em { font-style: normal; color: var(--mark); }

/* 학원 소개 — 사진 띠 위, 표제·소개 2단 아래 */
.ph-photo img { width: 100%; height: clamp(240px, 34vw, 440px); object-fit: cover; object-position: 50% 40%; }
.ph-photo .two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 50px; align-items: end; padding: 46px 0 10px; }

/* 교육과정 — 글자만, 가운데 · 아래에 단계 바로가기 줄 */
.ph-type { padding: 86px 0 70px; text-align: center; }
.ph-type .ph-h1 { max-width: 15em; margin: 14px auto 0; }
.ph-type .lead { max-width: 560px; margin: 20px auto 0; }
.jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 26px; font-family: var(--en); font-weight: 700; font-size: 19px; color: var(--ink); }
.jump a::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }
.jump a:hover { color: var(--accent); }

/* AI 코딩 — 어두운 면 · 사진 오른쪽 절반 */
.ph-dark { background: var(--dark); color: rgba(255, 255, 255, .76); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 500px; }
.ph-dark .in { padding: 80px 56px 70px max(var(--pad), calc((100vw - var(--wrap)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.ph-dark .ph-h1 { color: #fff; margin-top: 14px; }
.ph-dark .ph-h1 em { color: var(--accent-light); }
.ph-dark .pk { color: var(--accent-light); }
.ph-dark p { margin-top: 20px; max-width: 460px; font-size: 16px; }
.ph-dark img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

/* 소식 — 표제 한 줄 + 달 표시 */
.ph-line { padding: 70px 0 34px; border-bottom: 2px solid var(--ink); }
.ph-line .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.ph-line .lead { max-width: 420px; }

/* 자료실 — 표제 왼쪽 · 작은 사진 오른쪽 위 */
.ph-aside { padding: 64px 0 40px; }
.ph-aside .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.ph-aside img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ph-aside .lead { margin-top: 18px; }

/* 상담 안내 — 큰 전화번호가 주인공 */
.ph-call { padding: 72px 0 64px; background: var(--surface); }
.ph-call .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: end; }
.ph-call .big { display: inline-flex; align-items: center; min-height: 46px; white-space: nowrap; font-family: var(--en); font-weight: 700; font-size: clamp(36px, 5.2vw, 76px); line-height: 1; letter-spacing: -.035em; color: var(--accent); }
.ph-call .big:hover { color: var(--accent-d); }
.ph-call .lead { margin-top: 16px; }

/* 오시는 길 — 넓은 사진 + 아래에 겹친 주소 판 */
.ph-wide { position: relative; }
.ph-wide img { width: 100%; height: clamp(260px, 38vw, 500px); object-fit: cover; object-position: 50% 55%; }
.ph-wide .plate { position: relative; background: var(--bg); margin: -110px auto 0; padding: 40px 44px 10px; width: min(100% - (var(--pad) * 2), 860px); text-align: center; }
.ph-wide .plate .lead { margin-top: 14px; }

/* ---------- 표 — 360 에서는 행을 카드로 ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 12px; }
.tbl th, .tbl td { padding: 16px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14.5px; vertical-align: top; }
.tbl thead th { border-bottom: 2px solid var(--ink); font-family: var(--kh); font-weight: 700; font-size: 14px; color: var(--ink); }
.tbl tbody th { font-family: var(--en); font-weight: 700; font-size: 19px; color: var(--ink); white-space: nowrap; }
.tbl tbody th small { display: block; font-family: var(--kr); font-weight: 600; font-size: 12.5px; color: var(--muted); }
.tbl .won { font-family: var(--en); font-weight: 600; font-size: 17px; color: var(--accent-d); white-space: nowrap; }
@media (max-width: 720px) {
  .tbl thead { display: none; }
  .tbl caption { display: block; width: auto; }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .tbl th, .tbl td { border: 0; padding: 3px 0; }
  .tbl td::before { content: attr(data-l); display: inline-block; min-width: 76px; font-weight: 700; color: var(--muted); font-size: 13px; }
}

/* ---------- 문답 ---------- */
.qa { border-top: 2px solid var(--ink); }
.qa > div { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; min-height: 58px; padding: 18px 44px 18px 0; position: relative; font-family: var(--kh); font-weight: 700; font-size: 16.5px; color: var(--ink); letter-spacing: -.025em; }
.qa button::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--en); font-weight: 600; font-size: 26px; color: var(--accent); transition: transform .3s var(--ease); }
.qa .open button::after { transform: translateY(-50%) rotate(45deg); }
.qa p { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); font-size: 14.5px; }
.qa .open p { max-height: 440px; padding-bottom: 20px; }

/* ---------- 하위 페이지 공용 부품 ---------- */
.head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: end; margin-bottom: 44px; }
.head-c { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.head-c .lead { margin-top: 14px; }
.letter { max-width: 720px; margin: 0 auto; }
.letter p { font-size: 16.5px; line-height: 2; color: var(--body); }
.letter p + p { margin-top: 18px; }
.letter .sign { margin-top: 30px; text-align: right; font-family: var(--kh); font-weight: 700; color: var(--ink); font-size: 16px; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.cols3 > div { padding: 22px 0 30px; border-top: 2px solid var(--ink); }
.cols3 p { margin-top: 10px; font-size: 14.5px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.pair > div:nth-child(2) .sheet { transform: rotate(.9deg); }
.pair .sheet { min-height: 330px; }
.pair .cap { font-family: var(--kh); font-weight: 700; color: var(--ink); margin-bottom: 14px; font-size: 16px; }
.lib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.lib h3 { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.lib li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.lib li b { display: block; color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.lib li span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.news li { border-bottom: 1px solid var(--line); }
.news .it { display: grid; grid-template-columns: 110px 96px minmax(0, 1fr); gap: 18px; padding: 22px 0; align-items: baseline; }
.news .d { font-family: var(--en); font-weight: 600; font-size: 16px; color: var(--muted); }
.news .cat { font-size: 13px; font-weight: 700; color: var(--accent); }
.news .t { display: block; font-family: var(--kh); font-weight: 700; color: var(--ink); font-size: 17px; letter-spacing: -.025em; }
.news .s { display: block; font-size: 14px; margin-top: 4px; }
.news .pin { background: var(--accent-soft); }
.news .pin .it { padding-left: 16px; padding-right: 16px; }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.flow > div { padding: 28px 28px 30px; background: #fff; border: 1px solid var(--line); margin-left: -1px; }
.flow > div:first-child { margin-left: 0; }
.flow .tm { font-family: var(--en); font-weight: 700; font-size: 30px; color: var(--mark); line-height: 1; letter-spacing: -.02em; }
.flow h3 { margin-top: 14px; }
.flow p { margin-top: 8px; font-size: 14.5px; }
.ctr { text-align: center; }
.btns.ctr { justify-content: center; }

/* 오시는 길 — 운영 시간 줄 */
.hours { max-width: 900px; margin: 0 auto; border-top: 2px solid var(--ink); }
.hours li { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.hours .hr { font-family: var(--en); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; letter-spacing: -.025em; color: var(--ink); }
.hours .off .hr { font-family: var(--kh); color: var(--mark); }
.hours p { font-size: 14.5px; }
@media (max-width: 760px) { .hours li { grid-template-columns: 1fr; gap: 6px; } }

/* 교육과정 — 단계 장부 */
.lv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 50px; padding: 54px 0; }
.lv + .lv { border-top: 1px solid var(--line); }
.lv-name { position: sticky; top: 24px; align-self: start; }
.lv-name .en { display: block; font-family: var(--en); font-weight: 700; font-size: clamp(48px, 6vw, 84px); line-height: .95; letter-spacing: -.04em; color: var(--ink); }
.lv-name .en::after { content: ''; display: inline-block; width: .17em; height: .17em; margin-left: .04em; border-radius: 50%; background: var(--mark); }
.lv-name .h2 { margin-top: 16px; font-size: clamp(22px, 2.2vw, 28px); }
.lv-name .who { display: block; margin-top: 8px; font-weight: 700; color: var(--accent); font-size: 14px; }
.lv .rows { margin-top: 0; }
.lv--dark { background: var(--dark); color: rgba(255, 255, 255, .74); padding: 54px 46px; margin: 30px calc(-1 * min(46px, var(--pad))) 0; border-top: 0 !important; }
.lv--dark .lv-name .en, .lv--dark .lv-name .h2 { color: #fff; }
.lv--dark .lv-name .who { color: var(--accent-light); }
.lv--dark .rows { border-top-color: rgba(255, 255, 255, .5); }
.lv--dark .rows > div { border-bottom-color: rgba(255, 255, 255, .14); }
.lv--dark .rows dt { color: #fff; }
@media (max-width: 1080px) {
  .lv { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .lv-name { position: static; }
  .lv--dark { padding: 40px 22px; margin: 24px 0 0; }
}

/* ---------- 푸터 ---------- */
.foot { background: var(--dark); color: rgba(255, 255, 255, .62); padding: 0 0 34px; }
.visit + .foot, .foot { border-top: 1px solid rgba(255, 255, 255, .08); }
.foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr); gap: 40px; padding-top: 52px; }
.foot .wm-en { color: #fff; font-size: 30px; }
.foot .wm-ko { color: rgba(255, 255, 255, .5); }
.foot-in p { margin-top: 12px; font-size: 13.5px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 26px; align-content: flex-start; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 46px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); }
.foot-nav a:hover { color: #fff; }
.foot-meta { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; line-height: 1.9; color: rgba(255, 255, 255, .5); }
.foot-meta a { color: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; min-height: 46px; }
.foot-plain { padding-top: 0; }
body:not(.has-visit) .foot { border-radius: 44px 44px 0 0; margin-top: 30px; }

/* ---------- 하단 전화 바 ---------- */
.mbar { display: none; }
@media (max-width: 980px) {
  .mbar { display: grid; grid-template-columns: 1.3fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; font-weight: 700; font-size: 15px; }
  .mbar svg { width: 15px; height: 15px; fill: currentColor; }
  .mbar .m-tel { background: var(--accent); color: #fff; }
  .mbar .m-map { background: var(--dark); color: #fff; }
  body { padding-bottom: 56px; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1080px) {
  .hx-grid { grid-template-columns: 1fr; gap: 26px; }
  .hx-photo { margin-top: 30px; }
  .hx-side { max-width: 560px; }
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
  .stairs a:nth-child(n) { min-height: 0; margin: 0; }
  .split, .mark, .visit-grid, .board, .ph-photo .two, .ph-aside .wrap, .ph-call .wrap, .head-row, .pair, .foot-in { grid-template-columns: 1fr; gap: 34px; }
  .ph-dark { grid-template-columns: 1fr; }
  .ph-dark .in { padding: 56px var(--pad) 46px; }
  .ph-dark img { height: 300px; }
  .lib { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 760px) {
  .sec { padding: 68px 0; }
  .hx { padding-top: 28px; }
  .hx-h1 .l2 { padding-left: .9em; }
  .hx-photo img { aspect-ratio: 16 / 9; object-position: 40% 80%; }
  .ruler { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .ruler > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 16px; padding: 16px 0; border-top: 1px solid var(--line); }
  .ruler > div:last-child { border-bottom: 1px solid var(--line); }
  .ruler .tm { grid-row: 1 / span 2; }
  .ruler .bar { display: none; }
  .ruler .core h3 { color: var(--accent); }
  .stairs { grid-template-columns: 1fr; gap: 8px; }
  .stairs a:nth-child(1) { margin: 0 36px 0 0; }
  .stairs a:nth-child(2) { margin: 0 24px 0 12px; }
  .stairs a:nth-child(3) { margin: 0 12px 0 24px; }
  .stairs a:nth-child(4) { margin: 0 0 0 36px; }
  .stairs .en { font-size: 32px; }
  .rows > div { grid-template-columns: 1fr; gap: 2px; }
  .sheet { padding: 22px 16px 26px 10px; transform: rotate(-.6deg); }
  .sheet ol { font-size: 11.5px; }
  .sheet li { padding-left: 28px; }
  .sheet li::before { width: 18px; }
  .sheet .note { position: static; display: block; transform: none; margin: 12px 0 0 28px; width: auto; }
  .visit { border-radius: 28px 28px 0 0; padding: 64px 0 70px; }
  .visit dl > div { grid-template-columns: 1fr; gap: 2px; }
  .list a, .list .it { grid-template-columns: 58px minmax(0, 1fr); }
  .news .it { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .cols3, .flow { grid-template-columns: 1fr; }
  .cols3 > div { padding: 20px 0 24px; }
  .flow > div { margin: 0 0 -1px 0; }
  .flow > div:first-child { margin-left: 0; }
  .jump a { padding: 0 16px; font-size: 16px; }
  .ph-type { padding: 60px 0 50px; }
  .ph-wide .plate { margin-top: -50px; padding: 28px 18px 6px; }
  .btns .btn { flex: 1 1 auto; }
  body:not(.has-visit) .foot { border-radius: 28px 28px 0 0; }
}