/* 강의용 사이트 — 단일 스타일시트.
   프레임워크를 쓰지 않는다. 학생 접속의 상당수가 휴대폰이므로 모바일을
   기준으로 쓰고, 넓은 화면에서 확장한다.

   시안 B + 01 핫핑크. 검정 헤더와 첫 화면 띠, 흰 본문, 명조 제목.
   강조색은 두 벌이다 — 검정 위에서 쓰는 --accent, 흰 바탕에서 글자로
   읽히는 --accent-ink. 흰 바탕에 --accent를 글자색으로 쓰면 대비가 모자란다. */

:root {
  /* 바탕 */
  --deep: #0b0b0d;
  --deep-soft: #1b1b1f;
  --paper: #ffffff;
  --soft: #f7f6f5;

  /* 글자 */
  --ink: #17171a;
  --mute: #6c6a72;
  --faint: #a3a0a8;
  --on-deep: #ededed;
  --on-deep-mute: #86838c;

  /* 강조 */
  --accent: #e8245f;      /* 검정 위 */
  --accent-ink: #c81d52;  /* 흰 바탕 위, 글자·링크 */
  --accent-wash: #fdf2f6;

  /* 선 */
  --line: #e6e3e0;
  --line-strong: #d6d2ce;

  /* 상태 */
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;

  --max: 62rem;
  --radius: 8px;

  /* 제목 전용. Black Han Sans는 굵기가 400 하나뿐이라 bold를 주면 브라우저가
     가짜 굵기를 만들어 뭉개진다. 쓰는 곳마다 font-weight: 400을 명시한다.
     내려받기 전이나 실패했을 때를 대비해 대체는 Pretendard의 가장 굵은 단계로 둔다. */
  --kr-display: "Black Han Sans", "Pretendard Variable", Pretendard,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --kr-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --lt-serif: "Instrument Serif", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* 스크롤바 자리를 늘 비워둔다.
     내용이 짧아 스크롤바가 없는 페이지(공지·로그인)와 있는 페이지(홈·툴)의
     가로 폭이 15px 달라지는데, 헤더가 가운데 정렬이라 로고가 7.5px씩
     좌우로 흔들린다. 페이지를 옮길 때마다 눈에 띈다.
     스크롤바를 겹쳐 그리는 브라우저(맥)에서는 폭이 0이라 아무 일도 없다. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--kr-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  word-break: keep-all;      /* 한글이 어절 중간에서 끊기지 않게 */
  overflow-wrap: anywhere;
}

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

img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ── 레이아웃 ─────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 600px) { .wrap { padding: 0 1.15rem; } }

.page { padding: 2.5rem 0 4.5rem; min-height: 50vh; }

/* ── 헤더 ─────────────────────────────────────────────────────── */

.site-header {
  background: var(--deep);
  color: var(--on-deep);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 62px;
}

.brand { font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand small {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--on-deep-mute);
  letter-spacing: 0;
  margin-top: 1px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-left: auto;
  font-size: .88rem;
}
.nav a { color: #b8b5bd; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a[aria-current="page"] { color: #fff; font-weight: 500; }

.nav .code {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--accent);
  border: 1px solid rgba(232, 36, 95, .45);
  padding: .1rem .45rem;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
  .nav { width: 100%; margin-left: 0; gap: 1.1rem; overflow-x: auto; padding-bottom: .1rem; }
}

/* ── 검정 화면 (홈의 첫 화면과 마지막 화면) ─────────────────── */
/* 배경·여백은 아래 "한 화면에 하나씩" 절에서 .screen.is-dark 로 잡는다. */

/* 배경 그래픽 — 사진 대신 시계열 데이터.
   글자가 얹히는 왼쪽은 마스크로 지워, 제목 가독성을 그래픽보다 우선한다. */
.band-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,.4) 58%, #000 82%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 40%, rgba(0,0,0,.4) 58%, #000 82%);
}

@media (max-width: 720px) {
  /* 좁은 화면에서는 글자가 폭을 다 쓰므로 그래픽을 아래로 물리고 더 흐리게 */
  .band-graphic {
    opacity: .5;
    -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 30%, #000 100%);
  }
}

