/* ========================================
   포근한 기록장 — Design System v2.0
   Warm illustrated baby journal wireframe
   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gaegu:wght@400;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ── Tokens ─────────────────────────────── */

:root {
  /* Palette — OKLCH */
  --peach-50:  oklch(0.97 0.015 50);
  --peach-100: oklch(0.94 0.035 45);
  --peach-200: oklch(0.88 0.065 40);
  --peach-300: oklch(0.82 0.09 38);
  --peach-400: oklch(0.76 0.115 35);
  --peach-500: oklch(0.70 0.135 33);
  --peach-600: oklch(0.60 0.14 30);
  --peach-700: oklch(0.50 0.12 30);

  --sage-50:  oklch(0.96 0.012 158);
  --sage-100: oklch(0.92 0.028 158);
  --sage-200: oklch(0.86 0.045 155);
  --sage-400: oklch(0.72 0.07 155);
  --sage-500: oklch(0.65 0.08 152);

  --sky-50:  oklch(0.96 0.012 235);
  --sky-100: oklch(0.92 0.028 235);
  --sky-200: oklch(0.86 0.045 232);
  --sky-400: oklch(0.72 0.07 230);

  --honey-50:  oklch(0.96 0.025 85);
  --honey-100: oklch(0.92 0.045 82);
  --honey-200: oklch(0.86 0.07 80);
  --honey-400: oklch(0.78 0.11 78);

  /* Warm neutrals — tinted toward hue 55 */
  --warm-25:  oklch(0.99 0.003 55);
  --warm-50:  oklch(0.975 0.005 55);
  --warm-100: oklch(0.96 0.008 52);
  --warm-200: oklch(0.93 0.013 50);
  --warm-300: oklch(0.87 0.018 48);
  --warm-400: oklch(0.72 0.022 45);
  --warm-500: oklch(0.58 0.025 42);
  --warm-600: oklch(0.48 0.025 40);
  --warm-700: oklch(0.38 0.022 38);
  --warm-800: oklch(0.28 0.018 38);
  --warm-900: oklch(0.20 0.012 38);

  /* Semantic */
  --bg:             var(--warm-100);
  --surface:        var(--warm-25);
  --surface-raised: var(--warm-50);
  --text:           var(--warm-900);
  --text-secondary: var(--warm-500);
  --text-tertiary:  var(--warm-400);
  --border:         var(--warm-200);
  --border-strong:  var(--warm-300);
  --accent:         var(--peach-500);
  --accent-soft:    var(--peach-50);

  /* Category semantic colors */
  --cat-feeding-bg:  var(--peach-50);
  --cat-feeding:     var(--peach-500);
  --cat-sleep-bg:    var(--sky-50);
  --cat-sleep:       var(--sky-400);
  --cat-medicine-bg: var(--sage-50);
  --cat-medicine:    var(--sage-500);
  --cat-symptom-bg:  var(--honey-50);
  --cat-symptom:     var(--honey-400);
  --cat-other-bg:    var(--warm-200);
  --cat-other:       var(--warm-500);

  /* Illustration */
  --illust-stroke:   var(--warm-600);
  --illust-fill:     var(--peach-100);
  --illust-ear:      var(--peach-200);
  --illust-nose:     var(--peach-400);
  --illust-eye:      var(--warm-800);
  --illust-blush:    var(--peach-200);

  /* Spacing — 4pt scale */
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* Typography */
  --font-display: "Gowun Dodum", "Pretendard", sans-serif;
  --font-body:    "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  "Gaegu", "Gowun Dodum", cursive;

  --text-xs:  clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
  --text-sm:  clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --text-base: 0.9375rem;
  --text-md:  clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  --text-lg:  clamp(1.25rem, 1.15rem + 0.3vw, 1.5rem);
  --text-xl:  clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px oklch(0.20 0.01 40 / 0.06);
  --shadow-md:  0 4px 16px oklch(0.20 0.01 40 / 0.08);
  --shadow-lg:  0 12px 32px oklch(0.20 0.01 40 / 0.10);
  --shadow-xl:  0 20px 48px oklch(0.20 0.01 40 / 0.14);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  color-scheme: light;
}

