:root{
  --washi:#EAD9B8; --washi2:#E3CEA6; --sumi:#241C14;
  --shu:#B83A2E; --shu-d:#8E271F; --gold:#D19A2C; --gold-l:#E7BE63;
  --ai:#2C4A52; --cha:#6E5A3E; --paper:#F3E7CC; --paper-d:#a5906a;
  --wood-a:#5a4326; --wood-b:#6a4f2d;
  --maxw:440px;
  --mincho:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --sans:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0; padding:0}
body{
  background:#2a221a; color:var(--sumi);
  font-family:var(--mincho); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; color:inherit}
svg{display:block}

#app{
  max-width:var(--maxw); margin:0 auto; min-height:100vh; position:relative;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
  /* 和紙地 */
  background:
    radial-gradient(120% 60% at 50% 0%, #F4E9CE, rgba(244,233,206,0) 55%),
    radial-gradient(80% 50% at 92% 104%, rgba(200,150,60,.16), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(97deg, rgba(120,90,40,.05) 0 2px, rgba(0,0,0,0) 2px 6px),
    var(--washi);
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-image:repeating-linear-gradient(180deg,var(--wood-a) 0 3px,var(--wood-b) 3px 7px) 6;
}
#app::before{ /* 紙の汚れ */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(55% 35% at 18% 24%, rgba(90,60,20,.06), transparent 70%),
    radial-gradient(45% 35% at 82% 68%, rgba(90,60,20,.05), transparent 70%);
}