.screen.is-dark .kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--on-deep-mute);
  margin: 0 0 1rem;
}
.screen.is-dark h1 {
  font-family: var(--kr-display);
  font-weight: 400;              /* Black Han Sans는 이 굵기 하나뿐이다 */
  font-size: clamp(2.3rem, 7vw, 4rem);
  line-height: 1.18;             /* 획이 두꺼워 줄 사이를 조금 벌린다 */
  letter-spacing: -.035em;
  margin: 0 0 1rem;
  color: #fff;
  text-wrap: balance;
}
.screen.is-dark h1 .arrow {
  font-family: var(--lt-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.screen.is-dark p { margin: 0; color: #a5a2ad; font-size: 1rem; max-width: 42ch; }


/* ── 제목 ─────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.35; letter-spacing: -.02em; margin: 0 0 .5rem; }
/* 제목용 글꼴은 페이지 대표 제목과 주차 제목에만 쓴다.
   획이 굵어서 h2·h3까지 쓰면 화면이 온통 무거워진다. */
h1 {
  font-family: var(--kr-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -.03em;
}
h2 { font-size: 1.15rem; font-weight: 700; margin-top: 2.5rem; }
h3 { font-size: 1rem; font-weight: 700; }

.lead { color: var(--mute); margin: 0 0 2rem; font-size: .95rem; }
/* 이어지는 도입 문단은 한 덩어리로 읽혀야 한다. 사이가 2rem이면
   서로 다른 이야기처럼 떨어져 보인다. */
.lead + .lead { margin-top: -1.4rem; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .5rem;
  margin: 2.75rem 0 1.25rem;
}
.section-head h2 { margin: 0; font-size: 1rem; }
.section-head .more { margin-left: auto; font-size: .85rem; color: var(--mute); }
.section-head .more:hover { color: var(--accent-ink); }

/* ── 세 갈래 안내 ─────────────────────────────────────────────── */

.intro {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  margin-bottom: .5rem;
}
@media (min-width: 720px) {
  .intro { grid-template-columns: repeat(3, 1fr); }
  .intro-item + .intro-item { border-left: 1px solid var(--line); }
}

.intro-item {
  display: block;
  padding: 1.4rem 1.35rem 1.5rem;
  color: inherit;
  border-bottom: 1px solid var(--line);
}
.intro-item:first-child { padding-left: 0; }
.intro-item:hover { background: var(--soft); text-decoration: none; }
.intro-item .n {
  font-family: var(--lt-serif);
  font-size: 1.35rem;
  color: var(--accent-ink);
  line-height: 1;
}
.intro-item h3 { margin: .5rem 0 .25rem; font-size: 1.02rem; }
.intro-item p { margin: 0; font-size: .85rem; color: var(--mute); }

@media (max-width: 719px) {
  .intro-item { padding-left: 0; padding-right: 0; }
}

/* ── 이번 주차 ────────────────────────────────────────────────── */

.this-week {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: .25rem 0 1.35rem;
  border-bottom: 2px solid var(--ink);
  margin-top: 2.25rem;
}
.this-week .no {
  font-family: var(--lt-serif);
  font-size: 2.75rem;
  line-height: .82;
  color: var(--accent-ink);
  flex: none;
}
.this-week h3 {
  font-family: var(--kr-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 .1rem;
  letter-spacing: -.03em;
}
.this-week span { font-size: .82rem; color: var(--mute); }

/* ── 목록 ─────────────────────────────────────────────────────── */

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list > li { border-bottom: 1px solid var(--line); }

.list a.row,
.list .row {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .9rem .25rem;
  color: inherit;
}
.list a.row:hover { background: var(--soft); text-decoration: none; }
.list .row .title { font-weight: 500; }
.list .row .meta { margin-left: auto; font-size: .8rem; color: var(--faint); white-space: nowrap; }

@media (max-width: 600px) {
  .list .row { flex-wrap: wrap; gap: .35rem .6rem; }
  .list .row .meta { margin-left: 0; width: 100%; }
}

/* ── 카드 ─────────────────────────────────────────────────────── */

.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem; background: var(--paper); }
.card h3 { margin-top: .55rem; }
.card p { margin: 0; color: var(--mute); font-size: .88rem; }

.card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── 배지 ─────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 500;
  padding: .1rem .45rem;
  border-radius: 4px;
  background: var(--soft);
  color: var(--mute);
  white-space: nowrap;
}
.badge.accent { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.badge.ok { background: #f0fdf4; color: var(--ok); }
.badge.warn { background: #fffbeb; color: var(--warn); }

/* ── 버튼 · 폼 ────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--accent-ink);
  background: var(--accent-ink);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  /* 줄 높이를 못 박는다. button은 브라우저 기본값(normal)을 쓰고 a는 본문의
     1.7을 물려받아, 같은 .btn인데 높이가 7.5px 달라진다. 폼 아래에 '저장'
     버튼과 '취소' 링크가 나란히 놓이면 그 차이가 어긋남으로 보인다. */
  line-height: 1.4;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
/* 속이 빈 변형. 지금은 쓰지 않는다. 폼의 '취소'처럼 주된 동작이 아닌
   버튼이 생길 때 쓴다. 같은 성격의 버튼끼리는 모양을 섞지 않는다. */
.btn.ghost { background: transparent; color: var(--accent-ink); }
.btn .arrow { font-family: var(--lt-serif); font-style: italic; margin-left: .35rem; }

.form { max-width: 24rem; }
.form label { display: block; font-size: .82rem; font-weight: 600; margin: 1.1rem 0 .3rem; }
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="number"],
.form select,
.form textarea {
  width: 100%;
  padding: .58rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
  background: var(--paper);
  color: var(--ink);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--accent-ink);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}
.form .helptext, .form .errorlist {
  font-size: .78rem; margin: .3rem 0 0; padding: 0; list-style: none;
}
.form .helptext { color: var(--mute); }
.form .errorlist { color: var(--danger); }
/* 버튼 줄. 인라인으로 늘어놓으면 글자 밑선에 맞춰져 높이가 다른 것끼리
   어긋난다. 가로로 세워 가운데를 맞춘다. */
.form .actions {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* ── 익명코드 강조 ────────────────────────────────────────────── */

.anon-code {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent-ink);
  margin: 0;
}

/* ── 공지 머리띠 ─────────────────────────────────────────────── */
/* 헤더 바로 아래에 붙는다. 고정 표시한 공지 하나만 올라온다. */

.notice-band {
  display: block;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--accent-ink);
  color: var(--ink);
  font-size: .88rem;
  padding: .6rem 0;
}
.notice-band .wrap { display: flex; align-items: center; gap: .7rem; }
.notice-band .tag {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  background: var(--accent-ink);
  padding: .16rem .45rem;
  border-radius: 2px;
}
.notice-band .what {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-band .arrow { flex: 0 0 auto; color: var(--accent-ink); transition: transform .2s ease; }
.notice-band:hover .arrow { transform: translateX(3px); }

/* ── 닉네임 ──────────────────────────────────────────────────── */

.nickname-now {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.nickname-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-start; }
.nickname-form input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.nickname-form .btn { flex: 0 0 auto; }
.field-error { flex: 1 1 100%; margin: 0 0 .4rem; color: var(--danger); font-size: .86rem; }

/* ── 본문(인사이트 글) ───────────────────────────────────────── */

.prose { max-width: 42rem; }
.prose p { margin: 0 0 1.15rem; }

/* 양쪽 정렬. 본문은 word-break: keep-all이라 어절이 통째로 다음 줄로
   넘어가고, 왼쪽 정렬로 두면 오른쪽 끝이 열 글자 넘게 들쭉날쭉해진다.
   한글 책의 본문이 쓰는 방식이기도 하다.

   문단의 마지막 줄과 <br>로 끊은 줄은 브라우저가 늘리지 않으므로,
   nl2br로 만들어진 짧은 줄들은 그대로 있는다.

   좁은 화면에서는 켜지 않는다. 한 줄에 어절이 대여섯 개뿐이면 늘릴 자리가
   그만큼이라, 맞추려다 낱말 사이가 벌어져 들쭉날쭉한 것보다 나빠진다.
   720px은 .prose가 제 폭(42rem)을 다 쓰기 시작하는 지점이다. */
@media (min-width: 720px) {
  .prose p,
  .prose li { text-align: justify; }
}
.prose h2 { margin-top: 2.25rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.prose th { background: var(--soft); }

/* 원고에서 옮겨온 표는 열이 많다. 좁은 화면에서 본문을 밀어내지 않도록
   표만 따로 가로로 넘긴다. */
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
.prose th, .prose td { white-space: normal; min-width: 7rem; }

.prose h3 { margin-top: 1.75rem; font-size: 1rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote {
  margin: 1.5rem 0;
  padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--accent-ink);
  color: var(--mute);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* 수식과 짧은 코드. 원고의 수식은 한 줄로 풀어 여기에 넣는다. */
.prose pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .9rem 1.1rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .35em;
}

/* 그림. 캡션은 마크다운의 alt가 아니라 관리 화면의 설명이 맡는다. */
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ── 목차 ─────────────────────────────────────────────────────── */

.toc {
  margin: 2rem 0 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
}
.toc summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
/* 접힘 표시는 직접 그린다. 브라우저 기본 삼각형은 위치가 제각각이다. */
.toc summary::before {
  content: "▾";
  display: inline-block;
  width: 1rem;
  color: var(--accent-ink);
  transition: transform .15s;
}
.toc:not([open]) summary::before { transform: rotate(-90deg); }
.toc summary .n {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--mute);
  font-weight: 400;
}
.toc ol {
  margin: .9rem 0 0;
  padding-left: 1.4rem;
  columns: 1;
  column-gap: 2rem;
}
.toc li { margin-bottom: .35rem; break-inside: avoid; }
.toc a { color: var(--mute); }
.toc a:hover { color: var(--accent-ink); }
/* 항목이 많으면 두 줄로 세운다. 열여섯 개가 세로로 서면 그것만으로 한 화면이다. */
@media (min-width: 720px) {
  .toc ol { columns: 2; }
}
/* 좁은 화면은 두 줄로 세울 수 없으니 높이를 묶는다. 그대로 두면 목차가
   본문을 한 화면 아래로 밀어낸다. */
@media (max-width: 719px) {
  .toc ol { max-height: 40vh; overflow-y: auto; }
}

/* 소제목으로 건너뛴 자리가 헤더에 가리지 않게 여유를 둔다. */
.prose h2[id], .prose h3[id] { scroll-margin-top: 6rem; }

/* 구조 블록 안은 한 칸이 300px 남짓이라 양쪽 정렬을 켜면 낱말 사이가
   벌어진다. 좁은 화면에서 끄는 것과 같은 이유다. */
.prose .cards p, .prose .cards li,
.prose .vs p, .prose .vs li,
.prose .steps p, .prose .steps li { text-align: left; }

/* ── 구조 블록 ─────────────────────────────────────────────────── */

/* 카드. 찾아보는 글에서 항목 열여섯 개가 세로로 서는 것을 막는다. */
.prose .cards {
  display: grid;
  gap: .9rem;
  margin: 1.75rem 0 2rem;
}
@media (min-width: 720px) {
  .prose .cards { grid-template-columns: 1fr 1fr; }
}
/* 넓은 화면에서는 본문 폭(42rem) 밖으로 나가 세 열로 선다. .prose가 .wrap
   안에서 왼쪽에 붙어 있으므로 오른쪽 빈 자리로 넓히면 된다. 읽는 글의 한 줄
   길이는 그대로 두고, 찾아보는 격자만 넓힌다. */
@media (min-width: 60rem) {
  .prose .cards {
    width: calc(var(--max) - 3rem);
    max-width: calc(100vw - 3rem);
    grid-template-columns: repeat(3, 1fr);
  }
}
.prose .cards > .item {
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prose .cards > .item > :first-child { margin-top: 0; }
.prose .cards > .item > :last-child { margin-bottom: 0; }
.prose .cards h2 {
  margin: 0 0 .15rem;
  font-size: 1.02rem;
  line-height: 1.4;
}
.prose .cards em { font-style: normal; font-size: .8rem; color: var(--faint); }
.prose .cards p { margin: 0 0 .6rem; font-size: .92rem; }
.prose .cards ul { margin: .6rem 0; font-size: .92rem; }
.prose .cards li { margin-bottom: .25rem; }
.prose .cards blockquote {
  margin: .5rem 0 .75rem;
  padding-left: .8rem;
  border-left-width: 2px;
  font-size: .92rem;
}
.prose .cards blockquote p { margin: 0; }

/* 좌우 대비. A와 B를 맞대어 놓는 자리. */
.prose .vs {
  display: grid;
  gap: .9rem;
  margin: 1.25rem 0 1.5rem;
}
@media (min-width: 720px) {
  .prose .vs { grid-template-columns: 1fr 1fr; }
}
.prose .vs > .item {
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent-ink);
}
.prose .vs > .item:last-child { border-top-color: var(--line-strong); }
.prose .vs h3 {
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--accent-ink);
}
.prose .vs > .item:last-child h3 { color: var(--mute); }
.prose .vs p { margin: 0 0 .5rem; font-size: .92rem; }
.prose .vs > .item > :last-child { margin-bottom: 0; }

/* 단계. 연차나 진입 경로처럼 순서가 있는 것. */
.prose .steps {
  counter-reset: step;
  margin: 1.5rem 0 2rem;
  border-left: 2px solid var(--line);
  padding-left: 1.5rem;
}
.prose .steps > .item {
  position: relative;
  margin-bottom: 1.5rem;
  counter-increment: step;
}
.prose .steps > .item:last-child { margin-bottom: 0; }
.prose .steps > .item::before {
  content: counter(step);
  position: absolute;
  left: -2.4rem;
  top: -.1rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--accent-ink);
  color: #fff;
  font-family: var(--mono);
  font-size: .78rem;
  display: grid;
  place-items: center;
}
.prose .steps h3 { margin: 0 0 .35rem; font-size: .98rem; }
.prose .steps p { margin: 0 0 .4rem; font-size: .93rem; }
.prose .steps > .item > :last-child { margin-bottom: 0; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 안내 상자 ────────────────────────────────────────────────── */

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  font-size: .89rem;
  color: var(--mute);
}
.notice strong { color: var(--ink); }

.empty { color: var(--faint); padding: 2.5rem 0; text-align: center; font-size: .9rem; }

/* ── 광고 지면 (Phase 3에서 채워진다) ─────────────────────────── */

.ad-slot:empty { display: none; }

/* ── 푸터 ─────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--soft);
  padding: 2rem 0;
  font-size: .83rem;
  color: var(--mute);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.site-footer .links { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
@media (max-width: 600px) {
  .site-footer .links { margin-left: 0; width: 100%; }
}
.site-footer .linkbtn {
  font: inherit; font-size: inherit; padding: 0; border: 0; background: none;
  color: var(--accent-ink); cursor: pointer;
}
.site-footer .linkbtn:hover { text-decoration: underline; }

/* ── 접근성 ───────────────────────────────────────────────────── */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: .5rem; z-index: 100;
  background: var(--paper); padding: .5rem 1rem;
  border: 2px solid var(--accent-ink); border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   한 화면에 하나씩 (스크롤 스냅)

   홈과 마케팅 툴처럼 "보여주는" 페이지에만 건다.
   강의자료 목록이나 글 본문에는 걸지 않는다. 항목이 열 개 넘는 목록을
   한 화면에 하나씩 보여주면 원하는 자료를 찾는 데 스크롤을 열 번 해야 한다.
   ═══════════════════════════════════════════════════════════════ */

:root { --header-h: 62px; }

html.snap {
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--header-h);
}

/* 화면이 낮으면(가로로 눕힌 휴대폰, 작은 창) 스냅을 끈다.
   내용이 화면보다 커지는데 스냅이 걸리면 아래를 못 읽는다. */
@media (max-height: 620px) {
  html.snap { scroll-snap-type: none; }
}

.screen {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));   /* 주소창이 접히는 휴대폰 대응 */
  scroll-snap-align: start;
  scroll-snap-stop: always;                     /* 한 번에 두 칸 건너뛰지 않게 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
  position: relative;
}
@media (max-height: 620px) {
  .screen { min-height: 0; padding: 2.5rem 0; }
}

/* 첫 화면은 검정 띠가 화면을 다 채운다 */
.screen.is-dark {
  background: var(--deep);
  color: var(--on-deep);
  overflow: hidden;
  padding: 0;
}
.screen.is-dark .wrap { position: relative; z-index: 1; }

