/* ============================================================
   一一日记 · 手账绘本风
   奶油纸张 / 牛皮纸 / 和纸胶带 / 拍立得
   ============================================================ */

:root {
    --paper: #f8f1e3;
    --card: #fffaf0;
    --card-deep: #fff5e2;
    --ink: #4b4037;
    --ink-soft: #7f7061;
    --ink-faint: #a79784;
    --line: #eadcc6;
    --line-deep: #ddc9aa;
    --kraft: #d8b083;
    --kraft-deep: #b98b5d;
    --coral: #df8a72;
    --coral-deep: #c96d54;
    --sage: #8fa98b;
    --pink: #f4d3cf;
    --butter: #f7e6b8;
    --shadow: 0 12px 28px rgba(96, 70, 45, 0.10);
    --shadow-soft: 0 5px 16px rgba(96, 70, 45, 0.08);
    --hand: "KaiTi", "STKaiti", "Kaiti SC", "楷体", "Songti SC", serif;
    --body: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }

.paper-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--paper);
    background-image:
        radial-gradient(rgba(160, 128, 90, 0.11) 0.7px, transparent 0.8px),
        radial-gradient(rgba(160, 128, 90, 0.06) 0.7px, transparent 0.8px),
        linear-gradient(180deg, rgba(255, 252, 244, 0.7), rgba(248, 241, 227, 0.2) 32%, rgba(244, 232, 211, 0.4));
    background-size: 18px 18px, 26px 26px, 100% 100%;
    background-position: 0 0, 9px 13px, 0 0;
}

/* ---------------- 顶部手账封面 ---------------- */
.hero {
    max-width: 1080px;
    margin: 0 auto;
    padding: 58px 22px 10px;
}

.hero-paper {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 46px 44px;
    text-align: center;
    background:
        repeating-linear-gradient(180deg, transparent 0 33px, rgba(202, 176, 137, 0.16) 33px 34px),
        var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: var(--shadow);
    transform: rotate(-0.45deg);
}

.hero-paper::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(202, 176, 137, 0.32);
    border-radius: 2px;
    pointer-events: none;
}

.washi {
    position: absolute;
    display: block;
    width: 118px;
    height: 30px;
    opacity: 0.86;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 7px, transparent 7px 14px),
        rgba(223, 138, 114, 0.55);
    box-shadow: 0 2px 5px rgba(96, 70, 45, 0.12);
    z-index: 2;
}

.washi-a { top: -15px; left: 42px; transform: rotate(-5deg); }

.washi-b {
    right: 42px;
    bottom: -15px;
    transform: rotate(4deg);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 7px, transparent 7px 14px),
        rgba(143, 169, 139, 0.6);
}

.hero-doodle {
    position: absolute;
    font-family: var(--hand);
    color: var(--kraft-deep);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}

.doodle-star { top: 26px; right: 60px; font-size: 28px; color: var(--coral); transform: rotate(12deg); }
.doodle-heart { bottom: 52px; left: 48px; font-size: 30px; color: var(--coral); transform: rotate(-14deg); }
.doodle-leaf { top: 52px; left: 66px; font-size: 26px; color: var(--sage); transform: rotate(-18deg); }

.hero-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.34em;
    color: var(--coral-deep);
}

.hero-title {
    margin: 0;
    font-family: var(--hand);
    font-size: clamp(46px, 7vw, 76px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.15;
    color: var(--ink);
}

.hero-slogan {
    margin: 14px auto 0;
    max-width: 560px;
    font-family: var(--hand);
    font-size: 19px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 24px;
}

.hero-chip {
    flex: 0 0 auto;
    padding: 5px 13px;
    color: var(--ink-soft);
    font-size: 12.5px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.66);
    border: 1px dashed var(--line-deep);
    border-radius: 999px;
}

.hero-chip b {
    font-family: var(--hand);
    font-size: 16px;
    color: var(--coral-deep);
    font-weight: 700;
}

.hero-bear {
    position: absolute;
    right: 24px;
    bottom: 20px;
    font-size: 54px;
    transform: rotate(7deg);
    opacity: 0.9;
    pointer-events: none;
}

/* ---------------- 那年今天 ---------------- */
.memory-note {
    position: relative;
    max-width: 880px;
    margin: 28px auto 0;
    padding: 20px 28px 18px;
    background: var(--butter);
    border: 1px solid rgba(201, 163, 94, 0.35);
    border-radius: 2px;
    box-shadow: var(--shadow-soft);
    transform: rotate(0.45deg);
}