/* ---- 看板ヘッダー ---- */
.kanban{
  position:relative; z-index:1; text-align:center; padding:.7rem 1rem .6rem;
  background:repeating-linear-gradient(180deg,#4a3620 0 3px,#573f26 3px,#573f26 8px);
  border-bottom:3px solid #34240f;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.3);
}
.kanban-name{
  font-family:var(--mincho); font-weight:800; font-size:1.55rem; letter-spacing:.18em;
  color:#f0e2c2; text-shadow:0 1px 0 #2b1d0c, 0 2px 3px rgba(0,0,0,.4);
}
.kanban-sub{display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.4em;
  color:#c7ad7f; margin-top:.1rem}

/* ---- screens ---- */
.screen{display:none; position:relative; z-index:1; flex-direction:column;
  padding:1.2rem 1.3rem 1.4rem; min-height:calc(100vh - 130px)}
.screen.is-active{display:flex}

/* ---- 暖簾 ---- */
.noren{position:relative; display:flex; justify-content:center;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); margin-bottom:1rem}
.noren-p{background:var(--shu); color:var(--paper); padding:.6rem 0 1rem; width:33.33%;
  text-align:center; position:relative; border-right:2px solid var(--shu-d)}
.noren-p:last-child{border-right:none}
.noren-p::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:13px;
  background:var(--shu);
  -webkit-mask:radial-gradient(8px 11px at 50% 0, transparent 60%, #000 62%);
  mask:radial-gradient(8px 11px at 50% 0, transparent 60%, #000 62%)}
.noren-p b{font-size:1.4rem; font-weight:800; letter-spacing:.18em}
.noren-p i{display:block; font-style:normal; font-family:var(--sans); font-size:.52rem;
  letter-spacing:.32em; opacity:.82; margin-top:.1rem}
.noren-sm{margin-bottom:.7rem}
.noren-sm .noren-p{padding:.45rem 0 .8rem}
.noren-sm .noren-p b{font-size:1.15rem}

/* ---- 木札ボタン（共通） ---- */
.fuda{
  display:flex; align-items:center; gap:.7rem; width:100%;
  border:2px solid var(--sumi); padding:.8rem 1rem; text-align:left;
  font-family:var(--mincho); font-size:1.05rem; font-weight:800; letter-spacing:.05em;
  color:var(--paper); background:var(--ai);
  box-shadow:3px 4px 0 rgba(36,28,20,.28); transition:transform .06s, box-shadow .06s;
}
.fuda:active{transform:translate(2px,2px); box-shadow:1px 2px 0 rgba(36,28,20,.28)}
.fuda .fuda-ic{width:24px; height:24px; flex:0 0 auto; color:currentColor}
.fuda small{margin-left:auto; font-family:var(--sans); font-size:.62rem; font-weight:400;
  letter-spacing:.08em; opacity:.82; text-align:right}
.fuda-shu{background:var(--shu)}
.fuda-wood{background:var(--cha)}
.fuda-paper{background:var(--paper); color:var(--sumi)}
.fuda-lantern{background:linear-gradient(180deg,var(--shu),#a2312a); font-size:1.2rem; padding:1rem}
.fuda-lantern .fuda-ic{width:30px; height:30px}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}

.txt-link{display:block; margin:1rem auto 0; background:none; border:none;
  font-family:var(--sans); font-size:.82rem; color:var(--cha); text-decoration:underline;
  text-underline-offset:3px}

/* ---- HOME: 杯数木札 ---- */
.tally{display:flex; align-items:center; gap:.4rem; margin-bottom:1rem}
.tally-mascot{width:118px; flex:0 0 auto; transform:rotate(-3deg);
  filter:drop-shadow(2px 3px 3px rgba(0,0,0,.2))}
.tally-fuda{
  flex:1; background:var(--paper); border:2px solid var(--sumi);
  box-shadow:4px 5px 0 rgba(36,28,20,.16); padding:.7rem .5rem 1rem; text-align:center;
  position:relative; border-radius:3px;
}
.tally-fuda::before{content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:10px; height:10px; border:2px solid var(--sumi); border-radius:50%; background:var(--washi)}
.tally-label{display:block; font-size:.7rem; letter-spacing:.35em; color:var(--cha); margin-top:.35rem}
.tally-num{display:block; font-size:3.4rem; font-weight:800; line-height:1; color:var(--shu);
  font-variant-numeric:tabular-nums; text-shadow:1px 1px 0 rgba(0,0,0,.08)}
.tally-unit{display:block; font-size:.9rem; color:var(--sumi)}
.tally-mini{flex:0 0 auto; padding:.35rem .7rem; box-shadow:2px 3px 0 rgba(36,28,20,.16);
  display:flex; align-items:baseline; gap:.15rem}
.tally-mini::before{display:none}
.tally-mini .tally-num{font-size:1.7rem}
.tally-mini .tally-unit{font-size:.7rem}

/* ---- HOME: お品書き ---- */
.shina-head{font-family:var(--sans); font-size:.72rem; letter-spacing:.3em; color:var(--cha);
  margin:1.3rem 0 .55rem; padding-bottom:.3rem; border-bottom:1.5px dashed var(--paper-d)}
.shina{display:flex; flex-direction:column}
.shina-row{display:flex; align-items:center; gap:.7rem; padding:.5rem .2rem;
  border-bottom:1px dotted var(--paper-d)}
.shina-row img{width:40px; height:40px; flex:0 0 auto; object-fit:contain}
.shina-row .s-name{font-weight:800; font-size:1rem}
.shina-row .s-dots{flex:1; border-bottom:1px dotted var(--paper-d); margin:0 .2rem; align-self:flex-end;
  transform:translateY(-4px)}
.shina-row time{font-family:var(--sans); font-size:.72rem; color:var(--cha); white-space:nowrap}
.empty{font-family:var(--sans); color:var(--cha); font-size:.82rem; text-align:center; padding:1.2rem .5rem}

.home-links{margin-top:auto; padding-top:1.2rem; display:flex; gap:.7rem}
.home-links .fuda{font-size:.95rem; justify-content:center; padding:.7rem}
.home-links .fuda span{margin-right:.1rem}

/* ---- QUESTION ---- */
.gauge{display:flex; justify-content:center; gap:.6rem; margin:.4rem 0 1rem; min-height:34px}
.gauge .cup{width:30px; height:30px; color:var(--paper-d); position:relative}
.gauge .cup svg{width:100%; height:100%}
.gauge .cup.full{color:var(--gold)}
.gauge .cup.full::after{content:""; position:absolute; left:22%; right:22%; top:42%; height:34%;
  background:var(--gold-l); border-radius:0 0 40% 40%}
.q-tanzaku{position:relative; background:var(--paper); border:2px solid var(--sumi);
  box-shadow:5px 6px 0 rgba(36,28,20,.16); padding:1.1rem 1.1rem 1.2rem; text-align:center;
  margin-bottom:1.2rem}
.q-mascot{width:120px; margin:.2rem auto .5rem}
.q-no{font-family:var(--sans); font-size:.68rem; letter-spacing:.3em; color:var(--shu); font-weight:700}
.q-text{margin:.4rem 0 0; font-size:1.35rem; font-weight:800; letter-spacing:.02em; text-wrap:balance}
.opts{display:flex; flex-direction:column; gap:.65rem}
.opts button{
  border:2px solid var(--sumi); background:var(--washi); color:var(--sumi);
  font-family:var(--mincho); font-weight:800; font-size:1.05rem; padding:.75rem 1rem;
  text-align:center; box-shadow:2px 3px 0 rgba(36,28,20,.16); transition:transform .06s, background .1s;
}
.opts button:hover{background:var(--gold-l)}
.opts button:active{transform:translate(1px,2px); box-shadow:1px 1px 0 rgba(36,28,20,.16)}

/* ---- RESULT: ドラムロール ---- */
.drum{margin:auto 0; text-align:center; padding:2rem 0}
.drum-bowl{display:flex; justify-content:center; gap:.7rem; margin-bottom:.8rem}
.drum-bowl .d{width:44px; height:44px; color:var(--sumi)}
.drum-bowl .d1{animation:tumble .5s infinite}
.drum-bowl .d2{animation:tumble .5s infinite .08s}
.drum-bowl .d3{animation:tumble .5s infinite .16s}
@keyframes tumble{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(10deg)}}
.drum-txt{font-size:1.1rem; color:var(--cha); letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){.drum-bowl .d{animation:none}}

/* ---- RESULT: 短冊 ---- */
.result-body{display:flex; flex-direction:column}
.tanzaku{position:relative; width:212px; margin:.2rem auto 0; background:var(--paper);
  border:2px solid var(--sumi); box-shadow:6px 8px 0 rgba(36,28,20,.18); transform:rotate(-1.5deg);
  padding:1.1rem 1rem 1.3rem; display:flex; flex-direction:column; align-items:center;
  animation:drop .4s ease-out}
@keyframes drop{0%{transform:translateY(-16px) rotate(-1.5deg); opacity:0}100%{transform:translateY(0) rotate(-1.5deg); opacity:1}}
@media (prefers-reduced-motion:reduce){.tanzaku{animation:none}}
.tanzaku::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border:2px solid var(--sumi); border-radius:50%; background:var(--washi)}
.eyebrow{font-family:var(--sans); font-size:.6rem; letter-spacing:.4em; color:var(--cha); margin:.5rem 0 .2rem}
.sake-name{writing-mode:vertical-rl; font-size:2.3rem; font-weight:800; line-height:1.15;
  letter-spacing:.06em; margin:.1rem 0 .4rem; max-height:280px; white-space:nowrap;
  text-shadow:1px 1px 0 rgba(0,0,0,.06)}
.sake-art{width:112px; margin:.2rem auto .1rem; filter:drop-shadow(2px 3px 3px rgba(0,0,0,.18))}
.abv{font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; color:var(--cha)}
.seal{position:absolute; right:-14px; bottom:24px; width:60px; height:60px; transform:rotate(-8deg);
  border:3px solid var(--shu); border-radius:10px; color:var(--shu); display:grid; place-items:center;
  text-align:center; line-height:1.05; background:rgba(243,231,204,.5); font-weight:800;
  box-shadow:inset 0 0 0 2px rgba(184,58,46,.35)}
.seal b{font-size:.95rem; letter-spacing:.05em}
.seal small{display:block; font-size:.44rem; letter-spacing:.15em; font-family:var(--sans); margin-top:.1rem}
.seal.stamp{animation:stamp .35s ease-out}
@keyframes stamp{0%{transform:rotate(-8deg) scale(2.4); opacity:0}70%{transform:rotate(-8deg) scale(.9)}100%{transform:rotate(-8deg) scale(1); opacity:1}}

/* ---- RESULT: 呑スタンプ ---- */
.drink-seal{position:absolute; inset:0; display:grid; place-items:center; z-index:5; pointer-events:none}
.drink-seal b{width:112px; height:112px; border:6px solid var(--shu); color:var(--shu); border-radius:50%;
  display:grid; place-items:center; font-family:var(--mincho); font-size:3.2rem; font-weight:800;
  background:rgba(243,231,204,.4); transform:rotate(-12deg); animation:stamp .38s ease-out}

/* ---- RESULT: おみくじ ---- */
.omikuji{position:relative; width:272px; margin:1.4rem auto 0; background:var(--washi2);
  border:1.5px solid var(--sumi); padding:.75rem .9rem; text-align:center; font-size:.95rem; line-height:1.7}
.omikuji-tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--ai);
  color:var(--paper); font-family:var(--sans); font-size:.58rem; letter-spacing:.3em; padding:.1rem .7rem}

