/* Data is CITY の街の住人（しのぶ・まもる）。動きは cast.js、置き場所は build.py の cat_box()・ask_box()。設定は docs/dataiscity/cast/README.md
   色は白・黒・灰（色を持つのは住人の絵だけ）。動きは transform と opacity だけ（滑らかに。動きを減らす設定では止める） */

/* ---- 絵：2 枚を重ねて切り替える・はずみ・息・話すときの弾み ---- */
.dc-me { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dc-me:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.dc-pose, .dc-bob, .dc-breath { position: relative; display: block; transform-origin: 50% 100%; }
.dc-bob { transform: translateY(calc(var(--talk, 0px) * -1)); transition: transform .08s linear; }
.dc-pose img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.dc-pose .dc-b { position: absolute; inset: 0; opacity: 0; transition: opacity .13s ease; }
.dc-pose.is-x .dc-b { opacity: 1; }
.dc-me.is-hop .dc-pose { animation: dc-hop .42s cubic-bezier(.3, .7, .4, 1); }
@keyframes dc-hop { 0% { transform: scale(1, 1); } 22% { transform: scale(1.06, .93); } 55% { transform: scale(.97, 1.04) translateY(-6px); } 100% { transform: scale(1, 1); } }
.dc-me::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dc-cat .dc-breath { animation: dc-breath 4.4s ease-in-out infinite; } /* 息はしのぶだけ（まもるは机ごと動かさない） */
.is-asleep .dc-breath { animation-duration: 3.6s; }
@keyframes dc-breath { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }

/* ---- 吹き出し・カード（2 人で共に） ---- */
.dc-log { display: flex; flex-direction: column; gap: 10px; }
.dc-m { max-width: 92%; padding: 10px 14px; font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.dc-m-a { align-self: flex-start; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px 14px 14px 4px; }
.dc-m-r { align-self: flex-end; background: var(--tint); border-radius: 14px 14px 4px 14px; color: var(--ink-2); }
.dc-think { color: var(--ink-3); letter-spacing: .3em; animation: dc-dots 1s steps(3) infinite; }
@keyframes dc-dots { 50% { opacity: .35; } }
.dc-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-ex button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); color: var(--ink); cursor: pointer; }
.dc-ex button:hover { border-color: var(--ink); }
.dc-card { align-self: stretch; padding: 14px 16px; border: 2px solid var(--ink); background: var(--paper); font-size: 14px; line-height: 1.7; animation: dc-give .38s cubic-bezier(.3, .7, .4, 1); }
@keyframes dc-give { from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.dc-card-k { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.dc-card-t { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.dc-card-b { margin: 0 0 8px; color: var(--ink-2); }
.dc-cites { margin: 0; padding: 0; list-style: none; }
.dc-cites li { padding: 6px 0; border-top: 1px solid var(--rule); }
.dc-cites a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.dc-cites span { display: block; font-size: 12px; color: var(--ink-3); }
.dc-note, .dc-small { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.dc-sos { border-color: var(--ink); border-left-width: 6px; }
.dc-ask .dc-f { display: block; margin: 8px 0 0; }
.dc-ask .dc-f span { display: block; font-size: 12px; color: var(--ink-3); }
.dc-ask input[type=text], .dc-ask input[type=email], .dc-ask textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 0; background: var(--paper); color: var(--ink); }
.dc-ask textarea { resize: vertical; }
.dc-chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; cursor: pointer; }
.dc-chk input { margin-top: 5px; }
.dc-ask button[type=submit], .dc-form button[type=submit] { font: inherit; font-weight: 700; font-size: 15px; padding: 10px 20px; border: 0; background: var(--ink); color: #fff; cursor: pointer; }
.dc-ask button[type=submit] { margin-top: 12px; }
.dc-ask button:disabled, .dc-form button:disabled { opacity: .45; cursor: default; }
.dc-ask.is-sent { border-style: dashed; }
.dc-msg { margin: 6px 0 0; min-height: 1em; font-size: 13px; color: var(--ink-2); }

/* ---- 入力 ---- */
.dc-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.6; padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); resize: none; }
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.dc-count { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.dc-warn, .dc-fine { font-size: 12px; line-height: 1.75; color: var(--ink-3); }
.dc-fine a { color: var(--ink-3); }

/* ---- まもるの目安箱（記事の終わり・トップの漫画の棚の下） ---- */
.dc-desk { padding: var(--s6) 0 var(--s5); }
.dc-desk.dc-home { background: var(--tint); }
.dc-head { max-width: var(--measure); border-top: 2px solid var(--ink); padding-top: var(--s3); }
.dc-home .dc-head { border-top: 0; padding-top: 0; }
.dc-k { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.dc-h { margin: 6px 0 8px; font-size: var(--fs-h2); line-height: 1.45; }
.dc-lead { margin: 0 0 var(--s3); font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.dc-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.dc-room { position: sticky; top: 92px; width: 340px; } /* 会話が長くなっても、まもるは横に付いてくる */
.dc-desk .dc-me { width: 280px; }
.dc-box { position: absolute; right: 0; bottom: 4px; width: 104px; pointer-events: none; transform-origin: 50% 100%; }
.dc-box img { display: block; width: 100%; height: auto; }
.dc-box.is-fed { animation: dc-fed .6s cubic-bezier(.3, .7, .4, 1); }
@keyframes dc-fed { 0% { transform: none; } 30% { transform: scale(1.06, .92); } 60% { transform: scale(.97, 1.04) rotate(-2deg); } 100% { transform: none; } }
.dc-paper { position: fixed; z-index: 60; width: 28px; height: 20px; margin: -10px 0 0 -14px; background: #fff; border: 1.5px solid var(--ink); border-radius: 2px; pointer-events: none; animation: dc-fly .9s cubic-bezier(.45, .05, .55, .95) forwards; }
@keyframes dc-fly { 0% { transform: translate(0, 0) rotate(0) scale(1); } 45% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 70px)) rotate(200deg) scale(.9); } 100% { transform: translate(var(--dx), var(--dy)) rotate(360deg) scale(.35); opacity: .2; } }
.dc-glow { position: absolute; left: 41%; top: 3%; width: 22%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 120, .55), rgba(255, 214, 120, 0)); mix-blend-mode: screen; pointer-events: none; animation: dc-glow 3.2s ease-in-out infinite; }
@keyframes dc-glow { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } }
.dc-sound { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--ink-3); cursor: pointer; }
.dc-sound:hover { color: var(--ink); border-color: var(--ink-3); }
.dc-sound svg { width: 18px; height: 18px; }
.dc-sound .snd-off, .dc-sound.is-off .snd-on { display: none; }
.dc-sound.is-off .snd-off { display: block; }
.dc-clack { position: absolute; left: 0; right: 0; top: 30%; height: 0; pointer-events: none; }
.dc-clack i { position: absolute; top: 0; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-3); animation: dc-clack .9s ease-out forwards; }
@keyframes dc-clack { from { opacity: 0; transform: translateY(0) rotate(-6deg); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-34px) rotate(6deg); } }
.dc-desk .dc-log { margin-bottom: 12px; }
.dc-desk .dc-log > * { scroll-margin: 96px 0 120px; }
.dc-desk .dc-log:empty { display: none; }
.dc-desk .dc-log:empty + .dc-form::before { content: "まもるを押すか、ここに書くと、まもるが振り向きます。"; display: block; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.dc-desk .dc-warn { margin: 8px 0 0; }
.dc-over { margin: 4px 0 0; padding: 12px 16px; border: 1.5px dashed var(--ink-3); font-size: 14px; color: var(--ink-2); }
.dc-desk .dc-fine { margin: var(--s4) 0 0; max-width: var(--measure); }

/* まもるのネタ帳（企画のカード） */
.dc-plan { margin: 10px 0 0; padding: 10px 12px; background: var(--tint); }
.dc-plan-k { margin: 6px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.dc-plan-k:first-child { margin-top: 0; }
.dc-plan-a { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink); }
.dc-plan-p { margin: 0; padding-left: 1.3em; font-size: 14px; line-height: 1.75; }
.dc-yours { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); }
.dc-yours span { display: block; font-weight: 700; letter-spacing: .06em; }
.dc-yours q { color: var(--ink-2); }

