/* 개념글 만화 (/toon), QD calm strength: the comics are the colour, the page stays quiet.
   Solid background (QD 5), glass only on the floating capsule bars (QD 4), opaque pudding cards
   with a 1px rim of light (QD 2), the chosen filter is a clear drop with ink text (QD 3),
   text neutral and colour only for links / chosen (QD 8).
   Light/dark follow data-theme (toon_theme.js before paint, the capsule toggle in toon.js). */
:root {
  --bg: #eef1f7;
  --ink: #0b0e16;
  --ink-2: #454d5f;
  --ink-3: #6a7185;
  --line: rgba(24, 34, 70, .10);
  --pud-1: #fbfcff;
  --pud-2: #f3f5fb;
  --chrome: rgba(255, 255, 255, .62);
  --rim-a: rgba(255, 255, 255, 1);
  --rim-b: rgba(255, 255, 255, .3);
  --rim-c: rgba(166, 146, 255, .6);
  --shadow: 0 22px 44px -26px rgba(38, 50, 110, .42), 0 3px 8px -3px rgba(38, 50, 110, .14);
  --shadow-sm: 0 10px 22px -16px rgba(38, 50, 110, .45), 0 1px 3px -1px rgba(38, 50, 110, .14);
  --link: #3a3fd6;
  --pick: #5b3cff;
  --drop: rgba(255, 255, 255, .8);
  --warn-bg: #fff4dc; --warn-ink: #6b4300;
  --strip-paper: #ffffff;
  --spring: linear(0, 0.0509, 0.1778, 0.346, 0.527, 0.6996, 0.8498, 0.9697, 1.0569, 1.1127, 1.1411, 1.1475, 1.1378, 1.1178, 1.0924, 1.0656, 1.0406, 1.019, 1.0021, 0.99, 0.9824, 0.9788, 0.9783, 0.98, 0.9832, 0.987, 0.9909, 0.9946, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
  font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-text-size-adjust: 100%;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #04050a;
  --ink: #eef3ff;
  --ink-2: #a9b3cb;
  --ink-3: #77829c;
  --line: rgba(140, 170, 255, .13);
  --pud-1: #10131f;
  --pud-2: #0b0d17;
  --chrome: rgba(9, 11, 22, .6);
  --rim-a: rgba(110, 245, 255, .6);
  --rim-b: rgba(120, 110, 255, .1);
  --rim-c: rgba(255, 70, 210, .45);
  --shadow: 0 30px 60px -32px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .3);
  --shadow-sm: 0 14px 28px -18px rgba(0, 0, 0, .9);
  --link: #7fe9ff;
  --pick: #00e5ff;
  --drop: rgba(18, 24, 44, .85);
  --warn-bg: #2c2108; --warn-ink: #ffd88a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* The rim of light: one 1px ring, brightest where it faces the light (top left), a weaker
   reflection on the far side. Shared by cards, capsules, buttons and the chosen drop. */
.tn-cap::before, .tn-item a::before, .tn-card::before, .tn-btn::before,
.tn-chips button[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--rim-a), var(--rim-b) 38%, var(--rim-b) 62%, var(--rim-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ------------------------------------------------------------------ glass capsule */
.tn-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow: var(--shadow-sm);
}
.tn-cap-back {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .32s var(--spring), background-color .2s;
}
.tn-cap-back:active { transform: scale(.92); background: var(--line); transition-duration: 70ms; }
/* Theme toggle: a round button at the capsule's right end. It shows where a tap goes
   (moon on light, sun on dark). */
.tn-cap-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .32s var(--spring), background-color .2s, color .2s;
}
.tn-cap-btn:hover { color: var(--ink); }
.tn-cap-btn:active { transform: scale(.92); background: var(--line); transition-duration: 70ms; }
.tn-cap-btn:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }
.tn-cap-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tn-i-sun, :root[data-theme="dark"] .tn-i-moon { display: none; }
:root[data-theme="dark"] .tn-i-sun { display: block; }
.tn > .tn-cap .tn-cap-name { padding-left: 8px; }
.tn-cap-name { font-size: 14px; font-weight: 650; color: var(--ink-2); }

