/* 回覧済 ― 町内会の古い回覧板。紙、判子、朱肉、色あせたインク。 */
:root{
  --desk:#cdc2a6; --desk2:#bfb293;
  --paper:#f6efdc; --paper2:#efe6cf; --paper-edge:#d8cba9;
  --ink:#2a251e; --quiet:#716856; --rule:#cdbf9d; --rule-soft:#e2d6b8;
  --red:#b0322b; --red-soft:rgba(176,50,43,.12);
  --blue:#2b4a7c; --link:#2f5778;
  --clip1:#6b6f76; --clip2:#4a4d53;
  --shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 24px -10px rgba(60,40,10,.45);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38  0 0 0 0 .3  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark){
  :root{
    --desk:#0f0d0a; --desk2:#16130e;
    --paper:#221d15; --paper2:#2a241a; --paper-edge:#3a3223;
    --ink:#e9e0cb; --quiet:#a49a82; --rule:#4a4130; --rule-soft:#352e21;
    --red:#e0786c; --red-soft:rgba(224,120,108,.14);
    --blue:#9db9ea; --link:#9cc0dc;
    --clip1:#8a8f98; --clip2:#5d6168;
    --shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 14px 30px -10px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);line-height:1.95;letter-spacing:.02em;
  background:var(--desk) var(--grain);
  background-image:var(--grain),radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.28),transparent 60%),linear-gradient(var(--desk),var(--desk2));
  font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","MS PMincho",serif;
  min-height:100vh;display:flex;flex-direction:column}
@media (prefers-color-scheme: dark){
  body{background-image:var(--grain),radial-gradient(ellipse at 50% 0%,rgba(224,160,90,.10),transparent 55%),linear-gradient(var(--desk),var(--desk2))}
}
::selection{background:var(--red-soft);color:var(--ink)}
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:.4em .8em;z-index:10}
.skip:focus{left:8px;top:8px}

/* ---- ヘッダー ---- */
header.site{background:linear-gradient(var(--paper),var(--paper2));border-bottom:1px solid var(--paper-edge);
  box-shadow:0 2px 0 var(--red) inset;position:relative}
header.site .in,footer.site .in{max-width:860px;margin:0 auto;padding:0 18px}
header.site .in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:16px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:44px;height:44px;flex:none}
.brand .bt{font-weight:700;font-size:1.08rem;letter-spacing:.1em;line-height:1.4}
.brand small{display:block;font-weight:400;font-size:.7rem;color:var(--quiet);letter-spacing:.08em}
nav.site{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.site a{font-size:.86rem;text-decoration:none;color:var(--quiet);padding:.3em .8em;border-bottom:2px solid transparent;letter-spacing:.06em}
nav.site a:hover{color:var(--ink);border-bottom-color:var(--red)}

/* ---- 本体(クリップボードに留めた紙) ---- */
main{flex:1;width:100%;max-width:860px;margin:0 auto;padding:34px 14px 56px}
.paper{position:relative;background:var(--paper);background-image:var(--grain);
  border:1px solid var(--paper-edge);box-shadow:var(--shadow);
  padding:54px clamp(18px,5vw,60px) 44px;border-radius:2px;animation:settle .5s ease-out both;overflow:hidden}
.paper::before{content:"";position:absolute;top:0;left:50%;width:132px;height:26px;transform:translateX(-50%);
  background:linear-gradient(var(--clip1),var(--clip2));border-radius:0 0 8px 8px;box-shadow:0 3px 6px rgba(0,0,0,.35)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 94% 7%,rgba(140,100,40,.10) 0 46px,transparent 47px),
    radial-gradient(circle at 94% 7%,transparent 0 56px,rgba(140,100,40,.10) 57px 59px,transparent 60px),
    radial-gradient(ellipse at 0% 100%,rgba(120,90,40,.12),transparent 38%),
    radial-gradient(ellipse at 100% 100%,rgba(120,90,40,.10),transparent 34%)}