/* ネタゲット！（画面の上にプルルン） */
.dc-win { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: 12vh; pointer-events: auto; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 60%); animation: dc-win-bg .3s ease; }
.dc-win.is-out { opacity: 0; transition: opacity .35s ease; }
@keyframes dc-win-bg { from { opacity: 0; } to { opacity: 1; } }
.dc-win-in { display: flex; flex-direction: column; align-items: center; animation: dc-boing .9s cubic-bezier(.2, .9, .3, 1.3); transform-origin: 50% 70%; }
.dc-win-in img { width: min(220px, 52vw); height: auto; filter: drop-shadow(0 10px 18px rgba(15, 17, 20, .2)); }
.dc-win-k { margin: -6px 0 0; padding: 6px 22px; border-radius: 40px; background: var(--ink); color: #fff; font-size: clamp(30px, 6vw, 52px); font-weight: 900; letter-spacing: .04em; box-shadow: 0 10px 24px rgba(15, 17, 20, .3); animation: dc-jelly 1.1s ease .15s both; }
.dc-win-t { margin: 12px 0 0; padding: 6px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 18px; font-size: clamp(15px, 2.4vw, 20px); font-weight: 700; animation: dc-jelly 1.1s ease .3s both; }
@keyframes dc-boing { 0% { transform: scale(.2) translateY(-60px); opacity: 0; } 45% { transform: scale(1.12, .9); opacity: 1; } 62% { transform: scale(.94, 1.08); } 78% { transform: scale(1.04, .97); } 100% { transform: scale(1); } }
@keyframes dc-jelly { 0% { transform: scale(0); } 30% { transform: scale(1.25, .75); } 45% { transform: scale(.8, 1.2); } 60% { transform: scale(1.12, .9); } 75% { transform: scale(.96, 1.04); } 100% { transform: scale(1); } }
.dc-confetti { position: absolute; top: 18vh; width: 10px; height: 14px; border-radius: 2px; background: var(--ink); animation: dc-fall var(--d, 1.2s) cubic-bezier(.2, .6, .4, 1) forwards; }
.dc-confetti:nth-child(3n) { background: var(--red); } .dc-confetti:nth-child(3n+1) { background: #f5c542; } .dc-confetti:nth-child(4n) { background: #4b8fd6; }
@keyframes dc-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), 60vh) rotate(var(--r)); opacity: 0; } }

