:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1c2024;
  --muted: #6b7480;
  --line: #e2e6ea;
  --accent: #2f6fed;
  --ok: #1a7f4b;
  --bad: #c0392b;
  --warn-bg: #fff6d6;
  --warn-line: #e6c34a;
  --warn-ink: #7a5b00;
  --covered: #d8f0e2;
  --covered-line: #1a7f4b;
  --partial: #fdf0d2;
  --partial-line: #c08a1e;
  --uncovered: #fde3e0;
  --uncovered-line: #c0392b;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 "Pretendard", "Malgun Gothic", -apple-system, system-ui, sans-serif;
  word-break: keep-all;
}

/* ── 상단바 ─────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { font-size: 17px; margin: 0; letter-spacing: -0.02em; }
.tabs { display: flex; gap: 6px; }
.tab {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.stats { margin-left: auto; color: var(--muted); font-size: 13px; }

/* 뒤로/앞으로 */
.navbtn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.navbtn:hover { border-color: var(--accent); color: var(--accent); }
.tabs .tab:nth-of-type(1) { margin-left: 8px; }

/* ── 레이아웃 ───────────────────────────────────────── */
.view { display: grid; gap: 18px; padding: 18px; align-items: start; }
.view.is-hidden { display: none; }
#view-quiz { grid-template-columns: 240px minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
#view-algo { grid-template-columns: 250px minmax(0, 1fr) 330px; }
#view-home { max-width: 900px; margin: 0 auto; }
#view-courses { max-width: 820px; margin: 0 auto; }

@media (max-width: 1100px) {
  #view-quiz, #view-algo { grid-template-columns: minmax(0, 1fr); }
}