/* 스냅 페이지에서는 헤더 높이를 고정한다.
   높이가 변하면 스냅 지점이 흔들려 화면이 튄다. */
html.snap .site-header.is-scrolled .wrap { min-height: var(--header-h); }
html.snap .site-header.is-scrolled .brand small { opacity: 1; max-height: 1.2rem; }

.screen-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--faint);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.screen-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.screen.is-dark .screen-label { color: var(--on-deep-mute); }
.screen.is-dark .screen-label::after { background: rgba(255,255,255,.14); }

.screen h2.screen-title {
  font-family: var(--kr-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -.035em;
  margin: 0 0 .6rem;
}
.screen .screen-desc { color: var(--mute); margin: 0 0 2rem; max-width: 46ch; }
.screen.is-dark .screen-desc { color: #a5a2ad; }

/* ── 스크롤 안내 ──────────────────────────────────────────────── */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--on-deep-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.scroll-cue span { display: block; width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent); }

/* ── 오른쪽 위치 표시 ─────────────────────────────────────────── */

.screen-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
}
html:not(.js) .screen-nav { display: none; }

.screen-nav a {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--mute);
  justify-content: flex-end;
  /* 막대만 두면 손가락으로 누를 수 없어 여백으로 누를 영역을 넓힌다.
     음수 여백으로 상쇄하면 항목끼리 겹쳐서 엉뚱한 곳이 눌리므로,
     간격은 gap이 아니라 이 padding이 만든다. */
  padding: 8px 4px;
}
.screen-nav a i {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: width .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
}
.screen-nav a:hover { color: var(--accent-ink); text-decoration: none; }
.screen-nav a:hover i { background: var(--faint); }
.screen-nav a[aria-current="true"] { color: var(--accent-ink); }
.screen-nav a[aria-current="true"] i { width: 34px; background: var(--accent); }