/* ── Dark mode ──────────────────────────── */

[data-theme="dark"] {
  --bg:             oklch(0.16 0.010 50);
  --surface:        oklch(0.20 0.013 48);
  --surface-raised: oklch(0.25 0.016 48);
  --text:           oklch(0.93 0.008 50);
  --text-secondary: oklch(0.68 0.018 48);
  --text-tertiary:  oklch(0.50 0.020 45);
  --border:         oklch(0.28 0.016 48);
  --border-strong:  oklch(0.35 0.020 45);
  --accent:         var(--peach-300);
  --accent-soft:    oklch(0.25 0.03 40);

  --cat-feeding-bg:  oklch(0.24 0.025 40);
  --cat-sleep-bg:    oklch(0.24 0.020 235);
  --cat-medicine-bg: oklch(0.24 0.020 155);
  --cat-symptom-bg:  oklch(0.24 0.025 80);
  --cat-other-bg:    oklch(0.24 0.012 50);

  --illust-stroke: oklch(0.70 0.04 45);
  --illust-fill:   oklch(0.30 0.03 45);
  --illust-ear:    oklch(0.35 0.04 40);
  --illust-nose:   oklch(0.55 0.06 35);
  --illust-eye:    oklch(0.90 0.01 50);
  --illust-blush:  oklch(0.40 0.04 30);

  --shadow-sm:  0 1px 4px oklch(0.05 0.005 40 / 0.3);
  --shadow-md:  0 4px 16px oklch(0.05 0.005 40 / 0.4);
  --shadow-lg:  0 12px 32px oklch(0.05 0.005 40 / 0.5);
  --shadow-xl:  0 20px 48px oklch(0.05 0.005 40 / 0.6);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             oklch(0.16 0.010 50);
    --surface:        oklch(0.20 0.013 48);
    --surface-raised: oklch(0.25 0.016 48);
    --text:           oklch(0.93 0.008 50);
    --text-secondary: oklch(0.68 0.018 48);
    --text-tertiary:  oklch(0.50 0.020 45);
    --border:         oklch(0.28 0.016 48);
    --border-strong:  oklch(0.35 0.020 45);
    --accent:         var(--peach-300);
    --accent-soft:    oklch(0.25 0.03 40);

    --cat-feeding-bg:  oklch(0.24 0.025 40);
    --cat-sleep-bg:    oklch(0.24 0.020 235);
    --cat-medicine-bg: oklch(0.24 0.020 155);
    --cat-symptom-bg:  oklch(0.24 0.025 80);
    --cat-other-bg:    oklch(0.24 0.012 50);

    --illust-stroke: oklch(0.70 0.04 45);
    --illust-fill:   oklch(0.30 0.03 45);
    --illust-ear:    oklch(0.35 0.04 40);
    --illust-nose:   oklch(0.55 0.06 35);
    --illust-eye:    oklch(0.90 0.01 50);
    --illust-blush:  oklch(0.40 0.04 30);

    --shadow-sm:  0 1px 4px oklch(0.05 0.005 40 / 0.3);
    --shadow-md:  0 4px 16px oklch(0.05 0.005 40 / 0.4);
    --shadow-lg:  0 12px 32px oklch(0.05 0.005 40 / 0.5);
    --shadow-xl:  0 20px 48px oklch(0.05 0.005 40 / 0.6);

    color-scheme: dark;
  }
}

/* ── Reset ──────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  padding: var(--sp-3xl) var(--sp-lg) var(--sp-4xl);
  transition: background var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ── Theme Toggle ───────────────────────── */

.theme-toggle {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  display: flex;
  gap: var(--sp-xs);
  justify-content: center;
  padding: var(--sp-xs) var(--sp-sm);
  position: fixed;
  right: var(--sp-lg);
  top: var(--sp-lg);
  transition: all var(--duration-fast) var(--ease-out);
  z-index: 1000;
}

