/* Layout: 机の上に便箋（左）、文具トレイのような操作パネル（右）。スマホでは縦に積む */
:root{
  --desk:#dde4ec;     /* 机 */
  --paper:#ffffff;
  --rule:#8db1de;     /* 便箋の青い罫線 */
  --ink:#1c2944;      /* ブルーブラックのインク */
  --seal:#c8323c;     /* 封蝋の赤 */
  --muted:#5d6a80;
  --line:#c3cedb;
  --f-title:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-hand:"Klee One","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-ui:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--f-ui);line-height:1.7;
  background-image:linear-gradient(90deg,rgba(28,41,68,.035) 1px,transparent 1px),linear-gradient(rgba(28,41,68,.035) 1px,transparent 1px);background-size:28px 28px}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px;padding-block:14px 40px;display:grid;gap:16px}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.back{color:var(--muted);text-decoration:none;font-size:.9rem}
.back:hover{color:var(--ink)}
h1{margin:0;font-family:var(--f-title);font-weight:900;font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:.06em;line-height:1.2}
h1 small{display:block;font-family:var(--f-ui);font-weight:500;font-size:.95rem;letter-spacing:0;color:var(--muted)}
.desk{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:start}
@media (max-width:820px){.desk{grid-template-columns:1fr}}
.paperbox{position:relative;max-width:520px;width:100%;justify-self:center}
#paper{width:100%;aspect-ratio:3/4;display:block;background:var(--paper);box-shadow:0 1px 0 var(--line),0 18px 40px rgba(28,41,68,.18);border-radius:2px;touch-action:manipulation}
.windflag{position:absolute;left:50%;top:12px;translate:-50% 0;background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:999px;font-weight:700;font-size:.92rem;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.windflag.now{background:var(--seal)}
.panel{display:grid;gap:14px;min-width:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:12px}
.card h2{margin:0;font-size:1rem;font-weight:900;letter-spacing:.06em}
form{display:flex;gap:8px}
label.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#ink{flex:1;min-width:0;font-family:var(--f-hand);font-size:1.3rem;padding:8px 12px;border:2px solid var(--ink);border-radius:8px;color:var(--ink);background:var(--paper)}
#ink:focus-visible{outline:3px solid var(--rule);outline-offset:2px}
button{font-family:var(--f-ui);font-weight:700;font-size:1rem;cursor:pointer;border-radius:8px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:8px 14px}
button:hover{background:var(--desk)}
button:focus-visible{outline:3px solid var(--rule);outline-offset:2px}
button.primary{background:var(--ink);color:var(--paper)}
button.primary:hover{background:#2b3c60}
button.seal{background:var(--seal);border-color:var(--seal);color:#fff;font-size:1.1rem;padding:12px}
button.seal:hover{background:#a8262f}
button:disabled{opacity:.45;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:2.6em}
.chip{display:grid;justify-items:center;border:1px solid var(--line);border-radius:6px;padding:2px 6px;min-width:2.6em;background:var(--desk)}
.chip b{font-family:var(--f-hand);font-size:1.3rem;line-height:1.2}
.chip span{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip.heavy{background:#ffe9ea;border-color:#f3b4b8}
.chip.light{background:#eef6ff;border-color:#bcd6f5}
.chips .empty{color:var(--muted);font-size:.88rem}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btnrow button{flex:1}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:8px 4px;display:grid}
.stats div+div{border-left:1px solid var(--line)}
.stats dt{font-size:.75rem;color:var(--muted)}
.stats dd{margin:0;font-weight:900;font-size:1.3rem;font-variant-numeric:tabular-nums}
.rules{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:.92rem}
.dests{display:flex;flex-wrap:wrap;gap:6px}
.dests button{font-size:.88rem;padding:6px 10px;border-width:2px}
.dests button.on{background:var(--ink);color:var(--paper)}
.dests button.clear::after{content:" ✓";color:var(--seal);font-weight:900}
.dests button.on.clear::after{color:#ffb3b8}
.goal{margin:0;font-size:.95rem;font-weight:700;display:flex;gap:8px;align-items:baseline}
.goal span{flex:none;font-size:.75rem;color:var(--paper);background:var(--seal);padding:0 8px;border-radius:999px}
.verdict{font-weight:900}
.verdict.ok{color:#1d7a3a}.verdict.ng{color:var(--seal)}
.rules b{color:var(--seal)}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-weight:700;z-index:30;max-width:calc(100vw - 32px)}
/* 結果 */
.modal{position:fixed;inset:0;z-index:40;background:rgba(28,41,68,.55);display:grid;place-items:center;padding:16px;overflow:auto}
.reply{background:var(--paper);max-width:520px;width:100%;border-radius:12px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:rise .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}}
.envelope{font-size:4rem;text-align:center;animation:fly 1.1s ease-in-out}
.envelope img{width:140px;height:auto}
@keyframes fly{0%{transform:translateX(-120px) rotate(-20deg);opacity:0}60%{transform:translateX(10px) rotate(4deg);opacity:1}}
.who{display:flex;gap:14px;align-items:center}
.face{width:84px;height:84px;flex:none;border-radius:50%;background:var(--desk);display:grid;place-items:center;font-size:3rem;overflow:hidden;border:3px solid var(--ink)}
.face img{width:100%;height:100%;object-fit:cover}
.say{font-family:var(--f-title);font-weight:900;font-size:1.6rem;line-height:1.35}
.say small{display:block;font-family:var(--f-ui);font-weight:500;font-size:.92rem;color:var(--muted)}
.delivered{background:var(--desk);border-radius:8px;padding:12px 14px;font-family:var(--f-hand);font-size:1.25rem;line-height:1.6;word-break:break-all;min-height:2.6em}
.delivered .gap{color:var(--rule)}
.lostlist{font-size:.9rem;color:var(--muted);display:grid;gap:2px}
.lostlist b{color:var(--ink);font-family:var(--f-hand)}
.extra{margin:0;font-size:.95rem;display:grid;gap:4px}
@media (prefers-reduced-motion:reduce){.reply,.envelope{animation:none}}
.lbl{font-size:.85rem;color:var(--muted)}