@font-face {
  font-family: 'HanaMin';
  src: url('fonts/hanamin.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Ognes';
  src: url('fonts/ognes.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'ParadiseSignature';
  src: url('fonts/paradise-signature.otf') format('opentype');
  font-display: swap;
}

:root {
  --bg: #f4eef6;
  --bg-2: #ebe2f0;
  --surface: #ffffff;
  --surface-2: #fbf4e8;     /* ivory paper */
  --paper: #faf3e2;          /* book page */
  --paper-edge: #e8dec4;
  --paper-shade: rgba(120, 80, 30, 0.08);
  --ink-deep: #1d1535;       /* deep night-violet — kept for dark UI element backgrounds */
  --ink: #61537b;            /* brand text purple (organizer-specified) */
  --ink-soft: #61537b;       /* unified to brand purple */
  --ink-mute: #9890ab;       /* lighter tint of brand purple for fine print */
  --line: #e6dce6;
  --line-strong: #d6c8d8;
  --pink: #f9a8d4;
  --pink-soft: #fbcfe8;
  --pink-deep: #db77a8;
  --lav: #d4b8f2;
  --peach: #fde7d4;
  --gold: #d9b27a;
  --daisy-petal: #ffffff;
  --daisy-core: #fde68a;     /* daisy goose-yellow center */
  --night: #0f0b22;          /* deep space */
  --night-2: #1a1438;
  --stardust: radial-gradient(circle at 30% 20%, #fff 0, transparent 40%), radial-gradient(circle at 80% 60%, #fff 0, transparent 30%);

  --font-display: "DM Serif Display", "Noto Serif JP", serif;
  --font-zh: 'HanaMin', "Noto Serif TC", serif;
  --font-en-display: 'Ognes', "DM Serif Display", serif;
  --font-deco: 'ParadiseSignature', cursive;
  --font-hand: 'Klee One', 'Caveat', "Noto Sans JP", cursive;
  --font-sans: "Outfit", "Noto Sans JP", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", "Outfit", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --shadow-sm: 0 2px 8px rgba(218, 119, 168, 0.06), 0 1px 2px rgba(26, 18, 38, 0.04);
  --shadow: 0 8px 28px rgba(218, 119, 168, 0.10), 0 2px 6px rgba(26, 18, 38, 0.04);
  --shadow-lg: 0 20px 60px rgba(218, 119, 168, 0.16), 0 4px 12px rgba(26, 18, 38, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ───── tiny utility classes ───── */
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; font-size: 11px; text-transform: uppercase; }
.jp { font-family: var(--font-jp); }
.serif { font-family: var(--font-display); }
.muted { color: var(--ink-mute); }
.row { display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1; }
button { font-family: inherit; cursor: pointer; }

/* ───── global cosmic backdrop ───── */
.cosmic-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 700px at 80% -10%, #f5d5e9 0%, transparent 55%),
    radial-gradient(1000px 600px at -10% 110%, #d8c4f5 0%, transparent 55%),
    radial-gradient(800px 500px at 50% 50%, #fbf2f7 0%, transparent 60%);
}
.cosmic-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(29,21,53,.45), transparent 60%),
    radial-gradient(1px 1px at 82% 32%, rgba(29,21,53,.3), transparent 60%),
    radial-gradient(1.6px 1.6px at 28% 78%, rgba(219,119,168,.6), transparent 60%),
    radial-gradient(1px 1px at 64% 88%, rgba(29,21,53,.35), transparent 60%),
    radial-gradient(1px 1px at 92% 64%, rgba(29,21,53,.3), transparent 60%),
    radial-gradient(1px 1px at 8% 62%, rgba(29,21,53,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 12%, rgba(212,184,242,.7), transparent 60%),
    radial-gradient(1px 1px at 36% 48%, rgba(247,201,72,.4), transparent 60%);
}

/* ───── top nav ───── */
.app-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 18px 36px;
  background: rgba(254, 246, 248, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; cursor: pointer; flex-shrink: 0; min-width: 0; }
.brand .b-mark {
  font-family: var(--font-display);
  font-size: 26px; letter-spacing: -0.01em; color: var(--ink);
  white-space: nowrap;
}
.brand .b-mark em { font-family: var(--font-zh); font-style: normal; color: var(--ink); }
.brand .b-koe { font-family: var(--font-display); color: var(--pink-deep); font-size: 1em; letter-spacing: -0.01em; margin-left: 4px; }
.brand .b-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-mute); text-transform: uppercase;
  white-space: nowrap;
}
.nav-crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; }
.nav-crumbs .sep { opacity: 0.5; }
.nav-crumbs .here { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ───── buttons & chips ───── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: all .18s ease;
  white-space: nowrap; flex-shrink: 0;
}
.btn:hover { border-color: var(--pink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.primary {
  background: var(--ink-deep); color: #fff; border-color: var(--ink-deep);
}
.btn.primary:hover { background: #2a1d3a; }
.btn.ghost { background: transparent; border-color: transparent; padding: 7px 12px; }
.btn.ghost:hover { background: var(--bg-2); border-color: var(--line); transform: none; box-shadow: none; }
.btn.pink {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);
  color: #fff; border: none;
}
.btn.pink:hover { filter: brightness(1.04); }
.btn.icon { padding: 8px; width: 36px; height: 36px; justify-content: center; }
.btn .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pink); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--bg-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.chip.active { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }

/* ───── view container ───── */
.app-main {
  position: relative; z-index: 1;
  padding: 36px 36px 120px;
  max-width: 1440px; margin: 0 auto;
}

/* ───── HOME — albums overview ───── */
.home-hero {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
  padding: 64px 8px 72px;
}
.home-hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 6vw, 86px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 16px 0 24px; color: var(--ink);
}
.home-hero h1 em { font-style: italic; color: var(--pink-deep); }
.home-hero .lede { font-size: 16px; color: var(--ink-soft); max-width: 480px; line-height: 1.65; }
.hero-meta { display: flex; gap: 28px; margin-top: 40px; }
.hero-meta .stat .n { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.hero-meta .stat .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); margin-top: 6px; }

.hero-art {
  position: relative; aspect-ratio: 4/5; max-height: 540px; justify-self: end; width: 100%;
}
.hero-art .blob {
  position: absolute; inset: 8% 6% 8% 6%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbcfe8 0%, #f9a8d4 40%, #db77a8 100%);
  filter: blur(0.5px);
  box-shadow: inset 0 -20px 40px rgba(255,255,255,0.4), 0 30px 60px rgba(219,119,168,0.25);
}
.hero-art .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(26,18,38,0.25);
  animation: spin 60s linear infinite;
}
.hero-art .ring.r2 { inset: 6%; border-color: rgba(219,119,168,0.4); animation-duration: 90s; animation-direction: reverse; }
.hero-art .star { position: absolute; font-family: var(--font-display); color: var(--ink); font-size: 22px; }
.hero-art .star.s1 { top: 4%; left: 22%; }
.hero-art .star.s2 { bottom: 6%; right: 14%; color: var(--pink-deep); }
.hero-art .label {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute);
  background: var(--bg); padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
}
@keyframes spin { to { transform: rotate(360deg); } }

.section-head {
  display: flex; align-items: baseline; gap: 16px; margin: 24px 8px 28px;
  padding-top: 32px; border-top: 1px solid var(--line);
}
.section-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; margin: 0; letter-spacing: -0.01em; }
.section-head .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.18em; }
.section-head .spacer { flex: 1; }

.albums-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  padding: 0 8px;
}
.album-card {
  position: relative; cursor: pointer; transition: transform .25s ease;
}
.album-card:hover { transform: translateY(-4px); }
.album-card .cover {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.album-card .cover .ph { position: absolute; inset: 0; }
.album-card .cover .floats {
  position: absolute; inset: 0; pointer-events: none;
}
.album-card .meta { padding: 14px 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.album-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0; }
.album-card .count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; }
.album-card .tag { font-family: var(--font-mono); font-size: 10px; color: var(--pink-deep); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }

/* photo placeholder */
.photo-ph {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.photo-ph::before {
  /* soft figure-suggestion blob — gives placeholders an inhabited feel */
  content: ""; position: absolute;
  left: 50%; top: 60%; width: 70%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.55) 0%, transparent 55%);
  pointer-events: none;
}
.photo-ph::after {
  /* soft vignette */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(29,21,53,0.08) 100%);
  pointer-events: none;
}
.photo-ph .stripe {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 14px);
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.photo-ph .lbl {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; color: rgba(26,18,38,0.45);
  letter-spacing: 0.22em; padding: 4px 9px;
  background: rgba(255,255,255,0.5); border-radius: 999px;
  backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.photo-ph:hover .lbl { opacity: 1; }
.photo-ph .corner {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 9px; color: rgba(26,18,38,0.35); letter-spacing: 0.16em;
}

/* ───── ALBUM view ───── */
.album-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px;
  padding: 16px 8px 32px; border-bottom: 1px solid var(--line); margin-bottom: 36px;
}
.album-head h1 {
  font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1; margin: 8px 0;
  letter-spacing: -0.02em;
}
.album-head h1 em { font-style: italic; color: var(--pink-deep); }
.album-head .sub { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; }
.album-head .actions { display: flex; gap: 10px; align-items: center; }
.album-desc { color: var(--ink-soft); max-width: 560px; margin-top: 12px; font-size: 14px; }

.layout-switch {
  display: inline-flex; padding: 3px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 999px;
  flex-shrink: 0;
}
.layout-switch button {
  border: none; background: transparent; padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.layout-switch button.on { background: var(--ink-deep); color: #fff; }

/* masonry / varied grid */
.varied-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
  gap: 16px;
  padding: 0 8px;
}
.varied-grid .photo {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; transition: transform .22s ease, box-shadow .22s ease;
}
.varied-grid .photo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.varied-grid .photo .photo-ph { border-radius: inherit; }

/* collage */
.collage {
  position: relative; padding: 20px 8px; min-height: 800px;
  margin-top: 96px;
}
.collage .photo {
  position: absolute; border-radius: 4px; overflow: hidden;
  background: var(--surface); padding: 10px 10px 36px; box-shadow: var(--shadow);
  cursor: pointer; transition: transform .25s ease, z-index 0s;
}
.collage .photo:hover { transform: translate(-50%, -50%) rotate(0deg) scale(1.05); z-index: 20; }
.collage.editing .photo { cursor: grab; outline: 2px dashed transparent; outline-offset: 5px; }
.collage.editing .photo:hover { transform: translate(-50%, -50%) rotate(0deg); outline-color: var(--pink-deep); z-index: 25; }
.collage.editing .photo:active { cursor: grabbing; }
.collage .photo .drag-grip {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255,255,255,0.92); border: 1px solid var(--pink-deep);
  display: grid; place-items: center;
  font-size: 12px; color: var(--pink-deep);
  box-shadow: 0 2px 6px rgba(29,21,53,0.18);
  pointer-events: none;
}
.collage .photo .ph-frame { width: 100%; aspect-ratio: 1; border-radius: 2px; overflow: hidden; }
.collage .photo .cap { position: absolute; bottom: 8px; left: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.14em; }

/* polaroid */
.polaroids {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px;
  padding: 0 8px;
}
.polaroids .photo {
  background: var(--surface); padding: 12px 12px 56px; border-radius: 3px;
  box-shadow: var(--shadow);
  cursor: pointer; transition: transform .25s ease;
  position: relative;
}
.polaroids .photo .ph-frame { aspect-ratio: 1; border-radius: 2px; overflow: hidden; position: relative; }
.polaroids .photo .cap {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--font-hand); font-size: 22px; color: var(--ink-soft);
  padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.polaroids .photo .cap.editable {
  margin: 0 14px; padding: 1px 6px; border-radius: 6px;
  cursor: text; outline: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.polaroids .photo .cap.editable:hover {
  background: rgba(219,119,168,0.08);
  box-shadow: 0 1px 0 rgba(219,119,168,0.4);
}
.polaroids .photo .cap.editable:focus {
  background: rgba(219,119,168,0.12);
  box-shadow: 0 1px 0 var(--pink-deep);
}
.polaroids .photo .cap.editable:empty::before {
  content: attr(data-ph); color: var(--ink-mute); opacity: 0.6;
}
.polaroids .photo .tape {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 64px; height: 18px;
  background: rgba(249, 168, 212, 0.5); border: 1px dashed rgba(219, 119, 168, 0.4);
}
.polaroids .photo:nth-child(odd) { transform: rotate(-1.5deg); }
.polaroids .photo:nth-child(even) { transform: rotate(1deg); }
.polaroids .photo:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 10; }

/* sticker indicator on photos */
.photo .sticker-count {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(4px);
  font-family: var(--font-mono); font-size: 10px; color: var(--ink);
}

/* edit mode overlay */
.varied-grid.editing .photo {
  cursor: move;
  outline: 2px dashed transparent; outline-offset: 4px;
}
.varied-grid.editing .photo:hover { outline-color: var(--pink-deep); }
.edit-banner {
  margin: 0 8px 18px; padding: 14px 18px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--pink-soft) 0%, var(--lav) 100%);
  display: flex; align-items: center; gap: 14px;
}
.edit-banner .mono { color: var(--ink); }
.edit-banner .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--ink-deep);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.4; transform: scale(0.8); } }