.theme-toggle:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { width: 18px; height: 18px; }

[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ── Document Layout ────────────────────── */

.doc-header {
  margin: 0 auto var(--sp-3xl);
  max-width: 860px;
  text-align: center;
}

.doc-header h1 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--sp-sm);
}

.doc-header h1 .version {
  color: var(--accent);
  font-family: var(--font-accent);
  font-size: 0.6em;
  font-weight: 700;
  vertical-align: super;
}

.meta-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: center;
}

.badge {
  background: var(--accent);
  border-radius: var(--r-full);
  color: var(--warm-25);
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--sp-2xs) var(--sp-md);
}

.date-badge {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.back-link {
  color: var(--accent);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: opacity var(--duration-fast);
}

.back-link:hover { opacity: 0.7; }

.desc {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.8;
  margin-top: var(--sp-lg);
  max-width: 65ch;
  margin-inline: auto;
}

/* ── Mascot ─────────────────────────────── */

.mascot {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-xl);
}

.mascot svg {
  filter: drop-shadow(0 4px 12px oklch(0.50 0.08 40 / 0.15));
  transition: transform var(--duration-normal) var(--ease-out);
}

.mascot:hover svg { transform: rotate(-5deg) scale(1.05); }

/* ── Sections ───────────────────────────── */

.section {
  margin: 0 auto var(--sp-4xl);
  max-width: 1400px;
}

.section-head {
  align-items: center;
  display: flex;
  gap: var(--sp-md);
  margin-bottom: var(--sp-2xl);
  padding-bottom: var(--sp-md);
  position: relative;
}

.section-head::after {
  background: var(--border);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

.section-head .section-icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.section-tag {
  background: var(--surface-raised);
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-left: auto;
  padding: var(--sp-2xs) var(--sp-sm);
}

/* ── Content Blocks ─────────────────────── */

.content-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin: 0 auto var(--sp-2xl);
  max-width: 860px;
  padding: var(--sp-xl);
}

.content-block h3 {
  color: var(--accent);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-md);
  text-transform: uppercase;
}

.content-block p,
.content-block ul {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.content-block ul { list-style: none; }

.content-block li {
  padding-left: var(--sp-lg);
  position: relative;
}

.content-block li::before {
  color: var(--accent);
  content: "\2727";
  font-size: 10px;
  left: 0;
  position: absolute;
  top: 2px;
}

/* ── TOC Grid ───────────────────────────── */

.toc-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.toc-card {
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.toc-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.toc-num {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  color: var(--accent);
  display: flex;
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.toc-label {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Two Column Layout ──────────────────── */

.two-col {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.concept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
}

.concept-card .pill {
  background: var(--accent-soft);
  border-radius: var(--r-full);
  color: var(--accent);
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  padding: var(--sp-2xs) var(--sp-sm);
}

.concept-card .title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: var(--sp-xs);
}

.concept-card .body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── Screen Row (Phone Mockups) ─────────── */

.screen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xl);
  justify-content: center;
}

.screen-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  transition: transform var(--duration-normal) var(--ease-out);
}

.screen-wrapper:hover { transform: translateY(-4px); }

.screen-label {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 400;
  padding: var(--sp-xs) var(--sp-md);
}

/* ── Phone Frame ────────────────────────── */

.phone {
  background: var(--surface);
  border: 6px solid var(--warm-200);
  border-radius: 44px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  height: 720px;
  overflow: hidden;
  position: relative;
  width: 340px;
}

[data-theme="dark"] .phone {
  border-color: var(--warm-700);
}

.notch {
  height: 48px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}

.notch::after {
  background: var(--warm-800);
  border-radius: 14px;
  content: "";
  height: 28px;
  left: 50%;
  position: absolute;
  top: 10px;
  transform: translateX(-50%);
  width: 100px;
}

