:root {
    --bg: #FFF7FA;
    --surface: #FFFFFF;
    --soft: #FFEAF2;
    --title: #4A1630;
    --text: #5C2A3E;
    --muted: #8A4A62;
    --assist: #B07A90;
    --brand: #E85A8B;
    --bright: #FF7AA8;
    --deep: #C43B6E;
    --pale: #FFE1EC;
    --border: rgba(232,90,139,0.16);
    --shadow: 0 14px 34px rgba(196,59,110,0.10);
    --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; overflow-x: hidden; padding-top: 130px; }
body.ui-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(232,90,139,.34); outline-offset: 3px; }
button { font: inherit; }
img { max-width: 100%; height: auto; display: block; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1200; transform: translateY(-160%); background: #fff; color: var(--title); padding: 8px 12px; border-radius: 10px; }
.skip-link:focus { transform: none; }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; }
.header-inner, .footer-inner, .section-inner { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.candy-strip { height: 22px; background: var(--deep); color: #fff; font-size: 12px; }
.candy-inner { height: 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mini-action { border:0; background: transparent; color:#fff; min-height:22px; padding:0 4px; cursor:pointer; }
.cover-bar { height:64px; background:#fff; border-bottom:1px solid var(--border); }
.cover-inner { height:64px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.brand-link { justify-self:start; min-width: 0; display:flex; align-items:center; min-height:44px; }
.brand-logo, .footer-logo, .drawer-logo { width:auto; max-width:180px; height:34px; object-fit:contain; object-position:left center; }
.brand-wordmark { color:var(--title); font-weight:800; letter-spacing:.02em; white-space:nowrap; }
.envelope-trigger, .app-link { min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:0 18px; font-weight:700; cursor:pointer; }
.envelope-trigger { border:1px solid var(--border); background:#fff; color:var(--deep); }
.app-link { justify-self:end; color:#fff; background:linear-gradient(135deg,#FF7AA8 0%,#E85A8B 55%,#C43B6E 100%); }
.sticker-rail { height:44px; background:var(--soft); border-bottom:1px solid var(--border); }
.sticker-inner { display:flex; align-items:center; gap:8px; height:44px; overflow:hidden; }
.sticker-link { display:inline-flex; min-height:32px; align-items:center; padding:0 14px; border-radius:10px; color:var(--title); font-size:14px; white-space:nowrap; }
.sticker-link:hover { background:#fff; }
.sticker-link.is-current { color:#fff; background:var(--deep); }
.site-main { min-height:60vh; }
.hero-section, .content-section { padding:36px 0; }
.hero-section { padding-top: 30px; }
.section-inner { position:relative; }
.eyebrow { margin:0 0 8px; color:var(--deep); font-weight:800; font-size:13px; letter-spacing:.08em; }
h1,h2,h3 { color:var(--title); line-height:1.25; margin-top:0; }
h1 { font-size:clamp(28px,4vw,32px); margin-bottom:14px; }
h2 { font-size:23px; margin-bottom:12px; }
h3 { font-size:18px; margin-bottom:8px; }
p { margin:0 0 14px; }
.lead { max-width:820px; color:var(--muted); font-size:17px; }
.hero-card { background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:22px; }
.media-slot { background:var(--soft); border:1px solid var(--border); border-radius:20px; min-height:170px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.media-slot.banner { aspect-ratio:16/9; max-height:300px; min-height:180px; }
.media-slot img { width:100%; height:100%; object-fit:contain; object-position:center; }
.fallback-mark { color:var(--title); text-align:center; padding:30px; font-weight:800; }
.hero-copy { padding-top:20px; }
.hero-copy .brand-kicker { color:var(--deep); font-weight:800; }
.button-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.btn { min-height:44px; padding:0 20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.btn.primary { color:#fff; background:linear-gradient(135deg,#FF7AA8 0%,#E85A8B 55%,#C43B6E 100%); }
.btn.secondary { color:var(--deep); background:#fff; border:1px solid var(--border); }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(196,59,110,.12); }
.note-grid, .card-grid, .status-grid, .album-grid, .steps-grid { display:grid; gap:16px; }
.note-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.status-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.album-grid { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; }
.steps-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.note-card, .content-card, .status-card, .album-book, .step-card, .policy-card, .faq-item, .letter-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; box-shadow:0 10px 26px rgba(196,59,110,.06); }
.note-card .media-slot { min-height:180px; height:210px; margin-bottom:14px; border-radius:15px; }
.note-card p { color:var(--muted); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.section-head p { max-width:720px; color:var(--muted); margin:0; }
.number-list { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.number-list li { display:grid; grid-template-columns:56px 1fr; gap:12px; align-items:start; background:#fff; border:1px solid var(--border); border-radius:16px; padding:15px; }
.number-list strong { color:var(--deep); font-size:20px; }
.album-book { display:flex; flex-direction:column; min-height:240px; background:linear-gradient(180deg,#fff 0%,#FFF5F8 100%); }
.album-book .book-no { font-size:12px; color:var(--assist); letter-spacing:.12em; }
.album-book h3 { margin-top:auto; padding-top:34px; }
.big-number { font-size:38px; line-height:1; color:var(--brand); font-weight:900; margin-bottom:12px; }
.status-card strong { color:var(--deep); display:block; margin-bottom:8px; }
.step-card { position:relative; padding-top:54px; }
.step-card::before { content:attr(data-step); position:absolute; top:15px; left:18px; color:var(--brand); font-weight:900; font-size:25px; }
.split-media { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:22px; align-items:center; }
.split-media.reverse { grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }
.split-media .media-slot { min-height:220px; max-height:420px; }
.app-media .media-slot { min-height:300px; max-height:420px; }
.app-icon-wrap { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.app-icon-wrap img { width:64px; height:64px; object-fit:contain; }
.page-intro { padding:38px 0 18px; }
.page-intro-box { background:var(--soft); border:1px solid var(--border); border-radius:22px; padding:24px; }
.page-intro-box .media-slot { margin-top:18px; max-height:260px; }
.prose-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.prose-section { background:#fff; border:1px solid var(--border); border-radius:20px; padding:22px; box-shadow:0 10px 26px rgba(196,59,110,.05); }
.prose-section p:last-child { margin-bottom:0; }
.inline-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.inline-links a { min-height:44px; display:inline-flex; align-items:center; padding:0 16px; border-radius:999px; background:var(--pale); color:var(--title); font-weight:700; }
.inline-links a:hover { background:var(--brand); color:#fff; }
.index-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.index-list article { background:#fff; border:1px solid var(--border); border-radius:18px; padding:18px; }
.topic-cover { background:var(--soft); border-radius:18px; padding:20px; border:1px solid var(--border); }
.story-body { max-width:820px; }
.story-body p { margin-bottom:18px; }
.letter-card { border-left:5px solid var(--brand); }
.letter-card .viewpoint { display:inline-block; margin-bottom:10px; color:#fff; background:var(--deep); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:800; }
.policy-list { display:grid; gap:14px; }
.policy-card h2 { font-size:20px; }
.faq-list { display:grid; gap:14px; }
.faq-item h2 { font-size:18px; margin-bottom:8px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.notice-box { background:var(--soft); border:1px solid var(--border); border-radius:18px; padding:18px; color:var(--title); }
.site-footer { margin-top:38px; background:#4A1630; color:#F8D6E4; padding:38px 0 30px; }
.footer-brand { display:flex; align-items:center; gap:14px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-logo-link { display:flex; align-items:center; min-height:44px; }
.footer-logo { height:32px; max-width:170px; filter:none; }
.footer-brand strong { display:block; color:#fff; }
.footer-brand span { display:block; font-size:12px; letter-spacing:.08em; }
.footer-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding:24px 0; }
.footer-groups section { display:flex; flex-direction:column; gap:6px; }
.footer-groups h2 { color:#fff; font-size:15px; margin-bottom:6px; }
.footer-groups a { color:#F8D6E4; min-height:32px; }
.footer-groups a:hover { color:#fff; text-decoration:underline; }
.footer-notice, .copyright { color:#E8B7CB; font-size:14px; }
.ui-overlay { position:fixed; inset:0; background:rgba(74,22,48,.34); z-index:980; opacity:0; visibility:hidden; pointer-events:none; transition:.2s ease; }
.ui-overlay.is-active { opacity:1; visibility:visible; pointer-events:auto; }
.envelope-drawer { position:fixed; left:50%; bottom:0; transform:translate(-50%,105%); width:min(920px,100%); max-height:70vh; overflow:auto; background:#fff; z-index:1000; border-radius:22px 22px 0 0; border:1px solid var(--border); box-shadow:0 -18px 44px 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-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; background:#fff; border-bottom:1px solid var(--border); }
.drawer-brand { display:flex; align-items:center; gap:12px; color:var(--title); }
.drawer-logo { height:30px; max-width:140px; }
.icon-button { min-height:44px; border:1px solid var(--border); background:#fff; color:var(--deep); border-radius:999px; padding:0 16px; cursor:pointer; }
.drawer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:18px 20px 24px; }
.drawer-grid section { min-width:0; }
.drawer-grid h2 { font-size:15px; margin-bottom:8px; }
.drawer-grid a { display:block; padding:11px 10px; border-radius:12px; }
.drawer-grid a:hover { background:var(--soft); }
.drawer-grid strong, .drawer-grid span { display:block; }
.drawer-grid strong { color:var(--title); font-size:14px; }
.drawer-grid span { color:var(--muted); font-size:12px; line-height:1.6; margin-top:2px; }
.search-panel { position:fixed; top:86px; left:0; right:0; z-index:1005; visibility:hidden; pointer-events:none; transform:translateY(-12px); opacity:0; transition:.2s ease; }
.search-panel.is-open { visibility:visible; pointer-events:auto; transform:none; opacity:1; }
.search-card { width:min(calc(100% - 32px),760px); margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:0 0 20px 20px; box-shadow:var(--shadow); padding:18px; }
.search-head { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--title); margin-bottom:12px; }
.search-card label { display:block; color:var(--muted); margin-bottom:8px; }
.search-card input { width:100%; min-height:48px; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:14px; padding:0 14px; }
.preset-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.preset-links a { min-height:40px; display:inline-flex; align-items:center; padding:0 13px; background:var(--soft); color:var(--title); border-radius:999px; }
.mobile-bottom-nav { display:none; }
@media (max-width: 900px) {
    .note-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .status-grid, .album-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .steps-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .drawer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .footer-groups { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
    body { padding-top:86px; padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
    .header-inner, .footer-inner, .section-inner { width:min(calc(100% - 32px),var(--max)); }
    .sticker-rail { display:none; }
    .cover-inner { grid-template-columns:minmax(0,1fr) auto auto; gap:8px; }
    .brand-logo { max-width:118px; height:30px; }
    .brand-wordmark { font-size:15px; }
    .envelope-trigger, .app-link { min-height:44px; padding:0 12px; font-size:13px; }
    .candy-inner { font-size:11px; }
    .hero-section, .content-section { padding:24px 0; }
    .hero-card, .page-intro-box, .prose-section { padding:18px; border-radius:18px; }
    .note-grid, .card-grid, .status-grid, .album-grid, .steps-grid, .index-list, .contact-grid { grid-template-columns:1fr; }
    .note-card .media-slot { height:190px; }
    .split-media, .split-media.reverse { grid-template-columns:1fr; }
    .section-head { display:block; }
    .drawer-grid { grid-template-columns:1fr; }
    .envelope-drawer { max-height:70vh; border-radius:18px 18px 0 0; }
    .search-panel { top:86px; }
    .search-card { width:calc(100% - 20px); border-radius:0 0 18px 18px; }
    .mobile-bottom-nav { position:fixed; z-index:930; left:0; right:0; bottom:0; min-height:50px; padding-bottom:env(safe-area-inset-bottom); background:#fff; border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(5,1fr); }
    .mobile-bottom-nav a { min-height:50px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; }
    .mobile-bottom-nav a.is-current { background:var(--brand); color:#fff; font-weight:800; }
    .footer-groups { grid-template-columns:1fr 1fr; gap:18px; }
}
@media (max-width: 390px) {
    .cover-inner { grid-template-columns:minmax(0,1fr) auto auto; gap:5px; }
    .brand-logo { max-width:96px; height:28px; }
    .brand-wordmark { font-size:14px; }
    .envelope-trigger, .app-link { padding:0 9px; font-size:12px; }
    .footer-groups { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; }
}

.compact-media { margin-top:16px; max-height:240px; }
.no-margin { margin-bottom:0; }
.letter-gap { margin-top:14px; }