/*
 * style.css — 스터디해밀
 *   상징: 파비콘의 "해" (장미색 동그라미). 비 온 뒤 갠 하늘에 뜨는 해.
 *   한 곳에만 힘을 준다: 메인의 평균 그래프 (합격선 위로 지나가는 평균선 끝의 해).
 *   나머지는 내용의 성격에 따라 모양을 나눈다 — 공식은 흰 카드, 예제는 연분홍 문제 카드,
 *   실수는 주의 상자, 비교는 회색 상자, 순서는 번호.
 *   모바일(390px) 기준으로 먼저 맞추고 넓은 화면에서 늘린다.
 */
:root {
  --paper: #ffffff;
  --dawn: #fdf5f7;       /* 해 뜨기 전 하늘 — 강조 바탕 */
  --sun: #b8325a;        /* 해 — 브랜드 색 */
  --sun-deep: #8e2445;
  --sun-soft: #e9bccb;
  --line: #f0dde4;
  --mist: #f4f5f8;       /* 비교·보조 상자 */
  --ink: #1c1f2b;
  --pencil: #5a6070;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --measure: 40rem;
  --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.8 var(--font); word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--ink); text-decoration-color: var(--sun); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--sun); }
:focus-visible { outline: 2.5px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
/* 긴 수식·주소만 줄 어디서든 끊음 (메뉴·버튼은 끊지 않음) */
.doc p, .doc li, .doc dd { overflow-wrap: anywhere; }
.doc td, .doc th { overflow-wrap: normal; word-break: keep-all; min-width: 4.5em; }
.doc td:first-child, .doc th:first-child { min-width: 0; }

/* ── 헤더 ─────────────────────────────────────────── */
header.site { border-bottom: 1px solid var(--line); background: var(--paper); }
.head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding-top: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.12rem; text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.brand svg { width: 1.7rem; height: 1.7rem; flex: none; }
.head .cta { white-space: nowrap; text-decoration: none; font-weight: 700; font-size: .92rem; background: var(--ink); color: var(--paper); border-radius: 999px; padding: .45rem 1rem; }
.head .cta:hover { background: var(--sun); color: var(--paper); }
.menu { grid-column: 1 / -1; display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; margin-top: .55rem; padding-bottom: .1rem;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.menu::-webkit-scrollbar { display: none; }
.menu a { white-space: nowrap; text-decoration: none; font-size: .98rem; font-weight: 600; color: var(--pencil); padding: .45rem 0 .65rem; border-bottom: 2.5px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sun); }
@media (min-width: 60rem) {
  .head { display: flex; gap: 2rem; padding-block: .6rem; }
  .menu { order: 2; margin: 0 0 0 auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .head .cta { order: 3; }
  .menu a { padding-block: .6rem; }
}

footer.site { margin-top: 4.5rem; background: var(--mist); color: var(--pencil); font-size: .9rem; padding-block: 2rem 2.8rem; }
footer.site p { margin: .35rem 0; max-width: var(--measure); }
footer.site strong { color: var(--ink); }

.crumbs { font-size: .84rem; color: var(--pencil); margin: 1.1rem 0 0; line-height: 1.6; }
.crumbs a { color: var(--pencil); text-decoration: none; }
.crumbs a:hover { color: var(--sun); }

/* ── 본문 타이포 ──────────────────────────────────── */
.doc { max-width: var(--measure); }
.doc h1 { font-size: clamp(1.65rem, 6.2vw, 2.35rem); line-height: 1.3; letter-spacing: -.03em; margin: .9rem 0 1rem; font-weight: 800; text-wrap: balance; }
.doc h2 { position: relative; font-size: 1.3rem; line-height: 1.45; letter-spacing: -.02em; margin: 3rem 0 .9rem; padding-left: 1.15rem; font-weight: 800; text-wrap: balance; scroll-margin-top: 1rem; }
.doc h2::before { content: ""; position: absolute; left: 0; top: .5em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sun); }
.doc h3 { font-size: 1.08rem; line-height: 1.5; margin: 1.6rem 0 .4rem; }
.doc h3 span { font-weight: 400; color: var(--pencil); font-size: .88rem; margin-left: .35rem; }
.doc p { margin: .85rem 0; }
.lead { font-size: 1.1rem; color: var(--pencil); line-height: 1.75; margin-bottom: 1.4rem !important; }
.note { font-size: .92rem; color: var(--pencil); background: var(--mist); border-radius: var(--r-sm); padding: .75rem .95rem; }

/* ── 목차 칩 (레이아웃이 긴 페이지에만 넣음) ─────── */
.toc { margin: 1.2rem 0 1.6rem; }
.toc p { margin: 0 0 .45rem !important; font-size: .85rem; font-weight: 700; color: var(--pencil); }
.toc ol { list-style: none; margin: 0; padding: 0 0 .2rem; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.toc ol::-webkit-scrollbar { display: none; }
.toc a { display: block; white-space: nowrap; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; text-decoration: none; font-size: .88rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 999px; background: var(--mist); color: var(--ink); }
.toc a:hover { background: var(--dawn); color: var(--sun-deep); }
@media (min-width: 48rem) { .toc ol { flex-wrap: wrap; overflow: visible; } }

/* ── 내용 성격별 블록 ─────────────────────────────── */
/* 공식·핵심 규칙: 흰 카드, 한 줄씩 구분 */
.keypts { list-style: none; margin: 1rem 0; padding: .35rem 1.1rem; background: var(--paper); border: 1.5px solid var(--sun-soft); border-radius: var(--r-md); }
.keypts li { position: relative; padding: .75rem 0 .75rem 1.3rem; font-weight: 600; line-height: 1.65; font-variant-numeric: tabular-nums; }
.keypts li + li { border-top: 1px solid var(--line); }
.keypts li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sun); }