.memory-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 88px;
    height: 24px;
    margin-left: -44px;
    transform: rotate(-2deg);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 6px, transparent 6px 12px),
        rgba(216, 176, 131, 0.7);
}

.memory-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.memory-kicker {
    font-family: var(--hand);
    font-size: 20px;
    font-weight: 700;
    color: var(--kraft-deep);
}

.memory-date {
    font-size: 12px;
    color: var(--ink-faint);
}

.memory-text {
    margin: 4px 0;
    font-family: var(--hand);
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink);
}

/* ---------------- 搜索与视图切换 ---------------- */
.toolbar {
    position: sticky;
    top: 10px;
    z-index: 20;
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 880px;
    margin: 26px auto 0;
    padding: 9px;
    background: rgba(250, 245, 235, 0.95);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(96, 70, 45, 0.07);
}

.search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--ink-faint);
    pointer-events: none;
}

#searchInput {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 40px;
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid transparent;
    border-radius: 12px;
    outline: none;
    appearance: none;
    transition: border-color 0.2s, background 0.2s;
}

#searchInput::placeholder { color: var(--ink-faint); }
#searchInput:focus { background: #fffdf8; border-color: var(--line-deep); }
#searchInput::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    color: var(--ink-soft);
    font-size: 13px;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.search-clear:hover { background: rgba(216, 176, 131, 0.2); }

.view-switch {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    background: rgba(234, 220, 198, 0.55);
    border-radius: 11px;
}

.view-switch button {
    padding: 7px 15px;
    color: var(--ink-soft);
    font-size: 13px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.view-switch button.active {
    color: var(--ink);
    background: var(--card);
    box-shadow: 0 2px 7px rgba(96, 70, 45, 0.12);
}

/* ---------------- 年份 / 标签筛选 ---------------- */
.filter-row {
    max-width: 880px;
    margin: 15px auto 0;
    padding: 0 2px;
}

.chip-group,
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tag-row { margin-top: 9px; }

.chip {
    padding: 5px 14px;
    color: var(--ink-soft);
    font-size: 12.5px;
    background: transparent;
    border: 1px dashed var(--line-deep);
    border-radius: 999px;
    transition: all 0.18s;
}

.chip:hover { color: var(--kraft-deep); background: rgba(216, 176, 131, 0.12); }

.chip.active {
    color: #fffaf0;
    background: var(--kraft-deep);
    border-color: var(--kraft-deep);
    border-style: solid;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    color: var(--ink-soft);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-radius: 3px;
    transition: all 0.18s;
}

.tag-chip span {
    font-size: 10px;
    color: var(--ink-faint);
}

.tag-chip:hover { color: var(--kraft-deep); border-color: var(--kraft); }

.tag-chip.active {
    color: #fff;
    background: var(--sage);
    border-color: var(--sage);
}

.tag-chip.active span { color: rgba(255, 255, 255, 0.8); }

.result-line {
    max-width: 880px;
    margin: 16px auto 0;
    padding: 0 4px;
    color: var(--ink-soft);
    font-size: 13px;
}

.result-line b {
    font-family: var(--hand);
    font-size: 18px;
    color: var(--coral-deep);
}

.clear-filter {
    margin-left: 8px;
    padding: 2px 9px;
    color: var(--ink-soft);
    font-size: 12px;
    background: transparent;
    border: 1px dashed var(--line-deep);
    border-radius: 999px;
}

.clear-filter:hover { color: var(--coral-deep); border-color: var(--coral); }

/* ---------------- 时间线与手账卡片 ---------------- */
.timeline-wrap,
.album-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 10px 22px 30px;
}

.month-block { margin-bottom: 8px; }

.month-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 34px 0 20px;
    padding: 0 4px;
}

.month-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-deep) 0 5px, transparent 5px 10px);
}

.month-tab {
    position: relative;
    display: inline-block;
    padding: 6px 18px 7px;
    color: var(--ink);
    font-family: var(--hand);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #f0d6b2;
    border-radius: 2px;
    box-shadow: 0 3px 7px rgba(96, 70, 45, 0.13);
    transform: rotate(-1deg);
}

.month-tab::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 12px;
    width: 46px;
    height: 13px;
    background: rgba(223, 138, 114, 0.4);
    transform: rotate(-4deg);
}