.acts{width:300px; margin:1.6rem auto .4rem; display:flex; flex-direction:column; gap:.7rem}

/* ---- ページ見出し（帳面系） ---- */
.page-head{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}
.round-btn{width:42px; height:42px; flex:0 0 auto; border:2px solid var(--sumi); background:var(--paper);
  color:var(--sumi); border-radius:50%; display:grid; place-items:center;
  box-shadow:2px 3px 0 rgba(36,28,20,.16)}
.round-btn svg{width:22px; height:22px}
.round-btn:active{transform:translate(1px,2px); box-shadow:1px 1px 0 rgba(36,28,20,.16)}
.page-title{flex:1; line-height:1.3}
.page-title strong{display:block; font-size:1.3rem; font-weight:800; letter-spacing:.06em}
.page-title span{font-family:var(--sans); font-size:.72rem; color:var(--cha)}

/* ---- TIMELINE ---- */
.tl-body{display:flex; flex-direction:column; gap:1.2rem}
.tl-day h3{font-family:var(--sans); font-size:.74rem; color:var(--cha); margin:0 0 .6rem;
  letter-spacing:.14em; font-weight:700; display:flex; align-items:center; gap:.5rem}
.tl-day h3::after{content:""; flex:1; border-bottom:1.5px dashed var(--paper-d)}
.clips{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem}
.clip{position:relative; background:var(--paper); border:2px solid var(--sumi);
  box-shadow:3px 4px 0 rgba(36,28,20,.14); padding:.5rem .4rem .45rem; text-align:center;
  transform:rotate(var(--r,0deg))}