/* ───── LIGHTBOX ───── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26, 18, 38, 0.78); backdrop-filter: blur(8px);
  display: grid; grid-template-columns: 1fr 380px;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn { from { opacity: 0; } }

/* zoom-only lightbox (no side panel) */
.lightbox-zoom { grid-template-columns: 1fr; }
.lightbox-zoom .lb-photo {
  aspect-ratio: auto; height: auto; max-height: 100%; max-width: 100%;
  background: transparent; box-shadow: none;
}
.lightbox-zoom .lb-photo img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lb-close-float {
  position: fixed; top: 22px; right: 24px; z-index: 110;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,0.9); border: none; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow);
}
.lb-close-float:hover { background: #fff; }
.lb-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 48px;
  overflow: hidden;
}
.lb-photo {
  position: relative; max-width: 100%; max-height: 100%;
  aspect-ratio: 4/5; height: 100%;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lb-photo .photo-ph { background: linear-gradient(135deg, #fbcfe8, #e9d5ff); }
/* delete affordance for stickers shown in the lightbox */
.lb-photo .lb-sticker { cursor: default; }
.lb-sticker-del {
  position: absolute; top: -10px; right: -10px;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--pink-deep); color: #fff; border: 2px solid #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(26,18,38,0.3);
}
.lb-sticker-del:hover { transform: scale(1.12); }
.lb-sticker-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: #fff; background: rgba(26,18,38,0.55); padding: 6px 14px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
.lb-side {
  background: var(--surface);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
}
.lb-side .head {
  padding: 22px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.lb-side .head h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.lb-close { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; }
.lb-side .tabs {
  display: flex; border-bottom: 1px solid var(--line);
}
.lb-side .tabs button {
  flex: 1; padding: 14px; border: none; background: transparent;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); border-bottom: 2px solid transparent;
}
.lb-side .tabs button.on { color: var(--ink); border-bottom-color: var(--pink-deep); }
.lb-side .pane { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* comments */
.comments { display: flex; flex-direction: column; gap: 14px; }
.comments-empty {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-mute); text-align: center; padding: 32px 12px; line-height: 1.8;
}
.comment {
  display: flex; gap: 12px;
}
.comment .avatar {
  width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; color: var(--ink);
}
.comment .body { flex: 1; }
.comment .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.comment .name { font-weight: 600; font-size: 13px; }
.comment .time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.1em; }
.comment .text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

.comment-input {
  border-top: 1px solid var(--line); padding: 16px 24px;
  display: flex; gap: 10px; align-items: center;
}
.comment-input input {
  flex: 1; border: 1px solid var(--line); background: var(--bg-2);
  padding: 10px 14px; border-radius: 999px; font-family: inherit; font-size: 13px;
  color: var(--ink); outline: none;
}
.comment-input input:focus { border-color: var(--pink); background: var(--surface); }

/* sticker panel (in lightbox) */
.sticker-panel { display: flex; flex-direction: column; gap: 16px; }
.sticker-pack-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.sticker-pack-tabs button {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sticker-pack-tabs button.on { background: var(--ink-deep); color: #fff; border-color: var(--ink-deep); }

.sticker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.sticker-grid .sticker-item {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); display: grid; place-items: center;
  cursor: grab; transition: all .15s ease;
  min-width: 0; overflow: hidden; padding: 6px;
}
.sticker-grid .sticker-item > svg { max-width: 100%; max-height: 100%; height: auto; width: auto; }

/* quick sticker bar items (BookView) */
.qbar-sticker {
  width: 44px; height: 44px; padding: 6px; flex-shrink: 0;
  border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center; overflow: hidden;
  transition: all .15s ease;
}
.qbar-sticker > svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.sticker-grid .sticker-item:hover { border-color: var(--pink-deep); background: var(--surface); transform: scale(1.05); }
.sticker-grid .sticker-item:active { cursor: grabbing; }
.sticker-grid .sticker-item.selected { border-color: var(--pink-deep); background: var(--pink-soft); }

.hint {
  margin-top: auto; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px dashed var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-soft); line-height: 1.6;
}

/* placed sticker */
.placed-sticker {
  position: absolute; touch-action: none;
  display: grid; place-items: center;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.placed-sticker.selected { outline: 1.5px dashed var(--pink-deep); outline-offset: 4px; }
.placed-sticker.dragging { cursor: grabbing; }
.placed-sticker .sticker-handle {
  position: absolute; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--pink-deep);
  display: grid; place-items: center; font-size: 11px; color: var(--pink-deep);
  cursor: grab;
}
.placed-sticker .sticker-handle.rotate { bottom: -11px; right: -11px; cursor: alias; }
.placed-sticker .sticker-handle.delete { top: -11px; right: -11px; background: var(--pink-deep); color: #fff; border-color: var(--pink-deep); cursor: pointer; }

/* ───── UPLOAD modal ───── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26, 18, 38, 0.45); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 32px;
  animation: fadeIn .2s ease;
}
.modal {
  background: var(--surface); border-radius: var(--radius-xl); overflow: hidden;
  width: 100%; max-width: 720px; box-shadow: var(--shadow-lg);
  position: relative;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 28px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 0; flex: 1; }
.modal-body { padding: 28px; }
.modal-steps {
  display: flex; gap: 10px; padding: 0 28px 18px;
}
.modal-steps .step {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.modal-steps .step .bar { height: 3px; border-radius: 999px; background: var(--line); }
.modal-steps .step.on .bar { background: var(--pink-deep); }
.modal-steps .step.done .bar { background: var(--ink-deep); }
.modal-steps .step .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; }
.modal-steps .step.on .lbl, .modal-steps .step.done .lbl { color: var(--ink); }

.drop-zone {
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: 56px 24px; text-align: center;
  background: var(--surface-2);
  transition: all .2s ease;
}
.drop-zone.hot { border-color: var(--pink-deep); background: var(--pink-soft); }
.drop-zone .icon {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 18px;
  background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 28px; color: var(--pink-deep);
}
.drop-zone h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.drop-zone p { color: var(--ink-mute); margin: 0; font-size: 13px; }
.drop-zone .or { margin: 18px 0 10px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.14em; }

.upload-preview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px;
}
.upload-preview-grid .preview {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; position: relative;
  border: 1px solid var(--line);
}
.upload-preview-grid .preview .x {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 999px; background: rgba(255,255,255,0.9); border: none;
  display: grid; place-items: center; font-size: 12px;
}

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-row label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; }
.form-row input, .form-row textarea, .form-row select {
  border: 1px solid var(--line); background: var(--surface-2);
  padding: 11px 14px; border-radius: var(--radius); font-family: inherit; font-size: 14px;
  color: var(--ink); outline: none; resize: vertical;
}
.form-row input:focus, .form-row textarea:focus { border-color: var(--pink); background: var(--surface); }

.modal-foot {
  padding: 18px 28px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}

/* ───── responsive trims ───── */
/* (desktop trims live below; mobile section at end of file) */

/* ════════════════════════════════════════════════════════════════
   LANDING — closed book + opening transition
   ════════════════════════════════════════════════════════════════ */
.landing {
  position: fixed; inset: 0; z-index: 30;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 36px 40px;
  overflow: hidden;
}
.landing-meta-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.landing-meta-top .brand .b-mark { font-family: var(--font-display); font-size: 22px; }
.landing-meta-top .brand .b-mark em { font-family: var(--font-zh); font-style: normal; color: var(--ink); }
.landing-meta-top .brand .b-koe { font-size: 1.25em; }
.landing-meta-top .brand .b-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; }

.landing-meta-bot {
  text-align: center; padding-top: 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em; color: var(--ink-mute);
}

.landing-stage-wrap {
  display: grid; place-items: center;
  position: relative;
}

.landing-stage {
  position: relative;
  width: 820px; height: 540px;
  perspective: 2800px;
  -webkit-perspective: 2800px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.5, 0, .2, 1);
}

/* ─ orientations ─ */
/* Closed-book state: only the FRONT cover (cover-leaf, right half of stage)
   should read as the visible closed book — shift the whole stage left by a
   quarter of its width so that right half sits at the viewport center. When
   the user opens the book, the stage slides back to its true center so the
   inner spread (left half) is revealed. */
.landing.ori-floating .landing-stage {
  transform: translateX(-205px) rotateX(2deg) rotateY(-4deg);
  animation: book-float 7s ease-in-out infinite;
}
@keyframes book-float {
  0%, 100% { transform: translateX(-205px) rotateX(2deg) rotateY(-4deg) translateY(0); }
  50%      { transform: translateX(-205px) rotateX(2deg) rotateY(-4deg) translateY(-10px); }
}
.landing.ori-flat .landing-stage {
  transform: translateX(-205px) rotateX(28deg) rotateY(-10deg) rotateZ(-2deg);
}

/* When opening, slide back to center + neutralize tilt so cover-flip plays cleanly */
.landing.phase-lift .landing-stage,
.landing.phase-open .landing-stage,
.landing.phase-closing .landing-stage {
  transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: none;
  transition: transform 0.55s cubic-bezier(.5, 0, .2, 1);
}

/* Inner open spread — the right page reveals naturally as the cover rotates
   away (paper + text fade in together after the cover passes ~90°). The left
   page stays invisible — the cover-back face renders the same InsideCover
   content and is what the eye sees landing on the left; the FlipBook then
   takes over with matching content for a seamless hand-off. */
.landing-inner {
  position: absolute; inset: 0;
  display: flex;
}
.landing-page { width: 50%; height: 100%; opacity: 0; overflow: hidden; position: relative; }
.landing-page > * { opacity: 0; }

.landing-page.right {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,80,30,0.02) 0 2px, transparent 2px 4px);
  box-shadow: 0 0 0 1px var(--paper-edge) inset, inset 28px 0 36px -8px rgba(120,80,30,0.18), 0 12px 36px rgba(29,21,53,0.18);
  /* Right page is ALWAYS visible — in idle it's hidden behind the cover-leaf
     (z-index 5 vs default 0). When the cover flips away, the right page is
     already there underneath, like a real book. No fade needed. */
  opacity: 1;
}
.landing-page.right > * { opacity: 1; }

.landing-page.left {
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,80,30,0.02) 0 2px, transparent 2px 4px);
  box-shadow: 0 0 0 1px var(--paper-edge) inset, inset -28px 0 36px -8px rgba(120,80,30,0.18), 0 12px 36px rgba(29,21,53,0.18);
  /* Left page stays hidden during landing — cover-back face handles the visual. */
}

.landing.phase-open .landing-page.right,
.landing.phase-open .landing-page.right > * { opacity: 1; }

/* Hand-off fade — landing sits ABOVE the freshly-mounted BookView and
   dissolves down to it. Pure opacity (no scale) so it doesn't read as the
   page "zooming/reloading". */
.landing-fading-out {
  position: fixed; inset: 0; z-index: 50;
  animation: landing-fade-out 0.6s ease forwards;
  pointer-events: none;
}
@keyframes landing-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.book-view-wrap.fading-in {
  animation: book-fade-in 0.6s ease forwards;
}
@keyframes book-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Closing — the landing (re-mounted in its closing phase) sits ABOVE the book
   and the book cross-fades out underneath to reveal the open spread, then the
   cover swings shut. */