.paper>*{position:relative;z-index:1}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kicker{margin:0 0 .3em;font-size:.78rem;letter-spacing:.32em;color:var(--red);font-weight:700}
.kicker::before{content:"";display:inline-block;width:1.8em;height:1px;background:var(--red);vertical-align:middle;margin-right:.7em}
h1{font-size:1.65rem;line-height:1.5;margin:.1em 0 .5em;letter-spacing:.08em;font-weight:700}
h1::after{content:"";display:block;margin-top:.5em;height:5px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);opacity:.8}
h2{font-size:1.1rem;margin:2em 0 .6em;padding:.1em 0 .25em .7em;border-left:4px solid var(--red);border-bottom:1px solid var(--rule);letter-spacing:.1em}
p{margin:.9em 0}
.lead{font-size:1.06rem}
.meta{color:var(--quiet);font-size:.86rem;margin:-.2em 0 1.4em;letter-spacing:.08em}
.note{font-size:.88rem;color:var(--quiet)}
.warn{position:relative;margin:1.6em 0;padding:1em 1.2em 1em 3.2em;background:var(--red-soft);border:1px solid var(--red);border-radius:2px;font-size:.93rem}
.warn::before{content:"注";position:absolute;left:.9em;top:1em;width:1.7em;height:1.7em;border:1.5px solid var(--red);color:var(--red);
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;transform:rotate(-8deg)}
.warn p{margin:.3em 0}

/* ---- 箱 ---- */
.sheet{background:var(--paper2);border:1px solid var(--rule);padding:22px clamp(14px,3vw,28px);margin:1.4em 0;position:relative;border-radius:2px}
.sheet h2:first-child,.sheet>h2:first-of-type{margin-top:0}
.sheet.issue::before{content:"回覧";position:absolute;right:16px;top:-.9em;background:var(--red);color:#fff;padding:.05em .9em;letter-spacing:.4em;font-size:.82rem;
  transform:rotate(1.5deg);box-shadow:0 2px 4px rgba(0,0,0,.25)}
.slogan{font-size:1.28rem;letter-spacing:.16em;margin:.6em 0 1em;color:var(--red);text-align:center;padding:.9em .6em;
  border:3px double var(--red);background:var(--red-soft);line-height:1.8}
.hand{font-family:"Yu Kyokasho","YuKyokasho","Klee One","Hiragino Maru Gothic ProN","Noto Sans JP",cursive,sans-serif;color:var(--blue);
  display:inline-block;transform:rotate(-1.8deg);font-size:1.18rem;padding:.2em .2em .1em;border-bottom:2px wavy var(--blue);text-decoration:none;line-height:1.6}
.hand::selection{background:var(--red-soft)}