aside, .card, .quiz-head, .algo-main > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ── 자료 묶음 선택 (첫 화면) ───────────────────────── */
.courses { display: flex; flex-direction: column; gap: 14px; }
.courses h2 { font-size: 20px; margin: 8px 0 0; letter-spacing: -0.02em; }
.courses > .hint { margin: 0 0 6px; line-height: 1.6; }
.courses code {
  background: var(--line); padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
.course-list { display: flex; flex-direction: column; gap: 12px; }
.course-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 5px;
}
.course-card h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.course-card .cc-meta { margin: 0; font-size: 13px; color: var(--accent); font-weight: 600; }
.course-card .cc-topics { margin: 0; font-size: 12px; color: var(--muted); }
.course-card .cc-prog { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.course-card .cc-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.course-card.is-empty { opacity: 0.6; }
/* 지금 보고 있는 자료 묶음을 상단바에 띄운다. */
.tab-course { font-weight: 700; color: var(--ink); border-color: var(--accent); }
.tab.is-hidden, .navbtn.is-hidden { display: none; }

/* ── 홈 ─────────────────────────────────────────────── */
.home { display: flex; flex-direction: column; gap: 16px; }
.home-summary, .home-progress {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.home h2 { font-size: 15px; margin: 0 0 14px; letter-spacing: -0.01em; }

.stat-row { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat .sv { font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.stat .sv.ok { color: var(--ok); }
.stat .sv.bad { color: var(--bad); }
.stat .sl { font-size: 12px; color: var(--muted); }

.bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  text-align: left;
  padding: 15px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.home-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 2px 10px rgba(47, 111, 237, 0.09); }
.home-card:disabled { opacity: 0.45; cursor: default; }
.home-card .hc-icon { font-size: 15px; color: var(--accent); line-height: 1; }
.home-card .hc-title { font-weight: 700; font-size: 15px; }
.home-card .hc-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.home-card .hc-count { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 5px; }
.home-card.is-primary { border-color: var(--accent); background: #f5f8ff; }
.home-card.is-bad .hc-icon, .home-card.is-bad .hc-count { color: var(--bad); }

.prog-list { display: flex; flex-direction: column; gap: 2px; }
.prog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 56px 44px;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
}
.prog-row:hover:not(:disabled) { background: #f4f6f9; }
.prog-row:disabled { opacity: 0.5; cursor: default; }
.pr-title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bar { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pr-num { font-size: 12px; color: var(--muted); text-align: right; }
.pr-rate { font-size: 12px; color: var(--muted); text-align: right; font-weight: 600; }
.pr-rate.ok { color: var(--ok); }

.home-footer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px; }
.home-footer .hint { flex: 1; min-width: 240px; }

/* 홈에서 고른 문제 모음 배너 */
.set-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: #f5f8ff;
  border: 1px solid #cfdcfb;
  border-radius: var(--radius);
}
.set-banner.is-hidden { display: none; }
.set-banner .set-name { font-weight: 700; font-size: 13.5px; }
.set-banner .set-count { font-size: 12px; color: var(--muted); margin-right: auto; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ── 필터 ───────────────────────────────────────────── */
.filters { padding: 14px; display: flex; flex-direction: column; gap: 11px; position: sticky; top: 74px; }
.filters label { display: block; font-size: 12px; color: var(--muted); }
.filters select {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.filters .check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.filter-actions { display: flex; gap: 6px; }
.hint { color: var(--muted); font-size: 12px; margin: 0; }

.btn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.btn-ghost { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }

/* ── 문제 카드 ──────────────────────────────────────── */
.quiz { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.quiz-head { display: flex; justify-content: space-between; padding: 9px 14px; font-size: 13px; color: var(--muted); }
.card { padding: 18px 20px; }
.quiz-nav { display: flex; justify-content: space-between; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.badge {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fbfcfd;
}
.badge-past { border-color: #b9c9ee; color: #24488f; background: #eef3fd; }
.badge-variant { border-color: #cdb6e8; color: #5b2f8f; background: #f5eefd; }
.badge-unreviewed {
  border-color: var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-weight: 700;
  font-size: 12px;
}

.warn-banner {
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

.stem { white-space: pre-wrap; margin: 0 0 14px; font-size: 15.5px; }
.q-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.q-images figure { margin: 0; max-width: 320px; }
.q-images img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.q-images figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* 변형문제는 캡션 없이 사진만 보여 주므로, 눌러서 확대할 수 있음을 커서로 알린다. */
.q-images figure.is-zoomable { cursor: zoom-in; }

.choices { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.choice {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.choice:hover:not(:disabled) { border-color: var(--accent); }
.choice .num { color: var(--muted); flex: none; }
.choice.is-correct { border-color: var(--covered-line); background: var(--covered); }
.choice.is-wrong { border-color: var(--uncovered-line); background: var(--uncovered); }
.choice:disabled { cursor: default; }
/* 제출 전 "고른 상태". 정답/오답 색(초록·빨강)과 겹치지 않게 강조색을 쓴다. */
.choice.is-selected {
  border-color: var(--accent);
  background: #f5f8ff;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice.is-selected .num { color: var(--accent); font-weight: 700; }

.submit-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.submit-hint { font-size: 12px; color: var(--muted); }

.answer-box { border-top: 1px dashed var(--line); padding-top: 13px; }
.verdict-row { display: flex; align-items: flex-start; gap: 12px; }
.verdict-row .verdict { flex: 1; }
.verdict { font-weight: 700; margin: 0 0 8px; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.explanation { white-space: pre-wrap; font-size: 14px; margin: 0 0 10px; }
.refline { font-size: 12.5px; color: var(--muted); }
.refline a { color: var(--accent); cursor: pointer; text-decoration: none; }
.refline a:hover { text-decoration: underline; }

/* 지문 그림 출처 — 채점 후에만 보인다(출처가 곧 힌트이므로). */
.img-credit { margin: 0 0 4px; }
.img-credit p { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; line-height: 1.6; }
.img-credit .img-cap { color: var(--ink); font-weight: 600; }
.img-credit .fig-label { margin: 12px 0 6px; }
.img-src-link {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.img-src-link:hover { border-color: var(--accent); background: #f2f6ff; }

/* ── 알고리즘 탐색 ──────────────────────────────────── */
.algo-list { padding: 8px; position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow: auto; }
.algo-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.algo-item:hover { background: #f1f4f8; }
.algo-item.is-active { background: #eaf0fd; color: #24488f; }
.algo-item .t { font-size: 13.5px; display: block; }
.algo-item .m { font-size: 11px; color: var(--muted); }
.cov-bar { display: flex; height: 4px; border-radius: 3px; overflow: hidden; margin-top: 5px; background: var(--line); }
.cov-bar i { display: block; height: 100%; }
.cov-bar .c { background: var(--covered-line); }
.cov-bar .p { background: var(--partial-line); }
.cov-bar .u { background: var(--uncovered-line); }

.algo-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#algoHead { padding: 16px 18px; }
#algoHead h2 { margin: 0 0 6px; font-size: 19px; }
#algoHead .meta { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }
#algoHead .overview { white-space: pre-wrap; font-size: 14px; margin: 0; }
.diagram { padding: 14px; overflow-x: auto; }
.diagram svg { max-width: 100%; height: auto; }
.diagram .node.is-branch { cursor: pointer; }
.diagram .node.is-branch rect,
.diagram .node.is-branch polygon { stroke-width: 2px !important; }
.diagram .node.cov-covered rect, .diagram .node.cov-covered polygon { fill: var(--covered) !important; stroke: var(--covered-line) !important; }
.diagram .node.cov-partial rect, .diagram .node.cov-partial polygon { fill: var(--partial) !important; stroke: var(--partial-line) !important; }
.diagram .node.cov-uncovered rect, .diagram .node.cov-uncovered polygon { fill: var(--uncovered) !important; stroke: var(--uncovered-line) !important; }
.diagram .node.is-selected rect, .diagram .node.is-selected polygon { stroke-width: 4px !important; }

.branches { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 9px; }
.branch-card {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  padding: 9px 11px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--ink);
}
.branch-card.cov-covered { border-left-color: var(--covered-line); }
.branch-card.cov-partial { border-left-color: var(--partial-line); }
.branch-card.cov-uncovered { border-left-color: var(--uncovered-line); }
.branch-card.is-selected { outline: 2px solid var(--accent); }
.branch-card .bid { font-weight: 700; font-size: 12px; color: var(--muted); }
.branch-card .bt { display: block; font-size: 13.5px; margin-top: 2px; }
.branch-card .bq { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; }

.branch-detail { padding: 15px; position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow: auto; }
.branch-detail h3 { margin: 0 0 4px; font-size: 15px; }
.branch-detail dl { margin: 12px 0 0; }
.branch-detail dt { font-size: 11.5px; color: var(--muted); margin-top: 9px; }
.branch-detail dd { margin: 2px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.branch-detail .extra { white-space: pre-wrap; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.cov-tag { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; border: 1px solid; }
.cov-tag.covered { background: var(--covered); border-color: var(--covered-line); color: var(--covered-line); }
.cov-tag.partial { background: var(--partial); border-color: var(--partial-line); color: #8a6410; }
.cov-tag.uncovered { background: var(--uncovered); border-color: var(--uncovered-line); color: var(--uncovered-line); }

.qlist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px; }
.qlist button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--ink);
}
.qlist button:hover { border-color: var(--accent); }
.qlist .tag { font-size: 10px; color: var(--muted); }

.empty { color: var(--muted); font-size: 13px; padding: 30px 0; text-align: center; }
table { border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
th, td { border: 1px solid var(--line); padding: 4px 7px; text-align: left; vertical-align: top; }
th { background: #f4f6f9; }

/* ── 원본 그림 (YAM에서 뽑은 순서도·표·사진) ───────────────── */
.figures { padding: 0 14px 14px; }
.fig-label { font-size: 12px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.fig-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.fig-grid .fig { margin: 0; cursor: zoom-in; max-width: 260px; }
.fig-grid .fig img {
  max-width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.fig-grid .fig:hover img { border-color: var(--accent); }
.fig-grid .fig figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* 대표 그림은 순서도를 대신해 읽는 것이므로 크게 보여준다. */
.fig-grid-primary .fig { max-width: 520px; }
.fig-grid-explain .fig { max-width: 340px; margin-top: 4px; }
.fig-grid-branch .fig { max-width: 100%; margin-top: 10px; }
.fig-more { margin-top: 12px; }
.fig-more summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.fig-more .fig-grid { margin-top: 10px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(17, 22, 31, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.lightbox.is-hidden { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 8px; }
.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 110px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.lightbox figcaption { color: #e7ecf5; font-size: 12.5px; text-align: center; }
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 18px;
  border: 0;
  background: transparent;
  color: #e7ecf5;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.diagram-svg { overflow-x: auto; }
/* 대표 원본 그림은 강의록 그대로 읽는 것이 목적이므로 폭을 넉넉히 준다. */
.fig-grid-primary .fig { max-width: 700px; }

/* ── 원문 대조 교정 문항 ─────────────────────────────────── */
.badge-fixed { background: #eaf2ff; border-color: #b6d0ff; color: #24509b; }
/* 증례가 아니라 지식을 바로 묻는 문항. 증례형과 섞여 있어 한눈에 구분되게 한다. */
.badge-kind { background: #eef6f0; border-color: #bfdcc8; color: #2c6b45; }
.fix-note {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-left: 3px solid #b6d0ff;
  background: #f5f9ff;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #45516a;
  line-height: 1.55;
}

/* ── 강의록 대조 메모 ────────────────────────────────────── */
.badge-lowyield { background: #f1eefb; border-color: #d3c8f0; color: #5b4696; }
.q-note {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-left: 3px solid #d3c8f0;
  background: #faf8ff;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #4f4a63;
  line-height: 1.55;
}

/* ── 사진 교체 (웹에서 고화질본으로 갈아 끼우기) ────────────────
   강의록·기출에서 뽑은 사진은 원본 자체가 작다(지문 사진의 30%가 가로 300px 미만).
   PDF 안에 더 큰 데이터가 없어 재추출로는 못 고치므로, 로그인한 사람이 더 나은 사진을
   올려 바꿀 수 있게 했다. 서버 쪽은 functions/, 화면 쪽은 app.js 의 addSwapButton. */
/* 단추 묶음. 그림 오른쪽 위에 얹힌다(교체 · 삭제/되살리기). */
.fig-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.swap-btn {
  padding: 3px 8px;
  font-size: 11px;
  line-height: 1.6;
  color: #fff;
  background: rgba(28, 32, 36, 0.72);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
/* 그림 위에 올리기 전에는 숨겨 둔다 — 문제를 푸는 화면이 단추로 어수선해지면 안 된다.
   이미 교체한 그림은 표시가 남아야 하므로 계속 보인다. */
.has-swap:hover .swap-btn,
.swap-btn:focus-visible,
.swap-btn.is-done { opacity: 1; }
.swap-btn.is-done { background: rgba(26, 127, 75, 0.85); }
.swap-btn:hover { background: var(--accent); }
.swap-btn.fig-del:hover { background: var(--bad); }

/* figure에 절대배치 단추를 얹으려면 기준점이 있어야 한다. */
.has-swap { position: relative; }

/* ── 그림 추가·삭제 (★세션 19) ──────────────────────────────
   삭제는 지우는 것이 아니라 감추는 것이다(functions/api/figures.js).
   그래서 편집 권한이 있는 사람에게는 흐리게 계속 보이고 "되살리기"가 붙는다. */
.fig.is-removed,
.q-images figure.is-removed { opacity: 0.35; filter: grayscale(1); }
.fig.is-removed:hover,
.q-images figure.is-removed:hover { opacity: 0.6; }
.is-removed .swap-btn { opacity: 1; }

.fig-add {
  align-self: flex-start;
  min-width: 132px;
  min-height: 84px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.fig-add:hover { color: var(--accent); border-color: var(--accent); }

/* ── 자료 올리기 (★세션 20) ─────────────────────────────────
   강의록·기출 원본을 웹에서 받아 운영자 PC로 보낸다. 홈 화면 아래쪽에 붙는다. */
.home-upload { margin-top: 28px; }
.home-upload h2 { font-size: 16px; margin: 0 0 10px; }
.up-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.up-card .hint { margin: 0 0 12px; }
.up-grid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
}
.up-grid > label { font-size: 12px; color: var(--muted); padding-top: 7px; }
.up-grid select,
.up-grid input[type="text"],
.up-grid input[type="date"] {
  width: 100%;
  max-width: 420px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.up-grid input[type="text"] + input[type="text"] { margin-top: 6px; }
.up-grid .hint { margin: 4px 0 0; font-size: 11.5px; }
.up-actions { margin-top: 12px; }
.up-bar { height: 4px; background: var(--line); border-radius: 999px; margin-top: 12px; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }

.up-list { list-style: none; padding: 0; margin: 8px 0 0; }
.up-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.up-name { font-weight: 600; }
.up-meta { color: var(--muted); font-size: 11.5px; }
.up-state { font-size: 11.5px; }
.up-state.is-conflict, .up-state.is-failed { color: var(--bad); }
.up-state.is-published { color: var(--ok); font-weight: 600; }

/* 출처 칸은 접어 둔다 — 기본값(원본과 동일)이 맞는 경우가 대부분이라 매번 볼 필요가 없다. */
.swap-more { margin-top: 4px; }
.swap-more summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.swap-more .hint { margin: 6px 0; }

.swap-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(16, 19, 24, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.swap-box {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px 22px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: auto;
}
.swap-box h3 { margin: 0; font-size: 16px; }
.swap-box label { font-size: 12px; color: var(--muted); margin-top: 6px; }
.swap-box input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.swap-now { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.swap-now img { max-width: 140px; max-height: 110px; border: 1px solid var(--line); border-radius: 6px; }
.swap-preview { max-width: 100%; max-height: 240px; border: 1px solid var(--line); border-radius: 6px; }
.swap-msg { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; min-height: 18px; }
.swap-actions { display: flex; gap: 8px; margin-top: 10px; }

/* 헤더의 편집 상태 배지. 열쇠를 넣고 빼는 입구이기도 하다.
   yamedu.co.kr 은 Cloudflare Access가 로그인을 시키지만 pages.dev 에는 Access를 걸 수 없어서,
   아무 주소에서나 통하는 공유 열쇠를 따로 둔다(functions/_lib/access.js 참조). */
.edit-badge {
  margin-left: 10px;
  padding: 4px 11px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.edit-badge:hover { border-color: var(--accent); color: var(--accent); }
.edit-badge.is-on {
  color: var(--ok);
  border-color: var(--covered-line);
  background: var(--covered);
}
.swap-box input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}