.landing-closing-wrap {
  position: fixed; inset: 0; z-index: 50;
}
.book-view-wrap.fading-out {
  animation: book-fade-out 0.4s ease forwards;
  pointer-events: none;
}
@keyframes book-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Book's top toolbar / close-btn arrive LATER so the swap from
   landing-chips → book-controls doesn't read as a screen refresh.
   Book pages settle first, controls slide in after. */
.book-view-wrap.fading-in .book-view-top,
.book-view-wrap.fading-in .book-close-btn {
  animation: book-chrome-in 0.5s ease 0.45s both;
}
@keyframes book-chrome-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-inner-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 14px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(29,21,53,0.18) 0%, rgba(29,21,53,0.45) 40%, rgba(29,21,53,0.45) 60%, rgba(29,21,53,0.18) 100%);
  opacity: 0;
  transition: opacity 0.3s ease 0.8s;
}
.landing.phase-open .landing-inner-spine,
.landing.phase-closing .landing-inner-spine { opacity: 1; }

/* Cover leaf — sits on the right of the open-book layout when closed */
.landing-cover-leaf {
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.5s ease;
  z-index: 5;
}
.landing-cover-leaf:hover { transform: rotateY(-3deg) translateZ(8px); }
.landing.phase-lift .landing-cover-leaf {
  animation: cover-lift 0.45s ease-out forwards;
}
.landing.phase-open .landing-cover-leaf {
  animation: cover-flip 1.05s cubic-bezier(.55, .1, .3, 1) forwards;
}
/* Closing — reverse of open: cover swings back from fully-open (-180°) up
   through the lifted pose and settles shut (0°) in one motion. The 0.35s
   delay lets the book view cross-fade out to the spread first. */
.landing.phase-closing .landing-cover-leaf {
  animation: cover-close 1.15s cubic-bezier(.5, .05, .35, 1) 0.35s both;
}
@keyframes cover-lift {
  0% { transform: rotateY(0) translateZ(0); }
  100% { transform: rotateY(-12deg) translateZ(40px); }
}
@keyframes cover-flip {
  0% { transform: rotateY(-12deg) translateZ(40px); }
  100% { transform: rotateY(-180deg) translateZ(0); }
}
@keyframes cover-close {
  0%   { transform: rotateY(-180deg) translateZ(0); }
  68%  { transform: rotateY(-12deg) translateZ(40px); }
  100% { transform: rotateY(0deg) translateZ(0); }
}

/* Book thickness on the LEFT — fakes the spine of a closed book.
   The visible book in idle is the right half of the stage, so the spine
   sits at stage 50% (where the cover-leaf's left edge / fold lives). */
.landing-thickness {
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 14px);
  width: 28px;
  background:
    linear-gradient(90deg, #7a5a2a 0%, #a48655 12%, #c9a974 35%, #e1c697 55%, #c9a974 75%, #a48655 92%, #7a5a2a 100%);
  background-image:
    linear-gradient(90deg, #7a5a2a 0%, #a48655 12%, #c9a974 35%, #e1c697 55%, #c9a974 75%, #a48655 92%, #7a5a2a 100%),
    repeating-linear-gradient(0deg, rgba(94,55,18,0.10) 0 1px, transparent 1px 2.5px);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(94,55,18,0.45),
    -1px 8px 18px rgba(29,21,53,0.22),
    1px 8px 18px rgba(29,21,53,0.22);
  z-index: 4;
  opacity: 1;
  transition: opacity 0.35s ease;
  display: flex; align-items: center; justify-content: center;
}
.spine-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.42em;
  color: rgba(253, 240, 215, 0.92); text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(94,55,18,0.6), 0 0 4px rgba(94,55,18,0.4);
  white-space: nowrap;
}
.spine-title .dot { color: rgba(253,200,140,0.85); padding: 0 2px; }
.landing.phase-open .landing-thickness,
.landing.phase-closing .landing-thickness { opacity: 0; }

/* Back of the closed book — used to render as the LEFT half of the stage,
   but viewing a closed book straight-on you only see the FRONT cover. We now
   keep this hidden in idle too; the shifted stage puts it off-screen left and
   the inner spread underneath handles the reveal when the book opens. */
.landing-back-cover {
  position: absolute; top: 0; left: 0;
  width: calc(50% - 14px); height: 100%;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  border-radius: 6px 2px 2px 6px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.45) 0%, transparent 60%),
    linear-gradient(155deg, #fbf3e3 0%, #f4e5cb 55%, #e9d2b4 100%);
  box-shadow:
    inset 3px 0 4px rgba(255,255,255,0.5),
    inset -3px 0 8px rgba(120,80,30,0.22),
    0 30px 60px rgba(29,21,53,0.32),
    0 6px 12px rgba(29,21,53,0.18);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 44px 48px;
  transition: opacity 0.35s ease;
}
.landing-back-cover::before {
  content: ""; position: absolute; inset: 22px;
  border: 1px solid rgba(29,21,53,0.14);
  border-radius: 1px; pointer-events: none;
}
.landing-back-cover::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(120,80,30,0.04) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 30% 70%, rgba(255,200,140,0.18) 0%, transparent 50%);
  mix-blend-mode: multiply; pointer-events: none;
  border-radius: inherit;
}
.bc-deco {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; z-index: 2;
}
.bc-deco .bc-glyph { font-family: var(--font-display); font-size: 28px; color: var(--pink-deep); line-height: 1; }
.bc-deco .bc-line { width: 64px; height: 1px; background: rgba(29,21,53,0.25); }
.bc-deco .bc-mono { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em; color: var(--ink-soft); text-transform: uppercase; }

.bc-mid {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; position: relative; z-index: 2;
}
.bc-mid .bc-quote {
  font-family: var(--font-jp); font-size: 12px; line-height: 1.9; color: var(--ink-soft);
  letter-spacing: 0.04em;
  max-width: 240px;
}

.bc-foot {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; position: relative; z-index: 2;
}
.bc-foot .bc-mono { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.28em; color: var(--ink-mute); text-transform: uppercase; }
.bc-foot .bc-echos {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 18px;
  border: 1px solid rgba(29,21,53,0.12);
  border-radius: 2px;
  background: rgba(255,255,255,0.28);
}
.bc-foot .bc-echo-count {
  font-family: var(--font-display); font-size: 26px; color: var(--ink);
  font-style: italic; line-height: 1;
}

.landing.phase-lift .landing-back-cover,
.landing.phase-open .landing-back-cover,
.landing.phase-closing .landing-back-cover { opacity: 0; }

/* Stacked page edges peeking top + bottom (suggests bound paper inside).
   In idle the visible book is only the right half of the stage, so the edges
   sit aligned with the cover-leaf. On lift/open they just fade out — no
   sliding left across the open spread (that read as a glitchy "sweep"). */
.landing-page-edge {
  position: absolute;
  left: calc(50% + 6px); right: 6px;
  height: 6px;
  background:
    linear-gradient(180deg, #e8d4b0 0%, #d9c098 50%, #b89967 100%);
  background-image:
    linear-gradient(180deg, #e8d4b0 0%, #d9c098 50%, #b89967 100%),
    repeating-linear-gradient(90deg, rgba(94,55,18,0.16) 0 1px, transparent 1px 3px);
  z-index: 6;
  transition: opacity 0.35s ease;
  border-radius: 2px;
}
.landing.phase-lift .landing-page-edge,
.landing.phase-open .landing-page-edge,
.landing.phase-closing .landing-page-edge { opacity: 0; }
.landing-page-edge.top { top: -3px; }
.landing-page-edge.bot { bottom: -3px; }
.landing.phase-open .landing-page-edge { opacity: 0; }

/* Bookmark ribbon hanging out the top */
.landing-bookmark {
  position: absolute;
  top: -6px;
  left: calc(50% + 100px);
  width: 16px; height: 150px;
  background:
    linear-gradient(180deg, #db77a8 0%, #c14d8a 60%, #a83a75 95%);
  box-shadow:
    1px 2px 6px rgba(29,21,53,0.32),
    inset -2px 0 4px rgba(0,0,0,0.18),
    inset 2px 0 2px rgba(255,255,255,0.18);
  z-index: 8;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
  transition: opacity 0.35s ease;
}
.landing.phase-open .landing-bookmark,
.landing.phase-closing .landing-bookmark { opacity: 0; }

/* Cover faces */
.landing-cover-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
}
/* Belt-and-braces: backface-visibility can fail when both faces are coplanar.
   Hard-hide the back face until the cover starts flipping; reveal it during
   lift+open so the flip reveals it normally. */
.landing-cover-face.back {
  visibility: hidden;
}
.landing.phase-lift .landing-cover-face.back,
.landing.phase-open .landing-cover-face.back,
.landing.phase-closing .landing-cover-face.back {
  visibility: visible;
}
.landing-cover-face.front {
  transform: translateZ(9px);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 60%),
    linear-gradient(155deg, #fbf3e3 0%, #f4e5cb 55%, #e9d2b4 100%);
  box-shadow:
    inset -3px 0 8px rgba(120,80,30,0.18),
    inset 3px 0 4px rgba(255,255,255,0.5),
    0 30px 60px rgba(29,21,53,0.32),
    0 6px 12px rgba(29,21,53,0.18);
}
.landing-cover-face.front::before {
  /* embossed decorative border */
  content: ""; position: absolute; inset: 22px;
  border: 1px solid rgba(29,21,53,0.16);
  border-radius: 1px;
  pointer-events: none;
}
.landing-cover-face.front::after {
  /* paper texture */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(120,80,30,0.03) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 70% 30%, rgba(255,200,140,0.18) 0%, transparent 50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.landing-cover-face.back {
  transform: rotateY(180deg) translateZ(9px);
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.5) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,80,30,0.02) 0 2px, transparent 2px 4px);
  box-shadow: 0 0 0 1px var(--paper-edge) inset, inset 28px 0 36px -8px rgba(120,80,30,0.18);
}