/* まもるを押したくなる指の印（話しかけたら消す） */
.dc-tap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; pointer-events: none; transition: opacity .3s ease; } /* 絵の上に重ねる層（場所を取らない） */
.dc-tap svg { position: absolute; left: 170px; top: 118px; width: 38px; height: 48px; filter: drop-shadow(0 4px 6px rgba(15, 17, 20, .35)); animation: dc-tap 2s ease-in-out infinite; transform-origin: 38% 8%; }
.dc-ripple { position: absolute; left: 164px; top: 108px; width: 26px; height: 26px; border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); border-radius: 50%; opacity: 0; animation: dc-ripple 2s ease-out infinite; }
.dc-r2 { animation-delay: .32s; }
.dc-tap-t { position: absolute; left: 196px; top: 86px; padding: 4px 11px; border-radius: 13px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 10px rgba(15, 17, 20, .25); animation: dc-bob 2s ease-in-out infinite; }
@keyframes dc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.dc-room.is-met .dc-tap { opacity: 0; }
@keyframes dc-tap { 0%, 36%, 100% { transform: translate(6px, 6px) rotate(-10deg); } 6%, 22% { transform: translate(0, -2px) rotate(-10deg); } 10%, 26% { transform: translate(-3px, -9px) rotate(-14deg) scale(.92); } 14%, 30% { transform: translate(0, -2px) rotate(-10deg); } } /* トントン（2 回押して休む） */
@keyframes dc-ripple { 0%, 8% { opacity: 0; transform: scale(.3); } 11% { opacity: .85; transform: scale(.5); } 30%, 100% { opacity: 0; transform: scale(2.4); } }
@media (max-width: 760px) { .dc-tap svg { left: 146px; top: 102px; } .dc-ripple { left: 140px; top: 92px; } .dc-tap-t { left: 168px; top: 72px; } }

