/* ============================================================
   Exam Hub 공용 디자인 시스템 — iOS
   ------------------------------------------------------------
   모든 시험 모듈이 이 파일을 **가장 먼저** 로드한다.
   모듈은 :root { --tint: ... } 하나만 지정하면 전체 톤이 맞는다.

   iOS 디자인의 뼈대를 그대로 따른다.
     · 재료(materials)  — 반투명 + blur + saturate(vibrancy 근사)
     · 라벨 계층        — label / secondary / tertiary
     · inset grouped 리스트 — 좌우 16pt 여백, 둥근 그룹, 들여쓴 구분선
     · 최소 44pt 터치 타깃
     · Safe area 대응
   ============================================================ */

:root {
  /* 시그니처 — 잉크 네이비. 모눈공책 위에 만년필로 쓴 톤. */
  --tint: #2b3a8f;
  --tint-ink: #ffffff;
  /* 강조색 — 형광펜 앰버. CTA·중요 표시에만 아껴 쓴다. */
  --highlight: #c8871b;
  --highlight-ink: #ffffff;
  --highlight-soft: rgba(200, 135, 27, 0.16);
  /* --highlight를 --highlight-soft 위에 얹으면 2.5:1밖에 안 나온다.
     연한 앰버 배경에 올릴 글자는 반드시 이 진한 값을 쓴다(5.3:1). */
  --highlight-strong: #8a5410;
  /* 형광펜 칠 색. CTA용 앰버(--highlight)와 분리한다 — 형광펜은 쨍한 노랑이
     제 역할이지만, 같은 노랑을 글자색으로 쓰면 흰 바탕에서 읽히지 않는다. */
  --marker: rgba(255, 226, 26, 0.85);
  /* 형광펜 획 모양. 랜딩 제목과 요약집 본문이 같은 붓을 쓰도록 토큰으로 둔다. */
  --marker-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M1%2C9%20C22%2C4%2044%2C11%2066%2C7%20C88%2C3%20110%2C10%20132%2C6%20C154%2C2%20176%2C9%20199%2C5%20L197%2C25%20C176%2C29%20154%2C22%20132%2C26%20C110%2C30%2088%2C23%2066%2C27%20C44%2C31%2022%2C24%203%2C28%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  /* 이전 이름 호환 — 모듈 오버레이가 --accent를 쓴다 */
  --accent: var(--tint);
  --accent-ink: var(--tint-ink);

  /* ── 시스템 색상 (light) ── */
  --sys-blue: #007aff;
  --sys-green: #34c759;
  --sys-red: #ff3b30;
  --sys-orange: #ff9500;
  --sys-yellow: #ffcc00;
  --sys-purple: #af52de;
  --sys-teal: #30b0c7;

  /* ── 배경 계층 ──
     iOS 기본 회색(#f2f2f7) 대신 종이 느낌의 베이지를 바탕으로 쓴다.
     그 위에 모눈 격자를 얹어 공책 위에 카드가 놓인 인상을 만든다. */
  --bg-grouped: #f2efe8;          /* 리스트가 놓이는 바탕 */
  --bg-elevated: #fffdf9;          /* 카드·셀 표면 */
  --bg-secondary: #eae6dd;
  --grid-line: rgba(24, 23, 21, 0.085);
  --grid-size: 32px;
  --fill-quaternary: rgba(116, 116, 128, 0.08);
  --fill-tertiary: rgba(118, 118, 128, 0.12);

  /* 어두운 슬래브 — 채점 결과 카드·요약집 배너·코드 블록처럼 흰 글자를 얹는
     면. 예전에는 글자색 토큰(--ink)을 배경에 그대로 썼는데, 그러면 다크에서
     면과 글자가 같이 뒤집혀 흰 판에 흰 글자가 된다. 그래서 분리해 둔다. */
  --slab: #191919;
  --slab-ink: #ffffff;
  /* 슬래브 위 보조 텍스트 — 어두운 면 전용이라 라벨 계층과 별도로 둔다. */
  --slab-ink-soft: rgba(255, 255, 255, 0.72);

  /* 정답/오답 배지처럼 시맨틱 색을 '면'으로 쓸 때 얹는 글자색.
     라이트의 --ok/--no는 어두워서 흰 글자가 맞지만, 다크에서는 같은 토큰이
     밝은 형광 계열로 바뀌므로 흰 글자를 얹으면 2:1까지 떨어진다. */
  --semantic-ink: #ffffff;

  /* tint를 '면'이 아니라 '글자'로 쓸 때(plain 버튼·링크). 라이트의 tint는
     충분히 어둡지만 다크의 tint는 중성 배경 위에서 4.2:1까지 떨어진다. */
  --tint-readable: var(--tint);

  /* ── 라벨 계층 ──
     iOS 기본값(0.62)은 종이 베이지 위에서 3.4:1까지 떨어져 본문 보조
     텍스트로 쓸 수 없다. 0.76으로 올려 4.9:1을 확보한다. */
  --label: rgba(0, 0, 0, 0.92);
  --label-secondary: rgba(60, 60, 67, 0.76);
  --label-tertiary: rgba(60, 60, 67, 0.55);
  --separator: rgba(60, 60, 67, 0.24);

  /* 시험 고유색을 글자로 쓸 때의 값. 모듈이 --exam-color만 지정하면
     라이트/다크에서 각각 읽히는 밝기로 자동 보정된다. */
  --exam-ink: var(--exam-color, var(--tint));

  /* ── 재료(materials) ── */
  /* 재료는 반투명이지만 알파가 높아 사실상 그 색으로 보인다. 순백으로 두면
     따뜻한 종이 바탕 위에서 상단바·사이드바만 차가운 흰 띠로 뜬다.
     카드 표면(--bg-elevated)과 같은 크림 톤으로 맞춘다. */
  --material-thin: rgba(255, 253, 249, 0.72);
  --material-regular: rgba(255, 253, 249, 0.84);
  --material-thick: rgba(255, 253, 249, 0.94);
  --material-blur: 20px;
  --material-saturate: 180%;

  /* ── 형태 ── */
  --r-control: 10px;   /* 버튼·필드 */
  --r-group: 12px;     /* 리스트 그룹·카드 */
  --r-card: 16px;      /* 큰 카드 */
  --r-pill: 999px;
  --hairline: 0.5px;

  --pad-side: 16px;    /* iOS 표준 좌우 여백 */
  --tap: 44px;         /* 최소 터치 타깃 */
  /* 브랜드 마크(44px) + 액션 버튼(44px)이 들어가는 바라 iOS 기본 44pt로는
     여백이 남지 않는다. 가장 완성도 높은 정처기 상단바(76px)를 기준으로 잡는다. */
  --nav-height: 76px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
          "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* 문제 지문처럼 길게 읽는 본문에는 세리프를 쓴다. 정처기·TOEIC이 이미
     이 방식이라 나머지 시험도 같은 규칙을 따르게 토큰으로 올린다. */
  --font-reading: Georgia, "Times New Roman", "Apple SD Gothic Neo", serif;

  /* ── 그림자 (iOS는 아주 얕다) ── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.09), 0 14px 34px rgba(0, 0, 0, 0.09);

  /* 이전 글래스 토큰 호환 (모듈 오버레이가 참조한다) */
  --glass-bg: var(--material-regular);
  --glass-bg-strong: var(--material-thick);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-line: var(--separator);
  --glass-shadow: var(--shadow-card);
  --glass-shadow-lift: var(--shadow-raised);
  --blur: var(--material-blur);
  --blur-strong: 30px;
  --ink: var(--label);
  --ink-soft: var(--label-secondary);
  --muted: var(--label-secondary);
  /* 정답 표시 초록. 종이 베이지 위에서 3.7:1까지 떨어져 한 단계 어둡게 잡는다. */
  --ok: #157040;
  --ok-bg: rgba(52, 199, 89, 0.16);
  /* 오답 표시 빨강. 종이 베이지 위에서 4.3:1이라 한 단계 어둡게 잡는다. */
  --no: #c02626;
  --no-bg: rgba(255, 59, 48, 0.14);
  /* --warn-bg(연한 앰버) 위에 얹으면 4.05:1이라 난이도 '중' 배지가 미달했다.
     --highlight-strong과 같은 농도로 맞춘다. */
  --warn: #8a5410;
  --warn-bg: rgba(255, 149, 0, 0.16);
  --r-sm: var(--r-control);
  --r-md: var(--r-group);
  --r-lg: var(--r-card);
  --topbar-height: var(--nav-height);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint: #7d8cf0;
    /* 다크의 tint는 밝은 페리윙클이라 흰 글자를 얹으면 3.05:1로 떨어진다.
       채워진 버튼·브랜드 마크가 전부 여기 걸리므로 잉크를 뒤집는다(5.6:1). */
    --tint-ink: #1c1c1e;
    --highlight: #e0a53c;
    --highlight-soft: rgba(224, 165, 60, 0.2);
    --highlight-strong: #f0c98a;
    /* 다크에서는 흰 글자가 위에 오므로 옅게 깔아 글자를 살린다. */
    --marker: rgba(255, 214, 10, 0.34);
    --highlight-ink: #1c1c1e;
    /* 시험 고유색은 라이트 기준으로 고른 값이라 어두운 카드 위에서 2.8~3.0:1
       밖에 안 나온다. 흰색을 섞어 밝기만 끌어올린다(5.1:1+). */
    --exam-ink: color-mix(in srgb, var(--exam-color, var(--tint)) 70%, white);
    --sys-blue: #0a84ff;
    --sys-green: #30d158;
    --sys-red: #ff453a;
    --sys-orange: #ff9f0a;
    --sys-purple: #bf5af2;

    /* 다크에서도 종이 결을 유지하되 완전한 검정 대신 따뜻한 차콜을 쓴다. */
    --bg-grouped: #17161a;
    --bg-elevated: #232227;
    --bg-secondary: #2c2b31;
    /* 다크에서는 바탕(#17161a)보다 한 단계 밝아야 '떠 있는 면'으로 읽힌다. */
    --slab: #34333a;
    --slab-ink-soft: rgba(255, 255, 255, 0.72);
    --semantic-ink: #1c1c1e;
    --tint-readable: color-mix(in srgb, var(--tint) 78%, white);
    --grid-line: rgba(255, 255, 255, 0.07);
    --fill-quaternary: rgba(118, 118, 128, 0.18);
    --fill-tertiary: rgba(118, 118, 128, 0.24);

    --label: rgba(255, 255, 255, 0.96);
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.45);
    --separator: rgba(84, 84, 88, 0.65);

    --material-thin: rgba(30, 30, 32, 0.72);
    --material-regular: rgba(30, 30, 32, 0.84);
    --material-thick: rgba(28, 28, 30, 0.94);

    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.6), 0 16px 40px rgba(0, 0, 0, 0.5);
    --ok: #30d158;
    /* iOS 기본 systemRed는 연한 적색 배경 위에서 4.47:1로 아슬아슬하게
       미달한다. 난이도 '상' 배지가 여기 걸려 한 단계 밝게 잡는다. */
    --no: #ff6b61;
    --warn: #e0a53c;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg-grouped); -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  font-family: var(--font);
  font-size: 17px;              /* iOS body */
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--label);
  /* 바탕색은 html이 칠한다. 여기서 다시 칠하면 아래 ::before 격자를 덮는다.
     음수 z-index 자식은 '부모 배경 다음'이 아니라 '부모 배경 앞'에 그려지기
     때문에, body가 불투명하면 격자가 통째로 가려진다. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 모눈공책 격자. 모듈 CSS가 body 배경을 각자 칠하므로 같은 자리에 그리면
   덮인다. 뒤쪽 고정 레이어로 분리해 어떤 모듈에서도 바탕이 유지되게 한다. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg-grouped);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tint) 45%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; z-index: 200;
  padding: 11px 18px; border-radius: var(--r-control);
  background: var(--tint); color: var(--tint-ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── 타이포 (iOS 텍스트 스타일) ─────────────────────── */