/* Page-block edges connecting the two cover faces — the 18px-thick fore/top/
   bottom edges look like stacked cream pages, so the cover reads as a chunky
   hardcover photo book while it flips. */
.landing-cover-edge {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    linear-gradient(90deg, #efe0c2 0%, #e6d2ad 45%, #d4ba8a 100%);
  background-image:
    linear-gradient(90deg, #efe0c2 0%, #e6d2ad 45%, #d4ba8a 100%),
    repeating-linear-gradient(180deg, rgba(94,55,18,0.10) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 6px rgba(94,55,18,0.18);
  pointer-events: none;
}
/* fore-edge (outer right) — where the pages open */
.landing-cover-edge.fore {
  top: 0; right: 0; height: 100%; width: 18px;
  transform-origin: right center;
  transform: rotateY(90deg);
  border-radius: 0 2px 2px 0;
}
/* top + bottom edges */
.landing-cover-edge.top,
.landing-cover-edge.bot {
  left: 0; width: 100%; height: 18px;
  background-image:
    linear-gradient(90deg, #efe0c2 0%, #e6d2ad 45%, #d4ba8a 100%),
    repeating-linear-gradient(90deg, rgba(94,55,18,0.10) 0 1px, transparent 1px 3px);
}
.landing-cover-edge.top { top: 0; transform-origin: top center; transform: rotateX(-90deg); }
.landing-cover-edge.bot { bottom: 0; transform-origin: bottom center; transform: rotateX(90deg); }

/* Cover content (inside the front face) */
.cover-content {
  position: absolute; inset: 22px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  z-index: 2;
}
/* Cosmic nebula halo behind the title — evokes "voice from a faraway universe" */
.cover-content::before {
  content: "";
  position: absolute;
  left: 50%; top: 48%;
  width: 280px; height: 280px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(219, 119, 168, 0.18) 0%, rgba(212, 184, 242, 0.10) 35%, transparent 65%);
  pointer-events: none; z-index: -1;
}
/* Gold corner flourishes */
.cover-content::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    /* TL */ radial-gradient(circle at 8% 6%, rgba(184, 142, 76, 0.55) 0 0.8px, transparent 1.4px),
    /* TR */ radial-gradient(circle at 92% 6%, rgba(184, 142, 76, 0.55) 0 0.8px, transparent 1.4px),
    /* BL */ radial-gradient(circle at 8% 94%, rgba(184, 142, 76, 0.55) 0 0.8px, transparent 1.4px),
    /* BR */ radial-gradient(circle at 92% 94%, rgba(184, 142, 76, 0.55) 0 0.8px, transparent 1.4px);
  pointer-events: none;
}
.cv-corner {
  position: absolute; width: 28px; height: 28px;
  pointer-events: none;
  color: rgba(184, 142, 76, 0.55);
}
.cv-corner.tl { top: -2px; left: -2px; }
.cv-corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.cv-corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.cv-corner.br { bottom: -2px; right: -2px; transform: scale(-1, -1); }
.cv-top {
  display: flex; justify-content: center; align-items: center;
}
.cv-stamp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em; color: var(--ink-soft); text-transform: uppercase; }
.cv-mark { font-family: var(--font-display); font-size: 24px; color: var(--pink-deep); line-height: 1; }
.cv-mid {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px;
  padding: 16px 0;
}
.cv-title-block {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.cv-title-zh {
  font-family: var(--font-zh); font-size: 72px; line-height: 0.95; letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  position: relative; z-index: 2;
}
.cv-title-koe {
  font-family: var(--font-display);          /* high-contrast serif (Didone) */
  font-size: 54px; letter-spacing: -0.01em; line-height: 1;
  color: var(--pink-deep);
  margin-top: -24px;          /* overlap up into the lower strokes of 心咲 */
  position: relative; z-index: 3;
}
/* sparkle at the top-right of 咲, matching the official logo */
.cv-spark {
  position: absolute; top: -2px; right: -18px;
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  color: var(--pink-deep);
  pointer-events: none;
}
.cv-divider {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px;
}
.cv-divider .cv-rule {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 142, 76, 0.6), transparent);
}
.cv-divider .cv-divider-mark {
  font-family: var(--font-display); font-size: 12px; color: rgba(184, 142, 76, 0.9);
}
.cv-title-en { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.04em; }
.cv-title-en em { font-style: italic; color: var(--pink-deep); }
.cv-tag-jp { font-family: var(--font-zh); font-size: 14px; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.06em; }
.cv-tag-en { font-family: var(--font-display); font-style: italic; font-size: 12px; color: var(--ink-mute); }
.cv-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cv-foot-date {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em;
  color: var(--ink-soft); text-transform: uppercase; white-space: nowrap;
  text-align: center;
}
.cv-foot-row { display: flex; justify-content: center; align-items: baseline; gap: 28px; }
.cv-foot-stamp {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.28em;
  color: var(--ink-soft); text-transform: uppercase; white-space: nowrap;
}

/* Inside cover content */
.inside-cover {
  position: absolute; inset: 0;
  padding: 56px 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 22px;
}
.ic-deco { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3em; color: var(--ink-mute); }
.ic-text { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ic-tag-jp { font-family: var(--font-zh); font-size: 28px; line-height: 1.3; color: var(--ink); }
.ic-tag-en { font-family: var(--font-deco); font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.ic-sig { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute); margin-top: 16px; }

/* First content page (right after open) */
.first-content {
  position: absolute; inset: 0;
  padding: 56px 44px;
  display: flex; flex-direction: column;
}
.fc-glyph { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute); }
.fc-title { font-family: var(--font-zh); font-weight: 400; font-size: 48px; line-height: 1; margin: 16px 0 24px; letter-spacing: 0.02em; color: var(--ink); }
.fc-title em { font-style: normal; color: var(--pink-deep); }
.fc-koe { font-family: var(--font-en-display); letter-spacing: 0.12em; display: block; font-size: 0.7em; color: var(--ink); }
.fc-body { font-family: var(--font-jp); font-size: 14px; line-height: 1.9; color: var(--ink-soft); margin: 0; }
.fc-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.fc-from { font-family: var(--font-sans); font-size: 14px; color: var(--ink); white-space: nowrap; }

/* Hint button */
.landing-hint-wrap { display: grid; place-items: center; padding-top: 22px; min-height: 80px; }
.landing-hint {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 28px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: all 0.25s ease;
}
.landing-hint:hover { transform: translateY(-2px); background: #fff; border-color: var(--pink-deep); }
.landing-hint .lh-arrow { font-family: var(--font-display); font-size: 18px; color: var(--pink-deep); }
.landing-hint .lh-label { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--ink); }
.landing-hint .lh-en { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; }
.landing-opening-msg {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-soft); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.landing-opening-msg .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--pink-deep); animation: pulse 1.2s ease-in-out infinite; }

