@charset "UTF-8";

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

:root {
  --peach: #ffd29a;
  --peach-bright: #ffe5bc;
  --pink: #fcc4c5;
  --pink-hot: #ff8f9d;
  --cream: #fff8ee;
  --brown-950: #160f0d;
  --brown-900: #201512;
  --brown-800: #34231e;
  --brown-700: #51382f;
  --ink: #2c201c;
  --white: #fffdfa;
  --line: rgba(255, 245, 235, 0.28);
  --line-dark: rgba(50, 31, 24, 0.16);
  --shadow: 0 24px 70px rgba(16, 8, 5, 0.3);
  --sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  --hand: "Gaegu", "Gowun Dodum", cursive;
  --soft: "Gowun Dodum", "Pretendard", sans-serif;
  --nav-height: 72px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--brown-950);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: var(--brown-950);
  font-family: var(--sans);
  opacity: 0;
  transition: opacity 220ms ease;
}

body.ready {
  opacity: 1;
}

body.nav-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

figure,
h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

::selection {
  color: var(--ink);
  background: var(--peach);
}

.skip-link {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--peach);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-nav {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: var(--nav-height);
  color: var(--white);
  background: linear-gradient(180deg, rgba(18, 10, 8, 0.88), rgba(18, 10, 8, 0.42) 72%, transparent);
}

.site-nav::after {
  position: absolute;
  right: 3vw;
  bottom: 0;
  left: 3vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 210, 154, 0.4), transparent);
  content: "";
}

.nav-shell {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  gap: 30px;
  padding: 0 clamp(22px, 4vw, 76px);
}

.nav-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 9px;
  font-family: var(--hand);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.nav-brand small {
  color: var(--peach);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.nav-links {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(17px, 1.6vw, 30px);
  margin-left: auto;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  color: rgba(255, 253, 250, 0.72);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.nav-links a::after {
  position: absolute;
  right: 50%;
  bottom: 5px;
  left: 50%;
  height: 2px;
  background: var(--peach);
  content: "";
  transition: right 180ms ease, left 180ms ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  right: 0;
  left: 0;
}

.nav-live {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--ink);
  background: var(--peach);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.nav-live::before {
  width: 7px;
  height: 7px;
  background: var(--pink-hot);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 143, 157, 0.18);
  content: "";
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
  content: "";
}

.page {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 210, 154, 0.16), transparent 28%),
    linear-gradient(135deg, #211612, #120c0a 64%);
}

.page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  pointer-events: none;
  content: "";
}

.page-main {
  min-height: 100svh;
  padding-top: var(--nav-height);
}

.page-shell {
  width: min(1720px, 92vw);
  margin: 0 auto;
}

.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
  padding: clamp(64px, 9vw, 130px) 0 clamp(36px, 4.5vw, 74px);
}

.page-kicker,
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--peach);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page-kicker::before,
.kicker::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.page-title {
  margin-top: 16px;
  font-family: var(--hand);
  font-size: clamp(64px, 8vw, 138px);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.08em;
}

.page-title small {
  display: block;
  margin-top: 22px;
  color: var(--pink);
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 20px);
  letter-spacing: 0.2em;
}

.page-lead {
  max-width: 430px;
  color: rgba(255, 253, 250, 0.68);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.8;
}

.section-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--pink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.section-kicker::after {
  width: 70px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  content: "";
}

.display-soft {
  font-family: var(--hand);
  font-weight: 700;
  letter-spacing: -0.055em;
}

.paper-photo {
  position: relative;
  padding: 9px 9px 46px;
  color: var(--ink);
  background: #fffaf3;
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(10, 5, 3, 0.36);
}

.paper-photo::before {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 76px;
  height: 24px;
  background: linear-gradient(90deg, rgba(255, 206, 165, 0.55), rgba(255, 242, 207, 0.92), rgba(255, 193, 181, 0.56));
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(24, 12, 7, 0.08);
  content: "";
  transform: translateX(-50%) rotate(-2deg);
}