.ios-large-title { font-size: 34px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.12; }
.ios-title { font-size: 28px; font-weight: 700; letter-spacing: -0.024em; }
.ios-headline { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }
.ios-subhead { font-size: 15px; color: var(--label-secondary); }
.ios-footnote { font-size: 13px; color: var(--label-secondary); }
.ios-caption { font-size: 12px; color: var(--label-tertiary); }
/* 그룹 헤더 — iOS 설정 앱의 섹션 제목 */
.ios-group-header {
  margin: 26px var(--pad-side) 7px;
  font-size: 13px; font-weight: 400;
  color: var(--label-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── 네비게이션 바 ──────────────────────────────────── */
.ios-nav,
.glass-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  min-height: var(--nav-height);
  padding: 0 var(--pad-side);
  padding-top: env(safe-area-inset-top);
  background: var(--material-thick);
  border-bottom: var(--hairline) solid var(--separator);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
}

.ios-nav-title,
.glass-brand {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  /* 마크는 30px로 두되 히트 영역은 최소 터치 타깃을 채운다. */
  min-height: var(--tap);
  padding: 0; border: 0; background: transparent;
  color: var(--label); font-family: inherit; font-size: 17px; font-weight: 600;
  letter-spacing: -0.012em; cursor: pointer;
}
.ios-nav-mark,
.glass-brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-control);
  background: var(--tint); color: var(--tint-ink);
  font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
}