/* Close button when book is open */
.book-close-btn {
  position: fixed; top: 22px; left: 28px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-soft); text-transform: uppercase;
  cursor: pointer; transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.book-close-btn:hover { border-color: var(--pink-deep); color: var(--ink); transform: translateY(-1px); }
.book-close-btn svg { color: var(--ink-soft); }

/* ════════════════════════════════════════════════════════════════
   BOOK VIEW (after opening the memorial book)
   ════════════════════════════════════════════════════════════════ */
.book-view {
  position: relative; z-index: 2;
  padding: 28px 36px 80px;
  padding-top: 76px;
  max-width: 1280px; margin: 0 auto;
}
.book-view-top {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px;
  background: rgba(255, 250, 240, 0.7);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(216, 192, 152, 0.45);
  border-radius: 999px;
  margin-bottom: 8px;
  box-shadow: 0 6px 20px -8px rgba(29, 21, 53, 0.12);
}
.book-view-top .brand .b-mark { font-family: var(--font-display); font-size: 22px; }
.book-view-top .brand .b-mark em { font-family: var(--font-zh); font-style: normal; color: var(--ink); }
.book-view-top .brand .b-koe { font-size: 1.25em; }
.book-view-top .brand .b-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; }
.book-view-top .row { gap: 10px; flex-wrap: nowrap; }
/* Editing tools: inline on desktop (collapse trigger hidden) */
.tools-toggle { display: none; }
.book-view-top .tools-group { display: flex; align-items: center; gap: 10px; }

/* ════════════════════════════════════════════════════════════════
   FLIPBOOK — page-turn album viewer
   ════════════════════════════════════════════════════════════════ */

.flipbook-wrap {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 8px 64px;
  user-select: none;
}
.flipbook-table {
  position: relative;
  padding: 40px 40px 96px;
  background:
    /* warm halo cradling the book */
    radial-gradient(ellipse 65% 55% at 50% 48%, rgba(253, 232, 200, 0.55) 0%, rgba(253, 232, 200, 0.18) 45%, transparent 72%),
    /* ground shadow */
    radial-gradient(ellipse 60% 14% at 50% 96%, rgba(29,21,53,0.30) 0%, rgba(29,21,53,0.05) 60%, transparent 78%);
}
.flipbook-table::before {
  /* tiny floating starlight bits to keep cosmic continuity */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 18% 22%, rgba(247,201,72,.5), transparent 60%),
    radial-gradient(1px 1px at 82% 28%, rgba(219,119,168,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 78%, rgba(212,184,242,.6), transparent 60%),
    radial-gradient(1px 1px at 92% 72%, rgba(247,201,72,.4), transparent 60%);
  opacity: 0.6;
}
.flipbook {
  position: relative;
  width: 920px; height: 600px;
  perspective: 2600px;
  z-index: 1;
}
.fb-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 14px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(29,21,53,0.18) 0%, rgba(29,21,53,0.45) 40%, rgba(29,21,53,0.45) 60%, rgba(29,21,53,0.18) 100%);
  z-index: 4;
  pointer-events: none;
}
.fb-spine::before, .fb-spine::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 999px; background: var(--gold);
  border: 1px solid var(--ink);
}
.fb-spine::before { top: 14%; }
.fb-spine::after { bottom: 14%; }

.fb-shadow-base {
  position: absolute; inset: -20px -10px -10px -10px;
  background:
    radial-gradient(60% 30% at 50% 90%, rgba(29,21,53,0.35), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}

.fb-static {
  position: absolute; top: 0; height: 100%; width: 50%;
  z-index: 1;
}
.fb-static.left { left: 0; }
.fb-static.right { right: 0; }

.fb-leaf {
  position: absolute; top: 0; right: 0; height: 100%; width: 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-origin: left center;
  z-index: 5;
  will-change: transform;
}
@keyframes fb-flip-next {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-180deg); }
}
@keyframes fb-flip-prev {
  from { transform: rotateY(-180deg); }
  to   { transform: rotateY(0deg); }
}
.fb-leaf.anim-next { animation: fb-flip-next 0.9s cubic-bezier(.55, .1, .3, 1) forwards; }
.fb-leaf.anim-prev { animation: fb-flip-prev 0.9s cubic-bezier(.55, .1, .3, 1) forwards; }
.fb-page {
  position: absolute; inset: 0;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,80,30,0.02) 0 2px, transparent 2px 4px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--paper-edge) inset,
    0 8px 24px rgba(29,21,53,0.12);
}
.fb-page.face-back { transform: rotateY(180deg); }
.fb-page.page-left {
  box-shadow:
    0 0 0 1px var(--paper-edge) inset,
    inset -28px 0 36px -8px rgba(120,80,30,0.18),  /* spine shading */
    0 8px 24px rgba(29,21,53,0.12);
}
.fb-page.page-right {
  box-shadow:
    0 0 0 1px var(--paper-edge) inset,
    inset 28px 0 36px -8px rgba(120,80,30,0.18),
    0 8px 24px rgba(29,21,53,0.12);
}

/* page content padding */
.fb-page-inner {
  position: absolute; inset: 28px 36px; display: flex; flex-direction: column;
}
.fb-page.page-left .fb-page-inner { left: 36px; right: 44px; }
.fb-page.page-right .fb-page-inner { left: 44px; right: 36px; }

.fb-pagenum {
  position: absolute; bottom: 14px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; color: var(--ink-mute);
}
.fb-page.page-left .fb-pagenum { left: 36px; }
.fb-page.page-right .fb-pagenum { right: 36px; }

.fb-pageglyph {
  position: absolute; top: 22px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em; color: var(--ink-mute);
}
.fb-page.page-left .fb-pageglyph { left: 36px; }
.fb-page.page-right .fb-pageglyph { right: 36px; }

/* corner click areas (next/prev) */
.fb-corner {
  position: absolute; top: 0; bottom: 0; width: 80px; z-index: 8;
  cursor: pointer;
}
.fb-corner.next { right: 0; }
.fb-corner.prev { left: 0; }
.fb-corner::after { display: none; }
.fb-corner-arrow {
  position: absolute; bottom: 18px; width: 28px; height: 28px;
  border-radius: 999px; background: var(--ink-deep); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.fb-corner.next .fb-corner-arrow { right: 18px; }
.fb-corner.prev .fb-corner-arrow { left: 18px; }
.fb-corner:hover .fb-corner-arrow { opacity: 1; }

/* book nav (below) */
.fb-nav {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
}
.fb-nav .scrub {
  flex: 1; min-width: 220px; height: 4px; border-radius: 999px;
  background: var(--line); position: relative; overflow: hidden;
}
.fb-nav .scrub .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--pink) 0%, var(--lav) 100%);
  border-radius: 999px;
  transition: width .4s ease;
}
.fb-nav .progress {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--ink-mute);
}

/* ───── PAGE TEMPLATES ───── */
.tpl-cover {
  background: linear-gradient(160deg, #ffffff 0%, #fdf6e8 55%, #f9e3d3 100%);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; padding: 56px 44px;
  overflow: hidden;
}
.tpl-cover::before {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid var(--ink); opacity: 0.18;
  pointer-events: none;
}
.tpl-cover .stamp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-soft); text-transform: uppercase;
}
.tpl-cover h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 64px; line-height: 0.96; letter-spacing: -0.01em;
  margin: 14px 0 0; color: var(--ink);
}
.tpl-cover h1 em { font-style: italic; color: var(--pink-deep); }
.tpl-cover .jp-sub {
  font-family: var(--font-jp); font-size: 14px; color: var(--ink-soft);
  margin-top: 18px; letter-spacing: 0.06em;
}
.tpl-cover .daisy-stack {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
}
.tpl-cover .credit {
  position: absolute; bottom: 28px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.24em; color: var(--ink-mute);
}

.tpl-preface {
  position: absolute; inset: 0; padding: 64px 44px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
}
.tpl-preface .glyph { font-family: var(--font-display); font-size: 28px; color: var(--pink-deep); margin-bottom: 24px; }
.tpl-preface .tag-jp {
  font-family: var(--font-zh); font-weight: 400;
  font-size: 32px; line-height: 1.3; color: var(--ink);
  max-width: 360px;
}
.tpl-preface .tag-en {
  font-family: var(--font-deco); font-size: 18px;
  color: var(--ink-soft); margin-top: 16px; max-width: 320px; line-height: 1.6;
}
.tpl-preface .sig {
  margin-top: 32px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ink-mute);
}