/* ---- 表 ---- */
.tablewrap{overflow-x:auto;margin:1.2em 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:420px}
th,td{padding:.55em .8em;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule-soft)}
thead th{font-weight:700;white-space:nowrap;border-bottom:1px solid var(--ink);background:var(--paper2);letter-spacing:.14em;font-size:.84rem}
tbody tr:nth-child(even){background:rgba(120,90,40,.045)}
tbody tr:hover{background:var(--red-soft)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
table.program td:first-child{font-variant-numeric:tabular-nums;letter-spacing:.1em;white-space:nowrap;color:var(--red);font-weight:700}
ruby rt{font-size:.55em;color:var(--quiet);letter-spacing:.04em}
.redact{color:#14110d;background:#14110d;padding:0 .12em;border-radius:1px;box-decoration-break:clone;letter-spacing:0}
@media (prefers-color-scheme: dark){.redact{color:#000;background:#000;outline:1px solid #3a3223}}

/* ---- 回覧板の一覧・名簿 ---- */
ul.shelf{list-style:none;padding:0;margin:1.2em 0;border-top:1px solid var(--rule)}
ul.shelf li{padding:.7em .4em .7em 1.6em;border-bottom:1px dashed var(--rule);position:relative}
ul.shelf li::before{content:"";position:absolute;left:.4em;top:1.35em;width:.55em;height:.55em;border-radius:50%;border:1.5px solid var(--red)}
ul.shelf a{font-weight:700;text-decoration:none;letter-spacing:.08em}
ul.shelf a:hover{text-decoration:underline}
ol.shelf{list-style:none;counter-reset:t;padding:0}
ol.shelf li{counter-increment:t}
ol.shelf li::before{content:counter(t,cjk-ideographic);border:0;border-radius:0;width:auto;height:auto;top:.7em;left:.2em;color:var(--red);font-size:.85rem;font-weight:700}
ol.shelf li{padding-left:2.4em}
.cta{display:inline-block;margin-top:.6em;padding:.7em 1.8em;border:2px solid var(--red);color:var(--red);text-decoration:none;font-weight:700;letter-spacing:.2em;
  background:var(--red-soft);transform:rotate(-1deg);transition:transform .15s,background .15s}
.cta:hover{background:var(--red);color:#fff;transform:rotate(0) scale(1.03)}

/* ---- 判子 ---- */
.stamps{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;margin:.8em 0 .2em}
.stamps .s{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--rule);display:flex;align-items:center;justify-content:center;font-size:.66rem;color:var(--quiet);position:relative}
.stamps .s.on{border:2px solid var(--red);color:var(--red);font-weight:700;opacity:.86;transform:rotate(var(--r,0deg))}
.stamps .s.on:nth-child(3n){--r:-9deg;opacity:.74}
.stamps .s.on:nth-child(3n+1){--r:7deg;opacity:.9}
.stamps .s.on:nth-child(3n+2){--r:-3deg;opacity:.8}
@media (max-width:560px){.stamps{grid-template-columns:repeat(7,minmax(0,1fr))}}
footer.site{background:linear-gradient(var(--paper2),var(--paper));border-top:1px solid var(--paper-edge);color:var(--quiet);font-size:.78rem;letter-spacing:.08em}
footer.site .in{padding-top:18px;padding-bottom:22px}
.hanko{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.hanko .h{width:28px;height:28px;border-radius:50%;border:1.5px dashed var(--rule);position:relative;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--quiet)}
.hanko .h b{font-weight:400}
.hanko .h.on{border:2px solid var(--red);color:var(--red);opacity:.85;font-weight:700}
.hanko .h.on:nth-child(odd){transform:rotate(-6deg)}
.hanko .h.on:nth-child(even){transform:rotate(5deg)}
.hanko .h.me{border:2px solid var(--red);opacity:.12;transition:opacity 2.5s ease;transform:rotate(-3deg)}
.hanko .h.me::after{content:"判";color:var(--red);font-size:.7rem}

/* ---- 入力窓 ---- */
form.gate,form.unlock{position:relative;background:var(--paper2);border:1px solid var(--rule);padding:20px clamp(14px,3vw,24px) 14px;margin:2em 0 1em;border-radius:2px;overflow:hidden}
form.gate::before,form.unlock::before{content:"記入欄";position:absolute;right:14px;top:-1px;background:var(--ink);color:var(--paper);font-size:.7rem;letter-spacing:.3em;padding:.15em .8em .2em}
form.gate label,form.unlock label{display:block;font-size:.85rem;color:var(--quiet);margin-bottom:6px;letter-spacing:.08em}
input[type=text],textarea{font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono CJK JP",monospace;
  padding:.5em .2em;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);width:100%;max-width:360px;letter-spacing:.12em;font-size:1.05rem;border-radius:0}
input[type=text]:focus,textarea:focus{outline:none;border-bottom-color:var(--red);background:var(--red-soft)}
textarea{max-width:none;min-height:11em;border:1px solid var(--rule);padding:.6em .8em;background:repeating-linear-gradient(transparent 0 1.9em,var(--rule-soft) 1.9em calc(1.9em + 1px));line-height:1.9em}
button{font:inherit;font-weight:700;letter-spacing:.3em;padding:.55em 1.5em .55em 1.8em;border:2px solid var(--red);background:var(--red);color:#fff;cursor:pointer;margin-left:10px;border-radius:2px;
  box-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s,background .15s}
button:hover{background:#963029}
button:active{transform:translateY(2px);box-shadow:none}
button:disabled{opacity:.6;cursor:progress}
button.first{margin-left:0}
button.quiet{background:transparent;color:var(--red);box-shadow:none}
.msg{min-height:1.7em;margin-top:10px;font-size:.88rem;color:var(--quiet);letter-spacing:.06em}
.msg.err{color:var(--red)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:14px}
.slots input{max-width:none}
.slots .tag{font-size:.78rem;color:var(--red);letter-spacing:.22em;font-weight:700}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.thump{position:absolute;right:12%;top:50%;width:92px;height:92px;margin-top:-46px;border:4px double var(--red);color:var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;letter-spacing:.1em;background:var(--red-soft);pointer-events:none;
  animation:thump .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes thump{from{opacity:0;transform:scale(2.2) rotate(-18deg)}to{opacity:.92;transform:scale(1) rotate(-9deg)}}
.reveal{animation:settle .7s ease-out both}

/* ---- 13 番目の判のカード ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
@media (max-width:520px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.card{background:var(--paper2);border:1px solid var(--rule);padding:12px 14px 12px;font-size:.84rem;line-height:1.7;position:relative;border-radius:2px;text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.card::before{content:"";position:absolute;top:-1px;left:50%;width:26px;height:9px;transform:translateX(-50%);background:var(--rule);border-radius:0 0 6px 6px}
.card .no{font-weight:700;letter-spacing:.14em;font-size:.95rem;margin-top:.3em}
.card img{display:block;width:96px;height:96px;margin:.5em auto;background:#f6efdc;border-radius:50%;box-shadow:0 0 0 1px var(--rule)}
.card time{font-variant-numeric:tabular-nums;letter-spacing:.06em}

/* ---- 図・音声 ---- */
figure{margin:1.6em 0}
figure.photo{position:relative;padding:14px;background:#fffdf5;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);transform:rotate(-.4deg);border:1px solid var(--rule)}
figure.photo::before,figure.photo::after{content:"";position:absolute;top:-10px;width:78px;height:22px;background:rgba(212,190,120,.65);box-shadow:0 1px 2px rgba(0,0,0,.15)}
figure.photo::before{left:-18px;transform:rotate(-34deg)}
figure.photo::after{right:-18px;transform:rotate(34deg)}
figure img{max-width:100%;height:auto;display:block}
figcaption{font-size:.85rem;color:#5d5443;margin-top:.7em;letter-spacing:.06em}
.tape{display:flex;gap:18px;align-items:center;background:#2a2620;color:#e9e0cb;border-radius:6px;padding:18px 20px;margin:1.4em 0;box-shadow:0 10px 18px -10px rgba(0,0,0,.6);
  background-image:linear-gradient(#35302a,#221e19);border:1px solid #4a4235}
.tape svg{width:92px;height:auto;flex:none}
.tape .body{flex:1;min-width:0}
.tape .label{display:inline-block;background:#e8dcc0;color:#2a251e;padding:.1em .9em;font-size:.8rem;letter-spacing:.2em;font-weight:700;transform:rotate(-.8deg);margin-bottom:.6em}
.tape audio{width:100%;margin:.2em 0;filter:sepia(.35) saturate(.9)}
.tape a{color:#c7d6e6;font-size:.8rem}
@media (max-width:520px){.tape{flex-direction:column;align-items:stretch}.tape svg{width:76px;align-self:center}}
.reel{animation:spin 6s linear infinite;transform-origin:center;transform-box:fill-box}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- 号外 ---- */
.gogai h1{background:var(--red);color:#fff;padding:.25em .9em;letter-spacing:.6em;display:inline-block;transform:rotate(-1deg);font-size:1.7rem;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.gogai h1::after{display:none}
.tmpl{font-size:1.08rem;letter-spacing:.06em;margin:1em 0;line-height:2.2;padding:.4em 1em;border-left:3px solid var(--red)}
.tmpl u{text-decoration:none;border-bottom:2px dashed var(--red);padding:0 .4em;color:var(--red);font-weight:700}

/* ---- 重ね合わせ(光源台) ---- */
.ov{position:relative;width:100%;max-width:640px;aspect-ratio:2/1;background:#f6efdc;border:6px solid #3a342b;margin:1.2em 0;box-shadow:0 0 0 1px #000,0 10px 20px -10px rgba(0,0,0,.6),inset 0 0 30px rgba(120,90,40,.25)}
.ov img{position:absolute;inset:0;width:100%;height:100%}
.ovlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:2px 10px;font-size:.88rem;max-width:640px}
.ovlist label{display:flex;gap:6px;align-items:center;margin:0;padding:.2em 0;cursor:pointer;font-size:.88rem;color:var(--ink)}
.ovlist input{accent-color:var(--red);width:1.05em;height:1.05em}

/* ---- 結末 ---- */
.stamprow{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0}
.stamprow span{width:42px;height:42px;border-radius:50%;border:2px dashed var(--rule);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--quiet)}
.stamprow span.on{border:3px solid var(--red);color:var(--red);font-weight:700;animation:thump2 .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i,0)*.12s)}
.stamprow span.on::after{content:"判"}
@keyframes thump2{from{opacity:0;transform:scale(2) rotate(-20deg)}to{opacity:.88;transform:scale(1) rotate(calc(var(--i,0)*7deg - 14deg))}}
.seal-big{display:inline-block;margin:.8em 0;padding:.3em 1.2em;border:5px double var(--red);color:var(--red);font-size:2.2rem;font-weight:700;letter-spacing:.3em;transform:rotate(-6deg);
  animation:thump .7s cubic-bezier(.2,1.6,.4,1) .4s both}
.seal{display:inline-block;border:2px solid var(--red);color:var(--red);padding:.1em .9em;letter-spacing:.2em;transform:rotate(-2deg)}
.letter{margin:1.6em 0;padding:28px clamp(16px,4vw,38px);background:#fbf6e6;color:#2a251e;border:1px solid var(--rule);box-shadow:0 8px 18px -10px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(transparent 0 2.4rem,rgba(60,90,140,.25) 2.4rem calc(2.4rem + 1px));background-position:0 28px;line-height:2.4rem;font-size:1rem;
  font-family:"Yu Kyokasho","YuKyokasho","Klee One","Hiragino Mincho ProN","Noto Serif JP",serif;transform:rotate(-.3deg)}
.letter p{margin:0;font-size:1rem;line-height:2.4rem;letter-spacing:.08em}
.letter p:last-child{text-align:right;margin-top:0;font-weight:700;letter-spacing:.2em;color:var(--blue)}
.letter p:nth-last-child(3),.letter p:nth-last-child(2){color:#5a2a25}

/* ---- ヒント ---- */
ul.hints{list-style:none;margin:0;padding:0}
ul.hints li{padding:.7em 1em;margin:.5em 0;background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--red)}
ul.hints strong{color:var(--red);letter-spacing:.1em;margin-right:.6em}

/* ---- 入口のイラスト ---- */
.hero{display:flex;gap:clamp(16px,4vw,40px);align-items:center;flex-wrap:wrap;margin:.4em 0 1.2em}
.hero svg{width:min(240px,60%);height:auto;flex:none;margin:0 auto;filter:drop-shadow(0 8px 10px rgba(60,40,10,.35))}
.hero .txt{flex:1;min-width:240px}
.hero .txt p{margin:.5em 0}

@media (max-width:560px){
  h1{font-size:1.4rem}
  nav.site{margin-left:0;width:100%}
  .paper{padding-top:48px}
  button{padding:.6em 1.2em .6em 1.5em}
  .gogai h1{font-size:1.4rem;letter-spacing:.4em}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}