/* 검정 화면 위에 있을 때는 밝게 */
.screen-nav.on-dark a { color: rgba(255,255,255,.55); }
.screen-nav.on-dark a i { background: rgba(255,255,255,.32); }
.screen-nav.on-dark a:hover i { background: rgba(255,255,255,.6); }
.screen-nav.on-dark a[aria-current="true"] { color: #fff; }
.screen-nav.on-dark a[aria-current="true"] i { background: var(--accent); }

@media (max-width: 860px) {
  /* 좁은 화면에서는 글자를 빼고 막대만 남긴다.
     대신 두껍고 길게 만들어 눈에 띄게 하고, 누를 수 있을 만큼 여백을 준다. */
  .screen-nav {
    right: max(.75rem, env(safe-area-inset-right, 0px));
    gap: 0;
  }
  .screen-nav a em { display: none; }
  /* 손가락으로 누를 수 있는 크기를 확보한다. 세로 16px씩 두면 한 칸이 36px이다. */
  .screen-nav a { padding: 16px 10px; }
  .screen-nav a i { width: 20px; height: 4px; border-radius: 3px; }
  .screen-nav a[aria-current="true"] i { width: 34px; }
}
@media (max-height: 620px) { .screen-nav { display: none; } }

/* ── 스냅 페이지의 푸터 ───────────────────────────────────────── */

html.snap .site-footer { scroll-snap-align: end; }

.messages { padding-top: 1.25rem; }
.messages .notice + .notice { margin-top: .6rem; }

/* ── 배경 테두리 글자 ─────────────────────────────────────────
   화면마다 거대한 낱말을 배경에 깔되 속을 비우고 테두리만 남긴다.
   장식이므로 스크린리더에서 감추고(aria-hidden) 선택·클릭도 막는다.

   낱말은 매체 계획 용어를 쓴다. 아무 영어 단어나 넣으면 장식으로 끝나지만,
   REACH·FREQUENCY 같은 말은 이 사이트가 무엇을 다루는지 배경에서 한 번 더
   말해준다. */

.bg-word {
  position: absolute;
  z-index: 0;
  font-family: var(--kr-display);
  font-weight: 400;
  font-size: clamp(5rem, 20vw, 16rem);
  line-height: .9;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(23, 23, 26, .14);
  pointer-events: none;
  user-select: none;
}
.screen.is-dark .bg-word { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); }

