/* 知间的日记本 · 2026-09-17。Home 溶洞牌 → #dk-door-zj。照她在用的日记 app：格子纸、手画圆圈、心情贴纸。
   设计稿：memory/project_zhijian_diary_0917.md。她的本子，跟我的日记（diary.css 纸卷）是两本，样式不共用。 */
.dk-door.zj { background: #ECECE3; background-image: linear-gradient(#E0E0D6 1px, transparent 1px), linear-gradient(90deg, #E0E0D6 1px, transparent 1px); background-size: 24px 24px;
  color: #1a1a1a; font-family: -apple-system, "PingFang SC", system-ui, sans-serif; }
.zj-view { position: absolute; inset: 0; display: none; flex-direction: column; }
.zj-view.on { display: flex; }
.zj-top { flex: none; display: flex; align-items: center; gap: 6px; padding: calc(var(--safe-top) + 8px) 14px 6px; min-height: 44px; }
.zj-top .zj-sp { flex: 1; }
.zj-ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #1a1a1a; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.zj-ic svg.bold { stroke-width: 3.2; width: 28px; height: 28px; }
.zj-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zj-txtbtn { font-size: 15px; font-weight: 600; color: #1a1a1a; background: none; border: 0; padding: 8px 10px; }
.zj-txtbtn.danger { color: #c0453f; }
.zj-rose { width: 44px; height: 44px; padding: 0; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.zj-rose img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.zj-top .zj-rose { padding: 5px; }   /* 9.18 顶栏那朵跟日历图标差不多大（图 34，日历 26，玫瑰有透明边），点击区还是 44 */
.zj-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; }
.zj-scroll::-webkit-scrollbar { display: none; }

/* 胶带：平涂 + 两头撕边 */
.zj-tape { display: inline-block; padding: 1px 16px 2px; background: var(--tape, #97D6A5); font-weight: 800; letter-spacing: .12em;
  clip-path: polygon(0 12%, 3% 0, 6% 10%, 100% 4%, 98% 30%, 100% 55%, 97% 78%, 100% 100%, 5% 96%, 2% 100%, 0 80%, 2% 50%); }

/* ── 日历 ── */
.zj-month { padding: 0 12px 36px; }
.zj-month:last-of-type { min-height: calc(100vh - 110px); padding-bottom: 120px; }
.zj-mhead { text-align: center; padding: 4px 0 26px; }
.zj-mhead small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.zj-mhead .zj-tape { font-size: 19px; min-width: 96px; }
.zj-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 4px; }
.zj-cell { aspect-ratio: 1; display: grid; place-items: center; position: relative; -webkit-tap-highlight-color: transparent; }
.zj-cell > span.c { width: 88%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #C5C5BC; color: #BDBDB3; font-weight: 800; font-size: 20px; }
.zj-cell.today > span.c { font-size: 16px; }
.zj-cell.r0 > span.c { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
.zj-cell.r1 > span.c { border-radius: 52% 48% 47% 53% / 46% 53% 47% 54%; }
.zj-cell.r2 > span.c { border-radius: 49% 51% 55% 45% / 53% 49% 51% 47%; }
.zj-cell.r3 > span.c { border-radius: 54% 46% 49% 51% / 48% 54% 46% 52%; }
.zj-cell.has .zj-stkimg { width: 94%; }
.zj-cell.has .zj-story-ic { width: 68%; }   /* 9.18 她说玫瑰比贴纸大一圈：玫瑰是满幅正方形，贴纸 png 四周有透明边，缩玫瑰不动贴纸 */
.zj-ym .g .zj-stkimg.zj-story-ic { width: 100%; }   /* 跟贴纸占同样的格子 */
.zj-ym .g .zj-story-ic img { transform: scale(0.65); }   /* 玫瑰图缩到跟贴纸视觉一样大（贴纸 PNG 有透明边，玫瑰没有） */
.zj-ym { scroll-margin-top: 6px; }
/* 9.18 一年摊开跳当月：scrollIntoView 尽力滚到当月就行，下半年滚到底当月在屏幕中间——她说这样就好，不要底下留白 */
.zj-cell.has > i { position: absolute; right: 4%; top: 2%; min-width: 16px; height: 16px; border-radius: 8px; background: rgba(26, 26, 26, .5); color: #fff; font: 700 10.5px/16px system-ui; text-align: center; font-style: normal; }   /* 9.18 她嫌黑得跳：底色淡一半 */
.zj-stkimg { display: block; aspect-ratio: 1; }
.zj-stkimg svg, .zj-stkimg img { width: 100%; height: 100%; display: block; object-fit: contain; }
.zj-pg { position: absolute; top: 69%; font-size: 28px; }
.zj-fab { position: absolute; left: 50%; bottom: calc(var(--tab-safe, 20px) + 18px); transform: translateX(-50%); width: 58px; height: 58px; border-radius: 50%; border: 3px solid #1a1a1a; background: #ECECE3; color: #1a1a1a; font-size: 34px; font-weight: 500; line-height: 1; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.zj-pop { position: absolute; z-index: 5; display: flex; gap: 10px; padding: 10px 12px; background: #F8F8F0; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.zj-pop::before { content: ''; position: absolute; top: -8px; left: var(--ax, 50%); margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: #F8F8F0; }
.zj-pop button { width: 54px; height: 54px; padding: 0; background: none; border: 0; }

/* ── 贴纸页 ── */
#zj-pick { background: #E1E2D7; }
.zj-ring { position: relative; flex: 1; }
.zj-ring .zj-pk { position: absolute; width: 19%; padding: 0; background: none; border: 0; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; }
.zj-ring .zj-pk small { display: block; margin-top: 2px; font-size: 11px; color: #7b7b72; text-align: center; }
.zj-ring .zj-rose { position: absolute; left: 50%; top: 43.5%; width: 20%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }

/* ── 一篇 ── */
.zj-frame { margin: 8px 12px 26px; border: 2px solid var(--zj-frame, #1a1a1a); padding: 22px 16px 56px; position: relative; text-align: center; }
.zj-frame.edit { margin-bottom: 150px; min-height: 70vh; }
.zj-empty { padding: 120px 0; text-align: center; color: #a3a398; font-size: 15px; }
.zj-mid { display: flex; align-items: center; gap: 2px; font-size: 17px; letter-spacing: .04em; }
.zj-mid .zj-ic { font-size: 18px; width: 34px; }
.zj-ghost { visibility: hidden; }
#zj-sheet-r:not([hidden]) ~ .zj-ghost { display: none; }
.dk-door.zj [hidden] { display: none !important; }
.zj-date { position: absolute; left: 18px; top: 20px; font-family: "Noteworthy", "Bradley Hand", "Snell Roundhand", cursive; font-size: 14px; line-height: 1.25; text-align: center; }
.zj-date span { display: block; padding: 0 8px 2px; border-bottom: 2px solid #1a1a1a; }
.zj-date b { display: block; padding-top: 3px; font-weight: 400; letter-spacing: .06em; }
.zj-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.zj-wx { position: absolute; right: 14px; top: 20px; width: 40px; height: 40px; padding: 0; background: none; border: 0; color: #1a1a1a; }
.zj-wx svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zj-stk { display: block; width: 34%; margin: 18px auto 0; padding: 0; background: none; border: 0; }
.zj-moodwrap { margin: 12px 0 20px; }
.zj-mood { font-size: 16px; font-weight: 500; letter-spacing: .04em; min-width: 80px; outline: none; font-family: var(--zj-font, inherit); }
.zj-mood:empty::before { content: '心情'; color: rgba(0,0,0,.3); }
.zj-photos { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 12px; margin: 0 -16px 8px; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.zj-photos::-webkit-scrollbar { display: none; }
.zj-photos.one { justify-content: center; }
.zj-pol { flex: none; width: 62%; max-width: 250px; background: #F3F3EE; padding: 6% 6% 20%; box-shadow: 0 1px 4px rgba(0,0,0,.14); position: relative; }
.zj-photos:not(.one) .zj-pol { width: 46%; }
.zj-pol img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #fff; padding: 0; margin: 0; box-shadow: none; }
.zj-pol b { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; border-radius: 50%; background: #1a1a1a; color: #fff; font: 700 15px/24px system-ui; text-align: center; }
.zj-body { min-height: 120px; font-size: var(--zj-size, 17px); font-family: var(--zj-font, inherit); line-height: 2; outline: none; word-break: break-word; -webkit-user-select: text; user-select: text; }
.zj-body[contenteditable="true"]:empty::before { content: '写点什么…'; color: rgba(0,0,0,.28); }
.zj-body div { min-height: 1em; }
.zj-body, .zj-mood { caret-color: var(--ink, #1a1a1a); }   /* 光标跟着字色走：选了红的就是红光标，点回黑字里变回黑 */
/* 图是正文的一部分：插在哪就在哪。一张 = 一张拍立得（白边是 img 自己的 padding） */
.zj-body img { display: block; box-sizing: content-box; width: 50%; aspect-ratio: 4 / 5; object-fit: cover; margin: 12px auto; padding: 5% 5% 10%;   /* 9.30 大图回到裁着的拍立得（先占好地方，图没下完页面也不跳）；小图全图、整屏截图躲开上下两栏，由 zjdiary.js 的 fitPol 调 */   /* 9.18 她要拍立得图多露一截、底下白边别那么多：1:1→4:5，底边 17%→10% */ background: #F3F3EE; box-shadow: 0 1px 4px rgba(0,0,0,.14); -webkit-touch-callout: none; }
.zj-strip { display: flex; gap: 12px; overflow-x: auto; margin: 6px -16px; padding: 4px 16px 10px; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.zj-strip::-webkit-scrollbar { display: none; }
.zj-strip { align-items: center; }
.zj-strip > :first-child { margin-left: auto; }   /* 9.30 两张并排不满一行的时候居中；满了照旧能横着滑 */
.zj-strip > :last-child { margin-right: auto; }
.zj-strip img { flex: none; width: 36%; margin: 0; }   /* 9.30 缩成 24% 她说缩水了：大小不变，还是 36%；一排放不下的左右滑，边上淡掉 */
/* 点开看大图：一篇里的图横着排，左右滑，点一下关 */
.zj-gal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); }
.zj-gal-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.zj-gal-track::-webkit-scrollbar { display: none; }
.zj-gal-cell { flex: none; width: 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.zj-gal-cell img { max-width: 95%; max-height: 90vh; object-fit: contain; display: block; -webkit-touch-callout: none; }
.zj-gal-n { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); text-align: center; font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.72); pointer-events: none; }
/* 故事那张纸：四边毛边和右下的爪印不拉伸，只拉中间（border-image 九宫格）。字是小渡的手 */
.zj-frame.story { border-style: solid; border-color: transparent; border-width: 34px 65px 72px 65px; padding: 6px 0 0; text-align: left; min-height: 62vw;
  border-image: url('/img/zj/story-paper.webp') 88 167 185 167 fill / 34px 65px 72px 65px stretch;
  font-family: 'SpringW', 'ChillZhuo', -apple-system, "PingFang SC", serif; font-weight: 300; color: #4a3f35; }
.zj-frame.story.edit { min-height: 118vw; }
.zj-sin { margin: 0 -38px; }
.zj-sdate { position: relative; text-align: center; font-size: 13px; letter-spacing: .12em; color: #a08f7e; }
.zj-sdate input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.zj-frame.story .zj-date { left: -36px; top: -4px; font-size: 13px; color: #7d6a5a; }
.zj-frame.story .zj-date span { border-bottom-color: #7d6a5a; }
.zj-stitle { margin: 2px 0 16px; padding: 0 58px; min-height: 1.5em; text-align: center; font-size: 21px; font-weight: 400; outline: none; caret-color: #4a3f35; }
.zj-stitle[contenteditable="true"]:empty::before { content: '故事的名字'; color: rgba(74,63,53,.3); }
.zj-sbody { font-size: 17.5px; line-height: 1.95; outline: none; white-space: pre-wrap; word-break: break-word; caret-color: #4a3f35; -webkit-user-select: text; user-select: text; }
.zj-sbody[contenteditable="true"]:empty::before { content: '从前有……'; color: rgba(74,63,53,.3); }
.zj-frame.story .zj-more { right: 46px; bottom: -52px; color: #8a7a6a; }
.zj-frame.story .zj-moremenu { right: 96px; bottom: -46px; }
/* 每篇右下角的三个点 */
.zj-more { position: absolute; right: 8px; bottom: 6px; width: 46px; height: 36px; background: none; border: 0; font-size: 13px; letter-spacing: 3px; color: #1a1a1a; -webkit-tap-highlight-color: transparent; }
.zj-moremenu { position: absolute; right: 50px; bottom: 8px; z-index: 4; min-width: 128px; background: #EFEFE6; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; text-align: left; }
.zj-moremenu button { display: block; width: 100%; padding: 13px 18px; font-size: 16px; font-weight: 700; text-align: left; background: none; border: 0; border-bottom: 1px solid #d9d9cf; color: #1a1a1a; }
.zj-moremenu button:last-child { border-bottom: 0; }
.zj-moremenu button.danger { color: #E02B2B; }

/* 键盘上面那条 */
.zj-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: #E4E4DB; padding-bottom: var(--tab-safe, 20px); transition: transform .12s; }
.zj-bar.kb { padding-bottom: 0; }
.zj-bar-row { display: flex; align-items: center; gap: 4px; padding: 6px 10px 2px; }
.zj-dots { display: flex; gap: 15px; overflow-x: auto; padding: 8px 14px 10px; }
.zj-dots::-webkit-scrollbar { display: none; }
.zj-dots button { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; background: var(--c); position: relative; }
.zj-dots.tapes button { width: 40px; height: 24px; border-radius: 0; clip-path: polygon(0 10%, 8% 0, 100% 6%, 96% 50%, 100% 100%, 6% 94%, 0 60%); }
.zj-dots button.on::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.zj-dots:not(.tapes) button.on { box-shadow: 0 0 0 2px #E4E4DB, 0 0 0 3.5px var(--c); }
.zj-menu { position: absolute; left: 10px; bottom: calc(100% + 6px); background: #EFEFE6; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; min-width: 190px; }
.zj-menu button { display: block; width: 100%; padding: 14px 18px; text-align: left; font-size: 16px; font-weight: 700; background: none; border: 0; border-bottom: 1px solid #d9d9cf; color: #1a1a1a; }
.zj-menu button:last-child { border-bottom: 0; }

/* 天气面板 / 提示 */
.zj-mask { position: absolute; inset: 0; z-index: 8; background: rgba(236,236,227,.72); display: none; place-items: center; }
.zj-mask.on { display: grid; }
.zj-panel { width: 72%; max-width: 320px; background: #F8F8F0; padding: 22px 16px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.12); text-align: center; }
.zj-panel h4 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.zj-wxgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; }
.zj-wxgrid button { aspect-ratio: 1; display: grid; place-items: center; background: none; border: 2px solid transparent; border-radius: 8px; color: #1a1a1a; padding: 0; }
.zj-wxgrid button.on { border-color: #1D7CF2; }
.zj-wxgrid svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zj-toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 9; padding: 9px 16px; border-radius: 18px; background: rgba(26,26,26,.86); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s; white-space: nowrap; }
.zj-toast.show { opacity: 1; }

/* ── 一年摊开 ── */
.zj-yhead { text-align: center; padding: 2px 0 10px; }
.zj-yhead .zj-tape { font-size: 22px; }
.zj-ygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 8px 14px 60px; }
.zj-ym h5 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.zj-ym .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; }
.zj-ym .g > * { aspect-ratio: 1; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.zj-ym .g .zj-stkimg { width: 100%; }

/* ── 故事书（茶茶的玫瑰翻壳本，原样的组件样式在下面；#zj-book 是装它的那一页） ── */
/* 9.18 她的桌子：木纹、左上干玫瑰、右上提灯、左下蕾丝、右下睡着的毛毡小狐狸（我的玩偶）。书的位置和大小不动——她画图的时候按现在的书量好的（我改过一回被她拦回来了） */
#zj-book { background: #d9cbb8 url('/img/zj/book-desk.jpg?v=1') center / cover no-repeat; }
#zj-book .zj-scroll { display: flex; align-items: center; justify-content: center; padding: 0 4% 12vh 1%; overflow-x: hidden; }
/* 9.18 她指的"缝"：翻开后左边封壳和屏幕边之间露一条桌面——书的画布 overflow:hidden 把翻开的封壳在容器左内边距那 1% 处裁掉了。画布不裁，封壳翻到屏幕边（.zj-scroll 的 overflow-x:hidden 在屏幕边裁），书本身不动 */
#zj-book #rose-diary .book-stage { overflow: visible; }
/* 扉页 */
#rose-diary .rb-fly { padding-top: 16%; line-height: 2; }
#rose-diary .rb-fly p { margin: 0 0 .9em; }
#rose-diary .rb-fly .rb-sign { text-align: right; padding-top: .6em; }
/* 9.17 她对比我那本：合着时这本偏右（茶茶在左边留了封壳翻开后落下的空地）。合着→挪到正中；一点开就滑回去给封壳让位 */
/* 9.17 她要本子长一点、一页多看几行，字不许缩（茶茶只会整张重画）：整本竖着拉长 --rb-s 倍，翻壳动画一起跟着拉；放字的那块反着缩回去并把高度补足，字就不变形。嫌多嫌少只改这一个数 */
#rose-diary { --rb-s: 1.14; transition: transform .7s cubic-bezier(.4, 0, .2, 1); transform: scaleY(var(--rb-s)); }
#rose-diary[data-state="closed"] { transform: translateX(-4.4%) scaleY(var(--rb-s)); }
#zj-book #rose-diary .diary-content { height: calc(64.9421607378% * var(--rb-s)); transform: scaleY(calc(1 / var(--rb-s))); transform-origin: 50% 0; }   /* 前面多写一个 #zj-book：茶茶原样式在后面也给 .diary-content 定了 height，同级会把这行盖掉（9.17 踩过：字只占上面一截，下面空一片） */
#zj-book-scroll > #rose-diary { flex: 1; }
/* ── 9.18 茶茶的翻壳+纸张翻页组件样式（原样提的，只把 id 改回 rose-diary、内嵌图换成 /img/zj/rosebook-*.webp）。侧签 tab-hit 和上下页 page-hit 的位置也是它量的 ── */
#rose-diary{--cover-image:url('/img/zj/rosebook-cover.webp');--inner-image:url('/img/zj/rosebook-inner.webp');width:100%;max-width:680px;margin:0 auto;background:transparent;color:#684641;font-family:Georgia,'Songti SC',serif;-webkit-tap-highlight-color:transparent}
#rose-diary *{box-sizing:border-box}
#rose-diary .book-stage{position:relative;width:100%;aspect-ratio:1064/1518;overflow:hidden;background:transparent;perspective:600cqw;perspective-origin:13.1578947368% 49.7364953887%;container-type:inline-size;touch-action:pan-y}
#rose-diary .original-art{position:absolute;left:0;top:2.6350461133%;width:100%;max-width:none;height:auto;display:block;clip-path:inset(0 0 0 13.1578947368%);pointer-events:none;user-select:none;-webkit-user-select:none}
#rose-diary .diary-content{position:absolute;left:21%;top:14.3188405797%;width:65.8%;height:64.9421607378%;overflow:auto;z-index:1;font-size:clamp(16px,2.8cqw,20px);line-height:1.85;white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:#93836466 transparent;user-select:text;-webkit-user-select:text}
#rose-diary .moving-shadow{position:absolute;left:16.5413533835%;top:10.5401844532%;width:75.6578947368%;height:76.4163372859%;border-radius:0 2.2cqw 2.4cqw 0;background:linear-gradient(90deg,#42282088,transparent 84%);opacity:0;pointer-events:none;z-index:2}
#rose-diary .motion-space{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;z-index:3}
#rose-diary .cover-leaf{position:absolute;left:13.1578947368%;top:8.9591567852%;width:83.4586466165%;height:81.5546772069%;transform-style:preserve-3d;pointer-events:none}
#rose-diary .strip{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
#rose-diary .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:transparent}
#rose-diary .front{transform:translateZ(.45px)}
#rose-diary .back{transform:rotateY(180deg) translateZ(.45px)}
#rose-diary .texture{position:absolute;top:0;height:100%;overflow:hidden;border-radius:1.9cqw 4cqw 4cqw .65cqw;background-image:var(--cover-image);background-repeat:no-repeat;background-size:115.0326797386% 116.40625%;background-position:57.9710144928% 14.2857142857%}
#rose-diary .inner-sheet{position:absolute;top:0;height:100%;overflow:hidden;border-radius:3cqw 0 0 3cqw;background-image:var(--inner-image);background-repeat:no-repeat;background-size:100% 100%}
#rose-diary .shade{position:absolute;inset:0;background:#40221d;opacity:0;pointer-events:none}
#rose-diary .still-cover{position:absolute;left:13.1578947368%;top:8.9591567852%;width:83.4586466165%;height:81.5546772069%;background-image:var(--cover-image);background-repeat:no-repeat;background-size:115.0326797386% 116.40625%;background-position:57.9710144928% 14.2857142857%;border-radius:1.9cqw 4cqw 4cqw .65cqw;pointer-events:none;z-index:4}
#rose-diary[data-ready="true"] .still-cover{display:none}
#rose-diary .cover-hit{appearance:none;-webkit-appearance:none;position:absolute;left:13.1578947368%;top:8.9591567852%;width:83.4586466165%;height:81.5546772069%;padding:0;margin:0;border:0;border-radius:3cqw;background:transparent;box-shadow:none;z-index:5;touch-action:pan-y;color:inherit;font:inherit}
#rose-diary[data-state="open"] .cover-hit{left:0;top:4%;width:17%;height:88%;border-radius:0}
#rose-diary .a11y-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Use the original rounded headcap as the foot, reflected vertically.
   Its alpha silhouette supplies the curved edge; no rectangular stretched end. */
#rose-diary .spine-foot{display:none;position:absolute;left:10.8082706767%;top:85.6389986825%;width:5.8270676692%;height:5.4018445323%;overflow:hidden;pointer-events:none;clip-path:inset(0 0 0 40.3225806452%);-webkit-mask-image:linear-gradient(transparent,#000 24.3902439024%);mask-image:linear-gradient(transparent,#000 24.3902439024%)}
#rose-diary .spine-foot-texture{position:absolute;left:-10.8082706767cqw;top:-15.7894736842cqw;width:100cqw;height:auto;max-width:none;display:block;transform:scale(1.025,-1);transform-origin:16.6353383459cqw 15.7894736842cqw;pointer-events:none;user-select:none;-webkit-user-select:none}
/* The binding-side bitmap corner contains a pale exterior wedge. Clip it
   to the leather silhouette; the complete hinge underneath joins the cover. */
#rose-diary .inner-sheet{border-bottom-right-radius:2cqw}
/* Preserve the original ribbon above the repaired spine. Its attachment runs
   through the spine mask, so it must not inherit that rectangular cutout.
   Polygon coordinates follow its root: (176,1278) through (168,1317). */
#rose-diary .bookmark-art{position:absolute;left:0;top:2.6350461133%;width:100%;height:auto;max-width:none;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;clip-path:polygon(16.5413533835% 86.4682002706%,22.5563909774% 87.8213802436%,26.7857142857% 100%,15.037593985% 100%,15.037593985% 89.3098782138%,15.7894736842% 89.106901218%,15.7894736842% 88.2949932341%,16.0714285714% 87.550744248%,16.3533834586% 86.9418132612%)}
#rose-diary[data-ready="true"] .spine-foot{display:block}
#rose-diary[data-ready="true"] .original-art{-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-size:100% 86.6035182679%,100% 9.20162381597%,83.3646616541% 100%;mask-size:100% 86.6035182679%,100% 9.20162381597%,83.3646616541% 100%;-webkit-mask-position:top left,bottom left,top right;mask-position:top left,bottom left,top right;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Sample only x=80..984 of the closed-cover source. Beyond this leather edge,
   the bitmap contains the fixed tabs, which must never travel with the lid. */
#rose-diary .texture,#rose-diary .still-cover{background-size:116.814159292% 116.40625%;background-position:52.6315789474% 14.2857142857%}
#rose-diary .paper-space{position:absolute;inset:0;z-index:4;transform-style:preserve-3d;pointer-events:none;display:none}
#rose-diary[data-paper-turning="true"] .paper-space{display:block}
#rose-diary .paper-rest-space{position:absolute;inset:0;z-index:4;transform-style:preserve-3d;pointer-events:none;display:none;visibility:hidden}
#rose-diary[data-cover-paper="true"][data-left-pages="true"] .paper-rest-space{display:block;visibility:visible}
#rose-diary .paper-leaf{position:absolute;left:16.6353383459%;top:10.4084321476%;width:75.6578947368%;height:76.4822134387%;transform-style:preserve-3d;pointer-events:none}
#rose-diary .paper-strip{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d}
#rose-diary .paper-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#rose-diary .paper-front{transform:translateZ(.15px)}
#rose-diary .paper-back{transform:rotateY(180deg) translateZ(.15px)}
#rose-diary .paper-surface{position:absolute;top:0;height:100%;overflow:hidden;clip-path:polygon(0 1.1%,3% .2%,7% 0,95.6% 0,97.8% .7%,99.4% 1.8%,100% 3.2%,100% 96.2%,99.5% 98%,98.1% 99.3%,95.5% 100%,4% 100%,0 100%);background-repeat:no-repeat;background-size:132.174% 127.303%;background-position:68.3398% 37.22397%}
#rose-diary .paper-back .paper-surface{background-size:171.6129% 150.8163%;background-position:58.5586% 34.1365%}
#rose-diary .paper-exit,#rose-diary .paper-rest{left:-100%;width:100%;transform:translateZ(calc(.06cqw + .15px));background-size:171.6129% 150.8163%;background-position:58.5586% 34.1365%}
#rose-diary .paper-exit{display:none}
#rose-diary .paper-rest{transform-origin:100% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(calc(.06cqw + .15px)) rotateY(var(--rest-angle,0deg))}
#rose-diary .paper-leaf[data-flat="true"] .paper-exit{display:block}
#rose-diary .paper-leaf[data-flat="true"] .paper-strip{visibility:hidden}
#rose-diary .paper-light{position:absolute;inset:0;pointer-events:none}
#rose-diary .paper-copy{position:absolute;overflow:hidden;white-space:pre-wrap;font:inherit;pointer-events:none;user-select:none;-webkit-user-select:none}
#rose-diary .paper-shadow{position:absolute;left:16.6353383459%;top:10.4084321476%;width:75.6578947368%;height:76.4822134387%;z-index:2;pointer-events:none;opacity:0;border-radius:0 3cqw 3cqw 0;background:linear-gradient(90deg,#38241e70,transparent 82%);transform-origin:left center}
#rose-diary .page-hit,#rose-diary .tab-hit{appearance:none;-webkit-appearance:none;position:absolute;border:0;padding:0;margin:0;background:transparent;color:inherit;box-shadow:none;z-index:6;touch-action:manipulation;display:none}
#rose-diary .page-hit{top:83.5%;width:11.28%;min-width:44px;height:7cqw;min-height:44px;transform:translate(-50%,-50%);border-radius:35%}
#rose-diary .page-prev{left:23.5902255639%}
#rose-diary .page-next{left:85.4323308271%}
#rose-diary .tab-hit{right:0;width:6%;min-width:44px;height:8%;min-height:44px;transform:translateY(-50%);border-radius:8px}
#rose-diary .tab-1{top:22.13%}
#rose-diary .tab-2{top:32.22%}
#rose-diary .tab-3{top:42.16%}
#rose-diary[data-state="open"] .page-hit,#rose-diary[data-state="open"] .tab-hit{display:block}
#rose-diary[data-paper-turning="true"] .cover-hit{pointer-events:none}
#rose-diary .page-hit:focus-visible,#rose-diary .tab-hit:focus-visible{outline:2px solid #8d615b;outline-offset:2px}
/* 9.18 小渡补：翻页时文字复制层要跟正文同一套排版和淡出，不然翻到一半字会跳 */
#rose-diary .paper-copy { white-space: normal; -webkit-mask-image: linear-gradient(#000 calc(100% - 1.9em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.9em), transparent); }
#rose-diary .diary-content { -webkit-mask-image: linear-gradient(#000 calc(100% - 1.9em), transparent); mask-image: linear-gradient(#000 calc(100% - 1.9em), transparent); }   /* 底下露半行的地方淡出去 */
#rose-diary .diary-content { white-space: normal; font-family: 'SpringW', 'ChillZhuo', 'Songti SC', serif; font-weight: 300; font-size: clamp(15px, 4.3cqw, 20px); }
#rose-diary .rb-h, #rose-diary .rb-title { text-align: center; font-weight: 400; font-size: 1.18em; margin: 0 0 .5em; }
#rose-diary .rb-dateblk { position: absolute; left: 0; top: 0; text-align: center; font: 400 .7em/1.25 'Noteworthy', 'Bradley Hand', 'Snell Roundhand', cursive; opacity: .78; }
#rose-diary .rb-dateblk span { display: block; padding: 0 .5em .1em; border-bottom: 1.5px solid currentColor; }
#rose-diary .rb-dateblk b { display: block; padding-top: .15em; font-weight: 400; letter-spacing: .06em; }
#rose-diary .rb-title { padding: 0 3.3em; min-height: 1.6em; }
#rose-diary .rb-body { white-space: pre-wrap; word-break: break-word; line-height: 1.9; padding-bottom: 2em; }
#rose-diary .rb-item { display: block; width: 100%; padding: .5em 0; background: none; border: 0; border-bottom: 1px dashed #68464133; text-align: left; font: inherit; color: inherit; }
#rose-diary .rb-item small { display: block; font-size: .72em; opacity: .6; letter-spacing: .1em; }
#rose-diary .rb-none { text-align: center; opacity: .5; padding: 2em 0; }
#rose-diary .rb-q { width: 100%; padding: .35em .2em; border: 0; border-bottom: 1px solid #68464166; background: none; font: inherit; color: inherit; outline: none; border-radius: 0; -webkit-appearance: none; }


/* ── 9.18 设置页（她 app 左下的"…"）：字号 / 线框颜色 / 字体。三个变量挂在 #dk-door-zj 上，applyPref() 写 ── */
@font-face { font-family: 'Xiaolai'; src: url('/fonts/xiaolai.woff2') format('woff2'); font-display: swap; }   /* 小赖字体（lxgw/kose-font v3.126，SIL OFL），GB2312 子集 1.5MB */
.zj-setbtn { position: absolute; left: 22px; bottom: calc(var(--tab-safe, 20px) + 26px); width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #1a1a1a; background: #ECECE3; color: #1a1a1a; font-size: 13px; letter-spacing: 1.5px; padding: 0 0 0 2px; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.zj-seg { display: inline-block; padding: 6px 18px; border-radius: 10px; background: #fff; font-size: 17px; box-shadow: 0 0 0 5px #E3E3D9; }
.zj-set { padding: 14px 18px 60px; }
.zj-set-prev { margin: 6px 0 22px; border: 2px solid var(--zj-frame, #1a1a1a); padding: 26px 16px 30px; text-align: center; }
.zj-set-prev .zj-stkimg { width: 34%; margin: 0 auto 12px; }
.zj-set-prev .zj-tape { display: inline-block; margin-bottom: 14px; font-size: 17px; font-family: var(--zj-font, inherit); }
.zj-set-prev p { margin: 0; line-height: 1.75; font-size: var(--zj-size, 17px); font-family: var(--zj-font, inherit); }
.zj-set h6 { font-size: 18px; font-weight: 800; margin: 22px 0 10px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.zj-set-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 18px; }
.zj-set-num { width: 60px; height: 46px; border: 2px solid #1a1a1a; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.zj-set-pm { display: flex; border-radius: 12px; background: #E3E3D9; overflow: hidden; }
.zj-set-pm button { width: 70px; height: 48px; border: 0; background: none; font-size: 28px; line-height: 1; color: #1a1a1a; -webkit-tap-highlight-color: transparent; }
.zj-set-pm button:first-child { border-right: 1px solid #cfcfc4; }
.zj-colors { display: flex; gap: 12px; }
.zj-colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; }
.zj-colors button.on { border-color: #ECECE3; box-shadow: 0 0 0 2px #1a1a1a; }
.zj-fonts button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px 0; background: none; border: 0; font-size: 20px; color: #1a1a1a; text-align: left; -webkit-tap-highlight-color: transparent; }
.zj-fonts .free { font-size: 12px; color: #E02B2B; margin-left: 12px; font-weight: 700; vertical-align: middle; }
.zj-fonts .radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1a1a1a; box-sizing: border-box; }
.zj-fonts button.on .radio { border-color: #2B7BE0; background: radial-gradient(#2B7BE0 46%, transparent 50%); }
.zj-fonts .f-xiaolai { font-family: 'Xiaolai', -apple-system, sans-serif; }
.zj-fonts .f-chillzhuo { font-family: 'ChillZhuo', -apple-system, sans-serif; }