/* 예제: 연분홍 문제 카드 */
.ex { margin: 1rem 0; padding: 1.1rem 1.15rem; background: var(--dawn); border-radius: var(--r-md); }
.ex p { margin: .3rem 0; }
.ex p strong:first-child { display: inline-block; margin-right: .45rem; font-size: .8rem; font-weight: 800; color: var(--paper); background: var(--sun); border-radius: 999px; padding: .08rem .6rem; vertical-align: .12em; }
details { margin: .8rem 0 0; }
details summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; list-style: none; font-weight: 700; font-size: .92rem; color: var(--sun-deep);
  border: 1.5px solid var(--sun-soft); background: var(--paper); border-radius: 999px; padding: .35rem .9rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details[open] > p { background: var(--paper); border-radius: var(--r-sm); padding: .75rem .9rem; margin-top: .7rem; }

/* 틀리는 곳 / 헷갈리는 것 */
.callout { position: relative; margin: 1rem 0; padding: 1rem 1.1rem 1rem 3.1rem; border-radius: var(--r-md); }
.callout p { margin: 0 !important; }
.callout::before { position: absolute; left: 1rem; top: 1.05rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 800; line-height: 1; }
.callout.warn { background: #fff7ed; }
.callout.warn::before { content: "!"; background: #b45309; color: #fff; }
.callout.cmp { background: var(--mist); }
.callout.cmp::before { content: ""; background: conic-gradient(var(--ink) 0 50%, var(--sun) 0 100%); }

/* 순서가 있는 것만 번호 */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 1rem 0; }
.steps li { counter-increment: s; position: relative; padding: .5rem 0 .5rem 2.6rem; }
.steps li + li { border-top: 1px dashed var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: .62rem; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: .82rem; font-weight: 800; display: grid; place-items: center; }

/* 체크 목록 */
.check { list-style: none; padding: 0; margin: 1rem 0; }
.check li { position: relative; padding: .35rem 0 .35rem 1.9rem; }
.check li::before { content: ""; position: absolute; left: .15rem; top: .72rem; width: .95rem; height: .5rem; border-left: 2.5px solid var(--sun); border-bottom: 2.5px solid var(--sun); transform: rotate(-45deg); }

/* 링크 목록: 누르기 쉬운 줄 */
.links { list-style: none; padding: 0; margin: 1rem 0; border-top: 1px solid var(--line); }
.links li { position: relative; border-bottom: 1px solid var(--line); padding: .85rem 1.8rem .85rem 0; }
.links li > a { font-weight: 700; text-decoration: none; }
.links li > a::after { content: ""; position: absolute; inset: 0; }
.links li::after { content: ""; position: absolute; right: .35rem; top: 50%; width: .5rem; height: .5rem; border-top: 2px solid var(--sun-soft); border-right: 2px solid var(--sun-soft); transform: translateY(-50%) rotate(45deg); }
.links li:hover > a { color: var(--sun); }
.links li p { margin: .2rem 0 0; color: var(--pencil); font-size: .92rem; }
.links .qr { position: relative; z-index: 1; }

.units { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 1rem 0; }
.units li { border-radius: 999px; padding: .25rem .85rem; font-size: .92rem; background: var(--mist); }
.units a { text-decoration: none; }
.subj { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.subj p { margin: 0; color: var(--pencil); }

.faq dt { font-weight: 800; margin-top: 1.3rem; }
.faq dd { margin: .35rem 0 0; color: var(--pencil); }

.tbl { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--r-md); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.6; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child > * { border-bottom: 0; }
thead th { background: var(--dawn); font-weight: 800; white-space: nowrap; font-size: .86rem; color: var(--sun-deep); }
tbody th { font-weight: 700; white-space: nowrap; }
tr.hit th, tr.hit td { background: var(--dawn); font-weight: 700; }

.qlist { list-style: none; padding: 0; margin: .6rem 0 1rem; }
.qlist li { display: flex; gap: .7rem; align-items: center; padding: .45rem 0; }
.qlist li + li { border-top: 1px dashed var(--line); }
.qn { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dawn); color: var(--sun-deep);
  font-size: .82rem; font-weight: 800; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.qr { font-size: .8rem; color: var(--pencil); margin-left: .35rem; font-variant-numeric: tabular-nums; }

.timeline { list-style: none; padding: 0 0 0 1.3rem; margin: 1rem 0; border-left: 2px solid var(--sun-soft); }
.timeline li { position: relative; padding: .4rem 0 .4rem .7rem; }
.timeline li::before { content: ""; position: absolute; left: -1.72rem; top: .9rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--sun); }

.dongs { list-style: none; padding: 0; margin: .6rem 0 1rem; }
.dongs li { padding: .55rem 0; line-height: 1.65; }
.dongs li + li { border-top: 1px solid var(--line); }
.dongs strong { margin-right: .35rem; }
.key1 { font-size: .9rem; color: var(--pencil); margin: .1rem 0 .4rem; }
.schools { font-size: .95rem; }

.svc { list-style: none; padding: 0; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.svc li { font-size: .88rem; background: var(--dawn); color: var(--sun-deep); font-weight: 600; border-radius: 999px; padding: .3rem .85rem; }
.svc.wide li { font-size: .92rem; }

/* 이어서 보기 */
.rel { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .94rem; }
.rel p { margin: 0 0 .6rem !important; font-weight: 800; color: var(--ink); }
.rel ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.rel a { display: block; text-decoration: none; padding: .45rem .9rem; border-radius: var(--r-sm); background: var(--mist); line-height: 1.5; }
.rel a:hover { background: var(--dawn); color: var(--sun-deep); }

.sources { max-width: var(--measure); margin-top: 2.5rem; font-size: .86rem; color: var(--pencil); }
.sources h2 { font-size: .95rem; margin: 0 0 .3rem; color: var(--ink); }
.sources ul { margin: 0; padding-left: 1.1rem; }
.sources a { color: var(--pencil); }

/* ── 버튼 ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; background: var(--ink); color: var(--paper); text-decoration: none; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.btn:hover { color: var(--paper); background: var(--sun); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* ── 메인 ─────────────────────────────────────────── */
.hero { display: grid; gap: 2.2rem; align-items: center; padding: 2rem 0 .5rem; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; padding-top: 4rem; } }
.hero h1 { font-size: clamp(1.9rem, 8.2vw, 3rem); line-height: 1.22; letter-spacing: -.04em; margin: 0 0 1rem; font-weight: 850; text-wrap: balance; }
.hero p { max-width: 32rem; color: var(--pencil); font-size: 1.05rem; margin: 0; }
.hero-act { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; align-items: center; margin-top: 1.5rem !important; }
.hero-act a:not(.btn) { font-weight: 700; color: var(--ink); }

/* 평균 그래프 — 사이트에서 힘을 주는 단 한 곳 */
.chart { margin: 0; padding: 1.3rem 1.1rem 1rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--dawn), var(--paper) 85%); border: 1px solid var(--line); }
.chart-plot { position: relative; height: 13.5rem; margin: 1.4rem 0 0; border-bottom: 1.5px solid var(--ink); }
.bars { position: absolute; z-index: 1; inset: 0 5.4rem 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; list-style: none; margin: 0; padding: 0; align-items: end; }
.bars li { position: relative; height: var(--h); background: var(--ink); border-radius: 6px 6px 0 0; transform-origin: bottom; }
.bars li.low { background: var(--paper); border: 1.5px solid var(--sun-soft); border-bottom: 0; }
.bars b { position: absolute; left: 0; right: 0; top: .35rem; text-align: center; font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--paper); }
.bars li.low b { color: var(--pencil); }
.chart-line { position: absolute; left: 0; right: 0; bottom: var(--y); height: 0; }
.chart-line.pass { border-top: 1.5px dashed var(--pencil); }
.chart-line.avg { border-top: 2.5px solid var(--sun); }
.chart-line em { position: absolute; right: 0; width: 5rem; font-style: normal; font-size: .74rem; font-weight: 800; line-height: 1.2; text-align: right; }
.chart-line.pass em { color: var(--pencil); top: .25rem; }
.chart-line.avg em { color: var(--sun); top: -1.35rem; display: flex; justify-content: flex-end; align-items: center; gap: .3rem; }
.chart-line.avg i { display: block; width: .95rem; height: .95rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(184,50,90,.15); }
.chart-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; margin: .4rem 5.4rem 0 0; padding: 0; list-style: none; }
.chart-names li { text-align: center; font-size: .74rem; font-weight: 700; color: var(--pencil); white-space: nowrap; letter-spacing: -.03em; }
.chart figcaption { font-size: .86rem; color: var(--pencil); margin-top: .9rem; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .bars li { animation: rise .7s cubic-bezier(.2,.8,.2,1) backwards; }
  .bars li:nth-child(2) { animation-delay: .05s; } .bars li:nth-child(3) { animation-delay: .1s; } .bars li:nth-child(4) { animation-delay: .15s; }
  .bars li:nth-child(5) { animation-delay: .2s; } .bars li:nth-child(6) { animation-delay: .25s; } .bars li:nth-child(7) { animation-delay: .3s; }
  .chart-line.avg { animation: fade .5s .75s backwards; }
  @keyframes rise { from { transform: scaleY(0); } }
  @keyframes fade { from { opacity: 0; } }
}