/* 화면 밖으로 걸쳐야 배경처럼 보인다. 안쪽에 얌전히 두면 제목처럼 읽힌다. */
/* 두 줄로 쓸 때. 높이가 두 배가 되므로 크기를 줄여 화면을 덮지 않게 한다. */
.bg-word.two {
  white-space: normal;
  line-height: .86;
  font-size: clamp(3.4rem, 13vw, 10.5rem);
}

.bg-word.tl { top: 4%;  left: -4%; }
.bg-word.tr { top: 6%;  right: -5%; }
.bg-word.bl { bottom: -3%; left: -5%; }
.bg-word.br { bottom: -4%; right: -4%; }

/* 글자가 밖으로 나가므로 잘라내야 가로 스크롤이 생기지 않는다 */
.screen { overflow: hidden; }

@media (max-width: 720px) {
  /* 좁은 화면에서는 글자가 폭을 다 쓰므로 더 흐리게 둔다 */
  /* 좁은 화면에서는 낱말을 줄이되 진하기는 유지한다. 흐리게까지 하면 흔적만 남는다. */
  .bg-word { font-size: clamp(4rem, 26vw, 8rem); -webkit-text-stroke-width: 1.2px; }
}

/* ── 검정 화면의 은은한 빛 ────────────────────────────────────
   단색 검정은 평평해 보인다. 강조색을 아주 옅게 깔아 깊이를 준다. */

.screen.is-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 82% 22%, rgba(232, 36, 95, .10), transparent 62%),
    radial-gradient(700px 480px at 8% 88%, rgba(232, 36, 95, .05), transparent 60%);
}

/* ── 헤더: 아래 내용이 비쳐 보인다 ───────────────────────────
   한 화면씩 넘기는 구조에서는 내용이 헤더 밑으로 지나간다.
   반투명하게 두면 그 움직임이 보여 화면이 이어져 있다는 느낌이 든다.
   지원하지 않는 브라우저에는 위에서 지정한 불투명 검정이 그대로 남는다. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(11, 11, 13, .72);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}

/* ── 로고 ─────────────────────────────────────────────────────
   i의 점과 도메인의 가운뎃점을 핑크로 둔다. 그 점들은 히어로 곡선의
   끝점 — 가장 최근의 데이터 한 개 — 와 같은 것이다.

   i의 점만 따로 칠할 방법이 없으므로 점 없는 i(ı)를 쓰고 위에 점을 얹는다.
   위치는 글꼴 지표에 맞춘 값이다. 글꼴을 바꾸면 다시 맞춰야 한다. */

.wordmark { white-space: nowrap; }

.wordmark .i {
  position: relative;
  display: inline-block;
  line-height: 1;          /* 상자 높이를 1em으로 고정해야 점 위치를 계산할 수 있다 */
}
.wordmark .i::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Pretendard Bold의 진짜 i 점을 픽셀로 재서 맞춘 값이다.
     점 지름 .155em, 점 윗변이 베이스라인 위 .745em, 상자 안 베이스라인은
     위에서 .855em → top = .855 - .745 = .11em.
     작은 글자에서 점이 사라지지 않도록 최소 2px를 보장한다. */
  top: .11em;
  width: .155em;
  height: .155em;
  min-width: 2px;
  min-height: 2px;
  margin-left: -.0775em;
  border-radius: 50%;
  background: var(--accent);
}

.wordmark .sep {
  color: var(--accent);
  /* 점을 키우면 좌우 여백까지 함께 커져 띄어 보인다. 음수 여백으로 당긴다. */
  font-size: 1.3em;
  line-height: 0;
  vertical-align: -.03em;
  margin: 0 -.08em;
}

/* 흰 바탕(푸터 등)에서는 대비를 위해 진한 쪽을 쓴다.
   둘을 한 줄로 묶지 않는다 — i의 점은 배경으로 그린 도형이고
   가운뎃점은 글자다. 글자에 background를 주면 점 뒤로 분홍 사각형이 깔린다. */
.site-footer .wordmark .i::after { background: var(--accent-ink); }
.site-footer .wordmark .sep { color: var(--accent-ink); }

/* ── 개인정보 처리방침 ────────────────────────────────────────
   읽는 글이라 본문 폭을 좁게 두고, 표와 정의 목록만 따로 손본다. */

.policy h2 {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
}
.policy h3 { margin-top: 1.75rem; font-size: .98rem; }
.policy ul { margin: 0 0 1.15rem; }
.policy li { margin-bottom: .5rem; }
.policy code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05rem .35rem;
}
.policy .card h3 { margin: .55rem 0 .75rem; }

/* 목적·항목·보관을 나란히 놓는 정의 목록 */
.kv {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: .35rem 1rem;
  margin: 0;
  font-size: .89rem;
}
.kv dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--faint);
  padding-top: .25rem;
}
.kv dd { margin: 0; color: var(--mute); }

/* ── 가입 폼 ──────────────────────────────────────────────────
   동의 항목은 눌러야 할 것이 무엇인지 한눈에 보여야 한다.
   체크박스를 글 속에 묻어두면 무엇에 동의했는지 모른 채 지나간다. */

.form-wide { max-width: 34rem; }

.form-wide .section-head { margin-top: 2.75rem; }
.form-wide .section-head:first-of-type { margin-top: 1.5rem; }

