/* events/app.html の組版。app.html から外に出してある —
事前レンダーでページを何百枚も焼くので、埋め込むと同じ 8KB を
毎ページ複製することになり、ページ間でキャッシュも効かない。 */
/* /d/ /v/ と同じトークン。新しいデザインシステムは作らない。 */
:root{
--teal:#004455; --teal-mid:#3D6B77; --teal-soft:#E3EDEF;
--terra:#C75A3C; --terra-soft:#F8EAE3;
--ink:#16282D; --muted:#5C7278; --line:#D3DFE2;
--bg:#F2F6F7; --paper:#FFF; --moss:#8A6D3B; --moss-soft:#F5EFE2;
--serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:"Inter","Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
background:var(--bg);color:var(--ink);font-size:14px;line-height:1.7;}
a{color:var(--teal);}
.topbar{background:var(--teal);color:#fff;padding:12px 16px 0;}
.topbar .in{max-width:1100px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
color:inherit;text-decoration:none;}
.brand:hover{text-decoration:underline;}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none;}
.sub{font-size:11px;color:#9FC0C9;margin-top:2px;}
/* 折り返させる（d.css と同じ理由。タブ5つは携帯幅で一行に収まらない） */
.tabs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tabs a{flex:none;padding:8px 18px;font-size:12.5px;font-weight:700;color:#9FC0C9;
background:rgba(255,255,255,.07);border-radius:8px 8px 0 0;text-decoration:none;}
.tabs a.active{background:var(--bg);color:var(--teal);}
.wrap{max-width:1100px;margin:0 auto;padding:12px 14px 60px;}
/* ── 締切バンド（最上段固定・terra系）───────────────────────── */
.dlband{background:linear-gradient(180deg,#FCF1EC 0%,var(--terra-soft) 100%);
border:1px solid rgba(199,90,60,.35);border-radius:11px;padding:12px 14px;margin-bottom:14px;}
.dlband h2{font-family:var(--serif);font-size:14px;color:#9c452e;margin-bottom:9px;
display:flex;align-items:center;gap:7px;}
.dlband h2 .ct{margin-left:auto;font-family:inherit;font-size:11px;color:#a86a55;font-weight:400;}
.dlrow{display:grid;grid-template-columns:46px 1fr;gap:10px;padding:8px 0;align-items:baseline;}
.dlrow + .dlrow{border-top:1px dashed rgba(199,90,60,.3);}
.dlrow .d{font-size:13px;font-weight:700;color:var(--terra);font-variant-numeric:tabular-nums;}
.dlrow .nm{font-size:13px;font-weight:700;line-height:1.5;}
.dlrow .meta{font-size:11.5px;color:#8d5847;margin-top:2px;line-height:1.6;}
.dlband .dlnote{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(199,90,60,.3);
font-size:11px;color:#8d5847;line-height:1.7;}
/* ── 絞り込み ──────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;align-items:center;}
.filters .fl{font-size:10px;letter-spacing:.1em;color:var(--muted);font-weight:700;margin-right:2px;}
.ft{border:1px solid var(--line);background:var(--paper);border-radius:20px;
padding:4px 12px;font-size:11.5px;color:var(--muted);cursor:pointer;font-family:inherit;}
.ft.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
.ft.big.on{background:var(--terra);border-color:var(--terra);}
/* ── 月見出し ─────────────────────────────────────────────── */
.mh{display:flex;align-items:center;gap:8px;margin:20px 0 8px;}
.mh .bar{width:3px;height:15px;background:var(--teal);flex:none;}
.mh h3{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--teal);}
.mh .ct{margin-left:auto;font-size:11px;color:var(--muted);}
/* ── イベントカード ───────────────────────────────────────── */
.ev{background:var(--paper);border:1px solid var(--line);border-radius:10px;
padding:11px 14px;margin-bottom:8px;display:grid;grid-template-columns:56px 1fr;gap:12px;}
.ev.big{border-color:rgba(0,68,85,.35);box-shadow:0 1px 0 rgba(0,68,85,.06);}
.ev .when{font-size:13px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;
line-height:1.45;padding-top:1px;}
.ev .when .to{display:block;font-size:11px;color:var(--muted);font-weight:400;}
/* 日付が分からないもの。数字と同じ強さで出すと日付に見える */
.ev .when .nod{font-size:11px;color:var(--muted);font-weight:700;line-height:1.35;
display:inline-block;}
.ev .nm{font-size:13.5px;font-weight:700;line-height:1.55;margin-bottom:5px;text-wrap:balance;}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.chip{border:1px solid var(--line);background:var(--bg);border-radius:20px;
padding:1px 9px;font-size:10.5px;color:var(--muted);}
.chip.n-big{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700;}
.chip.n-mid{background:var(--teal-soft);border-color:rgba(0,68,85,.3);color:var(--teal);}
.chip.n-small{background:var(--bg);}
.chip.intl{background:var(--moss-soft);border-color:rgba(138,109,59,.4);color:var(--moss);}
/* 確度の印。日程や締切をそのまま信じてよい行かどうかを、目で分けられるようにする */
.chip.est{background:#fff;border-style:dashed;border-color:var(--muted);color:var(--muted);}
.chip.rel{background:#fff;border-color:rgba(0,68,85,.35);color:var(--teal-mid);}
.chip.unv{background:var(--bg);border-color:var(--line);color:var(--muted);}
.chip.cfl{background:var(--terra-soft);border-color:rgba(199,90,60,.45);
color:#9c452e;font-weight:700;}
.ev .why{font-size:12px;color:var(--muted);line-height:1.7;}
.ev .dl{font-size:11.5px;color:var(--terra);font-weight:700;margin-top:5px;}
.ev .dl .unvnote{font-weight:400;color:var(--muted);margin-left:4px;}
.ev .upd{font-size:11.5px;color:var(--moss);background:var(--moss-soft);
border-radius:5px;padding:5px 9px;margin-top:6px;line-height:1.6;}
.ev .lk{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:700;
text-decoration:none;border:1px solid var(--teal);border-radius:5px;padding:3px 11px;}
.ev .nolk{display:inline-block;margin-top:7px;font-size:11px;color:#a8a49a;}
.ev .note{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.7;
text-align:justify;line-break:strict;}
.ev .src{margin-top:7px;font-size:11px;color:var(--muted);line-height:1.7;}
.ev .src a{color:var(--teal-mid);}
.ev .warn{font-size:11.5px;color:#8d5847;margin-top:4px;}
.fold{display:block;width:100%;text-align:center;border:1px dashed var(--line);
background:var(--paper);border-radius:8px;padding:9px;font-size:12px;
color:var(--teal);font-weight:700;cursor:pointer;margin:6px 0 4px;font-family:inherit;}
.hidden{display:none;}
/* ── 開催中・通年 ─────────────────────────────────────────── */
.ongoing{background:var(--paper);border:1px dashed var(--line);border-radius:11px;
padding:12px 14px;margin-top:22px;}
.ongoing h3{font-family:var(--serif);font-size:14px;color:var(--muted);margin-bottom:4px;
display:flex;align-items:center;gap:7px;}
.ongoing .lead{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.65;}
.ongoing .row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;align-items:start;}
.ongoing .row + .row{border-top:1px dashed var(--line);}
.ongoing .row .nm{font-size:12.5px;font-weight:700;line-height:1.55;}
.ongoing .row .pd{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px;}
.foot{margin-top:24px;background:var(--teal);color:#fff;border-radius:10px;padding:14px;
text-align:center;font-size:12.5px;line-height:1.8;}
.foot a{color:#fff;font-weight:700;}
.aside{display:none;}
@media (min-width:880px){
.wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px;align-items:start;}
.main{min-width:0;}
.aside{display:block;position:sticky;top:14px;}
.aside .box{background:var(--paper);border:1px solid var(--line);
border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.aside .ah{font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;margin-bottom:8px;}
.aside .mn a{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;
text-decoration:none;color:var(--ink);border-bottom:1px dashed var(--line);}
.aside .mn a:last-child{border-bottom:none;}
.aside .mn a.cur{color:var(--teal);font-weight:700;}
.aside .mn a .c{color:var(--muted);font-variant-numeric:tabular-nums;}
.aside .st{display:grid;grid-template-columns:10px 1fr auto;gap:4px 8px;
font-size:11.5px;align-items:center;}
.aside .st .sw{width:10px;height:10px;border-radius:2px;}
.aside .st .v{font-weight:700;font-variant-numeric:tabular-nums;}
.aside .bar2{height:5px;border-radius:3px;background:var(--bg);overflow:hidden;
display:flex;margin:7px 0 9px;}
.aside .bar2 i{display:block;height:100%;}
}