/* photo layouts on book pages */
.tpl-photo { position: absolute; inset: 0; padding: 30px 38px; }
.tpl-photo.left { padding-right: 50px; }
.tpl-photo.right { padding-left: 50px; }
.tpl-photo .head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-mute);
}
.tpl-photo .head .num { color: var(--ink); }

.tpl-1 .grid { display: grid; grid-template-rows: 1fr; gap: 10px; height: 100%; }
.tpl-1 .frame { position: relative; border-radius: 4px; overflow: hidden; }
.tpl-1 .cap-row { display: flex; align-items: baseline; gap: 10px; padding-top: 4px; }
.tpl-1 .cap-row .date { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: 0.12em; }
.tpl-1 .cap-row .title { font-family: var(--font-display); font-style: italic; font-size: 18px; color: var(--ink); flex: 1; }

.tpl-2 .grid { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; height: 100%; }
.tpl-2 .frame { position: relative; border-radius: 4px; overflow: hidden; }

.tpl-3 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.tpl-3 .frame { position: relative; border-radius: 4px; overflow: hidden; }
.tpl-3 .frame.span2 { grid-column: span 2; }
/* When tpl-3 wraps a BookPhoto inside the span2 grid cell, make the inner frame fill it. */
.tpl-3 .frame.span2 > .frame { position: absolute; inset: 0; }

.tpl-4 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 100%; }
.tpl-4 .frame { position: relative; border-radius: 4px; overflow: hidden; }

/* ───── freeform collage page ───── */
.tpl-collage {
  position: absolute; inset: 0; overflow: hidden;
}
.collage-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-mute); text-transform: uppercase; white-space: nowrap;
  pointer-events: none; text-align: center;
}
.tpl-collage.editing { background:
  repeating-linear-gradient(45deg, rgba(219,119,168,0.025) 0 8px, transparent 8px 16px); }

.collage-photo {
  position: absolute; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.collage-photo .cp-frame {
  position: relative;
  background: #fff; padding: 5px 5px 5px;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(29,21,53,0.22), 0 1px 3px rgba(29,21,53,0.12);
}
.collage-photo .cp-frame img { border-radius: 2px; }
.collage-photo .cp-ph { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.collage-photo.editing .cp-frame { outline: 1.5px dashed transparent; }
.collage-photo.editing:hover .cp-frame { outline-color: rgba(219,119,168,0.5); }
.collage-photo.selected .cp-frame { outline: 1.5px solid var(--pink-deep); }
.collage-photo .sticker-handle {
  position: absolute; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--pink-deep);
  display: grid; place-items: center; font-size: 11px; color: var(--pink-deep);
  cursor: grab; z-index: 3;
}
.collage-photo .sticker-handle.rotate { bottom: -11px; right: -11px; cursor: alias; }
.collage-photo .sticker-handle.delete { top: -11px; right: -11px; background: var(--pink-deep); color: #fff; }

/* page-side note (handwriting) */
.tpl-note {
  position: absolute; inset: 0; padding: 56px 44px;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(120,80,30,0.06) 28px 29px);
}
.tpl-note .note-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 10px; font-weight: 400; }
.tpl-note .note-body {
  font-family: var(--font-jp); font-size: 14px; line-height: 28px;
  color: var(--ink-soft);
}
.tpl-note .sig-line { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.tpl-note .sig-line .sig {
  font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink);
}
.tpl-note .sig-line .stamp {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--ink-mute);
}

/* sticker overlay on book photos */
.book-stickers { position: absolute; inset: 0; pointer-events: none; }
/* Page-level sticker board — stickers placed on the album page itself */
.album-board-wrap { position: relative; }
.sticker-board { position: absolute; inset: 0; z-index: 30; }
.book-stickers .placed-mini { position: absolute; transform: translate(-50%,-50%) rotate(var(--r, 0deg)) scale(var(--s, 1)); }

/* end page */
.tpl-closing {
  position: absolute; inset: 0; padding: 60px 44px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.tpl-closing h2 { font-family: var(--font-display); font-weight: 400; font-size: 36px; margin: 16px 0 6px; font-style: italic; }
.tpl-closing .echo { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--ink-mute); }
.tpl-closing .nums { display: flex; gap: 28px; margin-top: 32px; }
.tpl-closing .nums .n { font-family: var(--font-display); font-size: 28px; }
.tpl-closing .nums .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-mute); margin-top: 4px; }

/* clickable area on a book photo frame */
.fb-frame-click { cursor: zoom-in; }
.fb-frame-click .sticker-count { top: 8px; left: 8px; font-size: 9px; padding: 3px 7px; }