.month-count {
    flex: 0 0 auto;
    order: 3;
    color: var(--ink-faint);
    font-size: 11.5px;
    letter-spacing: 0.06em;
}

.entry-card {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 30px;
    padding: 28px 30px 22px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 3px;
    box-shadow: var(--shadow-soft);
    transform: rotate(-0.32deg);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.entry-card:nth-of-type(even) { transform: rotate(0.32deg); }

.entry-card:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: var(--shadow);
}

.card-tape {
    position: absolute;
    top: -10px;
    left: 34px;
    width: 92px;
    height: 23px;
    z-index: 2;
    opacity: 0.78;
    transform: rotate(-3deg);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 6px, transparent 6px 12px),
        rgba(216, 176, 131, 0.66);
    box-shadow: 0 2px 4px rgba(96, 70, 45, 0.1);
}

.entry-card:nth-of-type(even) .card-tape {
    left: auto;
    right: 34px;
    transform: rotate(3deg);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 6px, transparent 6px 12px),
        rgba(223, 138, 114, 0.44);
}

.entry-stamp {
    align-self: start;
    padding: 9px 6px 8px;
    text-align: center;
    color: var(--coral-deep);
    border: 1px dashed var(--coral);
    border-radius: 3px;
    transform: rotate(-2deg);
    background: rgba(255, 250, 240, 0.6);
}

.stamp-day {
    display: block;
    font-family: var(--hand);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.stamp-year,
.stamp-week {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
}

.entry-main { min-width: 0; }

.entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 8px;
}

.entry-title {
    margin: 0;
    font-family: var(--hand);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: 0.02em;
    color: var(--ink);
    overflow-wrap: break-word;
}

.entry-mood {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    color: var(--ink-soft);
    font-size: 12px;
    background: rgba(244, 211, 207, 0.4);
    border: 1px solid rgba(223, 138, 114, 0.3);
    border-radius: 999px;
    white-space: nowrap;
}

.entry-content {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.9;
    color: #5b4e42;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 18px;
}

.photo-grid.single { grid-template-columns: minmax(0, 1fr); }

.photo-frame {
    display: block;
    padding: 7px 7px 20px;
    background: #fffefb;
    border: 1px solid #eee2cf;
    box-shadow: 0 3px 9px rgba(96, 70, 45, 0.13);
    transform: rotate(-1.1deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.photo-frame:nth-child(even) { transform: rotate(1.2deg); }
.photo-frame:hover { transform: rotate(0) scale(1.015); box-shadow: 0 7px 16px rgba(96, 70, 45, 0.2); }

.photo-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--card-deep);
}

.photo-grid.single .photo-thumb { aspect-ratio: 4 / 3; }

.entry-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tag {
    padding: 2px 8px;
    color: var(--ink-soft);
    font-size: 11.5px;
    background: rgba(234, 220, 198, 0.42);
    border: 0;
    border-radius: 3px;
    transition: all 0.18s;
}

.tag:hover { color: #fff; background: var(--kraft-deep); }

.entry-place {
    color: var(--ink-faint);
    font-size: 11.5px;
}

.share-btn {
    flex: 0 0 auto;
    padding: 2px 0;
    color: var(--coral-deep);
    font-size: 12.5px;
    background: transparent;
    border: 0;
    border-bottom: 1px dashed rgba(223, 138, 114, 0.7);
    transition: color 0.18s, border-color 0.18s;
}

.share-btn:hover { color: var(--ink); border-color: var(--ink); }

/* ---------------- 空白 / 加载 ---------------- */
.empty-state {
    padding: 58px 24px;
    text-align: center;
    color: var(--ink-soft);
}

.empty-doodle {
    font-family: var(--hand);
    font-size: 48px;
    line-height: 1;
    color: var(--kraft);
    transform: rotate(-6deg);
}

.empty-state h2 {
    margin: 14px 0 4px;
    font-family: var(--hand);
    font-size: 25px;
    color: var(--ink);
}

.empty-state p {
    margin: 0;
    font-size: 13.5px;
}

.load-wrap {
    padding: 14px 0 26px;
    text-align: center;
}

.btn-more {
    padding: 10px 30px;
    color: var(--ink-soft);
    font-family: var(--hand);
    font-size: 18px;
    letter-spacing: 0.05em;
    background: rgba(255, 250, 240, 0.75);
    border: 1px dashed var(--kraft);
    border-radius: 999px;
    transition: all 0.2s;
}

.btn-more:hover {
    color: #fffaf0;
    background: var(--kraft-deep);
    border-color: var(--kraft-deep);
    border-style: solid;
}

.btn-more:disabled { opacity: 0.6; cursor: default; }

/* ---------------- 相册视图 ---------------- */
.album-wrap { padding-top: 24px; }

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 20px;
}