[data-theme="dark"] .notch::after {
  background: oklch(0.10 0.005 40);
}

.screen {
  background: var(--surface);
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.screen-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.screen-scroll::-webkit-scrollbar { display: none; }

/* ── Phone Header ───────────────────────── */

.phone-header {
  align-items: flex-end;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  height: 100px;
  left: 0;
  padding: 0 var(--sp-lg) var(--sp-md);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 50;
}

.phone-header .side {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  min-width: 52px;
}

.phone-header .side.right { text-align: right; }

.phone-header .center {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  text-align: center;
}

/* ── Phone Tab Bar ──────────────────────── */

.tab-bar {
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  bottom: 0;
  display: flex;
  height: 68px;
  justify-content: space-around;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 10;
}

.tab-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tab-item.active { color: var(--accent); }
.tab-item.inactive { color: var(--text-tertiary); }

.tab-item .tab-icon {
  height: 22px;
  width: 22px;
}

.tab-item .tab-label {
  font-size: 11px;
  font-weight: 700;
}

/* ── Record Button (Orb) ────────────────── */

.record-orb-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.record-orb {
  align-items: center;
  background: radial-gradient(
    circle at 35% 35%,
    var(--peach-200),
    var(--peach-500)
  );
  border-radius: 50%;
  box-shadow:
    0 0 0 12px oklch(0.70 0.13 33 / 0.08),
    0 16px 32px oklch(0.70 0.13 33 / 0.20);
  color: var(--warm-25);
  display: flex;
  font-size: 36px;
  height: 120px;
  justify-content: center;
  width: 120px;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.record-orb.live {
  animation: breathe 2s var(--ease-out) infinite;
  background: radial-gradient(
    circle at 35% 35%,
    var(--peach-300),
    var(--peach-600)
  );
}

@keyframes breathe {
  0%, 100% {
    box-shadow:
      0 0 0 12px oklch(0.70 0.13 33 / 0.08),
      0 16px 32px oklch(0.70 0.13 33 / 0.20);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 20px oklch(0.70 0.13 33 / 0.12),
      0 20px 36px oklch(0.70 0.13 33 / 0.25);
    transform: scale(1.04);
  }
}

.record-orb-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  text-align: center;
}

.record-orb-desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: center;
}

/* ── Hero Panel ─────────────────────────── */

.hero-panel {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
}

/* ── Chips ──────────────────────────────── */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--sp-xs) var(--sp-sm);
}

.chip.active {
  background: var(--accent-soft);
  border-color: var(--peach-200);
  color: var(--peach-600);
}

/* ── Log Card ───────────────────────────── */

.log-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
}

.log-card + .log-card { margin-top: var(--sp-sm); }

.log-head {
  align-items: center;
  display: flex;
  gap: var(--sp-xs);
  justify-content: space-between;
  margin-bottom: var(--sp-xs);
}

.tag-pill {
  align-items: center;
  border-radius: var(--r-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-sm);
}

.tag-pill .tag-dot {
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.tag-feeding        { background: var(--cat-feeding-bg); color: var(--cat-feeding); }
.tag-feeding .tag-dot { background: var(--cat-feeding); }
.tag-sleep          { background: var(--cat-sleep-bg);   color: var(--cat-sleep); }
.tag-sleep .tag-dot   { background: var(--cat-sleep); }
.tag-medicine       { background: var(--cat-medicine-bg); color: var(--cat-medicine); }
.tag-medicine .tag-dot { background: var(--cat-medicine); }
.tag-symptom        { background: var(--cat-symptom-bg);  color: var(--cat-symptom); }
.tag-symptom .tag-dot  { background: var(--cat-symptom); }
.tag-other          { background: var(--cat-other-bg);    color: var(--cat-other); }
.tag-other .tag-dot    { background: var(--cat-other); }

.time-label {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.log-title {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.5;
}

.log-body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: var(--sp-2xs);
}

/* ── Record Cards (Structured) ──────────── */

.record-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.record-group-label {
  color: var(--text-tertiary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
}

.record-mini {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
}

.record-mini.cat-feeding  { background: var(--cat-feeding-bg); }
.record-mini.cat-sleep    { background: var(--cat-sleep-bg); }
.record-mini.cat-medicine { background: var(--cat-medicine-bg); }
.record-mini.cat-symptom  { background: var(--cat-symptom-bg); }
.record-mini.cat-other    { background: var(--cat-other-bg); }

/* ── Field Rows ─────────────────────────── */

.field-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
}

.field-row + .field-row {
  border-top: 1px solid var(--border);
}

.field-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  min-width: 64px;
}