/* responsive */
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
  .albums-grid { grid-template-columns: 1fr 1fr; }
  .varied-grid { grid-template-columns: repeat(2, 1fr); }
  .polaroids { grid-template-columns: repeat(2, 1fr); }
  .lightbox { grid-template-columns: 1fr; }
  .lb-side { display: none; }
  .flipbook { width: 100%; max-width: 720px; height: 480px; }
  .flipbook-table { padding: 24px 12px; }
}
@media (max-width: 720px) {
  .flipbook { height: 400px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤ 600px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Global ── */
  .app-nav { padding: 12px 18px; gap: 10px; }
  .app-main { padding: 18px 16px 80px; }

  /* ── Landing wrapper ── */
  .landing { padding: 14px 16px 18px; }
  /* Stack brand + chips so they never overflow the narrow viewport */
  .landing-meta-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .landing-meta-top .brand .b-mark { font-size: 18px; }
  .landing-meta-top .brand .b-sub { display: none; }
  .landing-meta-top .row { flex-wrap: wrap; gap: 6px; }
  .landing-meta-bot { font-size: 9px; letter-spacing: 0.2em; }

  /* Mobile shows ONLY the closed cover (no page-flip). Drop the desktop
     "stage = 2× cover, reveal the right half" trick — on a narrow screen a
     stage wider than the viewport can't be centered reliably (it overflows to
     the right). Instead the stage IS the cover: a single full-width cover-leaf
     with NO horizontal shift, so normal centering keeps it dead-center. */
  .landing-stage {
    width: min(80vw, 330px);
    aspect-ratio: 72 / 100;
    height: auto;
    perspective: 1400px;
    -webkit-perspective: 1400px;
  }
  .landing-cover-leaf { left: 0; right: auto; width: 100%; }
  .landing.ori-floating .landing-stage {
    transform: rotateX(2deg) rotateY(-4deg);
    animation: book-float-sm 7s ease-in-out infinite;
  }
  @keyframes book-float-sm {
    0%, 100% { transform: rotateX(2deg) rotateY(-4deg) translateY(0); }
    50%       { transform: rotateX(2deg) rotateY(-4deg) translateY(-6px); }
  }
  .landing.ori-flat .landing-stage {
    transform: rotateX(20deg) rotateY(-6deg) rotateZ(-1deg);
  }
  /* Closed-book chrome assumed a center fold at 50% — hide the bits that would
     otherwise land in the middle of the single cover. */
  .landing-thickness, .landing-bookmark,
  .landing-page-edge, .landing-back-cover { display: none; }
  .landing.phase-lift .landing-stage,
  .landing.phase-open .landing-stage,
  .landing.phase-closing .landing-stage {
    transform: translateX(0) rotateX(0) rotateY(0) rotateZ(0);
    animation: none;
  }

  /* Decorative chrome proportional to the smaller stage */
  .landing-thickness { left: calc(50% - 11px); width: 22px; }
  .landing-page-edge { left: calc(50% + 4px); right: 4px; height: 4px; }
  .landing-bookmark  { left: calc(50% + 54px); width: 14px; height: 124px; top: -4px; }

  /* Cover content — fonts scaled up for the bigger 280×400 book face */
  .cover-content { inset: 14px; padding: 20px 18px; }
  .cv-stamp  { font-size: 8.5px; letter-spacing: 0.16em; }
  .cv-mark   { font-size: 20px; }
  .cv-mid    { gap: 8px; padding: 8px 0; }
  .cv-corner { width: 22px; height: 22px; }
  .cv-divider .cv-rule { width: 40px; }
  .cv-title-zh  { font-size: 50px; }
  .cv-title-koe { font-size: 50px; letter-spacing: -0.01em; margin-top: -24px; }
  .cv-spark     { font-size: 16px; top: -1px; right: -14px; }
  .cv-title-en  { font-size: 11px; }
  .cv-tag-jp    { font-size: 17px; margin-top: 6px; }
  .cv-tag-en    { font-size: 10px; }
  .cv-years     { font-size: 14px; gap: 6px; }
  .cv-credit    { font-size: 8.5px; }
  /* Foot date + stamps */
  .cv-foot      { gap: 6px; }
  .cv-foot-date  { font-size: 8.5px; letter-spacing: 0.1em; }
  .cv-foot-row   { gap: 16px; }
  .cv-foot-stamp { font-size: 8.5px; letter-spacing: 0.1em; }

  /* Inside cover & first page */
  .inside-cover  { padding: 24px 18px; gap: 10px; }
  .ic-tag-jp     { font-size: 18px; }
  .ic-tag-en     { font-size: 14px; }
  .first-content { padding: 24px 18px; }
  .fc-title      { font-size: 28px; margin: 8px 0 12px; }
  .fc-body       { font-size: 11px; }
  .fc-from       { font-size: 13px; }

  /* Landing hint / open button */
  .landing-hint         { padding: 10px 20px 8px; }
  .landing-hint .lh-label { font-size: 14px; }
  .landing-hint .lh-arrow { font-size: 14px; }

  /* ── Book view (after opening) ── */
  .book-close-btn { top: 14px; left: 14px; padding: 6px 10px 6px 8px; font-size: 9px; gap: 5px; }
  .book-view      { padding: 12px 12px 60px; padding-top: 68px; }

  /* Top bar: brand on row 1, controls on row 2 */
  .book-view-top  {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
    border-radius: var(--radius-lg);
  }
  .book-view-top .brand { flex: 1 1 100%; }
  .book-view-top .brand .b-sub  { display: none; }
  .book-view-top .brand .b-mark { font-size: 18px; }
  .book-view-top > .row {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* Compact buttons on mobile */
  .book-view-top .btn { padding: 7px 10px; font-size: 11px; gap: 5px; }
  .book-view-top .layout-switch { flex-shrink: 0; }
  .book-view-top .layout-switch button { padding: 5px 8px; font-size: 9px; }

  /* Editing tools collapse behind the 「工具」 button.
     Row 2 shows just [翻頁/拍立得] + [工具]; tapping 工具 drops the
     full tool set into a wrap-around drawer below. */
  .book-view-top .tools-toggle { display: inline-flex; margin-left: auto; }
  .book-view-top .tools-group {
    display: none;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }
  .book-view-top .tools-group.open { display: flex; }

  /* ── Mobile single-page flipbook (one full page at a time) ── */
  .flipbook-table.mobile-single {
    width: 100%;
    padding: 12px 6px 20px;
    background: none;       /* drop the wide desktop halo on mobile */
  }
  .flipbook-table.mobile-single::before { display: none; }
  .fb-single {
    display: grid; place-items: center;
    width: 100%;
    overflow: hidden;       /* clip the slide-in so it doesn't cause h-scroll */
  }
  .fb-single-page {
    position: relative;
    width: min(calc(100vw - 36px), 420px);
    aspect-ratio: 460 / 600;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(29,21,53,0.20), 0 3px 10px rgba(29,21,53,0.10);
    cursor: pointer;
  }
  .fb-single-page .fb-page {
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 1px var(--paper-edge) inset;
  }
  .fb-single-page .fb-page.page-left .fb-page-inner,
  .fb-single-page .fb-page.page-right .fb-page-inner {
    inset: 22px 22px; left: 22px; right: 22px; overflow: hidden;
  }
  .fb-single-page .fb-pagenum  { font-size: 9px; bottom: 10px; right: 18px; left: auto; }
  .fb-single-page .fb-page.page-left .fb-pagenum { left: 18px; right: auto; }
  .fb-single-page .fb-pageglyph { font-size: 9px; top: 14px; left: 18px; right: auto; }
  .fb-single-page .fb-page.page-right .fb-pageglyph { right: 18px; left: auto; }

  @keyframes fb-slide-in-next {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes fb-slide-in-prev {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .fb-single-page.anim-in-next { animation: fb-slide-in-next 0.32s cubic-bezier(.2,.8,.4,1); }
  .fb-single-page.anim-in-prev { animation: fb-slide-in-prev 0.32s cubic-bezier(.2,.8,.4,1); }

  .fb-nav         { gap: 8px; margin-top: 14px; }
  .fb-nav .scrub  { min-width: 100px; }
  .fb-nav .progress { font-size: 9px; }

  /* Page templates on book pages */
  .tpl-cover      { padding: 20px 16px; }
  .tpl-cover h1   { font-size: 28px; margin: 6px 0 0; }
  .tpl-cover .jp-sub  { font-size: 10px; margin-top: 6px; }
  .tpl-cover .stamp   { font-size: 8px; }
  .tpl-preface        { padding: 24px 16px; }
  .tpl-preface .tag-jp { font-size: 16px; }
  .tpl-preface .tag-en { font-size: 14px; margin-top: 8px; }
  .tpl-photo          { padding: 12px 14px; }
  .tpl-photo.left     { padding-right: 18px; }
  .tpl-photo.right    { padding-left: 18px; }
  .tpl-1 .cap-row .title { font-size: 11px; }
  .tpl-note           { padding: 20px 16px; }
  .tpl-note .note-body { font-size: 10px; line-height: 22px; }
  .tpl-closing        { padding: 24px 16px; }
  .tpl-closing h2     { font-size: 20px; margin: 8px 0 4px; }
  .tpl-closing .nums  { gap: 16px; margin-top: 16px; }
  .tpl-closing .nums .n { font-size: 20px; }

  /* First content page — fc-bottom 在小空間裡不用 margin-top: auto */
  .first-content  { padding: 20px 16px; gap: 0; }
  .fc-glyph       { font-size: 8px; }
  .fc-title       { font-size: 24px; margin: 6px 0 10px; }
  .fc-body        { font-size: 10px; line-height: 1.7; }
  .fc-bottom      { margin-top: 10px; }
  .fc-from        { font-size: 12px; }

  /* ── Album / home ── */
  .albums-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .home-hero   { padding: 20px 0 30px; gap: 16px; }
  .home-hero h1 { font-size: 38px; margin: 8px 0 14px; }
  .home-hero .lede { font-size: 14px; }
  .hero-meta   { gap: 18px; margin-top: 20px; }
  .hero-meta .stat .n { font-size: 24px; }
  .section-head h2 { font-size: 24px; }
  .album-head  { grid-template-columns: 1fr; gap: 12px; padding: 10px 0 20px; margin-bottom: 24px; }
  .album-head h1 { font-size: 36px; }
  .album-desc  { font-size: 13px; }
  .album-head .actions { flex-wrap: wrap; }
  .layout-switch button { padding: 5px 8px; font-size: 9px; letter-spacing: 0.1em; }

  /* ── Photo grids ── */
  .varied-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 60px; gap: 10px; }
  .polaroids   { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .polaroids .photo        { padding: 8px 8px 40px; }
  .polaroids .photo .cap   { font-size: 16px; bottom: 12px; }
  .polaroids .photo .tape  { width: 44px; height: 14px; top: -7px; }

  /* ── Lightbox ── */
  .lb-stage { padding: 16px 12px; }

  /* ── Upload modal — slides up from bottom ── */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal          { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90vh; overflow-y: auto; }
  .modal-head     { padding: 14px 18px; }
  .modal-head h2  { font-size: 20px; }
  .modal-body     { padding: 18px; }
  .modal-foot     { padding: 12px 18px; flex-wrap: wrap; }
  .modal-steps    { padding: 0 18px 14px; gap: 8px; }
  .upload-preview-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .drop-zone      { padding: 32px 14px; }
  .drop-zone h3   { font-size: 18px; }
  .drop-zone .icon { width: 44px; height: 44px; margin-bottom: 12px; font-size: 22px; }
}