:root {
    --bg: #FFF7FA;
    --surface: #FFFFFF;
    --surface-soft: #FFEAF2;
    --title: #4A1630;
    --text: #5C2A3E;
    --muted: #8A4A62;
    --soft-text: #B07A90;
    --pink: #E85A8B;
    --pink-bright: #FF7AA8;
    --pink-deep: #C43B6E;
    --pink-pale: #FFE1EC;
    --line: rgba(232, 90, 139, 0.16);
    --shadow: 0 14px 34px rgba(196, 59, 110, 0.10);
    --radius: 20px;
    --header-h: 130px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.78;
    overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a, button, input { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--title); color: #fff; padding: 10px 16px; border-radius: 999px; }
.skip-link:focus { top: 10px; }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 80; box-shadow: 0 4px 18px rgba(74, 22, 48, 0.04); }
.candy-strip { height: 22px; background: var(--pink-deep); color: #fff; font-size: 12px; }
.strip-inner { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.text-button { min-height: 22px; padding: 0 4px; border: 0; background: transparent; color: #fff; font-size: 12px; }
.cover-bar { height: 64px; background: var(--surface); border-bottom: 1px solid var(--line); }
.cover-inner { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.brand-lockup { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; max-width: 260px; }
.brand-logo { width: auto; height: 34px; max-width: 220px; object-fit: contain; object-position: left center; }
.brand-text { color: var(--title); font-weight: 800; font-size: 21px; letter-spacing: .02em; }
.envelope-button, .app-link, .button, .button-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0 19px; font-weight: 700; border: 1px solid transparent; }
.envelope-button { justify-self: center; color: var(--pink-deep); background: #fff; border-color: var(--line); }
.app-link { justify-self: end; background: linear-gradient(135deg, var(--pink-bright) 0%, var(--pink) 55%, var(--pink-deep) 100%); color: #fff; }
.sticker-rail { height: 44px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.sticker-inner { height: 44px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.sticker { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 10px; color: var(--title); font-weight: 700; font-size: 14px; white-space: nowrap; }
.sticker:hover, .sticker:focus-visible { background: #fff; outline: none; }
.sticker.is-current { background: var(--pink-deep); color: #fff; }
.site-main { padding-top: calc(var(--header-h) + 28px); padding-bottom: 40px; min-height: 68vh; }
.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.page-heading { margin-bottom: 26px; }
.eyebrow { color: var(--pink-deep); font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3 { color: var(--title); line-height: 1.28; margin-top: 0; }
h1 { font-size: clamp(28px, 3vw, 32px); margin-bottom: 12px; }
h2 { font-size: 22px; margin-bottom: 10px; }
h3 { font-size: 18px; margin-bottom: 8px; }
p { margin-top: 0; }
.lead { max-width: 820px; color: var(--muted); font-size: 17px; }
.card, .soft-card, .article-panel, .policy-card, .faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.card, .soft-card, .policy-card, .faq-item { padding: 22px; }
.soft-card { background: var(--surface-soft); box-shadow: none; }
.section-block { margin: 0 0 34px; }
.section-title-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.section-title-row p { color: var(--muted); margin-bottom: 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.stack { display: grid; gap: 18px; }
.media-slot { width: 100%; min-height: 180px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(145deg, #fff 0%, var(--surface-soft) 100%); display: grid; place-items: center; overflow: hidden; }
.media-slot img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.card-media { height: 205px; margin-bottom: 16px; }
.hero-media { max-height: 300px; min-height: 220px; margin-bottom: 22px; }
.hero-media img { max-height: 300px; width: 100%; object-fit: contain; }
.app-media { max-height: 420px; min-height: 300px; }
.app-media img { max-height: 420px; object-fit: contain; }
.placeholder-title { color: var(--title); font-size: 24px; font-weight: 800; padding: 28px; text-align: center; }
.hero-copy { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); }
.hero-copy .brand-kicker { display: inline-flex; border-radius: 999px; background: var(--pink-pale); color: var(--title); padding: 5px 11px; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.hero-actions, .inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.button { color: #fff; background: linear-gradient(135deg, var(--pink-bright) 0%, var(--pink) 55%, var(--pink-deep) 100%); }
.button-secondary { color: var(--pink-deep); background: #fff; border-color: var(--line); }
.button:hover, .button:focus-visible, .app-link:hover, .app-link:focus-visible { filter: brightness(.97); outline: 3px solid rgba(232,90,139,.22); outline-offset: 2px; }
.button-secondary:hover, .button-secondary:focus-visible, .envelope-button:hover, .envelope-button:focus-visible { background: var(--pink-pale); outline: 3px solid rgba(232,90,139,.16); outline-offset: 2px; }
.note-card h3, .number-card h3 { margin-bottom: 8px; }
.note-card p, .number-card p, .card p { color: var(--muted); }
.number-label { color: var(--pink); font-size: 34px; line-height: 1; font-weight: 900; margin-bottom: 12px; }
.index-list { display: grid; gap: 12px; counter-reset: item; }
.index-list article { position: relative; padding: 18px 18px 18px 68px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.index-list article::before { counter-increment: item; content: counter(item, decimal-leading-zero); position: absolute; left: 18px; top: 18px; color: var(--pink); font-weight: 900; font-size: 22px; }
.vertical-books { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.book-card { min-height: 300px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 22px; background: linear-gradient(180deg, #fff, var(--surface-soft)); border: 1px solid var(--line); }
.book-card span { color: var(--pink-deep); font-weight: 800; font-size: 13px; }
.book-card p { color: var(--muted); }
.step-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.step b { display: block; color: var(--pink); font-size: 28px; margin-bottom: 8px; }
.quote-letter { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; position: relative; }
.quote-letter::before { content: "✉"; position: absolute; right: 22px; top: 18px; color: var(--pink); font-size: 24px; }
.quote-letter small { display: block; color: var(--pink-deep); font-weight: 800; margin-bottom: 8px; }
.content-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 22px; align-items: stretch; margin-bottom: 30px; }
.content-hero .article-panel { padding: 28px; }
.content-hero .media-slot { min-height: 260px; }
.article-panel { padding: 26px; }
.article-panel p:last-child, .card p:last-child, .soft-card p:last-child { margin-bottom: 0; }
.article-panel + .article-panel { margin-top: 18px; }
.handbook-entry { border-left: 4px solid var(--pink); padding-left: 18px; }
.person-card { display: grid; gap: 12px; }
.person-tag, .mood-tag, .status-tag { display: inline-flex; width: fit-content; padding: 5px 10px; border-radius: 999px; background: var(--pink-pale); color: var(--title); font-size: 13px; font-weight: 800; }
.city-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.city-index article { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.story-copy { max-width: 860px; margin: 0 auto; }
.story-copy p { margin-bottom: 1.15em; }
.policy-list { display: grid; gap: 16px; }
.policy-card h2 { font-size: 20px; }
.faq-list { display: grid; gap: 14px; }
.faq-item h2 { font-size: 18px; margin-bottom: 8px; }
.faq-item p { color: var(--muted); margin-bottom: 0; }
.site-footer { background: var(--title); color: #F8D6E4; padding: 42px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.05fr 2fr; gap: 36px; }
.footer-brand-link { display: inline-flex; min-height: 44px; align-items: center; }
.footer-logo { height: 34px; width: auto; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.footer-en { font-size: 12px; letter-spacing: .16em; margin-bottom: 10px; }
.footer-brand p { color: #F8D6E4; }
.footer-links-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.footer-links-grid h2 { color: #fff; font-size: 16px; margin-bottom: 10px; }
.footer-links-grid a { display: block; min-height: 34px; color: #F8D6E4; font-size: 14px; }
.footer-links-grid a:hover, .footer-links-grid a:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.footer-note { border-top: 1px solid rgba(255,255,255,.16); margin-top: 28px; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: #F8D6E4; }
.site-overlay { position: fixed; inset: 0; background: rgba(74,22,48,.32); z-index: 95; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; }
.site-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.envelope-drawer { position: fixed; left: 50%; bottom: 0; width: min(920px, 100%); max-height: 70vh; overflow-y: auto; transform: translate(-50%, 110%); z-index: 110; background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -18px 60px rgba(74,22,48,.18); visibility: hidden; pointer-events: none; transition: transform .25s ease, visibility .25s; }
.envelope-drawer.is-open { transform: translate(-50%, 0); visibility: visible; pointer-events: auto; }
.drawer-handle { width: 54px; height: 5px; border-radius: 999px; background: var(--pink-pale); margin: 10px auto 2px; }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.drawer-brand { display: flex; align-items: center; gap: 12px; }
.drawer-logo { height: 30px; width: auto; max-width: 180px; object-fit: contain; }
.drawer-brand strong, .drawer-brand span { display: block; }
.drawer-brand strong { color: var(--title); }
.drawer-brand span { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.close-button { min-height: 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--pink-deep); padding: 0 15px; }
.drawer-groups { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; padding: 20px; }
.drawer-group h2 { font-size: 16px; color: var(--pink-deep); margin-bottom: 10px; }
.drawer-group a { display: block; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.drawer-group strong, .drawer-group span { display: block; }
.drawer-group strong { color: var(--title); font-size: 14px; }
.drawer-group span { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 3px; }
.search-layer { position: fixed; top: 96px; left: 50%; width: min(760px, calc(100% - 32px)); transform: translate(-50%, -16px); z-index: 110; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 70px rgba(74,22,48,.18); padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: .2s ease; }
.search-layer.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; pointer-events: auto; }
.search-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.search-head strong { color: var(--title); font-size: 20px; }
.search-field { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 0 15px; min-height: 50px; }
.search-field span { color: var(--pink-deep); font-weight: 800; }
.search-field input { width: 100%; border: 0; outline: 0; min-width: 0; color: var(--text); background: transparent; }
.search-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.search-presets a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--surface-soft); color: var(--title); font-weight: 700; }
.search-presets a:hover, .search-presets a:focus-visible { background: var(--pink-deep); color: #fff; outline: none; }
.search-empty { margin: 14px 0 0; color: var(--muted); }
.mobile-bottom-nav { display: none; }
.mini-index { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.mini-index a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--pink-deep); font-weight: 700; }
.contact-choice { border-left: 4px solid var(--pink); }
.notice { padding: 18px 20px; border-radius: 18px; background: var(--surface-soft); color: var(--title); }
.status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.status-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.status-card p { color: var(--muted); margin-bottom: 0; }
.app-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 28px; align-items: center; }
.icon-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.app-icon { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }
.term-list { padding-left: 20px; }
.term-list li { margin-bottom: 8px; }
@media (max-width: 900px) {
    .grid-3, .grid-6 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .grid-4, .vertical-books, .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .step-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer-top { grid-template-columns: 1fr; }
    .drawer-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .content-hero, .app-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    :root { --header-h: 86px; }
    body { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
    .shell, .page-shell { width: calc(100% - 32px); }
    .sticker-rail { display: none; }
    .cover-inner { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
    .brand-lockup { min-width: 0; max-width: 145px; overflow: hidden; }
    .brand-logo { max-width: 138px; height: 30px; }
    .brand-text { font-size: 18px; white-space: nowrap; }
    .envelope-button, .app-link { min-height: 44px; padding: 0 12px; font-size: 14px; }
    .site-main { padding-top: calc(var(--header-h) + 22px); padding-bottom: 32px; }
    .hero-media { min-height: 180px; }
    .grid-2, .grid-3, .grid-4, .grid-6, .city-index, .vertical-books, .status-grid { grid-template-columns: 1fr; }
    .card-media { height: 190px; }
    .step-list { grid-template-columns: 1fr; }
    .book-card { min-height: 230px; }
    .footer-links-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer-note { flex-direction: column; }
    .drawer-groups { grid-template-columns: 1fr; }
    .envelope-drawer { max-height: 78vh; }
    .search-layer { top: 78px; width: calc(100% - 24px); }
    .mobile-bottom-nav { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.98); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5,1fr); }
    .mobile-bottom-nav a { min-width: 0; min-height: 50px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--muted); }
    .mobile-bottom-nav a.is-current { background: var(--pink); color: #fff; }
    .site-overlay { z-index: 95; }
}
@media (max-width: 390px) {
    .cover-inner { gap: 5px; }
    .brand-lockup { max-width: 118px; }
    .brand-logo { max-width: 112px; }
    .envelope-button, .app-link { padding: 0 9px; font-size: 13px; }
    .strip-inner { gap: 8px; }
}