.field-value {
  font-size: var(--text-sm);
  text-align: right;
}

.field-value.editable {
  background: var(--accent-soft);
  border: 1px dashed var(--peach-200);
  border-radius: var(--r-sm);
  padding: var(--sp-2xs) var(--sp-sm);
}

.field-value.placeholder {
  color: var(--text-tertiary);
}

/* ── Transcript ─────────────────────────── */

.transcript-label {
  color: var(--text-tertiary);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2xs);
  text-transform: uppercase;
}

.transcript-fold {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-height: 42px;
  overflow: hidden;
  padding: var(--sp-sm) var(--sp-md);
  position: relative;
}

.transcript-fold::after {
  color: var(--text-tertiary);
  content: "\25BE";
  font-size: var(--text-xs);
  position: absolute;
  right: var(--sp-sm);
  top: var(--sp-sm);
}

/* ── Buttons ────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-ghost {
  align-items: center;
  border: none;
  border-radius: var(--r-md);
  display: flex;
  font-size: var(--text-base);
  height: 48px;
  justify-content: center;
  width: 100%;
}

.btn-primary {
  background: var(--accent);
  box-shadow: 0 4px 12px oklch(0.70 0.13 33 / 0.25);
  color: var(--warm-25);
  font-weight: 700;
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

.btn-ghost {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.btn-add {
  align-items: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 600;
  height: 44px;
  justify-content: center;
  width: 100%;
}

.btn-danger {
  align-items: center;
  background: oklch(0.95 0.02 25);
  border: 1px solid oklch(0.88 0.04 25);
  border-radius: var(--r-md);
  color: oklch(0.50 0.12 25);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 600;
  height: 44px;
  justify-content: center;
  width: 100%;
}

[data-theme="dark"] .btn-danger {
  background: oklch(0.22 0.03 25);
  border-color: oklch(0.30 0.04 25);
  color: oklch(0.70 0.08 25);
}

/* ── FAB ────────────────────────────────── */

.fab {
  align-items: center;
  background: var(--warm-800);
  border-radius: var(--r-full);
  bottom: 84px;
  box-shadow: var(--shadow-lg);
  color: var(--warm-50);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md);
  position: absolute;
  right: var(--sp-lg);
  z-index: 12;
}

/* ── Bottom Sheet ───────────────────────── */

.sheet-scrim {
  background: oklch(0.20 0.01 40 / 0.3);
  inset: 0;
  position: absolute;
  z-index: 10;
}

.bottom-sheet {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--border);
  bottom: 0;
  box-shadow: 0 -8px 32px oklch(0.20 0.01 40 / 0.15);
  left: 0;
  padding: var(--sp-md) var(--sp-lg) var(--sp-xl);
  position: absolute;
  right: 0;
  z-index: 20;
}

.sheet-handle {
  background: var(--warm-300);
  border-radius: var(--r-full);
  height: 4px;
  margin: 0 auto var(--sp-md);
  width: 40px;
}

/* ── Waveform ───────────────────────────── */

.wave-strip {
  align-items: flex-end;
  display: flex;
  gap: 5px;
  height: 44px;
  justify-content: center;
}

.wave-strip span {
  background: linear-gradient(to top, var(--peach-400), var(--peach-200));
  border-radius: var(--r-full);
  display: block;
  width: 5px;
}

/* ── Badge ──────────────────────────────── */

