:root {
  --ink: #221d2b;
  --ink-2: #3a3345;
  --ink-soft: #6c6376;
  --night: #14111a;
  --paper: #f7f2e7;
  --paper-2: #efe5d2;
  --paper-line: #e2d6bf;
  --dusk: #f2a65a;
  --dusk-2: #f7c98b;
  --amber: #d9772f;
  --rose: #c8574b;
  --moss: #4f7a5a;
  --blue-pen: #2e4f86;
  --red-pen: #c0392b;
  --glow: rgba(255, 236, 200, .95);
  --ui: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --hand: 'Klee One', 'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', sans-serif;
  --title: 'Zen Old Mincho', 'Hiragino Mincho ProN', serif;
  --bar-h: 52px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--paper); font-family: var(--ui); -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--dusk-2); outline-offset: 2px; }
.hand { font-family: var(--hand); }

#app { position: fixed; inset: 0; }

/* ヘッダー */
.bar { position: absolute; inset: 0 0 auto; height: var(--bar-h); z-index: 30; display: flex; align-items: center; gap: 14px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); background: linear-gradient(#14111af2, #14111a00); pointer-events: none; }
.bar > * { pointer-events: auto; }
#app:has(#scene:not([hidden])) .bar { z-index: 55; }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-size: 11px; letter-spacing: .14em; opacity: .85; }
.brand img { height: 16px; }
.case-tag { margin: 0; font-size: 12px; letter-spacing: .08em; color: #e9dfcf; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.bar-actions { display: flex; gap: 8px; margin-left: auto; }
.chip { border: 1px solid #ffffff33; background: #1d1925b3; border-radius: 999px; padding: 6px 12px; font-size: 12px; color: #f3ead9; backdrop-filter: blur(6px); }
.chip:hover { border-color: #ffffff77; }

/* 部屋 */
.stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #2c2433, #120f17 70%); }
.room-scroll { position: absolute; inset: var(--bar-h) 0 68px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.room { position: relative; aspect-ratio: 16 / 10; width: min(calc(100% - 24px), calc((100dvh - var(--bar-h) - 84px) * 1.6)); max-height: 100%; margin: auto; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px #000a; transition: filter .8s var(--ease); }
.room > svg { display: block; width: 100%; height: 100%; }
.room .hot { cursor: pointer; outline: none; }
.room .hot .hit { fill: transparent; stroke: transparent; stroke-width: 2.5; transition: stroke .18s, fill .18s; vector-effect: non-scaling-stroke; }
.room .hot:hover .hit, .room .hot:focus-visible .hit, .room .hot.peek .hit { stroke: var(--glow); fill: rgba(255, 232, 190, .09); }
.room .hot:focus-visible .hit { stroke-dasharray: 6 4; }
.room .hot.flash .hit { animation: flash 1.6s var(--ease) 2; }
@keyframes flash { 0%, 100% { stroke: transparent; fill: transparent; } 40% { stroke: var(--glow); fill: rgba(255, 232, 190, .14); } }
.room .lead-dot { fill: var(--dusk-2); stroke: #3b2a1a; stroke-width: 1.5; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: dot 2.2s ease-in-out infinite; }
@keyframes dot { 0%, 100% { opacity: .95; transform: scale(1); } 50% { opacity: .55; transform: scale(.72); } }
.room .changed-dot { fill: #fff6e0; stroke: var(--amber); stroke-width: 2; pointer-events: none; }
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe3b5; opacity: 0; animation: mote 12s linear infinite; }
@keyframes mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .55; } 50% { transform: translate(18px, -26px); opacity: .35; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(34px, -8px); } }
.room.dim { filter: saturate(.8) brightness(.55); }
.room.connected { filter: saturate(1.12) brightness(1.06); }
.room-veil { position: absolute; inset: var(--bar-h) 0 0; pointer-events: none; background: radial-gradient(ellipse at 38% 30%, rgba(255, 190, 110, .0), rgba(255, 170, 90, 0) 60%); transition: background 1.2s; }
.room-veil.warm { background: radial-gradient(ellipse at 38% 30%, rgba(255, 196, 120, .22), rgba(255, 170, 90, 0) 65%); }

.label-tip { position: fixed; z-index: 25; pointer-events: none; padding: 5px 10px; border-radius: 999px; background: #1d1925e6; color: #fbf3e4; font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .15s; border: 1px solid #ffffff22; }
.label-tip.on { opacity: 1; }
.label-tip small { color: #cbbfa9; margin-left: 6px; font-size: 11px; }
.day-stamp { position: absolute; top: calc(var(--bar-h) + 10px); left: 16px; z-index: 5; font-size: 12px; letter-spacing: .1em; color: #f5ead6; background: #1d1925a6; padding: 6px 10px; border-radius: 4px; pointer-events: none; }

.hud { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hud-btn { position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 16px 8px 12px; border-radius: 12px; border: 1px solid #00000020; background: var(--paper); color: var(--ink); box-shadow: 0 8px 24px #0006; font-size: 14px; transition: transform .15s var(--ease), background .15s; }
.hud-btn:hover { transform: translateY(-2px); }
.hud-btn b { font-weight: 700; }
.hud-btn.ghost { background: #1d1925d9; color: #f2e9d8; border-color: #ffffff2a; }
.hud-btn.attn { background: var(--dusk-2); animation: attn 2.4s ease-in-out 3; }
@keyframes attn { 50% { box-shadow: 0 0 0 6px #f7c98b44, 0 8px 24px #0006; } }
.kbd { font-size: 10px; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: .5; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--rose); color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.ico { width: 20px; height: 20px; display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-note { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.ico-board { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='8' r='2.5'/%3E%3Ccircle cx='10' cy='18' r='2.5'/%3E%3Cpath d='M8.3 7l7.4.8M16.6 10l-5.2 6M7 8.3l2.2 7.4'/%3E%3C/svg%3E"); }
.ico-hint { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.ico-look { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

.nextday-bar { position: absolute; z-index: 21; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100% - 24px)); display: flex; gap: 14px; align-items: center; padding: 12px 12px 12px 18px; background: var(--paper); color: var(--ink); border-radius: 14px; box-shadow: 0 10px 30px #0008; }
.nextday-bar p { margin: 0; font-size: 14px; line-height: 1.6; flex: 1; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid #00000026; background: #fffaf0; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; transition: transform .15s var(--ease), background .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px #0002; }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); }
.btn.warm { background: var(--dusk-2); border-color: #0000001a; }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn small { font-size: 11px; opacity: .55; }
.x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #00000022; background: #fffaf0; color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center; flex: none; }

/* レイヤー共通 */
.layer { position: fixed; inset: 0; z-index: 40; }
.cu-backdrop, .nb-backdrop, .bd-backdrop { position: absolute; inset: 0; background: rgba(18, 14, 24, .5); backdrop-filter: blur(5px) saturate(.9); animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }

/* 拡大 */
.cu-sheet { position: absolute; inset: calc(var(--bar-h) + 8px) 16px 16px; margin: auto; max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: center; animation: rise .28s var(--ease); pointer-events: none; }
.cu-sheet > * { pointer-events: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.cu-art-wrap { display: grid; place-items: center; min-height: 0; height: 100%; }
.cu-stage { position: relative; width: 100%; max-height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px #000b; background: #2a2330; }
.cu-stage > svg.art { display: block; width: 100%; height: 100%; }
.cu-stage .ov { position: absolute; }
.cu-side { align-self: stretch; display: flex; flex-direction: column; gap: 12px; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 16px 16px 14px; box-shadow: 0 20px 50px #000a; max-height: 100%; min-height: 0; overflow: hidden; }
.cu-side header { display: flex; align-items: flex-start; gap: 10px; }
.cu-side header > div, .cu-side h2 { flex: 1; }
.cu-kicker { margin: 0 0 2px; font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); }
.cu-side h2 { margin: 0; font-family: var(--title); font-size: 22px; line-height: 1.35; }
.cu-log { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.75; flex: 1; min-height: 0; overflow: auto; }
.cu-log li { padding-left: 14px; position: relative; animation: logIn .35s var(--ease); }
.cu-log li::before { content: ''; position: absolute; left: 0; top: .8em; width: 6px; height: 1.5px; background: var(--ink-soft); }
.cu-log li.fact { color: var(--ink); }
.cu-log li.fact::after { content: 'ノートに記録'; display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: .08em; color: var(--amber); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; vertical-align: 2px; }
@keyframes logIn { from { opacity: 0; transform: translateX(-6px); } }
.cu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-actions .btn { font-size: 14px; min-height: 42px; padding: 8px 14px; }
.cu-actions .btn.done { opacity: .55; }
.cu-side .back { width: 100%; }
.cu-read { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 14px; background: rgba(18, 14, 24, .55); backdrop-filter: blur(3px); border-radius: 12px; animation: fadeIn .18s; pointer-events: auto; }
.cu-read-card { max-width: min(560px, 92vw); max-height: calc(100dvh - 190px); overflow: auto; animation: rise .25s var(--ease); }

/* 読む紙（拡大時に共通） */
.sheet { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 22px 24px; box-shadow: 0 16px 40px #0008; font-size: 17px; line-height: 1.9; }
.sheet.hand { font-family: var(--hand); font-size: 19px; }
.sheet.lined { background-image: repeating-linear-gradient(transparent 0 33px, var(--paper-line) 33px 34px); background-position: 0 14px; }
.sheet.yellow { background-color: #fbeea8; }
.sheet.pink { background-color: #f7dcd6; }
.sheet.receipt { font-family: 'Zen Kaku Gothic New', monospace; font-size: 15px; background: #fdfdfb; width: 300px; border-radius: 0; line-height: 1.7; -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) bottom/12px 8px repeat-x; mask: linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) bottom/12px 8px repeat-x; }
.sheet h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); font-family: var(--ui); font-weight: 500; }
.strike { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #222; }
.red { color: var(--red-pen); }
.blue { color: var(--blue-pen); }
.pencil { color: #6f6f6f; }
.sheet .row { display: flex; justify-content: space-between; gap: 16px; }
.sheet hr { border: 0; border-top: 1px dashed #0003; margin: 8px 0; }

/* ノート */
.nb-book { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: -20px 0 60px #0009; animation: slideIn .28s var(--ease); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.nb-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px 18px; border-bottom: 1px solid var(--paper-line); flex-wrap: wrap; }
.nb-head h2 { margin: 0; font-family: var(--title); font-size: 20px; }
.nb-tabs { display: flex; gap: 4px; margin-left: auto; }
.nb-tabs button { border: 0; background: transparent; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-soft); }
.nb-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.nb-body { flex: 1; overflow: auto; padding: 14px 18px 24px; background-image: repeating-linear-gradient(transparent 0 31px, #e9dfcb 31px 32px); background-attachment: local; }
.nb-foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--paper-line); display: flex; gap: 8px; }
.nb-foot .btn { flex: 1; }
.nb-note { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 12px; }
.nb-group { margin: 0 0 16px; }
.nb-group h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.nb-group h3 button { margin-left: auto; border: 1px solid #0002; background: #fffaf0; border-radius: 6px; font-size: 11px; padding: 3px 8px; color: var(--ink); }
.fact-card { position: relative; background: #fffdf7; border: 1px solid #e3d7c0; border-radius: 8px; padding: 10px 12px 10px 14px; margin-bottom: 6px; font-size: 14.5px; line-height: 1.75; box-shadow: 0 1px 0 #0000000a; }
.fact-card.new::before { content: ''; position: absolute; left: -4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.fact-card .time { display: inline-block; font-size: 11px; color: var(--amber); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
.tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid #d9c9aa; }
.tl li { position: relative; margin: 0 0 10px; padding: 2px 0 0 10px; font-size: 14.5px; line-height: 1.6; }
.tl li::before { content: ''; position: absolute; left: -23px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid #b69a6b; }
.tl li b { display: block; font-size: 12px; color: var(--amber); letter-spacing: .06em; }
.tl li small { color: var(--ink-soft); }
.tl-sec { margin: 4px 0 10px; font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }
.tl.future li::before { background: #f3e2c4; border-style: dashed; }
.brief-log { width: 100%; border-collapse: collapse; font-size: 14px; background: #fffdf7; border-radius: 8px; overflow: hidden; }
.brief-log th, .brief-log td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eadfca; vertical-align: top; line-height: 1.6; }
.brief-log th { width: 5.5em; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }

/* 仮説ボード */
.bd-desk { position: absolute; inset: calc(var(--bar-h) + 8px) 16px 16px; margin: auto; max-width: 1000px; display: flex; flex-direction: column; background: #e9dcc3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--ink); border-radius: 14px; box-shadow: 0 30px 80px #000c; animation: rise .28s var(--ease); overflow: hidden; }
.bd-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid #0000001a; }
.bd-head .kicker { margin: 0; font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); }
.bd-head h2 { margin: 0; font-family: var(--title); font-size: 22px; }
.bd-head > div { flex: 1; }
.bd-body { flex: 1; overflow: auto; padding: 14px 18px 20px; display: grid; gap: 14px; align-content: start; }
.bd-intro { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.slot { background: var(--paper); border-radius: 10px; padding: 12px 14px; box-shadow: 0 2px 0 #00000014; display: grid; gap: 10px; }
.slot.solid { box-shadow: 0 0 0 2px #f2a65a66; }
.slot.lit { animation: lit 1.4s var(--ease) both; }
@keyframes lit { 0% { box-shadow: 0 2px 0 #00000014; } 45% { box-shadow: 0 0 0 3px #f2a65aaa, 0 0 34px #f2a65a66; transform: translateY(-2px); } 100% { box-shadow: 0 0 0 2px #f2a65a66; } }
.slot-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.slot-name { font-size: 11px; letter-spacing: .14em; color: var(--ink-soft); min-width: 5.5em; }
.slot-sentence { font-size: 17px; line-height: 1.8; font-family: var(--hand); flex: 1; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { border: 1.5px dashed #b9a78a; background: #fffdf7; border-radius: 999px; padding: 6px 14px; font-size: 14px; min-height: 38px; }
.opt[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.opt-note { font-size: 12px; color: var(--ink-soft); align-self: center; }
.ev-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev-row .lab { font-size: 12px; color: var(--ink-soft); margin-right: 2px; }
.ev { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #d8c7a6; background: #fff8e8; border-radius: 6px; padding: 5px 6px 5px 10px; font-size: 13px; line-height: 1.5; text-align: left; }
.ev .rm { border: 0; background: transparent; font-size: 16px; line-height: 1; padding: 0 4px; color: var(--ink-soft); }
.ev.bad { border-color: var(--rose); background: #fbe9e5; }
.add-ev { border: 1.5px dashed #b9a78a; background: transparent; border-radius: 6px; padding: 5px 10px; font-size: 13px; color: var(--ink-2); }
.slot-msg { margin: 0; font-size: 13px; color: var(--rose); }
.bd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.result { background: #1f1b27; color: #f4ecdd; border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; animation: rise .3s var(--ease); }
.result h3 { margin: 0; font-size: 15px; font-weight: 700; }
.result p { margin: 0; font-size: 14px; line-height: 1.7; color: #d9cfbd; }
.odd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odd-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: #2b2535; border-radius: 8px; padding: 9px 12px; font-size: 14px; line-height: 1.65; }
.odd-list li .pl { font-size: 11px; color: var(--dusk-2); border: 1px solid #f7c98b66; border-radius: 4px; padding: 1px 6px; white-space: nowrap; margin-top: 2px; }
.odd-list li button { grid-column: 2; justify-self: start; border: 1px solid #ffffff33; background: transparent; color: #f4ecdd; border-radius: 6px; font-size: 12px; padding: 3px 8px; }
.result.clear { background: linear-gradient(135deg, #3b2c1f, #1f1b27); box-shadow: 0 0 0 1px #f7c98b55, 0 0 40px #f2a65a22; }
.history { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--ink-soft); align-items: center; }
.history span { background: #ffffff80; border-radius: 6px; padding: 3px 8px; }
.picker { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(18, 14, 24, .5); animation: fadeIn .15s; }
.picker-card { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 80px); display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 12px; box-shadow: 0 20px 60px #000b; overflow: hidden; }
.picker-card header { padding: 14px 16px; border-bottom: 1px solid var(--paper-line); display: flex; align-items: center; gap: 10px; }
.picker-card header h3 { margin: 0; font-size: 16px; flex: 1; }
.picker-list { overflow: auto; padding: 10px 12px 16px; display: grid; gap: 6px; }
.picker-list button { text-align: left; border: 1px solid #e3d7c0; background: #fffdf7; border-radius: 8px; padding: 9px 12px; font-size: 14px; line-height: 1.65; }
.picker-list button:hover, .picker-list button:focus-visible { border-color: var(--ink); }
.picker-list button[aria-pressed="true"] { border-color: var(--ink); background: #f3e8d2; }
.picker-list .pl { display: block; font-size: 11px; color: var(--amber); letter-spacing: .08em; }

/* 全画面の場面 */
.scene .btn.ghost { color: #efe6d6; border-color: #ffffff44; }
.scene { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--night); color: var(--paper); animation: fadeIn .4s; }
.scene-inner { min-height: 100%; display: grid; place-items: center; padding: calc(var(--bar-h) + 20px) 18px 40px; }
.title-bg { position: fixed; inset: 0; z-index: -1; }
.title-bg svg { width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.45) saturate(.9); transform: scale(1.06); }
.title-bg .room-mini { position: absolute; inset: -3%; }
.title-card { width: min(560px, 100%); text-align: center; margin-right: auto; margin-left: max(0px, calc(8vw - 18px)); text-align: left; justify-items: start; display: grid; gap: 18px; }
.title-card .case { margin: 0; font-size: 12px; letter-spacing: .3em; color: var(--dusk-2); }
.title-card h1 { margin: 0; font-family: var(--title); font-size: clamp(34px, 7vw, 56px); line-height: 1.25; letter-spacing: .04em; text-shadow: 0 4px 30px #000; }
.title-card .sub { margin: 0; font-size: 15px; line-height: 1.9; color: #e7dccb; }
.title-card .row { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
@media (max-width: 700px) { .title-card { text-align: center; justify-items: center; margin: auto; } .title-card .row { justify-content: center; } }
.title-card .note { font-size: 12px; color: #bfb3a2; margin: 0; }

.letter { width: min(620px, 100%); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 26px 26px 22px; box-shadow: 0 30px 80px #000c; display: grid; gap: 14px; animation: rise .4s var(--ease); }
.letter .from { margin: 0; font-size: 12px; letter-spacing: .08em; color: var(--ink-soft); }
.letter h2 { margin: 0; font-family: var(--title); font-size: 24px; }
.letter p { margin: 0; font-size: 16px; line-height: 1.9; }
.letter .row { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.letter .fine { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }

.choice { width: min(920px, 100%); display: grid; gap: 16px; }
.choice h2 { margin: 0; font-family: var(--title); font-size: clamp(22px, 4vw, 30px); text-align: center; }
.choice .lead { margin: 0; text-align: center; color: #d9cfbd; line-height: 1.8; font-size: 15px; }
.my-hyp { background: #231e2b; border: 1px solid #ffffff1c; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.8; color: #e9dfcf; }
.my-hyp b { color: var(--dusk-2); font-weight: 500; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt-card { text-align: left; background: var(--paper); color: var(--ink); border: 2px solid transparent; border-radius: 14px; padding: 16px 18px; display: grid; gap: 8px; min-height: 120px; align-content: start; transition: transform .15s var(--ease), border-color .15s; }
.opt-card:hover { transform: translateY(-2px); }
.opt-card[aria-pressed="true"] { border-color: var(--amber); box-shadow: 0 0 0 4px #f2a65a33; }
.opt-card .num { font-size: 12px; letter-spacing: .14em; color: var(--ink-soft); }
.opt-card b { font-size: 17px; line-height: 1.6; }
.choice .row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.mail { width: min(560px, 100%); background: #fffdf8; color: var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px #000c; animation: rise .5s var(--ease); }
.mail header { background: #f0e8d8; padding: 12px 18px; font-size: 13px; color: var(--ink-soft); display: grid; gap: 2px; }
.mail header b { color: var(--ink); font-size: 15px; }
.mail .mbody { padding: 18px; font-size: 15.5px; line-height: 1.9; display: grid; gap: 10px; }
.mail .mbody .hl { background: #fdf0d4; border-left: 3px solid var(--amber); padding: 8px 12px; }
.mail .row { padding: 0 18px 18px; display: flex; justify-content: flex-end; }

.after { width: min(560px, 100%); display: grid; gap: 14px; }
.after h2 { margin: 0; font-family: var(--title); font-size: 24px; text-align: center; }
.thread { display: grid; gap: 10px; }
.msg { display: grid; gap: 4px; animation: rise .4s var(--ease) both; }
.msg .at { font-size: 11px; color: #b8ab97; letter-spacing: .06em; }
.msg .bubble { justify-self: start; max-width: 88%; background: #f3ecdf; color: var(--ink); border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-size: 15px; line-height: 1.75; }
.msg.m-nao .bubble { justify-self: end; background: #dfe9d8; border-radius: 14px 4px 14px 14px; }
.msg.m-nao .at { justify-self: end; }
.msg.m-mail .bubble, .msg.m-call .bubble { justify-self: center; background: transparent; color: #e3d8c5; border: 1px dashed #ffffff44; font-size: 14px; border-radius: 8px; }
.msg.m-mail .at, .msg.m-call .at { justify-self: center; }
.msg.m-dad .bubble { font-size: 22px; font-weight: 700; letter-spacing: .06em; }
.msg .who { font-size: 11px; color: #b8ab97; }
.msg .photo { width: min(280px, 70vw); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px #0008; }
.msg .photo svg { display: block; width: 100%; height: auto; }

.results { width: min(760px, 100%); display: grid; gap: 16px; }
.results h2 { margin: 0; font-family: var(--title); font-size: clamp(22px, 4vw, 30px); text-align: center; line-height: 1.5; }
.axes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.axis { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.axis .k { font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); }
.axis .mark { font-size: 34px; line-height: 1; font-family: var(--title); }
.axis .mark.o { color: var(--moss); }
.axis .mark.t { color: var(--amber); }
.axis .mark.x { color: var(--rose); }
.axis p { margin: 0; font-size: 14px; line-height: 1.65; }
.side-notes { display: grid; gap: 8px; }
.side-notes p { margin: 0; background: #231e2b; border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.7; color: #e3d8c5; }
.side-notes b { color: var(--dusk-2); font-weight: 500; margin-right: 6px; }
.results .row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.review { width: min(900px, 100%); display: grid; gap: 22px; }
.review h2 { margin: 0; font-family: var(--title); font-size: clamp(24px, 4vw, 32px); text-align: center; }
.rv-sec { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 18px 20px; display: grid; gap: 10px; }
.rv-sec h3 { margin: 0; font-size: 13px; letter-spacing: .14em; color: var(--ink-soft); font-weight: 500; }
.rv-sec p { margin: 0; font-size: 15px; line-height: 1.85; }
.rv-sec dl { margin: 0; display: grid; grid-template-columns: 8em 1fr; gap: 8px 14px; font-size: 15px; line-height: 1.8; }
.rv-sec dt { color: var(--ink-soft); font-size: 13px; padding-top: 3px; }
.rv-sec dd { margin: 0; }
.path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.path li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 10px; align-items: center; background: #fffdf7; border: 1px solid #e7dcc7; border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.6; }
.path li .n { font-size: 12px; color: var(--ink-soft); }
.path li .c { font-size: 12px; white-space: nowrap; color: var(--rose); }
.path li .c.ok { color: var(--moss); }
.reread { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.reread li { display: grid; grid-template-columns: 1.6em 1fr; gap: 8px; font-size: 15px; line-height: 1.75; }
.reread li .m { color: var(--moss); font-weight: 700; }
.reread li .m.no { color: #b3a58e; }
.reread li small { display: block; color: var(--ink-soft); font-size: 12.5px; }
.ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.end-card { border: 1px solid #e3d7c0; background: #fffdf7; border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.end-card b { font-size: 15px; line-height: 1.55; }
.end-card .pm { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.end-card .ax { font-size: 13px; }
.end-card .btn { justify-self: start; font-size: 13px; min-height: 36px; padding: 6px 12px; }
.end-card.current { border-color: var(--amber); box-shadow: 0 0 0 3px #f2a65a22; }
.next-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; background: #0f0d13; border: 1px solid #ffffff1a; border-radius: 14px; overflow: hidden; color: #efe6d6; }
.next-case .art svg { display: block; width: 100%; height: 100%; }
.next-case .txt { padding: 18px 20px; display: grid; gap: 8px; align-content: center; }
.next-case .txt .k { font-size: 12px; letter-spacing: .24em; color: var(--dusk-2); }
.next-case .txt h3 { margin: 0; font-family: var(--title); font-size: 21px; line-height: 1.5; }
.next-case .txt p { margin: 0; font-size: 14px; line-height: 1.8; color: #cfc4b2; }
.next-case .txt .soon { font-size: 12px; color: #9d9180; }
.review .row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* トースト・ヒント・暗転 */
.toasts { position: fixed; z-index: 70; left: 50%; bottom: 84px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(560px, calc(100% - 24px)); }
.toast { background: #1d1925f0; color: #f7efdf; border: 1px solid #ffffff22; border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.6; box-shadow: 0 10px 30px #0008; animation: toastIn .3s var(--ease); }
.toast.tip { background: var(--paper); color: var(--ink); border-color: #0000001a; }
.toast.tip b { color: var(--amber); }
#app:has(.layer:not([hidden])) .toast.tip { opacity: 0; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.hint-bubble { position: fixed; z-index: 65; left: 50%; bottom: 82px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); background: #fbf2da; color: var(--ink); border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px #000a; display: grid; gap: 10px; animation: toastIn .25s var(--ease); }
.hint-bubble p { margin: 0; font-size: 15px; line-height: 1.8; }
.hint-bubble .lv { font-size: 11px; letter-spacing: .12em; color: var(--ink-soft); }
.hint-bubble .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.hint-bubble .row .btn { min-height: 36px; font-size: 13px; padding: 6px 12px; }
.fly { position: fixed; z-index: 80; pointer-events: none; background: #fffdf7; color: var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 12px; box-shadow: 0 8px 20px #0007; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .7s var(--ease), opacity .7s; }
.fade { position: fixed; inset: 0; z-index: 90; background: #0b0910; opacity: 0; pointer-events: none; transition: opacity .6s; display: grid; place-items: center; color: #efe4d2; font-family: var(--title); font-size: clamp(18px, 3vw, 24px); letter-spacing: .1em; text-align: center; line-height: 1.8; }
.fade.on { opacity: 1; pointer-events: auto; }

dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(10, 8, 14, .6); backdrop-filter: blur(3px); }
.menu-card { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 20px; width: min(560px, calc(100vw - 32px)); display: grid; gap: 10px; }
.menu-card h2 { margin: 0 0 4px; font-family: var(--title); font-size: 20px; }
.menu-card p { margin: 0; font-size: 15px; line-height: 1.8; }
.menu-card .row { display: flex; gap: 8px; justify-content: flex-end; }
.howto { display: grid; gap: 8px; margin: 0; padding-left: 1.2em; font-size: 14.5px; line-height: 1.75; }

/* 拡大図の中身（重ねるHTML） */
.hot-ov { cursor: pointer; border: 0; background: transparent; padding: 0; }
.hot-ov:hover, .hot-ov:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-radius: 4px; }
.screen { position: absolute; background: #f5f6f8; color: #20242c; overflow: hidden; display: flex; flex-direction: column; font-family: var(--ui); border-radius: 2px; }
.screen.off { background: #0f1420; }
.screen .wake { position: absolute; inset: 0; display: grid; place-items: center; color: #8e9ab1; font-size: 13px; border: 0; background: radial-gradient(circle at 50% 40%, #182235, #0b0f18); cursor: pointer; }
.screen .wake span { border: 1px solid #8e9ab155; border-radius: 999px; padding: 8px 16px; }
.br-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #dfe3ea; flex: none; }
.br-tabs button { border: 0; border-radius: 6px 6px 0 0; background: #cfd5df; padding: 6px 10px; font-size: 12px; max-width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3a4150; }
.br-tabs button[aria-selected="true"] { background: #fff; color: #11151c; }
.br-url { background: #fff; padding: 5px 10px; font-size: 11px; color: #6b7384; border-bottom: 1px solid #e2e6ec; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-page { position: relative; flex: 1; overflow: auto; background: #fff; font-size: 13px; line-height: 1.6; scroll-behavior: smooth; }
.br-page .inner { padding: 12px 14px 18px; }
.br-top { position: absolute; right: 10px; bottom: 10px; z-index: 2; border: 0; border-radius: 999px; background: #20242ccc; color: #fff; font-size: 12px; padding: 6px 12px; }
.kn-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1f6f5c; font-size: 15px; padding-bottom: 8px; border-bottom: 2px solid #1f6f5c; margin-bottom: 10px; }
.kn-cond { background: #eef6f3; border: 1px solid #cfe5dd; border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; font-size: 12.5px; }
.kn-cond .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-cond .tags span { background: #fff; border: 1px solid #1f6f5c55; border-radius: 999px; padding: 2px 10px; font-weight: 700; color: #1f4f43; }
.kn-zero { margin: 10px 0; padding: 10px 12px; background: #fff6e5; border: 1px solid #f0d49b; border-radius: 6px; font-size: 12.5px; color: #6a4a10; }
.kn-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eef0f3; }
.kn-item .thumb { width: 56px; height: 40px; border-radius: 6px; background: linear-gradient(135deg, var(--c1, #cfd8e3), var(--c2, #9fb0c6)); position: relative; overflow: hidden; }
.kn-item .thumb::after { content: ''; position: absolute; left: 8px; right: 6px; bottom: 7px; height: 13px; border-radius: 12px 16px 4px 4px; background: #ffffffcc; }
.kn-item .nm { font-size: 13px; font-weight: 700; }
.kn-item .meta { font-size: 11.5px; color: #6b7384; }
.kn-item .pr { font-size: 17px; font-weight: 700; color: #b8321f; text-align: right; }
.kn-item .pr small { display: block; font-size: 11px; color: #6b7384; font-weight: 400; }
.hh-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid #e7e7e7; margin-bottom: 10px; }
.hh-logo { font-weight: 700; letter-spacing: .18em; font-size: 15px; color: #1c2a45; }
.hh-steps { display: flex; gap: 6px; font-size: 11px; color: #8a8f98; }
.hh-steps b { color: #1c2a45; }
.hh-sec { border: 1px solid #e5e7eb; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 6px; }
.hh-sec h5 { margin: 0; font-size: 12px; color: #1c2a45; }
.hh-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.hh-radio i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #7b8494; flex: none; margin-top: 3px; }
.hh-radio i.on { border: 4px solid #1c2a45; }
.hh-field { display: grid; grid-template-columns: 6.5em 1fr; gap: 6px; align-items: center; font-size: 12px; color: #505866; }
.hh-field span { border: 1px solid #cfd4dc; border-radius: 4px; padding: 3px 8px; min-height: 24px; color: #111; background: #fff; }
.hh-field span.caret::after { content: '|'; margin-left: 1px; animation: blink 1s steps(1) infinite; color: #1c2a45; }
@keyframes blink { 50% { opacity: 0; } }
.hh-select { border: 1px solid #1c2a45; border-radius: 4px; padding: 4px 8px; font-size: 12.5px; display: flex; justify-content: space-between; background: #fff; cursor: pointer; width: 100%; text-align: left; }
.hh-dd { border: 1px solid #cfd4dc; border-radius: 4px; box-shadow: 0 6px 16px #0002; font-size: 12px; }
.hh-dd div { padding: 4px 8px; }
.hh-dd div:first-child { background: #e8edf6; }
.hh-dd .x { color: #9aa1ad; width: auto; height: auto; border: 0; border-radius: 0; background: none; display: block; font-size: 12px; place-items: initial; }
.hh-sum { display: grid; gap: 2px; font-size: 12.5px; }
.hh-sum .row { display: flex; justify-content: space-between; }
.hh-sum .tot { font-weight: 700; font-size: 14px; border-top: 1px solid #e5e7eb; padding-top: 4px; margin-top: 2px; }
.hh-notes { font-size: 11px; color: #6b7384; line-height: 1.6; }
.hh-next { margin-top: 4px; background: #c9ced8; color: #fff; border-radius: 6px; text-align: center; padding: 7px; font-size: 12.5px; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li.day { display: block; }
.hist li { display: grid; grid-template-columns: 4em 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f1f4; font-size: 12.5px; }
.hist li b { color: #6b7384; font-weight: 400; }
.hist .day { font-size: 11px; color: #8a8f98; padding: 8px 0 2px; }
.done-page { display: grid; gap: 10px; place-items: center; text-align: center; padding: 24px 12px; }
.done-page .ok { width: 44px; height: 44px; border-radius: 50%; background: #1f6f5c; color: #fff; display: grid; place-items: center; font-size: 22px; }

.phone-screen { position: absolute; overflow: hidden; border-radius: 18px; background: #0b0d12; color: #fff; font-family: var(--ui); display: flex; flex-direction: column; }
.lock { flex: 1; display: grid; align-content: start; justify-items: center; padding-top: 16%; gap: 4px; background: radial-gradient(circle at 30% 20%, #3a3f5a, #151722 70%); }
.lock .t { font-size: 44px; font-weight: 300; letter-spacing: .02em; }
.lock .d { font-size: 12px; opacity: .8; }
.lock .noti { margin-top: 18%; width: 88%; background: #ffffff26; backdrop-filter: blur(6px); border-radius: 12px; padding: 8px 10px; font-size: 11.5px; line-height: 1.5; text-align: left; border: 0; color: #fff; cursor: pointer; }
.lock .noti small { display: block; opacity: .7; font-size: 10px; }
.chat { flex: 1; display: flex; flex-direction: column; background: #e9eef3; color: #1b1f27; }
.chat .ch-head { background: #fff; padding: 8px 10px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #dde3ea; display: flex; gap: 6px; align-items: center; }
.chat .ch-head .bk { border: 0; background: none; font-size: 16px; padding: 0 4px; }
.chat .ch-body { flex: 1; overflow: auto; padding: 8px; display: grid; gap: 6px; align-content: start; font-size: clamp(11px, 1.3vw, 14px); }
.chat .d { justify-self: center; font-size: 10px; color: #7a8391; }
.chat .m { max-width: 80%; background: #fff; border-radius: 10px; padding: 5px 9px; line-height: 1.5; justify-self: start; }
.chat .m.me { justify-self: end; background: #cfe9c0; }
.chat .ch-input { background: #fff; border-top: 1px solid #dde3ea; padding: 6px 8px; display: grid; gap: 3px; }
.chat .ch-input small { font-size: 10px; color: #7a8391; }
.chat .ch-input div { border: 1px solid #cdd4de; border-radius: 12px; padding: 5px 10px; font-size: clamp(11px, 1.3vw, 14px); line-height: 1.5; min-height: 28px; }

.cal { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #efe2c8, #cdb994); perspective: 1400px; }
.cal-sheet { width: min(700px, 94%); background: #fbf8f1; color: #26222c; border-radius: 3px; box-shadow: 0 16px 40px #0006; transform-origin: top center; position: relative; }
.cal-sheet.flip { animation: calFlip .5s var(--ease); }
@keyframes calFlip { 0% { transform: rotateX(0); } 45% { transform: rotateX(-82deg); opacity: .6; } 55% { transform: rotateX(-82deg); opacity: .6; } 100% { transform: rotateX(0); } }
.cal-ring { position: absolute; top: -8px; left: 0; right: 0; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 14px, #5d5764 14px 17px, transparent 17px 30px); }
.cal-photo { height: 110px; overflow: hidden; border-radius: 3px 3px 0 0; }
.cal-photo svg { width: 100%; height: 100%; display: block; }
.cal-mhead { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 14px 4px; }
.cal-mhead b { font-family: var(--title); font-size: 30px; }
.cal-mhead span { font-size: 12px; color: #807789; letter-spacing: .2em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid #ddd3c2; margin: 0 10px 12px; }
.cal-grid .dw { font-size: 10.5px; text-align: center; padding: 3px 0; color: #807789; }
.cal-grid .dw.sun, .cal-grid .c.sun .n { color: #c0392b; }
.cal-grid .dw.sat, .cal-grid .c.sat .n { color: #2e4f86; }
.cal-grid .c { min-height: clamp(44px, 7vw, 66px); border-right: 1px solid #eee5d6; border-bottom: 1px solid #eee5d6; padding: 3px 4px; font-size: 12px; position: relative; }
.cal-grid .c .n { font-size: 12px; font-weight: 700; }
.cal-grid .c .w { display: block; font-family: var(--hand); font-size: clamp(11px, 1.5vw, 15px); line-height: 1.3; margin-top: 2px; font-weight: 600; }
.cal-grid .c.blank { background: #f4efe5; }
.cal-grid .c .circle { position: absolute; inset: 2px; border: 2px solid var(--red-pen); border-radius: 50%; opacity: .75; pointer-events: none; }
.cal-nav { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; }
.cal-nav .btn { min-height: 38px; font-size: 13px; padding: 6px 14px; }

.fridge-paper { position: absolute; background: #fbf8f0; box-shadow: 0 3px 8px #0003; font-family: var(--hand); color: #333; padding: 6% 7%; font-size: 10px; line-height: 1.5; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; border: 0; text-align: left; cursor: pointer; }
.fridge-paper:hover, .fridge-paper:focus-visible { transform: translateY(-4px) rotate(0deg) !important; box-shadow: 0 10px 18px #0004; outline: none; }
.fridge-paper .lines { display: grid; gap: 5px; }
.fridge-paper .lines i { display: block; height: 2px; background: #0002; border-radius: 1px; }
.fridge-paper .ttl { font-size: 11px; margin-bottom: 6px; color: #222; }
.magnet { position: absolute; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset -3px -4px 0 #0002, 0 2px 4px #0005; left: 50%; top: -9px; transform: translateX(-50%); }
.fridge-paper.lifted { transform: translateY(-10px) rotate(-2deg) scale(1.03) !important; z-index: 5; }

.envelope { position: absolute; background: #d9b98a; border-radius: 3px; box-shadow: 0 4px 10px #0004; border: 0; cursor: pointer; color: #3a2a17; font-family: var(--hand); display: grid; align-content: start; padding: 10px 12px; text-align: left; transition: transform .35s var(--ease); }
.envelope::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(170deg, #c9a672 49%, transparent 51%), linear-gradient(190deg, #c9a672 49%, transparent 51%); background-size: 50% 100%; background-position: left, right; background-repeat: no-repeat; opacity: .6; border-radius: 3px 3px 0 0; }
.envelope b { font-size: clamp(14px, 2.2vw, 22px); position: relative; z-index: 1; margin-top: 30%; }
.envelope small { font-size: 11px; position: relative; z-index: 1; opacity: .8; }
.envelope:hover, .envelope:focus-visible { transform: translateY(-6px); outline: none; }
.card-bag { position: absolute; background: linear-gradient(135deg, #ffffffee, #f3f0ea); border-radius: 3px; box-shadow: 0 4px 10px #0003; border: 0; cursor: pointer; }
.card-bag::before { content: ''; position: absolute; inset: 8%; border: 1px solid #0000000d; }

.slip-mini { position: absolute; background: #fff; border: 1px solid #0000001a; display: grid; grid-template-rows: auto 1fr; font-size: 10px; color: #333; overflow: hidden; cursor: pointer; padding: 0; }
.slip-mini .band { background: #2a7d4f; height: 12%; }
.slip-mini .body { padding: 6%; display: grid; gap: 5px; align-content: start; }
.slip-mini .body i { display: block; height: 2px; background: #0002; }
.slip { width: min(520px, 90vw); background: #fff; color: #222; border-radius: 3px; overflow: hidden; box-shadow: 0 16px 40px #0008; font-size: 14.5px; }
.slip .band { background: #2a7d4f; color: #fff; padding: 6px 14px; font-size: 12px; letter-spacing: .14em; }
.slip .cell { display: grid; grid-template-columns: 5.5em 1fr; border-bottom: 1px solid #e3e3e3; }
.slip .cell > b { background: #f1f6f2; padding: 8px 10px; font-weight: 500; font-size: 12px; color: #2a5a3e; }
.slip .cell > div { padding: 8px 12px; line-height: 1.7; }
.slip .hand { font-size: 18px; color: #1d2a6b; }

.tag-ov { position: absolute; display: grid; place-items: center; font-family: var(--hand); color: #333; font-size: clamp(11px, 1.6vw, 16px); text-align: center; line-height: 1.3; }
.gold { color: #3b2b0a; font-family: var(--ui); font-weight: 700; letter-spacing: .08em; }

.photo-flip { position: absolute; perspective: 1200px; }
.photo-flip .inner { position: absolute; inset: 0; transition: transform .7s var(--ease); transform-style: preserve-3d; }
.photo-flip.back .inner { transform: rotateY(180deg); }
.photo-flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.photo-flip .face.b { transform: rotateY(180deg); background: #efe6d4; border: 10px solid #8a6443; display: grid; place-items: center; font-family: var(--hand); color: #2b2b2b; font-size: clamp(14px, 2.3vw, 22px); line-height: 1.7; text-align: center; box-shadow: inset 0 0 30px #0001; }

.anim-shake { animation: shake .6s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-10px) rotate(-1.5deg); } 40% { transform: translateX(9px) rotate(1.2deg); } 60% { transform: translateX(-6px) rotate(-.8deg); } 80% { transform: translateX(4px); } }
[id^="cu-"] { transform-box: fill-box; transform-origin: center; }
#cu-tape { transition: transform .7s var(--ease); }
.tape-moved #cu-tape { transform: translate(52%, 40%) rotate(24deg); }
#cu-drawer-body { transition: transform .7s var(--ease); }
.drawer-closed #cu-drawer-body { transform: translateY(-62%); }
.drawer-closed .envelope, .drawer-closed .card-bag { opacity: 0; pointer-events: none; }
.envelope, .card-bag { transition: opacity .4s .3s, transform .35s var(--ease); }
#cu-rug-flap { transition: transform 1s var(--ease); transform-origin: 4px 44px !important; }
.rug-flipped #cu-rug-flap { transform: rotate3d(.739, .673, 0, 172deg); }
#cu-photo { transition: opacity .3s; }

.insole-draw { width: min(460px, 86vw); display: block; margin: 0 auto; }

/* 小さい画面 */
@media (max-width: 860px) {
  .cu-sheet { grid-template-columns: 1fr; grid-template-rows: auto 1fr; inset: calc(var(--bar-h) + 4px) 8px 8px; gap: 8px; align-items: start; }
  .cu-art-wrap { height: auto; }
  .cu-stage { max-height: 48dvh; }
  .cu-side { max-height: none; min-height: 0; padding: 12px 14px; }
  .cu-log { font-size: 14.5px; }
  .opt-grid, .ends, .axes { grid-template-columns: 1fr; }
  .next-case { grid-template-columns: 1fr; }
  .bd-desk { inset: calc(var(--bar-h) + 4px) 6px 6px; }
  .nb-book { top: auto; height: 88dvh; width: 100%; border-radius: 16px 16px 0 0; animation: sheetUp .28s var(--ease); }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
  .rv-sec dl { grid-template-columns: 1fr; gap: 2px; }
  .rv-sec dd { margin-bottom: 8px; }
  .hud { gap: 6px; width: calc(100% - 16px); flex-wrap: nowrap; }
  .hud-btn { min-height: 44px; padding: 6px 9px; font-size: 12.5px; gap: 5px; flex: 1 1 auto; justify-content: center; }
  .hud-btn .ico { width: 17px; height: 17px; }
  .cu-stage.tall { max-height: 62dvh; }
  .hud-btn .kbd { display: none; }
  .day-stamp { font-size: 11px; }
  .brand span { display: none; }
}
@media (max-aspect-ratio: 1/1) {
  .room-scroll { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; align-items: stretch; overscroll-behavior-x: contain; }
  .room { width: auto; height: 100%; max-height: none; border-radius: 0; flex: none; }
  .pan-hint { position: absolute; z-index: 6; left: 50%; top: calc(var(--bar-h) + 50px); transform: translateX(-50%); background: #1d1925d9; color: #f7efdf; border-radius: 999px; padding: 6px 14px; font-size: 12px; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}