:root {
  --peach: #FFB99B;
  --coral: #FA7C8C;
  --lavender: #C8B6F5;
  --cream: #FFF8F3;
  --ink: #3D2C3A;
  --ink-soft: #6B5568;
  --gold: #C9A46A;
  --gold-soft: #E8D5A8;
  --royal: #7B6BA8;
  --grad-warm: linear-gradient(135deg, #FFB99B 0%, #FA7C8C 45%, #C8B6F5 100%);
  --grad-soft: linear-gradient(160deg, #FFF8F3 0%, #FFE8DE 45%, #F3EBFF 100%);
  --grad-royal: linear-gradient(135deg, #C8B6F5 0%, #9B7FD4 40%, #FA7C8C 100%);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; width: 100%; overflow: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--grad-soft);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.staff-back {
  position: fixed; z-index: 40;
  top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l));
  width: 32px; height: 32px; border-radius: 10px; border: none;
  background: rgba(255,255,255,0.35); color: rgba(61,44,58,0.3);
  text-decoration: none; display: grid; place-items: center; font-size: 1rem;
}
.boot {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: var(--grad-soft); transition: opacity .4s ease, visibility .4s;
}
.boot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-card { text-align: center; }
.spinner {
  width: 28px; height: 28px; margin: 0 auto 10px; border-radius: 50%;
  border: 2.5px solid rgba(250,124,140,0.2); border-top-color: var(--coral);
  animation: spin .7s linear infinite;
}
.boot-txt { font-weight: 700; color: var(--ink-soft); letter-spacing: .12em; font-size: .85rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-shell {
  height: 100%; height: 100dvh;
  padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(48px + var(--safe-b)) calc(10px + var(--safe-l));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.book-stage {
  position: relative; z-index: 2;
  width: min(98vw, 1100px);
  height: min(86vh, 780px);
  flex: 1 1 auto;
  max-height: calc(100dvh - 64px - var(--safe-t) - var(--safe-b));
}
#book { width: 100%; height: 100%; margin: 0 auto; }
.stf__parent { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; }
.stf__wrapper { width: 100% !important; height: 100% !important; padding-bottom: 0 !important; }
.stf__block { width: 100% !important; height: 100% !important; }

.page {
  background: #FFFAF6;
  color: var(--ink);
  overflow: hidden;
}
.page.tier-featured { background: linear-gradient(180deg, #FFF5F0, #FFFAF6); }
.page.tier-premium { background: linear-gradient(180deg, #F8F4FF, #FFFAF6); }
.page.tier-entry { background: linear-gradient(180deg, #FFF8F3, #FFFAF6); }
.page.tier-royal { background: linear-gradient(180deg, #F3EBFF 0%, #FFF8F3 55%, #FFFAF6); }

.page-inner {
  height: 100%; width: 100%;
  padding: clamp(10px, 1.6vh, 18px) clamp(10px, 1.8vw, 20px);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.page-inner.dense { gap: 6px; }

/* ===== CRITICAL: vertical scroll inside page ===== */
.scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-right: 2px;
  padding-bottom: 18px;
  position: relative;
}
.sticky-head { flex-shrink: 0; }

.scroll-cue {
  position: sticky; bottom: 0; left: 0; right: 0;
  text-align: center; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; color: var(--coral);
  padding: 10px 8px 4px;
  background: linear-gradient(180deg, transparent, rgba(255,250,246,.95) 40%);
  pointer-events: none;
  transition: opacity .3s;
}
.scroll-body.scrolled .scroll-cue,
.scroll-body.no-overflow .scroll-cue { opacity: 0; }

/* Cover */
.page.cover { background: var(--grad-warm); color: #fff; }
.cover-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,0.22), transparent 55%);
}
.cover-inner {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 28px 20px; position: relative; z-index: 2;
}
.wax-seal {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9aa8, #c44558 55%, #8a2f3d);
  box-shadow: 0 8px 20px rgba(61,44,58,0.25), inset 0 -4px 8px rgba(0,0,0,0.15);
  display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  margin-bottom: 18px;
}
.page.is-active .wax-seal { animation: sealPulse 3.2s ease-in-out infinite; }
@keyframes sealPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
.ribbon {
  width: min(60%, 180px); height: 8px; margin: 0 auto 14px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), var(--gold-soft), rgba(255,255,255,.5), transparent);
}
.cover-title { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; letter-spacing: .1em; line-height: 1.35; }
.cover-sub { margin-top: 8px; font-size: 1rem; font-weight: 600; letter-spacing: .28em; opacity: .92; }
.cover-place { margin-top: 10px; font-size: .8rem; opacity: .8; letter-spacing: .08em; }
.cover-cta {
  margin-top: 24px; border: 1.5px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.2); color: #fff; font-weight: 800; font-size: .92rem;
  padding: 11px 26px; border-radius: 999px; cursor: pointer; font-family: inherit; letter-spacing: .18em;
}

/* TOC */
.toc-title {
  font-size: 1.25rem; font-weight: 800; letter-spacing: .15em;
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.toc-hint { font-size: .74rem; color: var(--ink-soft); margin: 6px 0 14px; }
.toc-list { display: grid; gap: 10px; }
.toc-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(200,182,245,.35);
  cursor: pointer; text-align: left; font-family: inherit; color: inherit; width: 100%;
}
.toc-item.featured {
  background: linear-gradient(135deg, rgba(255,185,155,.28), rgba(200,182,245,.22));
  border-color: rgba(250,124,140,.45);
}
.toc-item.vip {
  background: linear-gradient(135deg, rgba(200,182,245,.35), rgba(255,240,232,.5));
  border-color: rgba(123,107,168,.4);
}
.toc-badge {
  font-size: .62rem; font-weight: 800; padding: 3px 7px; border-radius: 999px;
  background: var(--grad-warm); color: #fff; flex-shrink: 0;
}
.toc-item.vip .toc-badge { background: var(--grad-royal); }
.toc-name { font-weight: 800; font-size: .92rem; }
.toc-price { margin-left: auto; font-weight: 800; color: var(--coral); }
.toc-item.vip .toc-price { color: var(--royal); }
.toc-dots { flex: 1; border-bottom: 1px dotted rgba(200,182,245,.55); margin: 0 8px; opacity: .55; }

/* Tier header */
.tier-head {
  display: flex; gap: 10px; align-items: flex-start;
  padding-bottom: 8px; border-bottom: 1px solid rgba(200,182,245,.28);
}
.tier-mark {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: var(--grad-warm); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 6px 14px rgba(250,124,140,.2);
}
.tier-mark.premium {
  background: linear-gradient(145deg, #EDE4FF, #FFE8DE);
  color: #6B5B95;
}
.tier-mark.royal {
  background: var(--grad-royal); color: #fff;
  box-shadow: 0 6px 16px rgba(123,107,168,.3);
}
.tier-head-text { flex: 1; min-width: 0; }
.tier-name { font-size: clamp(1.02rem, 2vw, 1.25rem); font-weight: 800; letter-spacing: .04em; }
.rec-pill {
  display: inline-block; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px; background: var(--grad-warm); color: #fff; margin-bottom: 3px;
}
.royal-pill { background: var(--grad-royal); }
.price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; margin-top: 2px;
}
.price-row .yen { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.price-row .num {
  font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 800; line-height: 1;
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tier-royal .price-row .num { background: var(--grad-royal); -webkit-background-clip: text; background-clip: text; }
.price-row .unit { font-size: .7rem; color: var(--ink-soft); font-weight: 600; }
.price-row .value { font-size: .7rem; color: var(--ink-soft); }
.price-row .value s { opacity: .7; }
.price-row .save {
  font-size: .62rem; font-weight: 800; padding: 2px 6px; border-radius: 999px;
  background: rgba(250,124,140,.12); color: var(--coral);
}
.tagline { margin-top: 4px; font-size: .76rem; line-height: 1.45; color: var(--ink-soft); }
.cont-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--coral);
}

/* 999 soft eligibility note — polite, face-saving */
.callout-soft {
  margin-top: 8px; display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(232,240,255,.55), rgba(245,238,255,.5));
  border: 1.5px solid rgba(160,176,220,.45);
  font-size: .76rem; line-height: 1.45; color: var(--ink);
}
.callout-soft .callout-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  color: #5a6a9a; margin-bottom: 2px;
}
.callout-soft p { margin: 0; }
.callout-soft p + p { margin-top: 4px; }
.callout-soft-line {
  font-size: .74rem; color: #4a5678; margin-bottom: 2px !important;
}
.callout-soft-ico {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: radial-gradient(circle at 35% 30%, #c5d4f5, #6b7fb8);
  box-shadow: 0 2px 6px rgba(90,110,170,.25);
  position: relative;
}
.callout-soft-ico::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%;
}

/* 999 honor callout — visible without scroll */
.callout {
  margin-top: 8px; display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,185,155,.28), rgba(232,213,168,.35));
  border: 1.5px solid rgba(201,164,106,.55);
  font-size: .78rem; line-height: 1.45; color: var(--ink);
}
.callout strong { color: #B85A45; font-weight: 800; }
.callout-ico {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  background: radial-gradient(circle at 35% 30%, #ff9aa8, #c44558);
  box-shadow: 0 2px 6px rgba(196,69,88,.3);
  position: relative;
}
.callout-ico::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%;
}

/* Sections */
.sec-stack { display: flex; flex-direction: column; gap: 8px; }
.sec {
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(200,182,245,.25);
  border-radius: 12px;
  padding: 8px 10px 9px;
}
.sec[data-fx="vcr"] {
  background: linear-gradient(135deg, rgba(61,44,58,.05), rgba(200,182,245,.2));
  border-color: rgba(200,182,245,.45);
}
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.sec-head-text { min-width: 0; }
.sec-kicker { font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: var(--coral); line-height: 1; }
.sec-title { font-size: clamp(.84rem, 1.45vw, .94rem); font-weight: 800; line-height: 1.3; margin-top: 1px; }

/* SVG-like CSS icons */
.sec-icon {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 8px rgba(250,124,140,.12);
}
.ic-seal { background: radial-gradient(circle at 35% 30%, #ff9aa8, #c44558); }
.ic-seal::after {
  content: ""; position: absolute; inset: 7px;
  border: 1.5px solid rgba(255,255,255,.8); border-radius: 50%;
}
.ic-match { background: var(--grad-warm); }
.ic-match::before, .ic-match::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; top: 11px;
}
.ic-match::before { left: 6px; }
.ic-match::after { right: 6px; }
.ic-event { background: linear-gradient(160deg, #fff, #FFE8DE); border: 1px solid rgba(200,182,245,.45); }
.ic-event::after {
  content: ""; position: absolute; left: 7px; right: 7px; top: 9px; bottom: 8px;
  border: 1.5px solid var(--coral); border-radius: 3px;
}
.ic-honor { background: linear-gradient(180deg, #fffdf8, #FFE8DE); border: 1.5px solid var(--gold); }
.ic-honor::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffb99b, #c44558);
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.ic-privacy { background: radial-gradient(circle, #fff, #EDE4FF); }
.ic-privacy::after {
  content: ""; position: absolute; width: 10px; height: 12px; left: 50%; top: 8px;
  transform: translateX(-50%);
  border: 2px solid var(--royal); border-radius: 3px 3px 4px 4px;
}
.ic-advisor { background: linear-gradient(180deg, #FFE8DE, #F3EBFF); }
.ic-advisor::before, .ic-advisor::after {
  content: ""; position: absolute; bottom: 6px; width: 8px; height: 12px;
  border-radius: 4px 4px 2px 2px; background: var(--coral);
}
.ic-advisor::before { left: 7px; background: var(--peach); }
.ic-advisor::after { right: 7px; background: var(--lavender); }
.ic-journey { background: linear-gradient(90deg, var(--peach), var(--lavender)); }
.ic-journey::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px;
  background: rgba(255,255,255,.85); transform: translateY(-50%);
}
.ic-vip { background: linear-gradient(180deg, #EDE4FF, #C8B6F5); }
.ic-vip::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px; height: 10px;
  border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.55);
}
.ic-vcr { background: linear-gradient(160deg, #2a2030, #4a3550); }
.ic-vcr::before {
  content: ""; position: absolute; top: 3px; left: 50%; width: 2px; height: 10px;
  transform: translateX(-50%); background: linear-gradient(180deg,#fff,transparent);
}
.ic-vcr::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 10px;
  border-radius: 2px; background: linear-gradient(135deg, #FA7C8C, #C8B6F5);
}

.sec-list { list-style: none; display: grid; gap: 5px; }
.sec-list li {
  position: relative; padding-left: 1em;
  font-size: clamp(.78rem, 1.3vw, .86rem);
  line-height: 1.5; color: var(--ink);
}
@media (min-width: 768px) {
  .sec-list li { font-size: 15px; line-height: 1.55; }
  .sec-title { font-size: 15.5px; }
  .tagline { font-size: 13.5px; }
  .callout { font-size: 14px; }
}
.sec-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--grad-warm);
}
.sec-list.bullets li::before { border-radius: 1.5px; }
.sec-list li.is-hot {
  background: rgba(255,185,155,.14);
  border-radius: 8px;
  padding: 5px 8px 5px 1em;
  margin-left: -4px; margin-right: -2px;
  border: 1px solid rgba(250,124,140,.18);
}
.hot-pill {
  display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; margin-right: 5px; vertical-align: 1px;
  background: var(--grad-warm); color: #fff;
}

/* Closing */
.page.closing { background: var(--grad-soft); }
.closing-inner {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.closing-mark {
  width: 56px; height: 56px; border-radius: 16px; background: var(--grad-warm);
  color: #fff; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800;
}
.closing-title { font-size: 1.15rem; font-weight: 800; letter-spacing: .1em; }
.closing-line { font-size: .88rem; color: var(--ink-soft); line-height: 1.65; }
.closing-line.subtle { font-size: .75rem; opacity: .8; }
.closing-orn {
  width: 88px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page.back-cover {
  background: linear-gradient(160deg, #3D2C3A, #5a3f55); color: rgba(255,255,255,.75);
}
.back-inner { height: 100%; display: grid; place-items: center; text-align: center; }
.back-inner p { letter-spacing: .2em; font-size: .85rem; font-weight: 600; }
.beihai { margin-top: 10px; opacity: .5; font-size: .72rem; letter-spacing: .28em; }

.controls {
  z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 6px; width: 100%; max-width: 360px; flex-shrink: 0;
}
.nav-btn {
  width: 40px; height: 40px; border-radius: 12px; border: none;
  background: rgba(255,255,255,.88); color: var(--ink); font-size: 1.1rem;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 12px rgba(61,44,58,.08);
}
.nav-btn:disabled { opacity: .35; }
.page-indicator {
  font-size: .72rem; font-weight: 700; color: var(--ink-soft);
  letter-spacing: .06em; min-width: 72px; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .page.is-active .wax-seal { animation: none !important; }
}