/* 여러 개를 고르는 묶음 (수강 과목) */
.checkset ul { list-style: none; margin: 0; padding: 0; }
.checkset li + li { margin-top: .5rem; }
.checkset label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  cursor: pointer;
}
.checkset input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-ink); flex: none; }

/* 동의 한 덩어리 */
.consent {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.15rem;
  margin-bottom: .85rem;
  background: var(--paper);
}
.consent.has-error { border-color: var(--danger); background: #fef2f2; }

.consent-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0 0 .8rem;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}
.consent-head input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--accent-ink);
  flex: none;
}
.consent-head strong { font-weight: 700; margin-left: .4rem; }

.consent .kv { margin-left: 1.85rem; }
.consent-note {
  margin: .8rem 0 0 1.85rem;
  font-size: .84rem;
  color: var(--mute);
}
.consent .errorlist { margin-left: 1.85rem; }

@media (max-width: 600px) {
  .consent { padding: 1rem 1rem 1.05rem; }
  .consent .kv, .consent-note, .consent .errorlist { margin-left: 0; }
  .kv { grid-template-columns: 3rem 1fr; }
}

/* 폼이 실패한 이유를 맨 위에 모아 보여준다. 칸 아래에만 적으면
   화면이 길 때 스크롤을 내려야 알 수 있고, 조건문 안에 가려지면 아예 안 보인다. */
.error-summary {
  border-left-color: var(--danger);
  background: #fef2f2;
  color: var(--ink);
}
.error-summary ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.error-summary li { color: var(--danger); font-size: .88rem; }

/* 학생 / 실무자 고르기 */
.roleset { display: grid; gap: .6rem; margin-bottom: .5rem; }
@media (min-width: 640px) { .roleset { grid-template-columns: 1fr 1fr; } }

.role-option {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.role-option:hover { border-color: var(--line-strong); background: var(--soft); }
.role-option:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-wash); }
.role-option input[type="radio"] {
  width: 1.1rem; height: 1.1rem; margin-top: .1rem;
  accent-color: var(--accent-ink); flex: none;
}
.role-option strong { display: block; font-weight: 700; font-size: .96rem; }
.role-option em { display: block; font-style: normal; font-size: .8rem; color: var(--mute); margin-top: .15rem; }

/* ── 주차 묶음 (과목 화면) ────────────────────────────────────── */

.week-block { margin-top: 2.5rem; }
.week-head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--ink);
}
.week-head .no {
  font-family: var(--lt-serif);
  font-size: 2.3rem;
  line-height: .85;
  color: var(--accent-ink);
  flex: none;
}
.week-head h2 {
  font-family: var(--kr-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 .1rem;
  letter-spacing: -.03em;
}
.week-head h2 a { color: inherit; }
.week-head h2 a:hover { color: var(--accent-ink); text-decoration: none; }
.week-head .meta { font-size: .82rem; color: var(--mute); }

/* 내려받기 링크는 목록 오른쪽 끝에 붙는다 */
.list .row .dl { color: var(--accent-ink); font-weight: 500; }
.list .row .dl:hover { text-decoration: underline; }

/* ── 내 강의실 ────────────────────────────────────────────────── */

.studio-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.studio-head h1 { margin: 0; }
@media (max-width: 600px) {
  .studio-head { align-items: stretch; }
  .studio-head .btn { width: 100%; text-align: center; }
}

/* 날짜·시각 입력칸도 다른 칸과 같은 모양으로 */
.form input[type="datetime-local"],
.form input[type="file"] {
  width: 100%;
  padding: .58rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
  background: var(--paper);
  color: var(--ink);
}
.form input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent-ink); }

/* ── 상호작용 (좋아요 · 공유 · 댓글) ─────────────────────────── */
/* 어느 콘텐츠 아래에나 같은 모양으로 붙는다. */

.talk { margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }

.talk-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.talk-bar form { margin: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .38rem .8rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.chip.on { border-color: var(--accent-ink); color: #fff; background: var(--accent-ink); }
.chip.flat { cursor: default; color: var(--mute); }
.chip.flat:hover { border-color: var(--line); color: var(--mute); }

.talk-head { font-size: 1.05rem; margin: 2.25rem 0 .75rem; }

.talk-list { list-style: none; padding: 0; margin: 0; }
.talk-list > li { border-top: 1px solid var(--line); padding: 1.1rem 0; }

.talk-item .who {
  margin: 0 0 .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}
.talk-item .when { margin-left: .6rem; font-weight: 400; color: var(--mute); }
.talk-item .what { margin: 0; font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }

.talk-acts { display: flex; gap: .9rem; margin-top: .5rem; align-items: center; }
.talk-acts form { margin: 0; }
.talk-acts .linkbtn { font-size: .8rem; color: var(--mute); }
.talk-acts .linkbtn:hover { color: var(--accent-ink); }
.talk-acts .linkbtn.danger:hover { color: var(--danger); }

.talk-replies {
  list-style: none;
  margin: .9rem 0 0 0;
  padding: 0 0 0 1.1rem;
  border-left: 2px solid var(--line);
}
.talk-replies > li { padding: .6rem 0; }

.talk-write { margin-top: 1.75rem; }
.talk-write textarea { width: 100%; box-sizing: border-box; }
.talk-write .replying {
  margin: 0 0 .5rem;
  font-size: .84rem;
  color: var(--accent-ink);
}
.talk-write .replying span { font-weight: 600; }
.talk-send { margin-top: .75rem; }

/* ── 잠근 글의 앞부분 ────────────────────────────────────────── */
/* 뒷부분은 아예 보내지 않는다. 여기서는 끝을 흐리게 마무리만 한다. */

.prose.teaser { position: relative; }
.prose.teaser::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7rem;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.paywall {
  margin-top: -1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-ink);
  background: var(--accent-wash);
  padding: 1.75rem 1.5rem;
  max-width: 42rem;
}
.paywall .kicker { margin: 0 0 .4rem; }
.paywall h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.paywall p { margin: 0 0 .5rem; font-size: .92rem; color: var(--mute); }
.paywall .acts { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0 0; }

/* ── 알림 ────────────────────────────────────────────────────── */

.alerts .dot {
  flex: 0 0 auto;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--accent-ink);
}
.alert-body {
  margin: -.5rem .25rem .85rem;
  color: var(--mute);
  font-size: .86rem;
}

