/*! units/style.css v2.0.0 — 수학 파이널 LAB · 단원 페이지 (고급 방향)
 * ============================================================================
 * 이 파일이 33개 SEO 단원 페이지 전부의 디자인을 결정한다.
 * v1 은 파란색 원색(#2f6df6) 한 톤에 그림자 없이 평면이었다.
 *
 * v2 원칙 — 요소를 빼지 않고 톤을 한 단계 낮춘다
 *   ① 원색 파랑 #2f6df6 → 깊은 남색 #12365F / #1B4E86
 *   ② 그림자 없음 → 세 겹 옅은 그림자
 *   ③ 평면 → 배경·카드·카드안쪽 3단 층
 *   ④ 본문 17px → 16px, 자간 -0.011em, 줄바꿈 keep-all (한글 가독성)
 *   ⑤ 숫자는 tabular-nums 고정폭 — 표가 흔들리지 않는다
 * ============================================================================ */

:root{
  /* 층 : 뒤 → 앞 3단 */
  --bg:#F4F6FA;
  --card:#FFFFFF;
  --soft:#F8FAFC;
  --soft2:#EEF2F8;

  --ink:#0B1524;
  --sub:#5F6B7F;   /* 2026-08-02 대비 실측 : #6B7A93 은 12~14px 에서 4.10~4.35 : 1 로 미달이었다 → 5.39 : 1 */
  --line:#E2E8F2;
  --line-strong:#CFD8E6;
  --line-2:#EFF3F8;

  /* 브랜드 : 깊은 남색 3단 */
  --brand:#1B4E86;
  --brand-d:#12365F;
  --brand-l:#2E6DB4;
  --accent:#E8F0F9;

  /* 강조 : 채도를 낮춘 벽돌색 */
  --hot:#C0521F;
  --hot-d:#A8451A;

  /* 상태색 : 형광이 아니라 깊은 색 */
  --ok:#0E6B45;   --ok-bg:#E6F4EE;   --ok-line:#B9DFCD;
  --warn:#8A5A0B; --warn-bg:#FCF4E4; --warn-line:#E9D5A8;
  --bad:#9E2B22;  --bad-bg:#FBECEA;  --bad-line:#EBC6C1;

  /* 그림자 : 세 겹이 겹쳐야 고급스럽다 */
  --sh1:0 1px 2px rgba(11,21,36,.05), 0 1px 3px rgba(11,21,36,.04);
  --sh2:0 1px 2px rgba(11,21,36,.05), 0 4px 10px -2px rgba(11,21,36,.07), 0 12px 28px -8px rgba(11,21,36,.09);
  --sh3:0 2px 4px rgba(11,21,36,.06), 0 12px 24px -6px rgba(11,21,36,.10), 0 28px 56px -18px rgba(11,21,36,.14);
}

*{ box-sizing:border-box }

body{
  margin:0;
  font-family:Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  color:#33415A;
  background:var(--bg);
  line-height:1.72;
  font-size:16px;
  letter-spacing:-.011em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* 본문 전체를 흰 판 위에 올린다 — 이게 '지면이 있다'는 느낌을 만든다 */
.wrap{
  max-width:880px;
  margin:26px auto 44px;
  padding:8px 30px 52px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--sh2);
}

.top{
  font-size:13px; color:var(--sub);
  padding:16px 0 13px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.top a{ color:var(--sub) }

.crumb{ font-size:12.5px; color:var(--sub); margin:10px 0 2px; letter-spacing:0 }

.badge{
  display:inline-block; font-size:11.5px; font-weight:750;
  color:var(--brand); background:var(--accent);
  border:1px solid #C0D6EC; border-radius:999px;
  padding:3px 11px; margin-right:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  letter-spacing:-.008em;
}

h1{
  font-size:clamp(23px,2vw+10px,31px); line-height:1.32;
  margin:14px 0 6px; letter-spacing:-.03em; font-weight:800;
  color:var(--ink); text-wrap:balance;
}
h2{
  font-size:20px; margin:38px 0 12px; padding-top:4px;
  letter-spacing:-.024em; font-weight:750; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
h2::before{
  content:""; display:inline-block; width:3px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand-l),var(--brand-d));
  flex:none;
}