.status-badge {
  align-items: center;
  border-radius: var(--r-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-sm);
}

.status-badge.safe {
  background: var(--sage-50);
  color: var(--sage-500);
}

.status-badge.safe .status-dot {
  background: var(--sage-500);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.status-badge.live {
  background: oklch(0.95 0.02 25);
  color: var(--peach-600);
}

.severity-badge {
  border-radius: var(--r-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--sp-2xs) var(--sp-sm);
}

.severity-mild    { background: var(--sage-50); color: var(--sage-500); }
.severity-watch   { background: var(--honey-50); color: var(--honey-400); }

/* ── List Row ───────────────────────────── */

.list-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: var(--sp-sm) 0;
}

.list-row + .list-row {
  border-top: 1px solid var(--border);
}

.list-row .row-title {
  font-size: var(--text-base);
  font-weight: 700;
}

.list-row .row-sub {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ── Card ───────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
}

.card + .card { margin-top: var(--sp-sm); }

.card.selected {
  border-color: var(--peach-200);
  box-shadow: 0 0 0 3px var(--peach-50);
}

.card .card-pill {
  background: var(--surface-raised);
  border-radius: var(--r-full);
  color: var(--text-tertiary);
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  padding: var(--sp-2xs) var(--sp-sm);
}

.card .card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: var(--sp-xs);
}

.card .card-body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── Preview / Export Field ──────────────── */

.preview-field {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-family: "SF Mono", "Cascadia Code", "Fira Code", monospace;
  font-size: var(--text-xs);
  line-height: 1.8;
  min-height: 120px;
  padding: var(--sp-md);
  white-space: pre-line;
}

/* ── Edit Hint ──────────────────────────── */

.edit-hint {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.6;
  margin-top: var(--sp-xs);
}

/* ── Inline Illustration helpers ────────── */

.illust-inline {
  display: inline-block;
  height: 1.2em;
  vertical-align: -0.15em;
  width: 1.2em;
}

.illust-block {
  display: block;
  margin: 0 auto;
}

/* Illustration SVG uses CSS variables for theming */
.illust-bear-face { fill: var(--illust-fill); }
.illust-bear-stroke { stroke: var(--illust-stroke); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.illust-bear-ear   { fill: var(--illust-ear); }
.illust-bear-nose  { fill: var(--illust-nose); }
.illust-bear-eye   { fill: var(--illust-eye); }
.illust-bear-blush { fill: var(--illust-blush); opacity: 0.5; }
.illust-bear-mouth { stroke: var(--illust-stroke); fill: none; stroke-width: 1.5; stroke-linecap: round; }
.illust-bear-highlight { fill: var(--warm-25); }

/* Category icon SVGs */
.cat-icon { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cat-icon-fill { fill: currentColor; opacity: 0.15; }

/* ── Decorative Divider ─────────────────── */

.deco-divider {
  align-items: center;
  display: flex;
  gap: var(--sp-sm);
  justify-content: center;
  margin: var(--sp-2xl) 0;
}

.deco-divider .deco-star {
  color: var(--peach-200);
  font-size: 8px;
}

.deco-divider .deco-line {
  background: var(--border);
  height: 1px;
  width: 40px;
}

/* ── Entry Animations ───────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.doc-header    { animation: fade-up 0.6s var(--ease-out) both; }
.content-block { animation: fade-up 0.6s var(--ease-out) 0.1s both; }
.section       { animation: fade-up 0.6s var(--ease-out) 0.2s both; }

/* ── Responsive ─────────────────────────── */

@media (max-width: 900px) {
  body { padding: var(--sp-xl) var(--sp-md) var(--sp-3xl); }

  .doc-header h1 { font-size: var(--text-xl); }

  .content-block,
  .section { max-width: 100%; }

  .two-col { grid-template-columns: 1fr; }

  .screen-row { gap: var(--sp-xl); }
}

@media (max-width: 400px) {
  .phone {
    height: 640px;
    width: 300px;
  }
}