/* みんなのネタ（ポストイット。手書きの字は Yomogi。紙の色は絵と同じ扱いで、うすく） */
.dc-board { margin-top: var(--s5); }
.dc-board-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding-top: var(--s3); }
.dc-board-h h3 { margin: 0; font-size: 18px; }
.dc-board-n { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.dc-board-nav { display: flex; gap: 8px; }
.dc-board-nav button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.dc-board-nav button:hover { border-color: var(--ink); }
.dc-board-nav svg { width: 16px; height: 16px; }
.dc-prev svg { transform: rotate(180deg); }
.dc-notes { display: flex; gap: 22px; margin: 0; padding: 22px 6px 26px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.dc-notes:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dc-note { position: relative; flex: 0 0 196px; min-height: 176px; padding: 26px 16px 44px; box-sizing: border-box; scroll-snap-align: start; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 18px -10px rgba(15, 17, 20, .35); color: #2a2620; transition: transform .25s ease; }
.dc-note:hover { transform: rotate(0deg) translateY(-3px); }
.dc-note.t0 { background: #fff6c9; } .dc-note.t1 { background: #ffe3d6; } .dc-note.t2 { background: #def3e4; } .dc-note.t3 { background: #dfeaf8; }
.dc-note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .07) 50%); } /* めくれた角 */
.dc-tape { position: absolute; left: 50%; top: -9px; width: 64px; height: 20px; margin-left: -32px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(0, 0, 0, .05); transform: rotate(calc(var(--tilt, 0deg) * -2)); }
.dc-note-d { position: absolute; right: 12px; top: 8px; font-family: "Yomogi", var(--jp); font-size: 12px; color: rgba(42, 38, 32, .55); }
.dc-note-t { margin: 0; font-family: "Yomogi", var(--jp); font-size: 19px; line-height: 1.5; letter-spacing: .01em; overflow-wrap: anywhere; }
.dc-scrawl { display: block; width: 70%; height: 8px; margin-top: 6px; color: rgba(42, 38, 32, .45); }
.dc-like { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .55); color: rgba(42, 38, 32, .5); font: inherit; font-size: 13px; cursor: pointer; }
.dc-like svg { width: 16px; height: 16px; }
.dc-like[aria-pressed="true"] { color: var(--red); }
.dc-like.is-pop svg { animation: dc-pop .45s cubic-bezier(.3, .7, .4, 1); }
@keyframes dc-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.dc-note.is-new { animation: dc-stick .6s cubic-bezier(.3, .7, .4, 1); }
@keyframes dc-stick { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--tilt, 0deg) * 4)) scale(1.06); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)); } }
.dc-note-empty { font-family: "Yomogi", var(--jp); font-size: 17px; line-height: 1.6; padding-bottom: 26px; }
.dc-note { cursor: pointer; }
.dc-note:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* まもるのネタ帳（ポストイットを押すと開く。罫線のノート） */
.dc-book { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 28px 26px 22px; box-sizing: border-box; border: 0; border-radius: 6px; background: #fffdf6 repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(75, 143, 214, .16) 31px, rgba(75, 143, 214, .16) 32px); color: #2a2620; box-shadow: 0 24px 60px rgba(15, 17, 20, .35); }
.dc-book[open] { animation: dc-book .32s cubic-bezier(.2, .9, .3, 1.2); }
.dc-book::backdrop { background: rgba(15, 17, 20, .45); }
@keyframes dc-book { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg) scale(.96); } to { opacity: 1; transform: none; } }
.dc-book-x { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border: 0; background: none; font-size: 22px; color: var(--ink-3); cursor: pointer; }
.dc-book-k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); }
.dc-book-s { margin: 8px 0 0; font-family: "Yomogi", var(--jp); font-size: 22px; line-height: 1.5; }
.dc-book-t { margin: 14px 0 0; font-size: 19px; line-height: 1.55; font-weight: 800; color: var(--ink); }
.dc-book-h { margin: 14px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.dc-book-a { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.dc-book-p { margin: 0; padding-left: 1.4em; font-family: "Yomogi", var(--jp); font-size: 17px; line-height: 1.9; }
.dc-book-f { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.dc-book-d { font-family: "Yomogi", var(--jp); font-size: 14px; color: rgba(42, 38, 32, .55); }
.dc-book-like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 18px; background: #fff; color: rgba(42, 38, 32, .55); font: inherit; font-size: 14px; cursor: pointer; }
.dc-book-like svg { width: 18px; height: 18px; }
.dc-book-like[aria-pressed="true"] { color: var(--red); border-color: var(--red); }
.dc-book-n { margin: 14px 0 0; font-size: 11px; line-height: 1.7; color: var(--ink-3); }
.dc-board-note { margin: 0; font-size: 12px; line-height: 1.75; color: var(--ink-3); max-width: var(--measure); }
.dc-now { display: none; }
@media (max-width: 760px) {
  /* スマホ：話しはじめたら、まもるは画面の上の帯になって付いてくる（小さなまもると、いま話しているせりふ）。会話は帯の下を流れる */
  .dc-desk.is-talking .dc-room { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; width: auto; margin: 0 calc(var(--gut) * -1) 4px; padding: 6px var(--gut) 6px calc(var(--gut) - 4px); background: var(--paper); box-shadow: 0 8px 18px -12px rgba(15, 17, 20, .35); }
  .dc-home.is-talking .dc-room { background: var(--tint); }
  .dc-desk.is-talking .dc-me { flex: none; width: 92px; }
  .dc-desk.is-talking .dc-box, .dc-desk.is-talking .dc-tap { display: none; }
  .dc-desk.is-talking .dc-now { display: -webkit-box; flex: 1; min-width: 0; margin: 0; padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 4px; background: var(--paper); font-size: 13px; line-height: 1.6; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .dc-desk.is-talking .dc-now:empty { display: none; }
  .dc-desk.is-talking:not(:has(.dc-m-r)) .dc-now { display: none; } /* 最初の挨拶は、すぐ下の会話にそのまま出ているので、帯には出さない（重なる。平野さん 2026-10-29）。読者が書いたら帯にも出す */
  .dc-desk.is-talking .dc-sound { position: static; flex: none; order: 3; }
  .dc-desk.is-talking .dc-log > * { scroll-margin-top: 150px; }
  .dc-grid { grid-template-columns: 1fr; gap: 12px; }
  .dc-room { position: relative; top: auto; width: 300px; margin: 0 auto; }
  .dc-desk .dc-me { width: 240px; }
  .dc-box { width: 92px; }
  .dc-note { flex-basis: 172px; min-height: 160px; }
  .dc-note-t { font-size: 18px; }
}

/* ---- しのぶ（どのページでも左下） ---- */
.dc-cat { position: fixed; left: 12px; bottom: 10px; z-index: 26; }
.dc-cat > .dc-me { width: 104px; }
.has-pbar .dc-cat { bottom: 82px; }
.has-subar .dc-cat, .has-filmbar .dc-cat { bottom: 74px; }
.dc-z { position: absolute; right: 8px; top: 2px; width: 30px; height: 40px; pointer-events: none; }
.dc-z i { position: absolute; left: 0; bottom: 0; font-style: normal; font-weight: 700; font-size: 13px; color: var(--ink-3); opacity: 0; }
.is-asleep .dc-z i { animation: dc-z 3.6s ease-in-out infinite; }
.is-asleep .dc-z i:nth-child(2) { animation-delay: 1.2s; font-size: 11px; }
.is-asleep .dc-z i:nth-child(3) { animation-delay: 2.4s; font-size: 9px; }
.dc-desk .dc-z { right: 30%; top: 10%; width: 40px; height: 56px; } /* まもるが夜中に机で寝ているとき（灯台の頭の右上） */
.dc-desk .dc-z i { font-size: 17px; }
.dc-desk.is-asleep .dc-z i:nth-child(2) { font-size: 14px; }
.dc-desk.is-asleep .dc-z i:nth-child(3) { font-size: 11px; }
@keyframes dc-z { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px); } }
.dc-panel { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 160px)); display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 12px 36px rgba(15, 17, 20, .18); animation: dc-open .26s cubic-bezier(.3, .7, .4, 1); }
.dc-panel[hidden] { display: none; }
@keyframes dc-open { from { opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 0 100%; } to { opacity: 1; transform: none; } }
.dc-panel-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--rule); }
.dc-name { flex: 1; margin: 0; font-weight: 700; font-size: 15px; }
.dc-name span { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.dc-mute { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.dc-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.dc-close svg { width: 18px; height: 18px; }
.dc-panel .dc-log { flex: 1; min-height: 120px; overflow-y: auto; padding: 14px 16px; }
.dc-panel .dc-form { padding: 10px 16px 0; border-top: 1px solid var(--rule); }
.dc-panel .dc-fine { margin: 6px 16px 12px; font-size: 11px; }
@media (max-width: 600px) {
  .dc-cat > .dc-me { width: 84px; }
  .dc-panel { position: fixed; left: 8px; right: 8px; bottom: 96px; width: auto; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); }
  .has-subar .dc-panel, .has-filmbar .dc-panel { bottom: 160px; }
}
@media print { .dc-cat, .dc-desk { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dc-pose, .dc-bob, .dc-breath, .dc-pose .dc-b, .dc-card, .dc-panel, .dc-z i, .dc-clack i, .dc-me.is-hop .dc-pose, .dc-glow, .dc-note, .dc-box, .dc-like svg, .dc-tap svg, .dc-ripple, .dc-tap-t, .dc-win, .dc-win-in, .dc-win-k, .dc-win-t { animation: none !important; transition: none !important; }
  .dc-paper, .dc-confetti { display: none; }
}

/* ---------- 住人の部屋（/dataiscity/rooms/。build.py の rooms）。頭は部屋の 1 枚の絵で、物を押すとその区画へ。コルクと紙の色は絵と同じ扱い ---------- */
.dc-to-room { margin: var(--s3) 0 0; }
.dc-to-room a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.dc-to-room svg { width: 16px; height: 16px; }
.rm-head .kl a { color: var(--ink-3); text-decoration: none; }
.rm-head .kl a:hover { color: var(--ink); }
.rm-sec { margin-top: var(--s6); scroll-margin-top: 16px; }
.rm-lead { max-width: var(--measure); margin: var(--s2) 0 0; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.rm-mamoru .dc-desk { scroll-margin-top: 16px; }

/* 部屋の絵と、押せる物 */
.rm-stage { margin-top: var(--s4); }
.rm-scene { position: relative; max-width: 1180px; margin: 0 auto; }
.rm-scene img { display: block; width: 100%; height: auto; }
.rm-spot { position: absolute; display: block; border-radius: 18px; outline-offset: 2px; }
.rm-spot:hover, .rm-spot:focus-visible { background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 2px rgba(15, 17, 20, .55); outline: none; }
.rm-pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid var(--ink); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(15, 17, 20, .3); }
.rm-pin::after { content: ""; position: absolute; inset: -9px; border: 2px solid #fff; border-radius: 50%; opacity: 0; animation: rm-ping 2.4s ease-out infinite; }
.rm-spot:nth-of-type(2) .rm-pin::after { animation-delay: .5s; } .rm-spot:nth-of-type(3) .rm-pin::after { animation-delay: 1s; } .rm-spot:nth-of-type(4) .rm-pin::after { animation-delay: 1.5s; } .rm-spot:nth-of-type(5) .rm-pin::after { animation-delay: 2s; }
@keyframes rm-ping { 0% { opacity: .9; transform: scale(.4); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.rm-tag { position: absolute; left: 50%; top: calc(50% + 16px); transform: translateX(-50%); padding: 5px 12px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.rm-spot:hover .rm-tag, .rm-spot:focus-visible .rm-tag { opacity: 1; }
.rm-index ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: var(--s3) 0 0; padding: 0; list-style: none; }
.rm-index a { display: inline-block; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 20px; color: var(--ink); font-size: 14px; text-decoration: none; }
.rm-index a:hover { border-color: var(--ink); }
@media (max-width: 760px) { .rm-tag { display: none; } .rm-pin { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-width: 2.5px; } }
@media (prefers-reduced-motion: reduce) { .rm-pin::after { animation: none; } }

/* みんなのネタ：壁一面のコルクボード */
.rm-board { margin-top: 0; }
.rm-board .dc-board-h { border-top: 0; padding-top: 0; align-items: center; }
.rm-board .dc-board-h .sec-h { margin: 0; }
.rm-sort { display: inline-flex; border: 1px solid var(--ink); border-radius: 20px; overflow: hidden; }
.rm-sort button { padding: 7px 14px; border: 0; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.rm-sort button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.rm-cork { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 30px 22px; margin-top: var(--s3); padding: 34px 26px 30px; overflow: visible; scroll-snap-type: none;
  background-color: #c79c6a; background-image: radial-gradient(rgba(90, 58, 26, .22) 1px, transparent 1.5px), radial-gradient(rgba(255, 240, 210, .25) 1px, transparent 1.5px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px;
  border: 12px solid #9a6a3c; border-radius: 4px; box-shadow: inset 0 2px 10px rgba(60, 36, 12, .35); }
.rm-cork .dc-note { flex: none; width: auto; min-height: 168px; }
.rm-cork .dc-note-empty { grid-column: 1 / -1; max-width: 260px; }
@media (max-width: 760px) { .rm-cork { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 24px 14px; border-width: 8px; } .rm-cork .dc-note { padding: 24px 12px 42px; } .rm-cork .dc-note-t { font-size: 16px; } }

/* まもるの手帳：罫線の紙に、落書きと手書きのメモ。下に解説 */
.tc { display: grid; gap: var(--s5); margin-top: var(--s4); }
.tc-paper { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; align-items: center; padding: 26px 30px 26px 52px; border-radius: 4px 10px 10px 4px;
  background: #fffdf6 repeating-linear-gradient(to bottom, transparent 0, transparent 33px, rgba(70, 110, 160, .16) 33px, rgba(70, 110, 160, .16) 34px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 14px 26px -16px rgba(42, 30, 12, .45); transform: rotate(-.4deg); }
.tc-page:nth-child(even) .tc-paper { transform: rotate(.4deg); }
.tc-paper::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 14px; background: radial-gradient(circle at 7px 7px, #e9e2d2 4px, rgba(0, 0, 0, .18) 4.5px, transparent 5.5px) 0 0 / 14px 30px repeat-y; } /* とじ穴 */
.tc-pic { margin: 0; }
.tc-pic img { display: block; width: 100%; height: auto; }
.tc-hand { font-family: "Yomogi", var(--jp); color: #26324a; }
.tc-h { margin: 0 0 10px; font-family: "Yomogi", var(--jp); font-size: 24px; font-weight: 400; line-height: 1.4; border-bottom: 2px solid rgba(38, 50, 74, .35); display: inline-block; }
.tc-hand ul { margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 34px; }
.tc-note { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #a3352f; transform: rotate(-1.5deg); }
.tc-body { max-width: var(--measure); margin: var(--s3) 0 0; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.tc-k { display: inline-block; margin-right: 10px; padding: 1px 8px; border: 1px solid var(--ink-3); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); vertical-align: 2px; }
@media (max-width: 760px) { .tc-paper { grid-template-columns: 1fr; padding: 20px 18px 22px 40px; transform: none; } .tc-page:nth-child(even) .tc-paper { transform: none; } .tc-paper::before { left: 10px; } .tc-pic { max-width: 360px; margin: 0 auto; } .tc-h { font-size: 21px; } .tc-hand ul { font-size: 16px; line-height: 30px; } }

/* 記事になったネタ：棚のスクラップブック（クラフト紙に、ネタのポストイットと記事への札） */
.rm-scrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin: var(--s3) 0 0; padding: 26px; list-style: none; background: #efe5d0; border-radius: 4px; }
.rm-scrap-empty { font-family: "Yomogi", var(--jp); font-size: 17px; color: rgba(42, 38, 32, .7); }
.rm-clip { padding: 18px 16px 14px; box-shadow: 0 8px 16px -10px rgba(42, 30, 12, .5); }
.rm-clip.t0 { background: #fff6c9; } .rm-clip.t1 { background: #ffe3d6; } .rm-clip.t2 { background: #def3e4; } .rm-clip.t3 { background: #dfeaf8; }
.rm-clip-n { margin: 0; font-family: "Yomogi", var(--jp); font-size: 18px; line-height: 1.5; }
.rm-clip-a { display: block; margin-top: 12px; padding: 10px 12px; background: #fff; color: var(--ink); text-decoration: none; border-radius: 3px; }
.rm-clip-a:hover .rm-clip-t { text-decoration: underline; }
.rm-clip-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.rm-clip-t { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; line-height: 1.55; }

/* まもるのこと（本当のこと） */
.rm-facts { max-width: var(--measure); margin: var(--s3) 0 0; padding-left: 1.2em; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.rm-facts li + li { margin-top: 8px; }
.rm-facts b { color: var(--ink); }
.rm-back { margin: var(--s4) 0 0; }
.rm-back a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.rm-back svg { width: 16px; height: 16px; }

/* 住人の部屋の一覧：扉が並ぶ廊下 */
.rm-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.rm-door { display: flex; flex-direction: column; height: 100%; padding: 0 0 var(--s3); color: var(--ink); text-decoration: none; }
.rm-door-pic { display: block; aspect-ratio: 4 / 5; border: 2px solid var(--ink); border-radius: 140px 140px 6px 6px; background: #f6f2ea; overflow: hidden; }
.rm-door-pic img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 80%; transition: transform .25s ease; }
.rm-door:hover .rm-door-pic img { transform: translateY(-4px); }
.rm-door-t { margin-top: var(--s3); font-size: 22px; font-weight: 800; }
.rm-door-w { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.rm-door-d { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.rm-door-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--s2); font-size: 14px; font-weight: 700; }
.rm-door-go svg { width: 16px; height: 16px; }
.rm-door-soon .rm-door-pic { border-style: dashed; border-color: var(--ink-3); background: repeating-linear-gradient(45deg, #fafafa 0 10px, #f2f2f2 10px 20px); }
.rm-door-soon .rm-door-t { color: var(--ink-3); }