/* 리드 문단 — 왼쪽 굵은 선 + 옅은 판 */
.lead{
  font-size:16px; color:#2C3A4E;
  background:linear-gradient(180deg,#F9FBFD,#F3F7FB);
  border:1px solid var(--line);
  border-left:4px solid var(--brand);
  border-radius:0 14px 14px 0;
  padding:16px 18px; margin:18px 0 10px;
  box-shadow:var(--sh1);
}
.lead b{ color:var(--brand-d); font-weight:750 }

p{ margin:12px 0 }
.note{ font-size:13px; color:var(--sub) }

/* ── 지표 상자 ── */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin:16px 0 }
.stat{
  background:linear-gradient(180deg,#FAFCFE,#F4F8FC);
  border:1px solid var(--line);
  border-radius:14px; padding:15px 12px; text-align:center;
  box-shadow:0 1px 0 #fff inset, var(--sh1);
}
.stat .n{
  display:block; font-size:26px; font-weight:800; color:var(--brand-d);
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.2;
}
.stat .l{ display:block; font-size:12px; color:var(--sub); margin-top:3px; letter-spacing:-.008em }

/* ── 표 ── */
table.ptable{
  width:100%; margin:16px 0; font-size:14px;
  background:var(--card);
  border:1px solid var(--line); border-radius:16px;
  border-collapse:separate; border-spacing:0;
  overflow:hidden; box-shadow:var(--sh2);
}
table.ptable th{
  background:linear-gradient(180deg,#F9FBFD,#F2F6FA);
  color:var(--sub); font-weight:700; font-size:12px;
  text-align:left; padding:12px 14px; border:0;
  border-bottom:1px solid var(--line); letter-spacing:0;
}
table.ptable td{
  padding:12px 14px; border:0;
  border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums;
}
table.ptable tbody tr:hover td{ background:#FAFCFE }
table.ptable tr:last-child td{ border-bottom:0 }
table.ptable td:first-child{ color:var(--sub); font-variant-numeric:tabular-nums }
table.ptable td:nth-child(2){ font-weight:650; color:var(--ink) }

/* ── 난이도 배지 — 형광 대신 깊은 색 ── */
.dbadge{
  display:inline-block; border-radius:999px; padding:2.5px 10px;
  font-size:11.5px; font-weight:750; letter-spacing:-.008em;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  white-space:nowrap;
}
.dbadge.d1{ background:var(--ok-bg);   color:var(--ok);   border-color:var(--ok-line) }
.dbadge.d2{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line) }
.dbadge.d3{ background:var(--bad-bg);  color:var(--bad);  border-color:var(--bad-line) }

/* ── 관련 단원 칩 ── */
.rel{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 }
.relcard{
  display:inline-block; border:1px solid var(--line); border-radius:999px;
  padding:8px 15px; font-size:13.5px; color:#33415A;
  background:linear-gradient(180deg,#fff,#F8FAFC);
  box-shadow:var(--sh1); transition:.16s;
}
.relcard:hover{
  border-color:var(--line-strong); color:var(--brand-d);
  text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh2);
}
.relcard.hub{
  background:linear-gradient(180deg,var(--brand),var(--brand-d));
  color:#fff; font-weight:700; border-color:var(--brand-d);
  box-shadow:0 2px 6px rgba(18,54,95,.16), 0 10px 22px -8px rgba(18,54,95,.26);
}
.relcard.hub:hover{ color:#fff }

/* ── 전환 배너 ── */
.cta{
  margin:40px 0 8px; padding:26px 24px;
  background:linear-gradient(160deg,#1B4E86 0%,#12365F 60%,#0E2C4E 100%);
  border-radius:20px; color:#fff; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 2px 8px rgba(11,21,36,.14), 0 18px 40px -14px rgba(11,21,36,.30);
}
.cta::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brand-l),#6FA8E6 45%,var(--hot));
}
.cta p{ margin:0 0 16px; font-size:16px; color:#DCE8F6 }
.cta a,.cta .btn{
  display:inline-block; padding:11px 22px; border-radius:11px;
  background:linear-gradient(180deg,#CE5B24,#C0521F);
  border:1px solid var(--hot-d); color:#fff; font-weight:700;
  box-shadow:0 2px 6px rgba(192,82,31,.20), 0 1px 0 rgba(255,255,255,.2) inset;
  text-decoration:none; transition:.16s;
}
.cta a:hover{ transform:translateY(-1px); text-decoration:none }

.foot{
  margin-top:44px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px; color:var(--sub);
}

/* ── 카탈로그(허브) ── */
.hub-h{ margin:22px 0 4px }
.hub-sub{ color:var(--sub); margin:0 0 20px; font-size:15px }

.grp{
  margin:32px 0 8px; font-size:19px; font-weight:750;
  letter-spacing:-.024em; color:var(--ink);
  border-bottom:2px solid var(--accent); padding-bottom:8px;
  display:flex; align-items:baseline; gap:9px;
}
.grp .cnt{ font-size:12.5px; font-weight:500; color:var(--sub); letter-spacing:-.008em }

.cards{ display:grid; grid-template-columns:1fr; gap:14px; margin:14px 0 }

.card{
  display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:16px;
  padding:0; background:var(--card);
  box-shadow:var(--sh2);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .18s;
}
.card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--sh3);
  transform:translateY(-3px);
  text-decoration:none;
}
/* 썸네일이 없는 카드도 여백은 유지해야 한다 */
.card > .t{ padding-top:15px }
.card > .t,.card > .d,.card > .u{ padding-left:17px; padding-right:17px }
.card > .u{ padding-bottom:15px }
.card .t{ font-weight:750; color:var(--ink); font-size:16px; line-height:1.42; letter-spacing:-.022em }
.card .d{ color:var(--sub); font-size:13.5px; margin-top:5px; line-height:1.6 }
.card .u{
  display:inline-block; margin-top:9px;
  font-size:11.5px; font-weight:700; color:var(--brand);
  background:var(--accent); border:1px solid #C0D6EC;
  border-radius:999px; padding:2.5px 10px;
}

@media(min-width:640px){
  .cards{ grid-template-columns:1fr 1fr }
  .stats{ grid-template-columns:repeat(4,1fr) }
}
@media(max-width:560px){
  .wrap{ margin:0; border-radius:0; border-left:0; border-right:0; padding:8px 18px 44px }
  body{ font-size:15.5px }
}

/* 인쇄 : 판·그림자를 걷어내고 활자만 남긴다 */
@media print{
  body{ background:#fff }
  .wrap{ box-shadow:none; border:0; margin:0; padding:0; max-width:none }
  .card,.stat,table.ptable,.lead{ box-shadow:none }
  .cta{ display:none }
}

/* ══════════════════════════════════════════════════════════
 * 단원 그림 (onae-unitart.js 가 넣는다)
 * ══════════════════════════════════════════════════════════ */

/* 카탈로그 카드 썸네일 */
.ua-thumb{
  position:relative; display:block; height:96px;
  border-bottom:1px solid var(--line-2);
  overflow:hidden; background:#0C2B4C;
}
.ua-thumb > svg{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .ua-thumb > svg{ transform:scale(1.04) }
.ua-cap{
  position:absolute; left:14px; bottom:9px;
  font-size:11px; font-weight:800; letter-spacing:.01em;
  color:rgba(255,255,255,.93); text-shadow:0 1px 3px rgba(0,0,0,.40);
  pointer-events:none;
}

/* 단원 페이지 상단 띠 */
.ua-hero{
  position:relative; height:150px; margin:16px 0 6px;
  border-radius:18px; overflow:hidden; background:#0C2B4C;
  box-shadow:var(--sh2);
}
.ua-hero > svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
.ua-hero > .ua-cap{ left:20px; bottom:14px; font-size:12.5px }

@media(max-width:560px){
  .ua-hero{ height:112px; border-radius:14px }
  .ua-thumb{ height:84px }
}

/* 인쇄 : 그림은 잉크를 먹는다. 캡션만 남긴다 */
@media print{
  .ua-hero{ display:none }
  .ua-thumb{ height:auto; background:none; border-bottom:1px solid #ddd }
  .ua-thumb > svg{ display:none }
  .ua-cap{ position:static; color:#555; text-shadow:none; display:block; padding:6px 16px }
}