/* 우측 액션 묶음 — 좁으면 가로 스크롤 */
.ios-nav-actions,
.glass-shortcuts {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ios-nav-actions::-webkit-scrollbar,
.glass-shortcuts::-webkit-scrollbar { display: none; }

/* ── 버튼 ──────────────────────────────────────────── */
/* Plain — 텍스트만 (iOS 기본 바 버튼) */
.ios-btn,
.glass-btn {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px;
  border: none; border-radius: var(--r-control);
  background: var(--fill-tertiary); color: var(--tint-readable);
  font-family: inherit; font-size: 15px; font-weight: 500;
  letter-spacing: -0.01em; cursor: pointer; text-decoration: none;
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
.ios-btn:active,
.glass-btn:active { opacity: .55; transform: scale(.97); }
.ios-btn[disabled],
.glass-btn[disabled] { opacity: .38; cursor: not-allowed; }

/* Filled — 주요 동작 */
.ios-btn-filled,
.glass-btn-primary {
  background: var(--tint); color: var(--tint-ink);
  font-weight: 600;
}
.ios-btn-filled:active,
.glass-btn-primary:active { opacity: .82; }

/* 큰 버튼 — 폼 하단 주요 동작 (44pt) */
.ios-btn-lg { min-height: var(--tap); padding: 0 20px; font-size: 17px; border-radius: var(--r-group); }

/* ── inset grouped 리스트 ───────────────────────────── */
.ios-list {
  margin: 0 var(--pad-side);
  border-radius: var(--r-group);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ios-cell {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  padding: 11px var(--pad-side);
  color: inherit; text-decoration: none;
  background: transparent;
  border: 0; width: 100%; text-align: left;
  font-family: inherit; font-size: 17px;
  cursor: pointer;
}
/* 구분선은 왼쪽을 들여쓴다 — iOS 리스트의 특징 */
.ios-cell + .ios-cell { box-shadow: inset 0 var(--hairline) 0 var(--separator); }
.ios-cell:active { background: var(--fill-quaternary); }
.ios-cell-body { flex: 1 1 auto; min-width: 0; }
.ios-cell-title { font-size: 17px; letter-spacing: -0.012em; }
.ios-cell-sub { font-size: 13px; color: var(--label-secondary); margin-top: 2px; }
.ios-cell-value { color: var(--label-secondary); font-size: 15px; }
.ios-chevron { flex: 0 0 auto; color: var(--label-tertiary); font-size: 15px; }

/* ── 카드 ──────────────────────────────────────────── */
.ios-card,
.glass-card,
.glass {
  border-radius: var(--r-card);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* 재료 위에 뜬 카드 (배경이 비쳐야 할 때) */
.ios-material {
  background: var(--material-regular);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
}

/* ── 배지·칩 ───────────────────────────────────────── */
.ios-badge,
.glass-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: none; border-radius: var(--r-pill);
  background: var(--fill-tertiary); color: var(--label-secondary);
  font-size: 12px; font-weight: 500;
}
.ios-badge-tint,
.glass-chip.is-accent {
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: var(--tint); font-weight: 600;
}
.glass-chip.is-ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.glass-chip.is-no { background: var(--no-bg); color: var(--no); font-weight: 600; }

/* ── 세그먼티드 컨트롤 ──────────────────────────────── */
.ios-segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  border-radius: var(--r-control); background: var(--fill-tertiary);
}
.ios-segmented button {
  border: 0; border-radius: calc(var(--r-control) - 2px); padding: 6px 14px;
  background: transparent; color: var(--label);
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.ios-segmented button[aria-selected="true"] {
  background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

/* ── 입력 ──────────────────────────────────────────── */
.ios-field,
.glass-input,
.glass-textarea {
  width: 100%; min-height: var(--tap);
  padding: 11px 14px;
  border: none; border-radius: var(--r-control);
  background: var(--fill-quaternary); color: var(--label);
  font-family: inherit; font-size: 17px;
  -webkit-appearance: none; appearance: none;
}
.glass-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ios-field:focus,
.glass-input:focus,
.glass-textarea:focus {
  outline: none;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 28%, transparent);
}
.glass-input.is-mono, .glass-textarea.is-mono { font-family: var(--mono); font-size: 15px; }
.glass-input::placeholder, .glass-textarea::placeholder { color: var(--label-tertiary); }

/* ── 코드 ──────────────────────────────────────────── */
.glass-code,
.ios-code {
  margin: 12px 0; padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--slab); color: var(--slab-ink);
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.glass-code .lang,
.ios-code .lang {
  display: block; margin-bottom: 8px;
  /* 코드 슬래브(#1c1c1e) 위 언어 라벨 — 흰색을 더 섞어야 4.5:1을 넘는다. */
  color: color-mix(in srgb, var(--tint) 45%, white);
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── 진행률 ────────────────────────────────────────── */
.ios-progress,
.glass-progress {
  height: 4px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--fill-tertiary);
}
.ios-progress > i,
.glass-progress > i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--tint);
  transition: width 250ms ease;
}

/* ── 토스트 ────────────────────────────────────────── */
.ios-toast,
.glass-toast {
  position: fixed; left: 50%; z-index: 120;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--material-thick); color: var(--label);
  border: var(--hairline) solid var(--separator);
  box-shadow: var(--shadow-raised);
  font-size: 15px; text-align: center;
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  opacity: 0; pointer-events: none; transition: 220ms ease;
}
.ios-toast.show,
.glass-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 빈 상태 ───────────────────────────────────────── */
.ios-empty,
.glass-empty {
  margin: 0 var(--pad-side);
  padding: 40px 20px; text-align: center;
  color: var(--label-secondary); font-size: 15px;
  border-radius: var(--r-group);
  background: var(--bg-elevated);
}

