/* Layout: a phone-sized app. The home tab is a window onto the plush's room, lit by the real time of day; talk, album and anniversaries sit behind a bottom tab bar. */
:root{
  --paper:#f6f4fb; --ink:#2a2740; --muted:#6c6886; --line:#e2def0;
  --card:#ffffff; --accent:#e26d8f; --accent-ink:#ffffff; --soft:#f1e9f7;
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Rounded Mplus 1c",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  /* sky of the room window, set per time of day below */
  --sky1:#bfe6f2; --sky2:#fff3d6; --sky-ink:#2a2740; --floor:#e9d9c6;
  color-scheme:light; /* 端末がダークモードでも常にライト表示 */
}

[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.7;padding-inline:16px}
.wrap{max-width:430px;margin:0 auto;padding-block:12px 24px;display:flex;flex-direction:column;gap:12px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}

.app{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;min-height:640px;box-shadow:0 18px 40px -24px rgba(40,30,80,.35)}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;gap:8px}
.top h1{font-size:18px;font-weight:900;letter-spacing:.02em}
.top .days{font-size:12px;color:var(--muted)}
.iconbtn{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--card)}
.tabs button{border:0;background:none;padding:10px 0 12px;font-size:12px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--display);font-weight:700}
.tabs button svg{width:22px;height:22px}
.tabs button[aria-selected="true"]{color:var(--accent)}