.home { max-width: none; }
.home h2 { max-width: var(--measure); }
.levels { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .levels { grid-template-columns: 1fr 1fr; } }
.levels section { padding: 1.2rem 1.2rem 1.1rem; border-radius: var(--r-lg); background: var(--mist); }
.levels h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.levels h3 a { text-decoration: none; }
.levels p { color: var(--pencil); margin: 0 0 .8rem; font-size: .95rem; }
.levels ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.levels li a { display: block; text-decoration: none; font-weight: 700; font-size: .92rem; padding: .35rem .8rem; border-radius: 999px; background: var(--paper); }
.levels li a:hover { color: var(--sun); }

/* ── 상담 ─────────────────────────────────────────── */
.consult { max-width: var(--measure); margin-top: 3.5rem; padding: 1.5rem 1.25rem; background: var(--dawn); border-radius: var(--r-lg); scroll-margin-top: 1rem; }
.consult h2 { margin: 0 0 .35rem; font-size: 1.3rem; font-weight: 800; }
.consult > p { margin: 0 0 1rem; color: var(--pencil); }
.consult form { display: grid; gap: .9rem; }
.consult label { display: grid; gap: .3rem; font-size: .92rem; font-weight: 700; }
.consult input, .consult select, .consult textarea { font: inherit; font-weight: 400; min-height: 3rem; padding: .65rem .8rem; border: 1.5px solid var(--sun-soft); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); width: 100%; }
.consult input:focus, .consult select:focus, .consult textarea:focus { border-color: var(--sun); outline: none; box-shadow: 0 0 0 3px rgba(184,50,90,.15); }
.consult .agree { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
.consult .agree input { width: 1.2rem; min-height: 0; height: 1.2rem; margin-top: .3rem; accent-color: var(--sun); }
.consult button { font: inherit; font-weight: 800; min-height: 3.2rem; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: .75rem 1.2rem; cursor: pointer; }
.consult button:hover { background: var(--sun); }
.consult .tel { margin: 0 0 1rem; font-weight: 700; }
.consult .tel a { color: var(--sun); text-decoration: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 상담 전환 장치 */
.cta-mini { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: 1.6rem 0; padding: .9rem 1rem; background: var(--dawn); border-radius: var(--r-md); font-size: .95rem; }
.cta-mini a { font-weight: 800; color: var(--sun-deep); white-space: nowrap; }
.cta-box { margin: 2.6rem 0 1.8rem; padding: 1.4rem 1.25rem 1.25rem; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
.cta-box .cta-h { font-size: 1.2rem; font-weight: 800; margin: 0 0 .5rem; display: flex; gap: .55rem; align-items: center; }
.cta-box .cta-h::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(233,188,203,.25); }
.cta-box p { color: #d7d9e0; }
.cta-steps { list-style: none; counter-reset: c; margin: 1rem 0 1.1rem; padding: 0; display: grid; gap: .45rem; }
.cta-steps li { counter-increment: c; display: flex; gap: .6rem; align-items: center; font-size: .94rem; color: var(--paper); }
.cta-steps li::before { content: counter(c); flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.cta-act { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 !important; }
.cta-box .btn { background: var(--sun); color: var(--paper); }
.cta-box .btn:hover { background: var(--paper); color: var(--ink); }
.cta-box .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); }
.cta-box .btn.ghost:hover { background: var(--paper); color: var(--ink); }

.mbar { display: none; }
@media (max-width: 720px) {
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; }
  .mbar a { flex: 1; display: grid; place-items: center; min-height: 3rem; border-radius: var(--r-md); font-weight: 800; text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); white-space: nowrap; }
  .mbar a.cta-go { background: var(--ink); color: #fff; flex: 1.6; }
  body { padding-bottom: 5rem; }
}
.consult .svc li { background: var(--paper); }