/* ── 접근성·인쇄 ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body::before { display: none; }
  .ios-nav, .glass-topbar, .ios-toast, .glass-toast { display: none; }
  .ios-card, .glass-card, .ios-list { box-shadow: none; border: 1px solid var(--separator); }
}


/* ── 강조(형광펜) ───────────────────────────────────
   시그니처 잉크 네이비와 짝을 이루는 보조색. 남용하면 힘을 잃으므로
   '지금 할 일' 하나를 가리킬 때만 쓴다. */
.ios-btn-highlight {
  background: var(--highlight);
  color: var(--highlight-ink);
  font-weight: 600;
}
.ios-btn-highlight:active { opacity: .82; }

.ios-badge-highlight {
  background: var(--highlight-soft);
  color: var(--highlight-strong);
  font-weight: 600;
}



/* ── 형광펜 (손글씨 느낌) ──────────────────────────────
   SVG 필터(feTurbulence)로 가장자리를 흔드는 방법도 있지만, 필터는
   래스터 연산이라 무겁고 텍스트 자체까지 일그러진다. 여기서는 '모양'만
   SVG 마스크로 잘라내 얹는다 — 색은 CSS 변수로 자유롭고, 리페인트도 없다.

   사용:  <em class="ios-marker">여기</em>
          <span class="ios-marker is-underline">밑줄만</span> */