.album-item { margin: 0; }

.album-frame {
    display: block;
    width: 100%;
    padding: 8px 8px 8px;
    background: #fffefb;
    border: 1px solid #eee2cf;
    box-shadow: 0 4px 11px rgba(96, 70, 45, 0.14);
    transform: rotate(-1deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.album-item:nth-child(even) .album-frame { transform: rotate(1deg); }
.album-frame:hover { transform: rotate(0) scale(1.02); box-shadow: 0 8px 18px rgba(96, 70, 45, 0.2); }

.album-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--card-deep);
}

.album-item figcaption {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 7px 4px 0;
}

.album-date {
    color: var(--coral-deep);
    font-size: 10.5px;
    letter-spacing: 0.06em;
}

.album-title {
    overflow: hidden;
    color: var(--ink-soft);
    font-family: var(--hand);
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------------- 页脚 ---------------- */
.site-foot {
    max-width: 880px;
    margin: 10px auto 0;
    padding: 34px 24px 42px;
    text-align: center;
    border-top: 1px dashed var(--line-deep);
}

.foot-doodle {
    font-size: 22px;
    color: var(--coral);
    line-height: 1;
}

.foot-name {
    margin: 7px 0 2px;
    font-family: var(--hand);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.foot-copy {
    margin: 0;
    color: var(--ink-faint);
    font-size: 11.5px;
}

.foot-icp {
    margin: 9px 0 0;
    font-size: 11.5px;
}

.foot-icp a {
    color: var(--ink-faint);
    text-decoration: none;
    border-bottom: 1px dotted var(--line-deep);
}

.foot-icp a:hover { color: var(--kraft-deep); }

.foot-sep {
    margin: 0 4px;
    color: var(--ink-faint);
}

/* 公安备案：图标在左、编号在右，虚线下划线只压在编号上 */
.foot-icp a.foot-police {
    border-bottom: 0;
    white-space: nowrap;
}

.foot-police-icon {
    width: 18px;
    height: 20px;
    margin-right: 4px;
    vertical-align: -4px;
}

.foot-police-num {
    border-bottom: 1px dotted var(--line-deep);
}

.foot-icp a.foot-police:hover .foot-police-num {
    border-bottom-color: var(--kraft-deep);
}

.foot-admin {
    margin: 10px 0 0;
    font-size: 11px;
}

.foot-admin a {
    color: var(--ink-faint);
    text-decoration: none;
    opacity: 0.65;
}

.foot-admin a:hover { opacity: 1; color: var(--coral-deep); }

/* ---------------- 回到顶部 ---------------- */
.to-top {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 40;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--ink-soft);
    font-size: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s, color 0.2s;
}

.to-top:hover { transform: translateY(-3px); color: var(--coral-deep); }

/* ---------------- 照片灯箱 ---------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 76px;
    background: rgba(41, 32, 25, 0.93);
    animation: lb-fade 0.22s ease;
}

@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

.lb-figure {
    position: relative;
    margin: 0;
    max-width: min(1040px, 100%);
    text-align: center;
}

#lbImg {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 132px);
    margin: 0 auto;
    padding: 9px;
    object-fit: contain;
    background: #fffdf8;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
    transform: rotate(-0.35deg);
}

#lbCaption {
    margin-top: 14px;
    color: rgba(255, 248, 236, 0.88);
    font-family: var(--hand);
    font-size: 17px;
    line-height: 1.6;
}

.lb-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #fdf6e8;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    transition: background 0.2s;
}

.lb-close:hover { background: rgba(255, 255, 255, 0.2); }

.lb-nav {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    padding: 0 0 3px;
    transform: translateY(-50%);
    color: #fdf6e8;
    font-family: Georgia, serif;
    font-size: 34px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: background 0.2s;
}

.lb-nav:hover { background: rgba(255, 255, 255, 0.18); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

.lb-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 248, 236, 0.7);
    font-size: 12px;
    letter-spacing: 0.16em;
}

/* ---------------- 提示 ---------------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 120;
    max-width: calc(100vw - 40px);
    padding: 10px 20px;
    color: #fff9ee;
    font-size: 13px;
    background: rgba(74, 61, 48, 0.95);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity 0.22s, transform 0.22s;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 浮现 / 定位 ---------------- */
.entry-card.will-reveal {
    opacity: 0;
    transform: translateY(24px) rotate(0deg);
}

.entry-card.will-reveal.revealed {
    opacity: 1;
    transform: rotate(-0.32deg);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.entry-card.will-reveal.revealed:nth-of-type(even) { transform: rotate(0.32deg); }

.entry-card.entry-focus {
    animation: focus-glow 2.2s ease;
}

@keyframes focus-glow {
    0%, 100% { box-shadow: var(--shadow-soft); }
    18%, 62% { box-shadow: 0 0 0 5px rgba(223, 138, 114, 0.26), var(--shadow); }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 760px) {
    .hero { padding: 34px 14px 6px; }
    .hero-paper { padding: 40px 22px 34px; transform: none; }
    .hero-title { font-size: clamp(38px, 12vw, 54px); }
    .hero-slogan { font-size: 16px; }
    .hero-chips { gap: 6px; margin-top: 18px; }
    .hero-chip { padding: 4px 10px; font-size: 11.5px; }
    .hero-bear { display: none; }
    .doodle-star { right: 20px; top: 16px; }
    .doodle-heart { left: 16px; bottom: 26px; font-size: 22px; }
    .doodle-leaf { display: none; }
    .washi-a { left: 20px; }
    .washi-b { right: 20px; }

    .memory-note { margin: 20px 14px 0; padding: 17px 18px 14px; transform: none; }
    .memory-text { font-size: 15.5px; }

    .toolbar {
        flex-wrap: wrap;
        top: 6px;
        margin: 18px 14px 0;
        padding: 7px;
        border-radius: 13px;
    }
    .search-wrap { flex-basis: 100%; }
    .view-switch { width: 100%; }
    .view-switch button { flex: 1; }

    .filter-row { margin: 12px 14px 0; }
    .chip { padding: 4px 11px; }
    .result-line { margin: 12px 16px 0; }

    .timeline-wrap,
    .album-wrap { padding: 6px 14px 24px; }

    .month-head { margin: 26px 0 15px; gap: 9px; }
    .month-tab { font-size: 18px; padding: 5px 13px 6px; }

    .entry-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 22px;
        padding: 22px 18px 17px;
        transform: none;
    }
    .entry-card:nth-of-type(even) { transform: none; }
    .entry-card:hover { transform: translateY(-2px); }
    .card-tape { left: 18px; width: 76px; height: 20px; }
    .entry-card:nth-of-type(even) .card-tape { right: 18px; }

    .entry-stamp {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        gap: 7px;
        width: fit-content;
        padding: 3px 10px;
        transform: rotate(-1.2deg);
    }
    .stamp-day { font-size: 19px; }
    .stamp-year, .stamp-week { display: inline; font-size: 10px; }

    .entry-title { font-size: 23px; }
    .entry-content { font-size: 14.5px; line-height: 1.85; }

    .photo-grid { gap: 9px; margin: 13px 0 14px; }
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-grid.single { grid-template-columns: minmax(0, 1fr); }
    .photo-frame { padding: 5px 5px 14px; }

    .entry-foot { align-items: flex-end; }
    .share-btn { font-size: 12px; }

    .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

    .lightbox { padding: 56px 12px 70px; }
    #lbImg { max-height: calc(100vh - 190px); padding: 6px; transform: none; }
    #lbCaption { font-size: 14px; margin-top: 9px; }
    .lb-close { top: 12px; right: 12px; width: 38px; height: 38px; }
    .lb-nav { top: auto; bottom: 16px; width: 42px; height: 42px; transform: none; font-size: 28px; }
    .lb-prev { left: calc(50% - 58px); }
    .lb-next { right: calc(50% - 58px); }
    .lb-counter { bottom: 32px; }

    .to-top { right: 14px; bottom: 16px; width: 40px; height: 40px; }
    .toast { bottom: 22px; }
}

@media (max-width: 380px) {
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .entry-card { padding: 20px 14px 16px; }
    .hero-paper { padding: 34px 16px 30px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .entry-card.will-reveal { opacity: 1; transform: none; }
}