.paper-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-photo figcaption {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  overflow: hidden;
  font-family: var(--hand);
  font-size: 17px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paper-photo figcaption::after {
  float: right;
  color: var(--pink-hot);
  content: "✦";
}

.soft-button,
.outline-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.soft-button {
  color: var(--ink);
  background: var(--peach);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.outline-button {
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}

.soft-button:hover,
.outline-button:hover {
  transform: translateY(-2px);
}

.outline-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.pill.accent {
  color: var(--ink);
  background: var(--pink);
}

.glass-dark {
  background: linear-gradient(145deg, rgba(30, 19, 15, 0.88), rgba(20, 12, 10, 0.7));
  border: 1px solid rgba(255, 235, 215, 0.15);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.form-control {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  outline: none;
}

.form-control:focus {
  border-color: var(--peach);
  box-shadow: 0 0 0 3px rgba(255, 210, 154, 0.12);
}

[data-tab-panel][hidden] {
  display: none !important;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 520ms ease, transform 520ms ease;
}

body.ready [data-reveal].is-visible,
body.ready [data-reveal]:not(.wait-reveal) {
  opacity: 1;
  transform: translateY(0);
}

.site-footer {
  display: flex;
  width: min(1720px, 92vw);
  min-height: 120px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 90px auto 0;
  padding: 26px 0;
  color: rgba(255, 253, 250, 0.48);
  border-top: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-links a:hover {
  color: var(--peach);
}

#fx {
  position: fixed;
  z-index: 80;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#fx .fxfb {
  position: fixed;
  width: var(--size, 9px);
  height: var(--size, 9px);
  opacity: var(--opacity, 0.36);
  background: rgba(255, 240, 220, 0.2);
  border: 1px solid rgba(255, 223, 190, 0.5);
  border-radius: 50%;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.46), 0 3px 11px rgba(255, 143, 157, 0.12);
  animation: fxfb-fall var(--duration, 8s) linear forwards;
}

@keyframes fxfb-fall {
  to {
    opacity: 0;
    transform: translate3d(var(--drift, 0), min(108vh, 1100px), 0) rotate(180deg);
  }
}

@media (max-width: 1120px) {
  .nav-shell {
    gap: 18px;
  }

  .nav-links {
    gap: 14px;
  }

  .nav-links a {
    font-size: 14px;
  }

  .nav-live {
    display: none;
  }
}

@media (max-width: 820px) {
  :root {
    --nav-height: 64px;
  }

  .site-nav {
    background: rgba(22, 14, 11, 0.88);
    backdrop-filter: blur(18px);
  }

  .nav-shell {
    padding: 0 18px;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 28px;
    background: rgba(22, 14, 11, 0.97);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .nav-links a {
    min-height: 54px;
    font-family: var(--hand);
    font-size: 28px;
  }

  body.nav-open .nav-links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  body.nav-open .nav-toggle span {
    opacity: 0;
  }

  body.nav-open .nav-toggle::before {
    transform: translateY(6px) rotate(45deg);
  }

  body.nav-open .nav-toggle::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .page-shell,
  .site-footer {
    width: min(100% - 32px, 760px);
  }

  .page-heading {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 58px;
  }

  .page-title {
    font-size: clamp(58px, 20vw, 96px);
  }

  .page-lead {
    max-width: 100%;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   SITE EXTENSION LAYER (appended below the confirmed handoff CSS)
   Standard tokens + admin base classes + shared sub-page parts.
   theme-* / type-* keys saved in admin are applied to these vars
   by applyTheme() in supabase.js.
   ============================================================ */

:root {
  --main: #ffd29a;
  --main-dark: #ffc37e;
  --main-deep: #f0a65a;
  --main-light: #ffe9cd;
  --bg: #160f0d;
  --card: #fff8ee;
  --logo: #fffdfa;
  --text: #2c201c;
  --text-mid: #6b5648;
  --text-soft: #9c8878;
  --fs-display: 1; --fs-title: 1; --fs-body: 1; --fs-label: 1;
  --shadow-hover: 0 18px 44px rgba(10, 4, 2, 0.4);
  --radius-md: 16px;
  --transition: 0.2s ease;
  /* Site palette aliases: editing theme-main in admin recolors the site. */
  --peach: var(--main);
  --peach-bright: var(--main-light);
}

html, body { background: var(--bg); }
.nav-brand { color: var(--logo); }

/* type scale hooks (admin 🎨 tab sliders) */
.page-title { font-size: calc(clamp(64px, 8vw, 138px) * var(--fs-display, 1)); }
.page-title small { font-size: calc(clamp(14px, 1.1vw, 20px) * var(--fs-label, 1)); }
.page-kicker, .kicker, .section-kicker { font-size: calc(14px * var(--fs-label, 1)); }
.page-lead { font-size: calc(clamp(15px, 1.2vw, 19px) * var(--fs-body, 1)); }

/* ---------- glass panel: the sub-page card language ---------- */
.glass-panel {
  position: relative;
  padding: clamp(22px, 2.2vw, 34px);
  background: linear-gradient(150deg, rgba(34, 21, 16, 0.86), rgba(21, 12, 10, 0.68));
  border: 1px solid rgba(255, 235, 215, 0.14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.panel-title {
  font-family: var(--hand);
  font-size: calc(clamp(26px, 2vw, 34px) * var(--fs-title, 1));
  font-weight: 700;
  letter-spacing: -0.04em;
}

.panel-note {
  color: var(--text-soft, rgba(255, 253, 250, 0.5));
  color: rgba(255, 253, 250, 0.5);
  font-size: calc(13px * var(--fs-label, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* faint oversized ghost word behind page headings */
.ghost-word {
  position: absolute;
  z-index: -1;
  top: clamp(46px, 6vw, 92px);
  right: -0.04em;
  overflow: hidden;
  max-width: 100%;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 210, 154, 0.14);
  font-family: var(--sans);
  font-size: clamp(90px, 12vw, 210px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ---------- chips / tags ---------- */
.chip {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: calc(14px * var(--fs-body, 1));
  font-weight: 700;
}

.chip.accent { color: var(--ink); background: var(--pink); border-color: transparent; }

.tag {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  color: var(--peach);
  background: rgba(255, 210, 154, 0.1);
  border: 1px solid rgba(255, 210, 154, 0.3);
  border-radius: 999px;
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 800;
}

/* ---------- embed-safe overlay modal (absolute + placeOverlay) ---------- */
.ov {
  position: absolute;
  z-index: 500;
  right: 0;
  left: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}

.ov.show { display: flex; }

.ov-box {
  width: min(440px, 94vw);
  padding: 26px 24px 22px;
  color: var(--white);
  background: linear-gradient(155deg, rgba(38, 23, 17, 0.97), rgba(22, 13, 10, 0.96));
  border: 1px solid rgba(255, 235, 215, 0.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
}

.ov-mask {
  position: fixed;
  z-index: 490;
  inset: 0;
  display: none;
  background: rgba(10, 5, 3, 0.55);
  backdrop-filter: blur(3px);
}

.ov-mask.show { display: block; }

/* ---------- empty state ---------- */
.empty {
  padding: 44px 18px;
  color: rgba(255, 253, 250, 0.55);
  font-size: calc(15px * var(--fs-body, 1));
  font-weight: 700;
  text-align: center;
}

.empty-icon { display: block; margin-bottom: 10px; font-size: 30px; }
.empty-sub { display: block; margin-top: 8px; color: rgba(255, 253, 250, 0.38); font-size: 12.5px; font-weight: 500; line-height: 1.7; }

/* ---------- pagination pills ---------- */
.pg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 22px; }

.pg {
  min-width: 38px;
  min-height: 38px;
  padding: 0 8px;
  color: rgba(255, 253, 250, 0.66);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.pg:hover { background: rgba(255, 255, 255, 0.12); }
.pg.active { color: var(--ink); background: var(--peach); border-color: transparent; }

/* ============================================================
   ADMIN BASE CLASSES — admin/index.html depends on these.
   Admin renders as warm paper cards on the dark site shell.
   ============================================================ */

.container {
  display: flex;
  width: min(1100px, 94vw);
  flex-direction: column;
  gap: 18px;
  margin: 0 auto;
  padding: 34px 0 60px;
}

.page-subtitle { color: rgba(255, 253, 250, 0.55); font-size: 14px; }

.card {
  padding: 22px 22px 20px;
  color: var(--text);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.card-title {
  margin-bottom: 14px;
  color: var(--main-deep);
  font-size: calc(17px * var(--fs-title, 1));
  font-weight: 900;
  letter-spacing: -0.01em;
}

.btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--main-light);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.btn:hover { border-color: var(--main); }
.btn-primary { color: var(--ink); background: var(--main); border-color: transparent; }
.btn-primary:hover { filter: brightness(1.04); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
}

.badge-pink { color: #a3454f; background: #ffe3e4; }

.input {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--main-light);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition);
}

.input:focus { border-color: var(--main); }
textarea.input { min-height: 0; line-height: 1.6; resize: vertical; }

.input-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-mid);
  font-size: calc(12.5px * var(--fs-label, 1));
  font-weight: 800;
}

.form-field { margin-bottom: 12px; }

.spinner {
  width: 26px;
  height: 26px;
  margin: 14px auto;
  border: 3px solid var(--main-light);
  border-top-color: var(--main);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed;
  z-index: 1000;
  bottom: 26px;
  left: 50%;
  padding: 12px 22px;
  color: var(--ink);
  background: var(--main);
  border-radius: 999px;
  box-shadow: var(--shadow-hover);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.25s;
}

.toast.show { opacity: 1; }

footer { margin-top: 24px; color: rgba(255, 253, 250, 0.45); font-size: calc(12px * var(--fs-body, 1)); line-height: 1.7; text-align: center; }

/* FOUC guard for wrapped layouts (body.ready comes from site.js) */
.wrap { opacity: 0; transition: opacity 0.3s; }
body.ready .wrap { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wrap { opacity: 1; }
  body { opacity: 1; }
}

/* ---------- ask (inquiry) modal content ---------- */
.ask-kicker { color: var(--peach); font-size: 12px; font-weight: 900; letter-spacing: 0.18em; }
.ask-title { margin: 6px 0 4px; font-family: var(--hand); font-size: 32px; font-weight: 700; letter-spacing: -0.04em; }
.ask-sub { margin-bottom: 16px; color: rgba(255, 253, 250, 0.6); font-size: 13px; }
.ov-box textarea.form-control { min-height: 120px; padding: 12px 14px; line-height: 1.7; resize: vertical; }
.ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.page-heading { position: relative; }

/* ---------- theme toggle knob (nav, every page) ---------- */
.theme-toggle {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 33px;
  flex: 0 0 auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.theme-toggle:hover { border-color: var(--peach); }

.tt-knob {
  position: absolute;
  top: 3px;
  left: 50%;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--peach);
  border-radius: 50%;
  transform: translateX(-50%);
  transition: top 200ms ease, background 200ms ease;
}

body.light .tt-knob { top: 14px; background: var(--pink-hot); }

@media (max-width: 820px) { .theme-toggle { margin-left: auto; margin-right: 10px; } }

/* ============================================================
   LIGHT THEME — opt-in via the nav toggle, stored in localStorage('theme').
   Dark stays the default; these rules only apply under body.light.
   ============================================================ */

body.light {
  --bg: #fff3e4;
  --card: #ffffff;
  --logo: #2c201c;
  --line: rgba(84, 55, 38, 0.18);
  --white: #2c201c;
  --peach-bright: #f0a65a;
  --shadow: 0 18px 44px rgba(120, 80, 50, 0.16);
  --shadow-hover: 0 20px 50px rgba(120, 80, 50, 0.22);
  color: var(--ink);
  background: var(--bg);
}

body.light .page {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 210, 154, 0.35), transparent 30%),
    linear-gradient(135deg, #fff7ec, #ffeeda 64%);
}

body.light .page::before { opacity: 0.09; }

body.light .site-nav {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 246, 232, 0.95), rgba(255, 246, 232, 0.72) 72%, transparent);
}

body.light .site-nav::after { background: linear-gradient(90deg, transparent, rgba(200, 130, 60, 0.45), transparent); }
body.light .nav-links a { color: rgba(44, 32, 28, 0.62); }
body.light .nav-links a:hover,
body.light .nav-links a[aria-current="page"] { color: var(--ink); }
body.light .nav-links a::after { background: var(--main-deep); }
body.light .nav-brand small { color: #96560f; }
body.light .nav-toggle { color: var(--ink); background: rgba(84, 55, 38, 0.06); }
body.light .theme-toggle { background: rgba(84, 55, 38, 0.06); }

body.light .page-kicker,
body.light .kicker,
body.light .panel-title,
body.light .page-title { color: var(--ink); }
body.light .page-kicker,
body.light .kicker { color: #96560f; }
body.light .page-title small,
body.light .section-kicker { color: #d05f7c; }
body.light .page-lead,
body.light .panel-note { color: rgba(60, 42, 34, 0.66); }
body.light .ghost-word { -webkit-text-stroke: 1px rgba(190, 130, 70, 0.22); }

body.light .glass-panel,
body.light .diary-item {
  background: linear-gradient(150deg, #fffdf8, #fff7ec);
  border-color: rgba(84, 55, 38, 0.14);
}

body.light .pill,
body.light .chip,
body.light .form-control,
body.light .outline-button,
body.light .pg,
body.light .gt,
body.light .cat-tab,
body.light .seg,
body.light .day-chip,
body.light .up-item,
body.light .viewer-card,
body.light .cal-btn,
body.light .modal-x {
  color: var(--ink);
  background: rgba(84, 55, 38, 0.05);
  border-color: rgba(84, 55, 38, 0.16);
}

body.light .tag { color: #96560f; background: rgba(255, 210, 154, 0.35); border-color: rgba(200, 130, 60, 0.4); }
body.light .pill.accent { color: var(--ink); background: var(--pink); }
body.light .outline-button:hover,
body.light .pg:hover,
body.light .gt:hover { background: rgba(84, 55, 38, 0.1); }
body.light .pg.active,
body.light .gt.active,
body.light .seg-btn.active,
body.light .day-chip.on,
body.light .cal-btn:hover { color: var(--ink); background: var(--main-deep); }
body.light .cat-tab.active { color: var(--ink); background: var(--pink); }
body.light .cat-tab:not(.active) .cnt { background: rgba(84, 55, 38, 0.1); }
body.light .seg-btn { color: rgba(60, 42, 34, 0.6); }
body.light .empty { color: rgba(60, 42, 34, 0.6); }
body.light .empty-sub { color: rgba(60, 42, 34, 0.45); }
body.light .site-footer { color: rgba(60, 42, 34, 0.6); }
body.light .form-control:focus { border-color: var(--main-deep); box-shadow: 0 0 0 3px rgba(240, 166, 90, 0.18); }

body.light .about-text,
body.light .m-desc,
body.light .diary-content,
body.light .lb-desc { color: rgba(44, 32, 28, 0.86); }
body.light .now-box { background: rgba(255, 210, 154, 0.24); border-color: rgba(200, 130, 60, 0.45); }
body.light .now-box b,
body.light .stat .sv,
body.light .up-d1,
body.light .diary-date,
body.light .cmt-item .cn,
body.light .m-part .pt,
body.light .p-meta,
body.light .rand-kicker { color: #96560f; }
body.light .song-count,
body.light .day-note,
body.light .viewer-id,
body.light .modal-id,
body.light .up-time,
body.light .s-artist,
body.light .cmt-empty,
body.light .update-date { color: rgba(60, 42, 34, 0.6); }
body.light .s-num { color: rgba(60, 42, 34, 0.45); }
body.light .info-grid dt { color: #96560f; }
body.light .stat .sb { background: rgba(84, 55, 38, 0.12); }
body.light .stat .sb i { background: linear-gradient(90deg, var(--main-deep), var(--pink-hot)); }
body.light .ms,
body.light .tmi-row,
body.light .upbo-row,
body.light .song-row { border-bottom-color: rgba(84, 55, 38, 0.12); }
body.light .ms .mst { color: #96560f; background: rgba(255, 210, 154, 0.35); }
body.light .ms.done .mst { color: var(--ink); background: var(--main-deep); }
body.light .ms.done .msc { color: rgba(60, 42, 34, 0.45); }
body.light .tmi-row dt { color: #d05f7c; }
body.light .song-head { color: #96560f; border-bottom-color: rgba(84, 55, 38, 0.2); }
body.light .song-row:hover { background: rgba(255, 210, 154, 0.22); }
body.light .s-genre { color: #ab3a5b; background: rgba(252, 196, 197, 0.3); }
body.light .cal-grid { border-top-color: rgba(84, 55, 38, 0.22); border-left-color: rgba(84, 55, 38, 0.12); }
body.light .cal-cell { border-top-color: rgba(84, 55, 38, 0.14); border-right-color: rgba(84, 55, 38, 0.12); }
body.light .cal-dow { color: #96560f; border-right-color: rgba(84, 55, 38, 0.12); }
body.light .cal-dow:first-child { color: #b8324a; }
body.light .cal-cell.today .cal-date { color: var(--ink); background: var(--main-deep); }
body.light .cal-cell.has:hover { background: rgba(255, 210, 154, 0.28); }
body.light .cal-legend { color: rgba(60, 42, 34, 0.62); }
body.light .up-item:hover { border-color: rgba(200, 130, 60, 0.6); }
body.light .viewer-card:hover { background: rgba(255, 210, 154, 0.28); border-color: rgba(200, 130, 60, 0.5); }
body.light .viewer-av,
body.light .modal-av,
body.light .viewer-av-fb,
body.light .modal-av-fb { border-color: rgba(84, 55, 38, 0.2); }
body.light .modal-empty { color: rgba(60, 42, 34, 0.6); }
body.light .cmt-wrap { border-top-color: rgba(200, 130, 60, 0.45); }
body.light .cmt-head { color: #d05f7c; }
body.light .cmt-item .cm { color: rgba(44, 32, 28, 0.85); }
body.light .ov-box { color: var(--ink); background: linear-gradient(155deg, #fffdf8, #fff4e5); border-color: rgba(84, 55, 38, 0.18); }
body.light .ov-mask { background: rgba(120, 80, 50, 0.28); }
body.light .ask-kicker { color: #96560f; }
body.light .ask-sub { color: rgba(60, 42, 34, 0.66); }
body.light .ovod-card { background: rgba(84, 55, 38, 0.06); border-color: rgba(84, 55, 38, 0.14); }

/* Cover in light mode: a cream wash over the night photo (faded-film look), ink type. */
body.light .cover-bg::before {
  background:
    linear-gradient(90deg, rgba(255, 244, 229, 0.93) 0 18%, rgba(255, 244, 229, 0.4) 38%, rgba(255, 244, 229, 0.08) 56%),
    linear-gradient(270deg, rgba(255, 244, 229, 0.95) 0 22%, rgba(255, 244, 229, 0.55) 33%, rgba(255, 244, 229, 0.08) 52%),
    linear-gradient(0deg, rgba(255, 244, 229, 0.6), transparent 34%);
}

body.light .main-title,
body.light .main-next strong,
body.light .main-schedule li strong { color: var(--ink); }
body.light .main-title { text-shadow: 0 4px 22px rgba(255, 244, 229, 0.7); }
body.light .main-title small { color: #d05f7c; }
body.light .main-about b,
body.light .main-next span { color: #a9631a; }
body.light .main-about p { color: rgba(44, 32, 28, 0.88); }
body.light .main-schedule { border-top-color: rgba(84, 55, 38, 0.5); border-bottom-color: rgba(84, 55, 38, 0.3); }
body.light .main-schedule li { border-top-color: rgba(84, 55, 38, 0.24); }
/* Tiny labels over the cream wash need a darker pink (measured 3.0:1 at #d05f7c). */
body.light .main-schedule li b,
body.light .main-schedule .schedule-label b { color: #a52f4f; }
body.light .main-schedule li small,
body.light .schedule-label { color: rgba(60, 42, 34, 0.62); }
body.light .cover-signature { color: rgba(44, 32, 28, 0.78); }
body.light .cover-signature small { color: #96560f; }
body.light .soft-button { color: var(--ink); background: var(--main-deep); border-color: rgba(255, 255, 255, 0.5); }
body.light .nav-live { color: var(--ink); background: var(--main-deep); }
body.light #fx .fxfb { background: rgba(200, 140, 80, 0.12); border-color: rgba(190, 130, 70, 0.35); }

@media (max-width: 820px) {
  body.light .site-nav { background: rgba(255, 246, 232, 0.96); }
  body.light .nav-links { background: rgba(255, 246, 232, 0.98); }
  body.light .schedule-label { background: rgba(255, 246, 232, 0.8); }
  body.light .cover-bg::before {
    background:
      linear-gradient(180deg, rgba(255, 244, 229, 0.72) 0 17%, rgba(255, 244, 229, 0.15) 38%),
      linear-gradient(0deg, rgba(255, 244, 229, 0.97) 0 45%, rgba(255, 244, 229, 0.3) 72%);
  }
}

/* ============================================================
   EMBED SAFETY — inside an iframe, `fixed` is measured against the whole
   iframe box (SOOP app assigns thousands of px), not the visible screen.
   Anything full-screen must be anchored to the document instead.
   ============================================================ */

body.embed .site-nav { position: absolute; }

/* Mobile menu = a dropdown anchored to the bar.
   `position:fixed` is unusable here: the nav has backdrop-filter, which makes it the
   containing block in Chrome (panel collapses to 56px), while some app webviews ignore
   that and fall back to the whole iframe box (links scattered down thousands of px).
   Anchoring to .site-nav is deterministic in both. */
@media (max-width: 820px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    bottom: auto;
    left: 0;
    height: auto;
    align-content: start;
    gap: 2px;
    padding: 14px 18px 22px;
    visibility: hidden;   /* opacity alone leaves the links paintable in some webviews */
  }

  body.nav-open .nav-links { visibility: visible; }
}

body.embed #fx,
body.fit #fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: min(100%, 900px);
}

body.embed #fx .fxfb,
body.fit #fx .fxfb { position: absolute; }

body.embed .ov-mask,
body.fit .ov-mask {
  position: absolute;
  top: 0;
  bottom: auto;
  height: 100%;
}

body.embed #fxload,
body.fit #fxload {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  height: min(100%, 640px) !important;
}

/* vh inside an embed resolves against the whole iframe box; let the page be as tall as its content. */
body.embed .page,
body.fit .page,
body.embed .page-main,
body.fit .page-main { min-height: 0; }

/* The fixed 1180px viewport makes mobile browsers inflate text ("boost") to stay readable,
   which breaks the fixed-width cards. Keep the sizes exactly as authored. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Only shown inside a SOOP post: the app cannot render the desktop layout in an iframe,
   so offer to open the real page in the browser, where it does. */
.open-full { display: none; }

body.embed .open-full {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 13px;
  color: var(--ink);
  background: var(--peach);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

body.embed .nav-links { margin-left: auto; }

@media (max-width: 820px) {
  body.embed .open-full { margin-left: auto; margin-right: 8px; font-size: 12px; padding: 0 11px; }
  body.embed .theme-toggle { margin-left: 0; }
}