.ios-marker {
  position: relative;
  display: inline;
  z-index: 0;
}
.ios-marker::before {
  content: "";
  position: absolute;
  left: -0.18em;
  right: -0.18em;
  top: 0.42em;      /* 글자 아래쪽 절반만 덮어 형광펜처럼 보이게 */
  bottom: -0.12em;
  z-index: -1;
  pointer-events: none;
  background-color: var(--marker);
  -webkit-mask-image: var(--marker-mask);
  mask-image: var(--marker-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 손으로 그으면 수평이 살짝 어긋난다 */
  transform: rotate(-0.5deg);
}

/* 밑줄만 긋는 변형 */
.ios-marker.is-underline::before {
  top: auto;
  height: 0.34em;
  bottom: -0.02em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%2C5%20C26%2C2%2052%2C8%2078%2C4%20C104%2C1%20130%2C7%20156%2C3%20C172%2C1%20186%2C5%20198%2C2%20L197%2C11%20C186%2C13%20172%2C9%20156%2C12%20C130%2C15%20104%2C10%2078%2C13%20C52%2C16%2026%2C11%203%2C13%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2014%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%2C5%20C26%2C2%2052%2C8%2078%2C4%20C104%2C1%20130%2C7%20156%2C3%20C172%2C1%20186%2C5%20198%2C2%20L197%2C11%20C186%2C13%20172%2C9%20156%2C12%20C130%2C15%20104%2C10%2078%2C13%20C52%2C16%2026%2C11%203%2C13%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}

/* 진하게 칠한 변형 */
.ios-marker.is-strong::before { background-color: color-mix(in srgb, var(--marker) 100%, black 8%); }

/* 잉크색 마커 */
.ios-marker.is-ink::before { background-color: color-mix(in srgb, var(--tint) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .ios-marker::before { transform: none; }
}

/* ── 형광펜 마크 ────────────────────────────────────────
   무엇을 칠할지는 static/shared/highlight.js가 판단한다(개념 사전 기준).
   여기서는 '어떻게 보일지'만 정한다. 마크가 줄바꿈을 타는 경우가 많아
   ::before 절대배치 대신 요소 배경 + box-decoration-break로 그린다. */
mark.hl {
  background: linear-gradient(
    to top,
    transparent 0.04em,
    color-mix(in srgb, var(--marker) 80%, transparent) 0.04em,
    color-mix(in srgb, var(--marker) 80%, transparent) 0.82em,
    transparent 0.82em
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.1em;
  border-radius: 2px;
  /* 본문이 --muted인 자리에도 얹히므로 칠한 글자는 본문 강도로 올린다. */
  color: var(--ink);
  font-weight: 700;
}

/* ── 시험 D-day 배너 ─────────────────────────────────────────── */
/* 시험이 D-3 안으로 들어오면 강조된다. 그때는 새 문제보다 오답 복습이다. */
.exam-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 20px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e8ef);
}
.exam-countdown__when { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; }
.exam-countdown__when b { font-size: 20px; letter-spacing: -0.01em; }
.exam-countdown__when span { font-size: 14px; color: var(--muted, #5b5f6b); }
.exam-countdown__link {
  font-size: 14px;
  color: var(--muted, #5b5f6b);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.exam-countdown.is-final {
  background: #fff8ec;
  border-color: #f0d9ac;
}
.exam-countdown.is-final .exam-countdown__when b { color: #a8621a; }
.exam-countdown__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #a8621a;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.exam-countdown__hint {
  flex: 1 0 100%;
  margin: 0;
  font-size: 13px;
  color: #8a6430;
}
@media (prefers-color-scheme: dark) {
  .exam-countdown.is-final { background: #2a2419; border-color: #4a3d24; }
  .exam-countdown.is-final .exam-countdown__when b { color: #e0a35c; }
  .exam-countdown__hint { color: #c49a5e; }
}

/* ── 푼 세트 표시 ────────────────────────────────────────
   목록에서 푼 세트는 아래로 내려가고 여기 표시가 붙는다. 순서만으로는
   "왜 03 다음에 01이 나오나"를 알 수 없어서, 카드 자체가 말해야 한다.
   기록은 사람마다 다르므로 서버가 사용자별로 내려준 값으로 칠한다. */
.set-card { position: relative; }
.set-card.is-solved { background: color-mix(in srgb, var(--card) 88%, var(--muted) 12%); }
.set-card.is-solved strong,
.set-card.is-solved h3 { opacity: .72; }
.set-card.is-solved b { opacity: .6; }

.set-done {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--exam-color, #2d7a68) 14%, transparent);
  color: var(--exam-color, #2d7a68);
  font-size: 11px; font-weight: 800; letter-spacing: -.01em; line-height: 1.5;
  vertical-align: middle;
}
/* 세로형 카드(보험·데이터·컴활·금융)는 카드가 곧 버튼이라 글줄에 끼울 자리가
   없다. 모서리에 띄운다. 가로형 카드(실기)는 설명 줄 안에서 그냥 흐른다. */
.set-card > .set-done {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
}
.set-done-check { font-size: 10px; }

/* 결과 화면의 '다음 10문제'는 어느 세트로 가는지 함께 보여준다. */
.result-actions .primary small {
  display: block; margin-top: 3px;
  font-size: 11px; font-weight: 600; opacity: .78;
}
.result-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* ── 배경 노트 ─────────────────────────────────────────────────────────
 *
 * 원문에 해설이 없는 문항에 붙는, 손으로 쓴 개념 설명이다. 표와 SVG가
 * 들어 있어 요약집과 같은 마크다운 렌더러로 그린다. 그래서 여기서도
 * 표·그림 규약을 그대로 되풀이한다 — 채점 결과 화면과 쪽집게 화면은
 * 요약집 스타일을 물려받지 않기 때문이다.
 */
.concept-note {
  margin: 12px 0 0;
  border: var(--hairline) solid var(--separator);
  border-radius: var(--r-group, 12px);
  background: var(--fill-quaternary, rgba(120, 120, 128, .05));
  overflow: hidden;
}
.concept-note > summary {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--label-primary, var(--ink));
  cursor: pointer;
  list-style: none;
}
.concept-note > summary::-webkit-details-marker { display: none; }
.concept-note > summary::before {
  content: "＋ ";
  color: var(--label-tertiary, var(--muted));
  font-weight: 400;
}
.concept-note[open] > summary::before { content: "－ "; }
.concept-note-body {
  padding: 0 12px 12px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--label-secondary, var(--muted));
}
.concept-note-body > :first-child { margin-top: 0; }
.concept-note-body h2 {
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--label-primary, var(--ink));
}
.concept-note-body strong { color: var(--label-primary, var(--ink)); }
.concept-note-body code {
  padding: 1px 4px; border-radius: 4px;
  background: var(--fill-tertiary); font-size: 12px;
}

/* 표는 좁은 화면에서 줄이지 않고 가로로 민다. 줄이면 글자가 읽히지 않는다. */
.concept-note-body .guide-table-wrap {
  margin: 10px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: var(--hairline) solid var(--separator);
  border-radius: 10px;
}
.concept-note-body table {
  width: 100%;
  min-width: var(--table-min-width, 480px);
  border-collapse: collapse;
  font-size: 12px;
}
.concept-note-body th,
.concept-note-body td {
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hairline) solid var(--separator);
}
.concept-note-body th {
  background: var(--fill-tertiary);
  font-weight: 700;
  color: var(--label-primary, var(--ink));
  white-space: nowrap;
}
.concept-note-body tbody tr:last-child td { border-bottom: 0; }

.concept-note-body .concept-diagram {
  margin: 12px 0;
  padding: 10px;
  border: var(--hairline) solid var(--separator);
  border-radius: 10px;
  background: var(--card, #fff);
  overflow-x: auto;
}
.concept-note-body .concept-diagram svg {
  display: block; width: 100%; min-width: 460px; height: auto; margin: 0 auto;
}
.concept-note-body .concept-diagram figcaption {
  margin-top: 8px; font-size: 11px; text-align: center;
  color: var(--label-tertiary, var(--muted));
}