/* 머리글의 종. 안 읽은 것이 있으면 분홍 점이 붙는다. */
.bell { position: relative; }
.bell .count {
  position: absolute;
  top: -.35rem;
  right: -.6rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .2rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent-ink);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── 갈림길 카드 (강의실 홈) ─────────────────────────────────── */
/* 두 갈래를 나란히 놓아 어느 쪽으로 갈지 한눈에 고르게 한다. */

.gateway {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.gate {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.3rem;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .18s ease, transform .18s ease;
}
.gate:hover {
  text-decoration: none;
  border-color: var(--accent-ink);
  transform: translateY(-2px);
}
.gate:hover .arrow { transform: translateX(4px); }

.gate-no {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--faint);
}
.gate h2 {
  margin: .5rem 0 .5rem;
  font-size: 1.35rem;
}
.gate h2 .arrow {
  color: var(--accent-ink);
  display: inline-block;
  transition: transform .18s ease;
}
.gate p { margin: 0 0 1rem; font-size: .9rem; color: var(--mute); }
.gate-meta {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent-ink);
}

/* 잠긴 갈림길. 누를 수 없으므로 뜨지도, 색이 바뀌지도 않는다. */
.gate.is-locked {
  display: block;
  color: var(--mute);
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.gate.is-locked h2 { color: var(--mute); }
.gate.is-locked .lock { font-size: .9rem; }
.gate.is-locked .gate-meta { color: var(--faint); }

/* ── 되돌릴 수 없는 화면 ─────────────────────────────────────── */
/* 지우기처럼 되돌릴 수 없는 자리에만 쓴다. 흔해지면 경고로 안 읽힌다. */

.danger-box {
  margin-top: 1.75rem;
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  background: #fef2f2;
}
.danger-box .kicker { color: var(--danger); margin: 0 0 .5rem; }
.danger-box > p { margin: 0 0 .9rem; font-size: .95rem; }

.loss { list-style: none; margin: 0; padding: 0; }
.loss li { padding: .35rem 0; font-size: .93rem; border-top: 1px solid rgba(185, 28, 28, .18); }
.loss li:first-child { border-top: 0; }
.loss b { font-family: var(--mono); font-size: 1.05rem; color: var(--danger); margin-right: .35rem; }
.loss span { color: var(--mute); font-size: .86rem; }

.btn.danger { background: var(--danger); border-color: var(--danger); }

/* 글 아래의 고치기·지우기. 본문과 댓글 사이에 놓인다. */
.post-acts {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0 0;
  max-width: 42rem;
}
.post-acts .linkbtn.danger { font-size: .85rem; color: var(--mute); }
.post-acts .linkbtn.danger:hover { color: var(--danger); }

/* ── 마케팅 툴 ───────────────────────────────────────────────── */
/* 카드로 한눈에 보인다. 툴은 읽는 것이 아니라 골라 쓰는 것이다. */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}

.tool-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.6rem 1.5rem 1.35rem;
  background: var(--paper);
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
a.tool-card:hover {
  text-decoration: none;
  border-color: var(--accent-ink);
  transform: translateY(-2px);
}
a.tool-card:hover .arrow { transform: translateX(4px); }
.tool-card.is-idle { border-style: dashed; color: var(--mute); }

/* 카드 뒤에 깔리는 큰 영문. 히어로의 배경 글자와 같은 성격이다. */
.tool-word {
  position: absolute;
  top: -.45rem;
  right: .5rem;
  font-family: var(--lt-serif);
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
  user-select: none;
}

.tool-kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--faint);
  margin: 0;
}
.tool-card h2 { margin: .45rem 0 .6rem; font-size: 1.3rem; }
.tool-card h2 .arrow { color: var(--accent-ink); display: inline-block; transition: transform .18s ease; }
.tool-summary { margin: 0 0 1.1rem; font-size: .9rem; color: var(--mute); }
.tool-state { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }

/* ── UTM 빌더 ────────────────────────────────────────────────── */

.utm { margin-top: 2rem; max-width: 42rem; }

.utm-form label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin: 1.35rem 0 .3rem;
}
.utm-form label:first-of-type { margin-top: 0; }
.utm-form .req {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent-ink);
  margin-left: .3rem;
}
.utm-form input[type="text"],
.utm-form input[type="url"] {
  width: 100%;
  box-sizing: border-box;
  padding: .58rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
  background: var(--paper);
  color: var(--ink);
}
.utm-form input:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.utm-form .helptext { margin: .3rem 0 0; font-size: .8rem; color: var(--mute); }

.utm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .utm-row { grid-template-columns: 1fr; } }

.utm-error { margin: .35rem 0 0; font-size: .82rem; color: var(--danger); }

/* 결과. 이 화면에서 사람이 실제로 가져가는 것이라 가장 눈에 띄어야 한다. */
.utm-out {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-ink);
  border-radius: 8px;
  background: var(--accent-wash);
  padding: 1.25rem 1.35rem 1.35rem;
}
.utm-out-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--accent-ink);
  margin: 0 0 .6rem;
}
.utm-result {
  display: block;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--mute);
  word-break: break-all;
  min-height: 2.6em;
}
.utm-result.is-ready { color: var(--ink); }

.utm-acts { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.1rem; }
.utm-acts .btn:disabled { opacity: .4; cursor: not-allowed; }
.utm-acts .btn:disabled:hover { filter: none; }
.utm-acts .linkbtn {
  font: inherit; font-size: .85rem; padding: 0; border: 0; background: none;
  color: var(--mute); cursor: pointer;
}
.utm-acts .linkbtn:hover { color: var(--accent-ink); text-decoration: underline; }

.utm-fixed { margin: .9rem 0 0; font-size: .82rem; color: var(--accent-ink); }

/* ── 인사이트 갈래와 시리즈 ──────────────────────────────────── */

