/* 이모작 뷰어 — Aurora Ledger 위에서만 산다. 토큰 없이 새 값을 쓰지 않는다.
 *
 * 앱 화면이므로 넓게 깔리는 면은 순수한 회색(--bg)이고, 보라(--accent)는
 * «지금 볼 것»에만 — 여기서는 승인률 막대와 로그인 버튼뿐이다. */

* { box-sizing: border-box; }

/* `[hidden]` 은 브라우저 기본 스타일시트의 것이라 저작 스타일시트의 규칙(같은 우선순위라도)에
 * 밀린다 — 아래 `.stateView`·`.loginView` 의 `display: flex` 가 그 예다. 화면 전환이
 * `element.hidden = true/false` 하나로 되게 하려면 이 규칙이 있어야 한다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, p { margin: 0; }

code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  background: var(--surface-sunk);
  padding: 0.0625rem var(--space-6);
  border-radius: var(--radius-sm);
}

.muted { color: var(--text-muted); font-size: var(--fs-14); }

/* ── 머리글 ───────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-16) var(--layout-content-x);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: var(--space-8); font-weight: var(--w-bold); color: var(--accent); }

/* ── 페이지 ───────────────────────────────────── */
.page {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--layout-page-gap) var(--layout-content-x) var(--space-64);
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
}

.sectionTitle { font-size: var(--fs-20); font-weight: var(--w-bold); margin-top: var(--space-8); }

/* ── 카드 (루트 CLAUDE.md: 테두리 없이 얕은 그늘 하나) ── */
.card {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--layout-card-padding);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.cardHead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.cardName { font-size: var(--fs-16); font-weight: var(--w-bold); }

/* ── 상태 화면 (설정 없음 · 로딩 · 오류) ─────────── */
.stateView { display: flex; justify-content: center; padding: var(--space-64) 0; text-align: center; }
.noticeCard { max-width: 32rem; text-align: left; gap: var(--space-12); }
.errorText { color: var(--danger); font-size: var(--fs-14); }

/* ── 로그인 ───────────────────────────────────── */
.loginView { display: flex; justify-content: center; padding: var(--space-48) 0; }
.loginCard { width: 100%; max-width: 24rem; gap: var(--space-16); }
.loginCard h1 { font-size: var(--fs-24); font-weight: var(--w-bold); }

.field { display: flex; flex-direction: column; gap: var(--space-6); font-size: var(--fs-14); font-weight: var(--w-medium); }
.input {
  font: inherit;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}
.input:focus-visible { outline: var(--outline); outline-offset: 1px; }

.primaryBtn, .ghostBtn {
  font: inherit;
  font-weight: var(--w-semibold);
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--curve-enter);
}
.primaryBtn { background: var(--primary); color: var(--on-primary); }
.primaryBtn:hover { opacity: 0.92; }
.primaryBtn:disabled { opacity: 0.6; cursor: not-allowed; }
.ghostBtn { background: transparent; color: var(--text-muted); border: 1px solid var(--hairline); }
.ghostBtn:hover { color: var(--text); border-color: var(--accent); }

/* ── 알약 ─────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--fs-11); font-weight: var(--w-semibold);
  white-space: nowrap;
}
.pillBrand { background: var(--primary-wash); color: var(--accent); }
.pillNeutral { background: var(--surface-sunk); color: var(--text-muted); }
.pillRisk { background: var(--danger-wash); color: var(--danger); }
.pills { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.riskText { color: var(--danger); font-weight: var(--w-semibold); }

/* ── 요약 ─────────────────────────────────────── */
.summaryLine { font-size: var(--fs-14); }

/* ── 목록 ─────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-16);
}
.seriesList { display: flex; flex-direction: column; gap: var(--space-12); }
.seriesCard { gap: var(--space-10); }
.concept { font-size: var(--fs-14); color: var(--text-88); }

/* ── 진행률 막대 ──────────────────────────────── */
.rail {
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.railFill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--grad);
  transition: width var(--dur-base) var(--curve-enter);
}
.railCaption { font-size: var(--fs-12); }

/* ── 반응형 — 좁은 화면이 이 뷰어의 주 무대다 ────── */
@media (max-width: 26em) {
  .header { padding: var(--space-12) var(--space-16); }
  .page { padding: var(--space-16) var(--space-16) var(--space-48); }
  .cardHead { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}