/* DOYEONMATH 사이트 공통 — WEB-DESIGN.md. 값은 tokens.css의 변수만 쓴다 */

/* 화살표(U+2190–21FF: → ↗ ⇒ 등)는 Paperlogy 글자가 아주 작아서 빼고, 글꼴 목록의 다음 글꼴(시스템 고딕)로 그린다 */
@font-face { font-family: 'Paperlogy'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Paperlogy-400.woff2') format('woff2'); unicode-range: U+0000-218F, U+2200-10FFFF; }
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Paperlogy-700.woff2') format('woff2'); unicode-range: U+0000-218F, U+2200-10FFFF; }
@font-face { font-family: 'Paperlogy'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/assets/fonts/Paperlogy-800.woff2') format('woff2'); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-weight: var(--w-regular);
  font-size: var(--fs-body); line-height: var(--lh-body);
  word-break: keep-all; overflow-wrap: break-word;
}
[data-surface] { background: var(--bg); color: var(--fg); }
img { display: block; max-width: 100%; height: auto; }
b, strong { font-weight: var(--w-bold); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-weight: var(--w-bold); line-height: var(--lh-heading); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: var(--sp-3) var(--sp-4); }
.skip:focus { top: var(--sp-3); }

.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--fg-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 수식 (KaTeX) */
.katex { font-size: 1.04em; }
.katex .text { font-family: var(--font-sans); }
.nb { white-space: nowrap; }

/* 버튼: 하나의 기본 버튼 + 테두리 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5);
  background: var(--btn-bg); color: var(--btn-fg); border: var(--rule-w) solid var(--btn-bg);
  font-weight: var(--w-bold); font-size: var(--fs-body); text-decoration: none; border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn.line { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* 머리글 */
.site-head { position: relative; z-index: 20; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 72px; }
.wordmark { font-weight: var(--w-bold); font-size: var(--fs-lead); text-decoration: none; letter-spacing: 0.04em; }
.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a { font-weight: var(--w-bold); font-size: var(--fs-xs); letter-spacing: var(--tracking-nav);
  text-decoration: none; padding: var(--sp-3) 0; min-height: 44px; display: inline-flex; align-items: center; }
.nav a { white-space: nowrap; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.5em; }
@media (min-width: 768px) and (max-width: 1023px) { .nav { gap: var(--sp-4); } .site-head .wrap { gap: var(--sp-4); } }
.nav-toggle { display: none; min-height: 44px; padding: 0 var(--sp-2); font-weight: var(--w-bold); font-size: var(--fs-xs); }
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) var(--gutter) var(--sp-5);
    background: var(--bg); border-bottom: var(--rule-w) solid var(--rule); }
  .nav a { border-top: var(--rule-w) solid var(--rule); font-size: var(--fs-body); }
  .site-head.open .nav { display: flex; opacity: 1; transform: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  @starting-style { .site-head.open .nav { opacity: 0; transform: translateY(-6px); } }
  .no-js .nav { display: flex; position: static; }
}

/* 꼬리말 */
.site-foot { padding: var(--sp-8) 0 var(--sp-7); }
.site-foot .wrap { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.site-foot .name { font-weight: var(--w-bold); font-size: var(--fs-lead); letter-spacing: 0.04em; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-foot .links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--fg-muted); }
.site-foot .copy { font-size: var(--fs-xs); color: var(--fg-muted); border-top: var(--rule-w) solid var(--rule); padding-top: var(--sp-4); }
@media (min-width: 768px) {
  .site-foot .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .site-foot .copy { grid-column: 1 / -1; }
}

/* 그림 (tools/figure.py web 모드) — 그래프 안 빨강은 사이트에서 남색으로 */
.fig { position: relative; width: 100%; container-type: inline-size; margin: var(--sp-3) 0 var(--sp-1); }
.fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl { position: absolute; line-height: 1; white-space: nowrap; font-size: max(13px, calc(100cqw * 28 / var(--w))); }
.fig { --fig-hole: var(--bg); }
.fig [stroke="#1A1A1A"] { stroke: var(--fg); }
.fig [fill="#1A1A1A"] { fill: var(--fg); }
.fig [stroke="#C8372D"] { stroke: var(--accent); }
.fig [fill="#C8372D"] { fill: var(--accent); }
.fig [fill="#FFFFFF"] { fill: var(--fig-hole); }
.fig [fill="#F9D6D0"], .fig [fill="rgba(200,55,45,0.13)"] { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.fig [fill="#F1F1EF"] { fill: var(--bg-raised); }
.fig [stroke="#777777"] { stroke: var(--fg-muted); }
.fl[style*="#1A1A1A"] { color: var(--fg) !important; }
.fl[style*="#C8372D"] { color: var(--accent) !important; }
.fl[style*="#777777"] { color: var(--fg-muted) !important; }

/* 강조 (데이터의 형광펜 [[조건|…]] 등) — 사이트에서는 형광펜 대신 밑줄 하나 */
.hl { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.tag { font-size: 0.85em; color: var(--fg-muted); }

/* 수업 안내 표의 개강일 등 / 특강 / 학습 관리 링크 / RE-MIND TEST (홈·수업 안내·학습 관리 공통) */
.class-table .note { font-size: var(--fs-xs); font-weight: var(--w-bold); color: var(--accent); margin-top: var(--sp-1); }
.special { border-top: var(--rule-w-strong) solid var(--rule-strong); padding: var(--sp-4) 0 var(--sp-5); margin-bottom: var(--sp-6); }
.special h3 { font-size: var(--fs-h4); margin: 0 0 var(--sp-3); }
.special .tag-name { color: var(--accent); }
.special dl > div { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-1) 0; }
.special dt { color: var(--fg-muted); font-size: var(--fs-xs); padding-top: 0.2em; }
.system-link { margin-top: var(--sp-5); }
.system-link a { font-weight: var(--w-bold); }
.remind { display: flex; gap: var(--sp-5); align-items: center; margin-top: var(--sp-6); }
/* 표지(앞) + 시험지(뒤): 위아래 단차 없이 같은 높이, 시험지가 오른쪽으로 절반 걸침 */
.remind-stack { --rw: 120px; position: relative; flex: none; width: calc(var(--rw) * 1.5); height: calc(var(--rw) * 1.414); }
.remind-stack img { position: absolute; top: 0; width: var(--rw); height: calc(var(--rw) * 1.414); object-fit: cover;
  border: var(--rule-w) solid var(--rule); background: var(--c-sheet); }
.remind-stack .remind-back { left: calc(var(--rw) / 2); }
.remind-stack .remind-front { left: 0; z-index: 1; }
.remind b { display: block; font-size: var(--fs-lead); }
.remind span { color: var(--fg-muted); }