/* ── room ── */
.room{position:relative;margin:0 14px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%);color:var(--sky-ink);aspect-ratio:4/4.3;max-width:100%;transition:background .8s}
.room[data-phase="morning"]{--sky1:#bfe6f2;--sky2:#fff3d6;--sky-ink:#2a2740}
.room[data-phase="day"]{--sky1:#8fd0f0;--sky2:#e9f7ff;--sky-ink:#20304a}
.room[data-phase="evening"]{--sky1:#f6a77e;--sky2:#c9a0d8;--sky-ink:#2b1f38}
.room[data-phase="night"]{--sky1:#1b1d4a;--sky2:#3c3474;--sky-ink:#f2eefe}
.room canvas.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.room .floor{position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--floor);border-top:3px solid rgba(0,0,0,.06)}
.room .mood{position:absolute;top:12px;left:12px;font-size:12px;background:rgba(255,255,255,.72);color:#2a2740;border-radius:999px;padding:2px 10px;font-weight:700}
.room .clock{position:absolute;top:12px;right:14px;font-family:var(--display);font-weight:700;font-size:13px;opacity:.85;font-variant-numeric:tabular-nums}
.plush{position:absolute;left:50%;bottom:9%;width:56%;aspect-ratio:1;transform:translateX(-50%);border:0;padding:0;background:none;cursor:pointer;border-radius:50%}
.plush img{width:100%;height:100%;object-fit:cover;border-radius:50%;box-shadow:0 10px 0 -4px rgba(0,0,0,.08)}
.plush.photo img{border:5px solid #fff}
@media (prefers-reduced-motion:no-preference){
  .plush img{animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 100%}
  .room[data-phase="night"] .plush img{animation-duration:6.5s}
  .plush.pet img{animation:wiggle .6s ease}
}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.985)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.heart{position:absolute;font-size:22px;pointer-events:none;color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.heart{animation:float 1.2s ease-out forwards}}
@keyframes float{to{transform:translateY(-70px) scale(1.3);opacity:0}}
.zzz{position:absolute;right:20%;bottom:58%;font-family:var(--display);font-weight:900;font-size:20px;opacity:.8}
.bubble{position:relative;margin:12px 14px 0;background:var(--soft);border-radius:18px;padding:12px 14px;font-size:15px}
.bubble::before{content:"";position:absolute;top:-8px;left:50%;border:8px solid transparent;border-top:0;border-bottom-color:var(--soft);transform:translateX(-50%)}
.bubble .who{font-family:var(--display);font-weight:700;font-size:12px;color:var(--accent)}
.actions{display:flex;gap:8px;padding:10px 14px 0}
.btn{border:0;border-radius:999px;padding:8px 16px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:700;cursor:pointer}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.home-scroll{overflow-y:auto;flex:1;padding-bottom:14px;display:flex;flex-direction:column}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 0}
.card{border:1px solid var(--line);border-radius:16px;padding:10px 12px;min-width:0;background:var(--card)}
.card .lbl{font-size:11px;color:var(--muted);letter-spacing:.08em}
.card .big{font-family:var(--display);font-weight:900;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
.card .sm{font-size:12px;color:var(--muted)}
.card.wide{grid-column:1/-1;display:flex;gap:10px;align-items:center}
.card.wide img{width:64px;height:64px;object-fit:cover;border-radius:12px;flex:none}

/* ── talk ── */
.log{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:380px;max-height:520px}
.row{display:flex;gap:8px;align-items:flex-end}
.row.me{justify-content:flex-end}
.row img.av{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.msg{max-width:74%;padding:8px 12px;border-radius:18px;background:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.row.me .msg{background:var(--accent);color:var(--accent-ink)}
.msg.typing{color:var(--muted)}
.composer{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.composer input{font-size:16px;flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--paper)}

/* ── album ── */
.pad{padding:12px 14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{margin:0;border-radius:14px;overflow:hidden;background:var(--soft);display:flex;flex-direction:column;min-width:0}
.shot img{width:100%;aspect-ratio:1;object-fit:cover}
.shot figcaption{padding:6px 10px 8px;font-size:13px;line-height:1.5}
.shot time{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tag{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:0 6px;color:var(--muted);margin-left:4px}
.hint{font-size:12px;color:var(--muted)}

/* ── anniversaries ── */
.ann{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ann li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.ann .d{font-family:var(--display);font-weight:900;font-size:13px;background:var(--soft);border-radius:10px;padding:4px 8px;text-align:center;font-variant-numeric:tabular-nums;min-width:52px}
.ann .t{min-width:0}
.ann .t b{font-family:var(--display)}
.ann .left{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.ann li.today{border-color:var(--accent)}

/* ── settings sheet & demo strip ── */
.sheet{border:1px solid var(--line);border-radius:20px;padding:14px;background:var(--card);display:flex;flex-direction:column;gap:10px}
.sheet label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.sheet input[type=text],.sheet input[type=date]{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--paper);font-size:16px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:3px 12px;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.demo{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.note{font-size:12px;color:var(--muted)}

/* ── v2: switcher, care, slideshow, group ── */
.tabs{grid-template-columns:repeat(5,1fr)}
.switch{display:flex;gap:6px;padding:0 18px 4px;overflow-x:auto}
.switch button{flex:none;border:2px solid transparent;background:none;padding:0;border-radius:50%;cursor:pointer;width:38px;height:38px}
.switch button img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--soft)}
.switch button[aria-pressed="true"]{border-color:var(--accent)}
.switch .add{border:1px dashed var(--line);color:var(--muted);font-size:20px;line-height:1}
.plush .layer{position:absolute;inset:0;transition:opacity 1.2s}
.plush .layer.off{opacity:0}
.care{margin:12px 14px 0;border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.care h3{font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.meals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.meal{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:6px 4px;text-align:center;cursor:pointer;font-size:12px;line-height:1.4;min-width:0}
.meal b{display:block;font-family:var(--display);font-size:13px}
.meal.done{background:var(--soft);border-color:transparent}
.meal.now{border-color:var(--accent)}
.meal:disabled{cursor:default;opacity:.55}
.menu{display:flex;flex-wrap:wrap;gap:6px}
.health{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hearts{font-size:18px;letter-spacing:2px;color:var(--accent)}
.hearts .e{color:var(--line)}
.potty{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.row .nm{font-size:11px;color:var(--muted);margin-bottom:2px}
.photos{display:flex;gap:6px;flex-wrap:wrap}
.photos figure{margin:0;position:relative;width:64px}
.photos img{width:64px;height:64px;border-radius:12px;object-fit:cover}
.photos .x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:12px;line-height:1}
.photos .main{position:absolute;left:4px;bottom:4px;font-size:10px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px}
.sheet label.toggle{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.toggle input{width:auto;margin:0}

/* お部屋の写真の中に、ぬいたちをランダムに置く */
.room.photo{background-size:cover;background-position:center}
.room .tint{position:absolute;inset:0;pointer-events:none;transition:background .8s}
.room.photo[data-phase="evening"] .tint{background:rgba(255,140,90,.18)}
.room.photo[data-phase="night"] .tint{background:rgba(20,22,70,.45)}
.room.photo[data-phase="night"]{--sky-ink:#f2eefe}
.nui{position:absolute;width:var(--w,40%);aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;border-radius:50%;transition:left 1.6s cubic-bezier(.45,0,.3,1),top 1.6s cubic-bezier(.45,0,.3,1)}
.room.still .nui{transition:none}
.nui .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 10px 14px -8px rgba(0,0,0,.45);transition:opacity 1.2s}
.nui .layer.off{opacity:0}
.nui.sel .layer{border-color:var(--accent)}
.nui .nm{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font-size:11px;font-weight:700;background:rgba(255,255,255,.9);color:#2a2740;border-radius:999px;padding:0 8px;white-space:nowrap}
.nui.sel .nm{background:var(--accent);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .nui .layer{animation:breathe 4.2s ease-in-out infinite;transform-origin:50% 100%}
  .nui:nth-of-type(2n) .layer{animation-delay:-1.7s}
  .room[data-phase="night"] .nui .layer{animation-duration:6.5s}
  .nui.pet .layer{animation:wiggle .6s ease}
}
@media (prefers-reduced-motion:reduce){.nui{transition:none}}
.sbub{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);max-width:70%;width:max-content;background:#fff;color:#2a2740;border-radius:14px;padding:6px 11px;font-size:13px;line-height:1.5;box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none;z-index:200;opacity:0;transition:opacity .3s}
.sbub.on{opacity:1}
.sbub::after{content:"";position:absolute;bottom:-7px;left:var(--tail,50%);transform:translateX(-50%);border:7px solid transparent;border-bottom:0;border-top-color:#fff}
.scene-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin:8px 14px 0}
.scene-tools .tool{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--card);color:var(--ink);cursor:pointer}
.scene-tools .tool:focus-visible,.nui:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* ホームボタンと、みんなのようす */
.switch{align-items:center}
.switch .home{display:grid;place-items:center;background:var(--soft);color:var(--ink)}
.switch .home svg{width:20px;height:20px}
.switch .home[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.switch .sep{flex:none;width:1px;height:24px;background:var(--line);margin:0 2px}
.who-list{margin:12px 14px 0;border:1px solid var(--line);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.who-list h3{font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.who-row{display:flex;align-items:center;gap:10px;font:inherit;color:var(--ink);background:none;border:0;border-top:1px solid var(--line);padding:8px 0 2px;text-align:left;cursor:pointer;width:100%}
.who-row:first-of-type{border-top:0}
.who-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.who-row .wn{display:flex;flex-direction:column;min-width:0;flex:1}
.who-row .ws{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.who-row:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.hearts.sm{font-size:13px;letter-spacing:1px}
/* 絵文字 */
.ebtn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.ebtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.epal{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px 14px 0;border-top:1px solid var(--line)}
.epal .em{font-size:22px;line-height:1;padding:6px 0;border:0;background:none;border-radius:10px;cursor:pointer}
.epal .em:hover,.epal .em:focus-visible{background:var(--soft)}
/* 性格の細かい設定 */
.more{border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.more summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink)}
.more-body{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.more .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.more .two input{min-width:0;width:100%}
.sheet textarea{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--paper);font:inherit;font-size:15px;color:var(--ink);resize:vertical}
.who-row.zz{cursor:default}
.who-row.zz img{filter:grayscale(.5);opacity:.75}
/* おでかけ */
.room.out{--sky1:#9fd8f7;--sky2:#e8f7ff}
.room.out .floor{background:#a8d59a;border-top-color:rgba(0,0,0,.05)}
.room.out[data-phase="night"]{--sky1:#1b1d4a;--sky2:#3c3474}
.room.out[data-phase="night"] .floor{background:#4d6b4f}
#outBtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.empty-room{position:absolute;left:0;right:0;top:50%;text-align:center;font-family:var(--display);font-weight:700;font-size:15px;color:#2a2740;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.room.photo[data-phase="night"] .empty-room,.room[data-phase="night"] .empty-room{color:#fff;text-shadow:none}
.who-row .go{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.who-row .go:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.who-row{cursor:default}
.who-row .tool[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.out-all{display:flex;gap:6px;flex-wrap:wrap}
.who-list .tool{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:4px 12px;background:var(--card);color:var(--ink);cursor:pointer;flex:none}
.actions{flex-wrap:wrap}
.who-row .wn b,.who-row .wn .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.who-row .hearts.sm{font-size:11px;letter-spacing:0}
.who-list .who-row .tool{padding:4px 9px}
/* ぬいからの話しかけ */
.switch button{position:relative}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
.toast{position:absolute;left:12px;right:12px;top:12px;z-index:1000;display:flex;gap:10px;align-items:center;text-align:left;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.toast span{display:flex;flex-direction:column;min-width:0;font-size:13px}
.toast b{font-size:12px;color:var(--accent)}
.app{position:relative}
.times{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.times .tm{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;padding:2px 4px 2px 8px;background:var(--paper)}
.times input[type=time]{border:0;background:none;font:inherit;font-size:15px;color:var(--ink)}
.times .x{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px}
/* はじめての登録・あいことば */
.welcome,.gate{position:fixed;inset:0;z-index:2000;background:var(--paper);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(24px,env(safe-area-inset-top)) 16px 32px}
.gate{background:color-mix(in srgb,var(--paper) 92%,transparent)}
.welcome[hidden],.gate[hidden]{display:none}
.wcard{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.wcard h1,.wcard h2{font-family:var(--display);font-size:20px}
.wlogo{width:72px;height:72px;border-radius:20px;align-self:center}
.wform{display:flex;flex-direction:column;gap:12px}
.wform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.wform input[type=text],.wform input[type=date],.gate input{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--paper);font:inherit;font-size:16px;color:var(--ink)}
.wphoto{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wphoto img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12)}

/* ── 画面は固定。見出しと下のメニューはいつも見えていて、詳しい中身は下からせり上がる ── */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;margin:0}
.wrap{box-sizing:border-box;height:100dvh;padding-block:max(12px,env(safe-area-inset-top)) 12px;gap:8px}
.wrap > .note:empty{display:none}
.app{flex:1;min-height:0}
.screen{overflow:hidden}
.tabs{padding-bottom:env(safe-area-inset-bottom)}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:12px}
.stage .room{flex:1;min-height:160px;aspect-ratio:auto}
.stage .plush{width:auto;height:62%;max-width:72%;bottom:8%}
.stage .bubble{flex:none}
.stage #say{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stage .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stage .actions .btn{position:relative;padding-inline:8px}
.dot{position:absolute;top:4px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.scene-tools .tool.primary{margin-right:auto;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.log{min-height:0;max-height:none}
.scrim{position:fixed;inset:0;z-index:1500;background:rgba(30,24,50,.35);opacity:0;transition:opacity .25s}
.scrim.on{opacity:1}
.bs{position:fixed;left:0;right:0;bottom:0;z-index:1600;margin:0 auto;max-width:460px;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 22px 0 0;border-bottom:0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 30px rgba(40,30,80,.18)}
.bs.on{transform:none}
.bs .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 2px;flex:none}
.bs .bs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-8px;background:var(--card);padding:6px 0;z-index:1}
#panelBody{display:flex;flex-direction:column;gap:12px}
#panelBody .care,#panelBody .who-list{margin:0}
#panelBody .cards{padding:0}
@media (prefers-reduced-motion:reduce){.bs,.scrim{transition:none}}
.topbtns{display:flex;gap:6px;flex-shrink:0}
/* 絵文字パレット：上に種類のタブ、下はたてにスクロール */
.etabs{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.etabs .et{font-size:18px;line-height:1;padding:6px 0;border:0;background:none;border-radius:10px;cursor:pointer;opacity:.55}
.etabs .et[aria-selected="true"]{opacity:1;background:var(--soft)}
.egrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;max-height:184px;overflow-y:auto;overscroll-behavior:contain}
.egrid .enone{grid-column:1/-1;margin:10px 0;text-align:center}
.egrid .em{font-size:22px;line-height:1;padding:6px 0;border:0;background:none;border-radius:10px;cursor:pointer}
.egrid .em:hover,.egrid .em:focus-visible{background:var(--soft)}
/* お部屋の4つのボタン：アイコン付きで横並び */
.actions.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex-wrap:nowrap}
.actions.quad .btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 8px;font-size:13px;line-height:1.2;border-radius:16px;white-space:nowrap;min-width:0}
.actions.quad .btn svg{width:22px;height:22px;flex:none}
.actions.quad .btn.ghost{color:var(--muted)}
.actions.quad .btn.ghost[aria-pressed="true"]{color:var(--accent)}
/* スワイプで切り替えたときの動き。端まで来たら少しだけ揺れる */
@media (prefers-reduced-motion:no-preference){
#screen.swl>*{--sx:40px;animation:swIn .3s ease-out both}
#screen.swr>*{--sx:-40px;animation:swIn .3s ease-out both}
#screen.bmpl>*{--sx:-16px;animation:swBump .3s ease-out}
#screen.bmpr>*{--sx:16px;animation:swBump .3s ease-out}
}
@keyframes swIn{from{transform:translateX(var(--sx));opacity:.25}to{transform:none;opacity:1}}
@keyframes swBump{50%{transform:translateX(var(--sx))}}
/* 起動時のロゴ（スプラッシュ）。色はテーマカラーに追従する */
.splash{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;background:var(--paper);transition:opacity .45s ease,visibility .45s;cursor:pointer}
.splash.out{opacity:0;visibility:hidden;pointer-events:none}
.splash .lg{width:min(76vw,340px);height:auto;overflow:visible}
.lg-edge{fill:color-mix(in srgb,var(--accent) 68%,#fff)}
.lg-soft{fill:var(--soft)}
.lg-bub{fill:var(--card);stroke:color-mix(in srgb,var(--accent) 68%,#fff);stroke-miterlimit:10}
.lg-stitch{fill:color-mix(in srgb,var(--accent) 68%,#fff)}
.lg-ch,.lg-clv path{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
.splash .lg{animation:lgBoing .5s 1.45s ease-out both;transform-origin:50% 60%}
.lg-bubble{transform-box:view-box;transform-origin:4% 88%;animation:lgPop .6s cubic-bezier(.3,1.5,.5,1) both}
.lg-stitch{animation:lgSew .7s .45s ease-out both}
.lg-ch{transform-box:fill-box;transform-origin:50% 100%;animation:lgDrop .55s calc(.55s + var(--i)*.09s) cubic-bezier(.3,1.6,.5,1) both}
.lg-clv{transform-box:fill-box;transform-origin:50% 50%;animation:lgClover .6s 1.15s cubic-bezier(.3,1.6,.5,1) both}
}
@keyframes lgPop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes lgSew{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lgDrop{0%{transform:translateY(-40%) scale(.3);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes lgClover{from{transform:rotate(-200deg) scale(0)}to{transform:none}}
@keyframes lgBoing{0%,100%{transform:none}35%{transform:scale(1.06,.92)}70%{transform:scale(.97,1.04)}}
.top h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(15px,4.6vw,18px)}
@media (max-width:380px){.top{padding-inline:14px}.topbtns{gap:4px}.top .iconbtn{padding-inline:9px;font-size:12px}}
@media (max-width:340px){.top h1{font-size:14px;letter-spacing:0!important}.top .iconbtn{padding-inline:7px}}
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}.two>label{min-width:0}.two input,.two select,.two textarea{width:100%;min-width:0;box-sizing:border-box}
.items{position:absolute;inset:0;z-index:0;pointer-events:none}
.itm{position:absolute;aspect-ratio:1;transform:translate(-50%,-100%);filter:drop-shadow(0 4px 3px rgba(40,30,20,.22))}
.itm svg{display:block;width:100%;height:100%}
.items.edit{z-index:30;pointer-events:auto}
.items.edit .itm{pointer-events:auto;cursor:grab;touch-action:none;outline:2px dashed rgba(255,255,255,.9);outline-offset:2px;border-radius:10px}
.items.edit .itm.drag{cursor:grabbing;transform:translate(-50%,-100%) scale(1.12)}
.room:has(.items.edit) .nui{opacity:.45;pointer-events:none}
.itx{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;line-height:1;padding:0;cursor:pointer}
.ibar{display:flex;align-items:center;gap:6px;width:100%;flex-wrap:wrap}.ibar .note{flex:1;min-width:140px}
.stage.editing .scene-tools>:not(.ibar){display:none}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.iopt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:1px solid var(--line);border-radius:14px;background:var(--card);font:inherit;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer;line-height:1.3}
.iopt:disabled{opacity:.4;cursor:default}
.isw{width:44px;height:44px;display:block}.isw svg{width:100%;height:100%}
.bggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bgopt{display:flex;flex-direction:column;gap:4px;align-items:stretch;padding:4px;border:2px solid transparent;border-radius:16px;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;text-align:center}
.bgopt .sw{display:grid;place-items:center;aspect-ratio:400/430;border-radius:11px;background:center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
.bgopt .sw.plain{background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%)}
.bgopt .sw.add{border:2px dashed var(--line);box-shadow:none;font-size:24px;color:var(--muted)}
.bgopt[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.room.photo .clock{background:rgba(255,255,255,.78);color:#2f241c;padding:0 7px;border-radius:9px}
.stamp{position:relative;display:inline-block;width:132px;height:132px;flex:none}
.stamp img{position:absolute;left:10%;top:2%;width:80%;height:80%;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.stamp.cut img{object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.stamp .sw{position:absolute;left:50%;bottom:2px;transform:translateX(-50%) rotate(-5deg);white-space:nowrap;font-family:var(--display);font-weight:900;font-size:19px;color:var(--sc);-webkit-text-stroke:5px #fff;paint-order:stroke fill;letter-spacing:.02em;text-shadow:0 2px 3px rgba(0,0,0,.18)}
.stamp.sm{width:100%;height:auto;aspect-ratio:1}.stamp.sm .sw{font-size:12px;-webkit-text-stroke:3.5px #fff}.stamp.sm img{border-width:3px}
.row.me .stamp{margin-left:auto}
.spal{padding:8px 14px 0;border-top:1px solid var(--line);max-height:46vh;overflow-y:auto}
.sphead{font-size:12px;font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-bottom:4px}
.spgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sp{border:0;background:none;padding:4px;border-radius:12px;cursor:pointer}.sp:hover,.sp:focus-visible{background:var(--soft)}.sp:focus-visible{outline:2px solid var(--accent)}
.ebtn.sb{padding:0;overflow:hidden}.ebtn.sb img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* 色のテーマ（えほん・シンプルどちらにもかかる） */
:root[data-look][data-tone="pink"]{--paper:#fbedf0;--ink:#3a2630;--muted:#6e5060;--line:#e8c4ce;--card:#fff8f9;--accent:#c85677;--accent-ink:#fff;--soft:#f7e0e6;--floor:#efd0d7;--pen:rgba(90,40,60,.38)}
:root[data-look][data-tone="blue"]{--paper:#ecf2f9;--ink:#22303f;--muted:#4c5f73;--line:#bdd0e3;--card:#f9fcff;--accent:#3b74ad;--accent-ink:#fff;--soft:#dde9f5;--floor:#d0dfed;--pen:rgba(30,50,80,.38)}
:root[data-look][data-tone="white"]{--paper:#f8f8f6;--ink:#2b2b2b;--muted:#636363;--line:#e0e0dc;--card:#ffffff;--accent:#a8644f;--accent-ink:#fff;--soft:#f0f0ed;--floor:#ebe8e2;--pen:rgba(40,40,40,.28)}
:root[data-tone] .room .floor{background:var(--floor)}
.tone{display:inline-flex;align-items:center;gap:6px}.tone i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18);flex:none}
.yose{background:#fffaf0 radial-gradient(circle,rgba(226,109,143,.18) 1.5px,transparent 2px) 0 0/22px 22px;border-radius:14px;padding:14px 12px 10px;box-shadow:0 2px 10px rgba(0,0,0,.1);color:#5b4636}
.ytitle{text-align:center;font-family:var(--display);font-weight:700;font-size:20px;margin-bottom:10px}
.ygrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ymsg{background:var(--c);border-radius:12px;padding:8px 10px;transform:rotate(var(--r));box-shadow:0 1px 3px rgba(0,0,0,.08);min-width:0}
.ymsg p{margin:4px 0 0;font-family:var(--display);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.yby{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700}.yby img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.yfoot{text-align:right;font-size:12px;margin-top:10px;font-family:var(--display)}
.yose.sm{border-radius:0;box-shadow:none;padding:16px 14px 12px;text-align:left}
.fhead .avs{display:flex}.fhead .avs img{margin-left:-10px;box-shadow:0 0 0 2px var(--card)}.fhead .avs img:first-child{margin-left:0}
#say{display:inline-block}
.sbub{transform:translate(-50%,-100%) translateY(14px) scale(.86);transform-origin:var(--tail,50%) 100%;transition:opacity .22s ease,transform .22s ease}
.sbub.on{transform:translate(-50%,-100%);transition:opacity .28s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:no-preference){
  #say.rise{animation:rise .55s cubic-bezier(.34,1.56,.64,1)}
  .plush.fx-jolt img{animation:jolt .5s ease}
  .plush.fx-no img{animation:nope .6s ease}
  .plush.fx-munch img{animation:munch .7s ease;transform-origin:50% 100%}
  .plush.fx-shiver img{animation:shiver .6s linear}
  .plush.fx-hop img,.nui.talking .layer{animation:hop .55s cubic-bezier(.3,.7,.4,1.4);transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){.sbub,.sbub.on{transform:translate(-50%,-100%)}}
@keyframes rise{0%{transform:translateY(14px);opacity:0}100%{transform:none;opacity:1}}
@keyframes jolt{0%,100%{transform:none}12%{transform:translateX(-5px)}24%{transform:translateX(5px)}36%{transform:translateX(-4px)}48%{transform:translateX(3px)}60%{transform:translateX(-2px)}72%{transform:translateX(1px)}}
@keyframes nope{0%,100%{transform:none}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-3deg)}}
@keyframes munch{0%,100%{transform:none}15%{transform:scale(1.06,.93)}30%{transform:none}45%{transform:scale(1.05,.94)}60%{transform:none}75%{transform:scale(1.03,.97)}}
@keyframes shiver{0%,100%{transform:none}10%,50%,90%{transform:rotate(-3deg)}30%,70%{transform:rotate(3deg)}}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-10%) scale(.97,1.04)}65%{transform:scale(1.04,.96)}}
.feed{display:flex;flex-direction:column;gap:18px;margin:10px -14px 0}
.post{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fhead{display:flex;align-items:center;gap:8px;padding:8px 14px}.fhead img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--accent)}
.fhead b{font-size:14px}.fhead time{margin-left:auto;font-size:12px;color:var(--muted)}
.fmedia{display:block;width:100%;padding:0;border:0;background:var(--soft);cursor:pointer}
.fmedia:focus-visible,.fcm:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.fmedia>img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.fmedia>svg{display:block;width:100%;height:auto}
.fletter{display:flex;flex-direction:column;aspect-ratio:4/3;padding:22px 26px;text-align:left;background:#fffdf6 repeating-linear-gradient(180deg,transparent 0 31px,#ead9c3 31px 32px);background-position:0 14px;color:#5b4636;font-family:var(--display);font-size:15px;line-height:32px;overflow:hidden}
.fletter .to,.fletter .from{font-weight:700}.fletter .from{text-align:right;margin-top:auto}
.fletter .tx{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fbody{padding:8px 14px 10px;font-size:14px;line-height:1.6}.fbody p{margin:0}.fbody b{margin-right:6px}
.fbody .fc{font-size:13px}
.fcm{display:block;padding:2px 0;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;text-align:left}
.ftag{margin-left:6px;font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:0 7px;white-space:nowrap}
.giftbtn{position:absolute;right:12px;bottom:14px;width:58px;height:48px;border:0;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 4px 12px rgba(0,0,0,.18);display:grid;place-items:center;cursor:pointer;z-index:5;animation:wob 2.6s ease-in-out infinite}
.giftbtn svg{width:40px;height:30px}
.giftbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@keyframes wob{0%,66%,100%{transform:rotate(0)}72%{transform:rotate(-12deg)}78%{transform:rotate(10deg)}84%{transform:rotate(-6deg)}90%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.giftbtn{animation:none}}
.scene-tools .tool.gift{display:inline-flex;align-items:center;gap:5px}.scene-tools .tool.gift svg{width:22px;height:17px;flex:none}
.gopen{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 0}.gopen .gicon svg{width:72px;height:54px;animation:wob 1.2s ease-in-out infinite}
.gift-body{display:flex;flex-direction:column;gap:10px}
.letter{background:#fffdf6 repeating-linear-gradient(180deg,transparent 0 31px,#ead9c3 31px 32px);background-position:0 9px;border-radius:12px;padding:12px 18px 10px;line-height:32px;color:#5b4636;font-size:15px;box-shadow:0 2px 10px rgba(0,0,0,.1);font-family:var(--display)}
.letter .to{font-weight:700}.letter p{margin:0;white-space:pre-wrap}.letter .from{text-align:right;font-weight:700}
.drawing{margin:0;background:#fffdf6;border-radius:12px;padding:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);transform:rotate(-1deg)}
.drawing svg{width:100%;height:auto;display:block;border-radius:6px}
.drawing figcaption{text-align:center;font-family:var(--display);font-weight:700;color:#5b4636;padding:6px 0 2px}
.gacts{display:flex;gap:8px}.gacts .btn{flex:1}
.aview{display:flex;gap:6px;margin:8px 0 2px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.tre{font:inherit;color:inherit;text-align:left;border:0;border-radius:14px;overflow:hidden;background:var(--soft);display:flex;flex-direction:column;min-width:0;padding:0;cursor:pointer}
.tre:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.tre>svg{width:100%;height:auto;display:block}
.tre .tl{display:flex;flex-direction:column;gap:6px;aspect-ratio:4/3;padding:10px;background:#fffdf6 repeating-linear-gradient(180deg,transparent 0 19px,#ead9c3 19px 20px);color:#5b4636;font-size:12px;line-height:20px;overflow:hidden}
.tre .tl .gicon svg{width:28px;height:21px}.tre .tl .tx{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tre .tc{padding:6px 10px 8px;font-size:13px;font-weight:700;display:flex;flex-direction:column}.tre .tc time{font-size:11px;font-weight:400;color:var(--muted)}
.plus{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.plus-avs{display:flex;align-items:center;gap:6px}
.plus-avs img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--card);box-shadow:0 0 0 1.5px var(--line)}
.plus-new{width:44px;height:44px;border-radius:50%;border:2px dashed var(--accent);color:var(--accent);display:grid;place-items:center;font-size:20px;font-weight:700}
.plus-lead{margin:0;font-size:14px;line-height:1.7}
.plus-tbl{width:100%;border-collapse:collapse;font-size:13px}
.plus-tbl th,.plus-tbl td{padding:7px 6px;border-bottom:1px dashed var(--line);text-align:center}
.plus-tbl tbody th{text-align:left;font-weight:500;color:var(--muted)}
.plus-tbl thead th{font-family:var(--display);font-size:13px}
.plus-tbl td:last-child,.plus-tbl thead th:last-child{color:var(--accent);font-weight:700}
.plus-price{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}.plus-price b{font-family:var(--display);font-size:20px}
.plus .btn{min-width:60%}.plus .btn:disabled{opacity:.6;cursor:default}
.foods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.fbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:1px solid var(--line);background:var(--card);border-radius:14px;font:inherit;font-size:11px;color:var(--ink);cursor:pointer;min-width:0}
.fbtn:hover{background:var(--soft)}.fbtn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fbtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
svg.food{width:48px;height:48px;display:block}
.eatfx{position:absolute;width:15%;transform:translate(-50%,-50%);z-index:60;pointer-events:none;animation:eat 1.1s ease-in forwards}
.eatfx svg.food{width:100%;height:auto}
@keyframes eat{0%{transform:translate(-50%,-160%) scale(.8);opacity:0}25%{transform:translate(-50%,-90%) scale(1);opacity:1}70%{transform:translate(-50%,-30%) scale(.9);opacity:1}100%{transform:translate(-50%,0) scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.eatfx{animation:none;opacity:0}}
[data-look="ehon"] .fbtn{border:1.5px solid var(--pen);border-radius:var(--wob)}
.meter{display:grid;grid-template-columns:3.2em minmax(0,1fr) 6.2em auto;align-items:center;gap:8px;font-size:13px}
.meter .ml{font-weight:700}
.meter .bar{height:10px;border-radius:999px;background:var(--soft);overflow:hidden;border:1px solid var(--line)}
.meter .bar i{display:block;height:100%;border-radius:999px;background:#7fae6e;transition:width .6s}
.meter.bad .bar i{background:var(--accent)}
.meter .mw{font-size:12px;color:var(--muted);white-space:nowrap}
.meter.bad .mw{color:var(--accent);font-weight:700}
.meter .mbtn{padding:4px 12px;font-size:13px}
.cutbox{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.cutstage{position:relative;align-self:center;max-width:240px;width:100%;border-radius:14px;padding:8px;background:repeating-conic-gradient(var(--soft) 0 25%,var(--card) 0 50%) 0 0/16px 16px;border:1px solid var(--line)}
.cutstage canvas{display:block;width:100%;height:auto;cursor:crosshair}
.cutbusy{position:absolute;inset:auto 8px 8px auto;font-size:11px;background:var(--card);border-radius:999px;padding:0 8px}
.cutrow{display:flex;align-items:center;gap:8px;font-size:13px}.cutrow input{flex:1}
.cutbtns{display:flex;gap:8px;flex-wrap:wrap}
.nui.cut,.plush.cut{border-radius:0}
.nui.cut .layer,.plush.cut .layer,[data-look="ehon"] .nui.cut .layer,[data-look="ehon"] .plush.cut img{object-fit:contain;object-position:50% 100%;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 6px rgba(40,30,20,.28))}
.shot{position:relative}
.shotbtn{display:block;padding:0;border:0;background:none;cursor:pointer;width:100%}
.shotbtn:focus-visible,.cmline:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.cmline{display:flex;align-items:center;gap:6px;margin-top:6px;padding:4px 0 0;width:100%;border:0;border-top:1px dashed var(--line);background:none;font:inherit;font-size:12px;color:var(--accent);cursor:pointer;text-align:left}
.cmline .avs{display:flex}.cmline .avs img{width:20px;height:20px;border-radius:50%;object-fit:cover;border:2px solid var(--soft);margin-left:-6px}.cmline .avs img:first-child{margin-left:0}
.ashot{margin:4px 0 10px}.ashot>img{width:100%;max-height:38dvh;object-fit:contain;background:var(--soft);border-radius:14px}
.ashot figcaption,.cm{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.5;margin-top:8px}
.av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.ashot figcaption span,.cm span{display:flex;flex-direction:column;min-width:0;flex:1}
.ashot figcaption b,.cm b{font-size:12px}
.ashot time{font-size:11px;color:var(--muted)}
.cm span{background:var(--soft);border-radius:14px;padding:6px 10px}
.cm .cx{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 6px}
.cm.draft span{background:var(--card);border:1.5px dashed var(--accent)}
.cmh{font-size:14px;margin:14px 0 6px}
.cpick{display:flex;flex-wrap:wrap;gap:6px}
.chip.pk{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px}.chip.pk img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.cbtns{display:flex;gap:8px;margin-top:8px;padding-left:40px}
.iconbtn.me-out{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet select{border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:var(--paper);font-size:15px;color:var(--ink)}
/* ── 画面いっぱいに表示。iPhoneの切り欠きやホームバーの分だけ内側に寄せる ── */
body{padding:0}
.wrap{padding:0;gap:0;max-width:480px}
.app{border:0;border-radius:0;box-shadow:none}
.top{padding-top:calc(14px + env(safe-area-inset-top))}
.toast{top:calc(12px + env(safe-area-inset-top))}
.demo{padding:8px 16px}
.wrap > .note{padding:4px 16px 8px}
@media (min-width:520px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
/* ── きせかえ「えほん」：紙の質感、手描きのような線、水彩の空、読みやすい濃い色 ── */
:root[data-look="ehon"]{--paper:#f9f1e2;--ink:#2f241c;--muted:#5e4a3a;--line:#d6c09b;--card:#fffcf5;--accent:#b04e38;--accent-ink:#ffffff;--soft:#f3e6cf;--floor:#e6cfa9;
  --pen:rgba(47,36,28,.45);--wob:18px 24px 16px 22px/22px 16px 24px 18px;--paperimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E")}
[data-look="ehon"] body{background:var(--paper) var(--paperimg)}
[data-look="ehon"] .app,[data-look="ehon"] .bs,[data-look="ehon"] .wcard{background:var(--card) var(--paperimg)}
[data-look="ehon"] .top h1{letter-spacing:.06em}
[data-look="ehon"] .top h1::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.28em;vertical-align:-.06em;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='160 22 11 11'%3E%3Cpath d='M168.39 22.8184C168.328 22.7815 168.261 22.7511 168.186 22.7286C167.443 22.5009 166.481 22.9863 166.033 23.8165C165.231 25.3192 165.771 27.2362 165.771 27.2362C165.771 27.2362 167.676 27.8241 169.197 27.0537C170.038 26.6298 170.546 25.6756 170.333 24.9282C170.164 24.331 169.52 24.0917 168.841 24.2347C168.979 23.6424 168.823 23.0753 168.39 22.8184ZM164.113 22.8425C163.729 22.6372 163.304 22.5622 162.93 22.6689C162.333 22.8383 162.093 23.4815 162.236 24.1606C161.562 24.0045 160.911 24.2266 160.728 24.8191C160.501 25.5623 160.986 26.5243 161.816 26.972C163.319 27.7741 165.236 27.2338 165.236 27.2338C165.236 27.2338 165.824 25.3291 165.054 23.8079C164.841 23.389 164.495 23.0512 164.111 22.8458L164.113 22.8425ZM169.336 28.1209C169.287 28.0917 169.235 28.0606 169.185 28.0314C167.683 27.2293 165.766 27.7695 165.766 27.7695C165.766 27.7695 165.178 29.6742 165.948 31.1954C166.372 32.0366 167.326 32.5446 168.074 32.3312C168.671 32.1618 168.91 31.5186 168.767 30.8395C169.442 30.9956 170.093 30.7735 170.275 30.181C170.489 29.483 170.076 28.5946 169.338 28.1176L169.336 28.1209ZM165.232 27.7639C165.232 27.7639 163.328 27.176 161.806 27.9464C160.965 28.3703 160.457 29.3245 160.671 30.0719C160.84 30.6691 161.483 30.9084 162.162 30.7654C162.006 31.4402 162.228 32.0908 162.821 32.2735C163.564 32.5012 164.526 32.0157 164.974 31.1856C165.776 29.6828 165.236 27.7658 165.236 27.7658L165.232 27.7639Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='160 22 11 11'%3E%3Cpath d='M168.39 22.8184C168.328 22.7815 168.261 22.7511 168.186 22.7286C167.443 22.5009 166.481 22.9863 166.033 23.8165C165.231 25.3192 165.771 27.2362 165.771 27.2362C165.771 27.2362 167.676 27.8241 169.197 27.0537C170.038 26.6298 170.546 25.6756 170.333 24.9282C170.164 24.331 169.52 24.0917 168.841 24.2347C168.979 23.6424 168.823 23.0753 168.39 22.8184ZM164.113 22.8425C163.729 22.6372 163.304 22.5622 162.93 22.6689C162.333 22.8383 162.093 23.4815 162.236 24.1606C161.562 24.0045 160.911 24.2266 160.728 24.8191C160.501 25.5623 160.986 26.5243 161.816 26.972C163.319 27.7741 165.236 27.2338 165.236 27.2338C165.236 27.2338 165.824 25.3291 165.054 23.8079C164.841 23.389 164.495 23.0512 164.111 22.8458L164.113 22.8425ZM169.336 28.1209C169.287 28.0917 169.235 28.0606 169.185 28.0314C167.683 27.2293 165.766 27.7695 165.766 27.7695C165.766 27.7695 165.178 29.6742 165.948 31.1954C166.372 32.0366 167.326 32.5446 168.074 32.3312C168.671 32.1618 168.91 31.5186 168.767 30.8395C169.442 30.9956 170.093 30.7735 170.275 30.181C170.489 29.483 170.076 28.5946 169.338 28.1176L169.336 28.1209ZM165.232 27.7639C165.232 27.7639 163.328 27.176 161.806 27.9464C160.965 28.3703 160.457 29.3245 160.671 30.0719C160.84 30.6691 161.483 30.9084 162.162 30.7654C162.006 31.4402 162.228 32.0908 162.821 32.2735C163.564 32.5012 164.526 32.0157 164.974 31.1856C165.776 29.6828 165.236 27.7658 165.236 27.7658L165.232 27.7639Z'/%3E%3C/svg%3E") center/contain no-repeat}
[data-look="ehon"] .room{border-radius:var(--wob);box-shadow:inset 0 0 0 2px var(--pen),inset 0 0 34px rgba(120,80,40,.25)}
[data-look="ehon"] .room::after{content:"";position:absolute;inset:0;background:var(--paperimg);mix-blend-mode:multiply;opacity:.35;pointer-events:none;z-index:150;border-radius:inherit}
[data-look="ehon"] .room[data-phase="morning"]{--sky1:#f5d9bd;--sky2:#fdf3dd}
[data-look="ehon"] .room[data-phase="day"]{--sky1:#b9dad8;--sky2:#fbf3e2}
[data-look="ehon"] .room[data-phase="evening"]{--sky1:#eeab88;--sky2:#e6c2cd}
[data-look="ehon"] .room[data-phase="night"]{--sky1:#2e3460;--sky2:#5b4b7c}
[data-look="ehon"] .room .floor{background:#e3c79c;border-top:2px dashed var(--pen)}
[data-look="ehon"] .room.photo{filter:sepia(.18) saturate(.9)}
[data-look="ehon"] :is(.card,.care,.who-list,.bubble,.btn,.tool,.chip,.meal,.iconbtn,.ann li,.shot,.msg,.toast,.more,.sbub,.mood,.composer input,.ebtn,.sheet input,.sheet select,.sheet textarea){border-radius:var(--wob)}
[data-look="ehon"] :is(.card,.care,.who-list,.bubble,.btn.ghost,.tool,.chip,.meal,.iconbtn,.ann li,.msg,.toast,.more,.sbub,.composer input,.ebtn){border:1.5px solid var(--pen)}
[data-look="ehon"] .btn:not(.ghost),[data-look="ehon"] .chip[aria-pressed="true"],[data-look="ehon"] .tool.primary{border:1.5px solid rgba(47,36,28,.6);box-shadow:2px 3px 0 rgba(47,36,28,.22)}
[data-look="ehon"] .bubble::before{border-bottom-color:var(--pen)}
[data-look="ehon"] .row.me .msg{border-color:rgba(47,36,28,.6)}
[data-look="ehon"] :is(.nui .layer,.plush img){border-color:#fffaf0;box-shadow:0 0 0 2px var(--pen),0 10px 14px -8px rgba(60,40,20,.45)}
[data-look="ehon"] .nui .nm{background:#fffaf0;border:1.5px solid var(--pen);color:var(--ink)}
[data-look="ehon"] .switch button img{box-shadow:0 0 0 1.5px var(--pen)}
[data-look="ehon"] .tabs{background:transparent;border-top:2px dashed var(--line)}
[data-look="ehon"] .composer{border-top:2px dashed var(--line)}
[data-look="ehon"] .bs{border-top:2px solid var(--pen)}
[data-look="ehon"] .sbub::after{border-top-color:#fff}
[data-look="ehon"] .grab{background:var(--pen)}
[data-look="ehon"] .bs .bs-head{background:var(--card) var(--paperimg)}
/* おせわパネルのボタンも、フッターメニューと同じ色味にそろえる */
.meter .mbtn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px 4px 8px}
.meter .mbtn svg{width:18px;height:18px;flex:none}
.meter .mbtn.ghost{color:var(--muted)}
.meter .mbtn.need{color:var(--accent);border-color:var(--accent)}
.fbtn{color:var(--muted);font-family:var(--display);font-weight:700}
.menu .chip{color:var(--muted)}
@media (max-width:360px){.fbtn{font-size:10px;letter-spacing:-.03em}}
/* 枠線のボタンは、フッターメニューと同じ色・文字にそろえる。選択中・目立たせたいものはテーマカラーのまま */
:is(.btn.ghost,.iconbtn,.chip,.tool,.ebtn,.more summary){color:var(--muted);font-family:var(--display);font-weight:700}
.chip[aria-pressed="true"],.iconbtn.me-out,.tool.primary{color:var(--accent-ink)}
.ebtn[aria-expanded="true"],.btn.ghost[aria-pressed="true"]{color:var(--accent)}