/* ------------------------------------------------------------------ shelf */
.tn { max-width: 760px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 14px 56px; }
.tn > .tn-cap { position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 5; width: max-content; }
.tn-head { padding: 22px 4px 6px; }
.tn-head h1 { margin: 0; font-size: 32px; font-weight: 760; letter-spacing: -0.025em; line-height: 1.15; }
.tn-meta { margin: 8px 0 0; font-size: 13px; font-weight: 550; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tn-banner { margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }

/* Filter = a row of one-cell segments: unchosen are bare text, the chosen one condenses into a clear drop. */
.tn-chips { display: flex; gap: 2px; flex-wrap: wrap; margin: 14px 0 6px; }
.tn-chips button {
  position: relative;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: transform .32s var(--spring), background-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tn-chips button:active { transform: scale(.96); transition-duration: 70ms; }
.tn-chips button[aria-pressed="true"] {
  background: var(--drop);
  color: color-mix(in oklab, var(--pick) 78%, var(--ink));
  text-shadow: 0 0 0 var(--ink);
  box-shadow: 0 6px 14px -8px rgba(38, 50, 110, .45), 0 1px 2px rgba(38, 50, 110, .08);
}
:root[data-theme="dark"] .tn-chips button[aria-pressed="true"] { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9); }

.tn-day {
  margin: 24px 4px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tn-item a {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(170deg, var(--pud-1), var(--pud-2));
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  align-items: flex-start;
  transition: transform .36s var(--spring), filter .2s;
}
.tn-item a:active { transform: scale(.975); filter: brightness(1.03); transition-duration: 70ms; }
.tn-thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 15px;
  object-fit: cover;
  background: var(--line);
}
.tn-body { min-width: 0; flex: 1; padding: 2px 2px 0 0; }
.tn-t {
  margin: 0;
  font-size: 16.5px;
  font-weight: 740;
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tn-h {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tn-m { margin: 7px 0 0; display: flex; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; font-weight: 550; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tn-g { font-weight: 700; color: var(--ink-2); }
.tn-item.read .tn-t { color: var(--ink-3); font-weight: 650; }
.tn-item.read .tn-thumb { opacity: .55; }
.tn-empty { padding: 48px 0; text-align: center; color: var(--ink-3); }

/* ------------------------------------------------------------------ reader */
.tn-reader { min-height: 100vh; background: var(--bg); }
.tn-bar {
  position: fixed;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: min(736px, calc(100% - 24px));
  transform: translateX(-50%);
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.tn-bar.away { transform: translate(-50%, -140%); opacity: 0; }
.tn-bar-title { flex: 1 1 auto; margin: 0; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tn-ep { max-width: 720px; margin: 0 auto; padding: calc(max(10px, env(safe-area-inset-top)) + 80px) 20px 22px; }
.tn-ep-g { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.tn-ep-t { margin: 8px 0 0; font-size: 27px; font-weight: 760; line-height: 1.28; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere; }
.tn-ep-m { margin: 10px 0 0; font-size: 13px; font-weight: 550; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tn-ep-n { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.tn-ep-n:empty { display: none; }

.tn-strip { max-width: 720px; margin: 0 auto; background: var(--strip-paper); }
.tn-strip img { display: block; width: 100%; height: auto; background: var(--strip-paper); }
@media (min-width: 760px) {
  .tn-strip { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
}

.tn-end { max-width: 720px; margin: 0 auto; padding: 22px 14px max(36px, env(safe-area-inset-bottom)); }
.tn-card {
  position: relative;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(170deg, var(--pud-1), var(--pud-2));
  box-shadow: var(--shadow-sm);
}
.tn-src { font-size: 14.5px; line-height: 1.6; }
.tn-src p { margin: 0 0 4px; }
.tn-src a { color: var(--link); font-weight: 650; text-underline-offset: 3px; }
.tn-src .tn-src-k { color: var(--ink-3); }
.tn-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.tn-note:empty { display: none; }
.tn-nav { display: flex; gap: 8px; margin-top: 12px; }
.tn-btn {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 14px 0;
  border-radius: 999px;
  background: linear-gradient(170deg, var(--pud-1), var(--pud-2));
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .32s var(--spring), filter .2s;
}
.tn-btn:active { transform: scale(.96); filter: brightness(1.04); transition-duration: 70ms; }
.tn-btn.off { opacity: .35; pointer-events: none; box-shadow: none; }

/* QD 15: follow the reduce settings. */
@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .tn-cap { background: var(--pud-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .tn-cap::before, .tn-item a::before, .tn-card::before, .tn-btn::before,
  .tn-chips button[aria-pressed="true"]::before { display: none; }
  .tn-chips button[aria-pressed="true"] { outline: 2px solid CanvasText; }
}