.cat-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
}
.cat-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .42rem 1rem;
  transition: border-color .12s, background .12s, color .12s;
}
.cat-tabs a:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
  text-decoration: none;
}
.cat-tabs a.on {
  border-color: var(--accent-ink);
  background: var(--accent-ink);
  color: #fff;
}

/* 갈래마다 몇 편인지. 눌러보기 전에 알 수 있어야 단추가 단추다. */
.cat-tabs .n {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--mute);
}
.cat-tabs a:hover .n { color: var(--accent-ink); }
.cat-tabs a.on .n { color: rgba(255, 255, 255, .75); }

/* ── 페이지 넘김 ─────────────────────────────────────────────── */

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 1rem;
  font-size: .88rem;
}
.pager a,
.pager span {
  min-width: 2.2rem;
  padding: .42rem .7rem;
  border-radius: 8px;
  text-align: center;
}
.pager a { color: var(--mute); }
.pager a:hover { background: var(--soft); color: var(--accent-ink); text-decoration: none; }
.pager .on {
  background: var(--accent-ink);
  color: #fff;
  font-family: var(--mono);
}
/* 갈 곳 없는 화살표. 지우면 눌렀던 자리가 움직여 손이 헛나간다. */
.pager .off { color: var(--line-strong); }

/* 시리즈 회차. 제목 앞에 붙되 제목을 밀어내지 않도록 작게 둔다. */
.series {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent-ink);
}
.series-line {
  margin: .5rem 0 -.25rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--accent-ink);
}

/* ── 인사이트 검색과 태그 ────────────────────────────────────── */

.ins-search { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1.75rem 0 1.25rem; }
.ins-search input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  padding: .55rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: .92rem;
  background: var(--paper);
  color: var(--ink);
}
.ins-search input[type="search"]:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.ins-search .linkbtn {
  font: inherit; font-size: .85rem; padding: 0; border: 0; background: none;
  color: var(--mute);
}
.ins-search .linkbtn:hover { color: var(--accent-ink); }

.ins-result { margin: 0 0 1.25rem; font-size: .88rem; color: var(--mute); }
.ins-summary { margin: -.5rem .25rem .5rem; color: var(--mute); font-size: .88rem; }

.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 .25rem 1rem; }
.tag-row a {
  font-size: .76rem;
  color: var(--mute);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .18rem .6rem;
}
.tag-row a:hover { border-color: var(--accent-ink); color: var(--accent-ink); text-decoration: none; }

/* ── 도달 예측 시뮬레이터 ─────────────────────────────────────── */

.sim-caveat { margin: 1.75rem 0 2.25rem; }
.sim-caveat em { font-style: normal; font-weight: 600; }

.sim { margin: 0; }
.sim-head,
.sim-row {
  display: grid;
  grid-template-columns: 1fr 8rem 8rem;
  gap: .75rem;
  align-items: center;
}
.sim-head {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: .8rem;
  color: var(--mute);
}
.sim-head span:not(:first-child) { text-align: right; }
.sim-row { padding: .9rem 0; border-bottom: 1px solid var(--line); }
.sim-row label { font-weight: 600; font-size: .96rem; }
.sim-name .helptext { margin: .2rem 0 0; }
.sim-row input {
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-family: var(--mono);
  font-size: .9rem;
  text-align: right;
  background: var(--paper);
  color: var(--ink);
}
.sim-row input:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.sim .actions { margin-top: 1.5rem; }

@media (max-width: 600px) {
  .sim-head { display: none; }
  .sim-row { grid-template-columns: 1fr 1fr; row-gap: .5rem; }
  .sim-name { grid-column: 1 / -1; }
}

/* 요약 숫자 넷. 화면을 열면 이것부터 눈에 들어와야 한다. */
.sim-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .9rem;
  margin: 1.5rem 0;
}
.sim-card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.sim-card .k { display: block; font-size: .8rem; color: var(--mute); }
.sim-card b {
  display: block;
  margin: .35rem 0 .1rem;
  font-family: var(--mono);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--accent-ink);
}
.sim-card b i { font-style: normal; font-size: .95rem; margin-left: .1rem; }
.sim-card .sub { font-size: .78rem; color: var(--faint); }

.sim-note {
  padding: 1rem 1.25rem;
  background: var(--accent-wash);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.75;
}
.sim-note b { font-family: var(--mono); color: var(--accent-ink); }

/* 리치커브. 점 열세 개짜리 꺾은선 하나라 SVG를 직접 그린다. */
.sim-chart svg { width: 100%; height: auto; display: block; }
.sim-chart .grid { stroke: var(--line); stroke-width: 1; }
.sim-chart .axis { fill: var(--faint); font-size: 10px; font-family: var(--mono); }
.sim-chart .fill { fill: var(--accent-wash); }
.sim-chart .line { fill: none; stroke: var(--accent-ink); stroke-width: 2.5; stroke-linejoin: round; }
.sim-chart .dot { fill: var(--paper); stroke: var(--accent-ink); stroke-width: 2; }
.sim-axis {
  margin: .35rem 0 0;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--faint);
  text-align: center;
}

/* 빈도 분포. 1회 이상을 100%로 두고 나머지를 그 비율로 세운다. */
.sim-freq {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: .35rem;
  align-items: end;
  height: 12rem;
}
.sim-freq .bar {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  text-align: center;
}
.sim-freq .v { font-family: var(--mono); font-size: .68rem; color: var(--mute); }
.sim-freq .fill {
  align-self: end;
  background: var(--accent-ink);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.sim-freq .n { margin-top: .35rem; font-family: var(--mono); font-size: .72rem; color: var(--faint); }

@media (max-width: 600px) {
  .sim-freq { height: 9rem; gap: .2rem; }
  .sim-freq .v { font-size: .58rem; }
}

.sim-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sim-table th, .sim-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.sim-table th { background: var(--soft); font-size: .8rem; color: var(--mute); text-align: left; }
.sim-table th:not(:first-child) { text-align: right; }
.sim-table td.num { text-align: right; font-family: var(--mono); font-size: .85rem; }