.clip img{width:52px; height:52px; margin:.1rem auto .3rem; object-fit:contain}
.clip .c-name{font-size:.66rem; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.clip time{display:block; font-family:var(--sans); font-size:.58rem; color:var(--cha); margin-top:.1rem}
.clip .c-seal{position:absolute; top:2px; right:3px; font-size:.5rem; color:var(--shu);
  border:1.5px solid var(--shu); border-radius:4px; padding:0 .2em; transform:rotate(6deg)}
.warn-row{display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--sumi);
  background:var(--washi2); padding:.55rem .85rem; margin-top:1.1rem;
  font-family:var(--sans); font-size:.82rem; color:var(--cha)}
.warn-row img{width:66px; flex:0 0 auto; transform:rotate(-4deg)}

.page-foot{margin-top:auto; padding-top:1.2rem}
.page-foot .fuda{justify-content:center; font-size:1rem}

/* ---- MY LIST ---- */
.add-form{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem}
.add-input,.add-select{border:2px solid var(--sumi); padding:.7rem .8rem; font-family:var(--mincho);
  font-size:1rem; background:var(--paper); color:var(--sumi); width:100%; box-shadow:2px 3px 0 rgba(36,28,20,.12)}
.add-row{display:flex; gap:.6rem}
.add-row .add-select{flex:1}
.add-btn{flex:0 0 auto; justify-content:center; padding:.7rem .9rem}
.add-btn span{margin:0}
.mylist{display:flex; flex-direction:column; gap:.55rem}
.mylist-row{display:flex; align-items:center; gap:.7rem; background:var(--paper);
  border:2px solid var(--sumi); box-shadow:2px 3px 0 rgba(36,28,20,.12); padding:.5rem .7rem}
.mylist-row img{width:40px; height:40px; object-fit:contain; flex:0 0 auto}
.mylist-row .ml-name{font-weight:800; font-size:.98rem}
.mylist-row .ml-cat{font-family:var(--sans); font-size:.68rem; color:var(--cha)}
.mylist-row .ml-del{margin-left:auto; border:2px solid var(--sumi); background:var(--washi);
  color:var(--sumi); width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--sans); font-size:1rem; line-height:1}

/* ---- タブバー（木） ---- */
.tabbar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:var(--maxw);
  display:flex; z-index:20; padding-bottom:env(safe-area-inset-bottom);
  background:repeating-linear-gradient(180deg,#4a3620 0 3px,#573f26 3px,#573f26 8px);
  border-top:3px solid #34240f; box-shadow:0 -4px 12px rgba(0,0,0,.3)}
.tab{flex:1; border:none; background:none; color:#c7ad7f; font-family:var(--sans); font-size:.64rem;
  font-weight:700; padding:.5rem 0 .55rem; display:flex; flex-direction:column; align-items:center; gap:.2rem}
.tab svg{width:24px; height:24px}
.tab.is-active{color:var(--gold-l)}

/* ---- モーダル / トースト ---- */
.modal{position:fixed; inset:0; background:rgba(20,14,8,.62); display:grid; place-items:center;
  z-index:30; padding:1.2rem}
.modal-inner{background:var(--washi); border:3px solid var(--sumi); padding:1rem; max-width:340px; width:100%;
  box-shadow:8px 10px 0 rgba(0,0,0,.3)}
#shareCanvas{width:100%; height:auto; border:2px solid var(--sumi); display:block; margin-bottom:.8rem}
.modal-btns{display:flex; gap:.6rem}
.modal-btns .fuda{flex:1; justify-content:center}
.modal-btns .fuda span{margin:0}

.toast{position:fixed; left:50%; bottom:92px; transform:translateX(-50%); background:var(--sumi);
  color:var(--paper); padding:.6rem 1.2rem; font-family:var(--mincho); font-weight:800; font-size:.9rem;
  z-index:40; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.3); border:1.5px solid var(--gold)}