/* お得買い物カレンダー（hamaken.site 版）
   レイアウト: 壁掛けカレンダー。上にお知らせ掲示板、当月と翌月を大きく、下に期間バー・年間ヒートマップ・一覧表。
   外部フォントは読み込まない（サイトのCSPと表示速度のため）。Windows 10 以降は BIZ UDPゴシックと Bahnschrift が標準で入っている。 */
:root {
  --bg: #F1F3F7;
  --surface: #FFFFFF;
  --surface-2: #F7F8FB;
  --ink: #17203A;
  --muted: #566079;
  --faint: #8790A5;
  --line: #DCE0E9;
  --line-strong: #BEC5D3;
  --mark: #FFD43B;
  --mark-soft: #FFF3C4;
  --mark-ink: #3B2F00;
  --sun: #C63A2F;
  --sat: #2558B5;
  --ec: #2F3F9E;   --ec-bg: #E5E9FA;
  --pay: #0D6D61;  --pay-bg: #DBF2EE;
  --store: #9B4A0D; --store-bg: #FBEADB;
  --digi: #6B40A6; --digi-bg: #EEE6F9;
  --heat-0: #F7F8FB;
  --heat-1: #FDF1C9;
  --heat-2: #F9D97E;
  --heat-3: #F2A747;
  --heat-4: #DE5A2E;
  --heat-ink: #3B2F00;
  --shadow: 0 10px 30px rgba(23, 32, 58, .16), 0 2px 6px rgba(23, 32, 58, .08);
  --f-display: "BIZ UDPGothic", "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --f-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --f-num: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --r: 6px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F131C; --surface: #161C29; --surface-2: #1B2232; --ink: #E7EBF4; --muted: #A4AEC4; --faint: #7B859B;
    --line: #283145; --line-strong: #39445A; --mark: #F5C518; --mark-soft: #3A3210; --mark-ink: #1A1500;
    --sun: #FF7B70; --sat: #82A8FF;
    --ec: #B4C0FF; --ec-bg: #252D5A; --pay: #8EDFD1; --pay-bg: #163E39; --store: #F5BD8B; --store-bg: #472B15; --digi: #D2BCF5; --digi-bg: #352650;
    --heat-0: #1B2232; --heat-1: #3A3313; --heat-2: #6B5517; --heat-3: #A0601F; --heat-4: #D2532A; --heat-ink: #FFF6DA;
    --shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F131C; --surface: #161C29; --surface-2: #1B2232; --ink: #E7EBF4; --muted: #A4AEC4; --faint: #7B859B;
  --line: #283145; --line-strong: #39445A; --mark: #F5C518; --mark-soft: #3A3210; --mark-ink: #1A1500;
  --sun: #FF7B70; --sat: #82A8FF;
  --ec: #B4C0FF; --ec-bg: #252D5A; --pay: #8EDFD1; --pay-bg: #163E39; --store: #F5BD8B; --store-bg: #472B15; --digi: #D2BCF5; --digi-bg: #352650;
  --heat-0: #1B2232; --heat-1: #3A3313; --heat-2: #6B5517; --heat-3: #A0601F; --heat-4: #D2532A; --heat-ink: #FFF6DA;
  --shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: var(--ec); }
:focus-visible { outline: 2px solid var(--sat); outline-offset: 2px; }
.wrap { max-width: 1560px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.wrap > * { min-width: 0; }
@media (min-width: 900px) { .wrap { padding-inline: 28px; } }
.cat-ec { --c: var(--ec); --cb: var(--ec-bg); }
.cat-pay { --c: var(--pay); --cb: var(--pay-bg); }
.cat-store { --c: var(--store); --cb: var(--store-bg); }
.cat-digi { --c: var(--digi); --cb: var(--digi-bg); }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* ヘッダー */
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tag-mark { flex: none; width: 50px; height: 34px; position: relative; background: var(--mark); color: var(--mark-ink); font-family: var(--f-display); font-size: 20px; display: grid; place-items: center; padding-left: 8px; clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%); }
.tag-mark::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); transform: translateY(-50%); }
h1 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: .02em; text-wrap: balance; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.today-box { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; }
.today-box b { color: var(--ink); font-size: 15px; }

/* お知らせ・今日 */
.board { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .board { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; min-width: 0; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-h h2 { margin: 0; font-size: 15px; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.notice-label { font-family: var(--f-display); font-weight: 800; font-size: 13px; background: var(--ink); color: var(--surface); padding: 2px 9px; border-radius: 3px; letter-spacing: .08em; }
.notice-list { list-style: none; margin: 0; padding: 0; display: grid; }
.notice-list li { border-top: 1px solid var(--line); }
.notice-list li:first-child { border-top: 0; }
.notice-btn { width: 100%; text-align: left; background: none; border: 0; padding: 9px 2px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; cursor: pointer; border-radius: 4px; }
.notice-btn:hover { background: var(--surface-2); }
.n-date { font-family: var(--f-num); font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.n-type { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 3px; background: var(--mark); color: var(--mark-ink); white-space: nowrap; }
.n-type.t-change { background: var(--store-bg); color: var(--store); }
.n-type.t-new { background: var(--pay-bg); color: var(--pay); }
.n-type.t-stop { background: var(--line); color: var(--muted); }
.n-title { font-weight: 700; min-width: 0; }
.n-body { grid-column: 3; color: var(--muted); font-size: 12.5px; }
.watch { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-strong); color: var(--muted); font-size: 12.5px; }
.watch b { color: var(--ink); }
.empty { color: var(--muted); font-size: 13px; margin: 4px 0; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini-list li button { width: 100%; text-align: left; background: none; border: 0; padding: 5px 4px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; border-radius: 4px; cursor: pointer; }
.mini-list li button:hover { background: var(--surface-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.mini-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-name small { color: var(--muted); margin-left: 6px; }
.mini-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.board-sub { margin: 12px 0 6px; font-size: 12px; color: var(--muted); letter-spacing: .06em; }

/* ツールバー */
.toolbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); padding-block: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 6px; }
.btn { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 5px; padding: 6px 11px; cursor: pointer; font-size: 13px; line-height: 1.2; }
.btn:hover { border-color: var(--ink); }
.btn.icon { width: 34px; padding: 6px 0; text-align: center; font-family: var(--f-num); font-size: 16px; }
.nav-label { font-family: var(--f-display); font-size: 16px; min-width: 9.5em; text-align: center; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fchip { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 4px 11px 4px 9px; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fchip .dot { background: var(--c, var(--faint)); }
.fchip[aria-pressed="false"] { opacity: .5; background: transparent; }
.fchip[aria-pressed="false"] .dot { background: transparent; border: 1.5px solid var(--c, var(--faint)); }
.sep { width: 1px; height: 20px; background: var(--line-strong); }

/* 月カレンダー */
.months { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1480px) { .months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.month-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.month-h h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 26px; letter-spacing: .02em; display: flex; align-items: baseline; gap: 8px; }
.month-h h2 .m-num { font-size: 40px; line-height: 1; }
.month-h h2 small { font-family: var(--f-body); font-size: 13px; color: var(--muted); font-weight: 700; }
.month-stats { color: var(--muted); font-size: 12.5px; }
.month-stats b { color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--line); border: 1px solid var(--line); gap: 1px; border-radius: var(--r); overflow: hidden; }
.wd { background: var(--surface-2); text-align: center; font-size: 12px; font-weight: 700; padding: 5px 0; color: var(--muted); }
.wd.sun { color: var(--sun); } .wd.sat { color: var(--sat); }
.day { background: var(--surface); min-height: 128px; padding: 5px 5px 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; position: relative; min-width: 0; }
.day:hover { background: var(--surface-2); }
.day.other { background: var(--surface-2); }
.day.other .dnum, .day.other .chips { opacity: .38; }
.day.past .chips { opacity: .62; }
.dhead { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.dnum { font-family: var(--f-num); font-weight: 600; font-size: 19px; line-height: 1; min-width: 1.4em; font-variant-numeric: tabular-nums; }
.day.sun .dnum, .day.hol .dnum { color: var(--sun); }
.day.sat:not(.hol) .dnum { color: var(--sat); }
.hol-name { font-size: 10px; color: var(--sun); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.day.today .dnum { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 2px 4px 1px; }
.day.today .hol-name::after { content: ""; }
.today-flag { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--mark-ink); background: var(--mark); padding: 0 5px; border-radius: 3px; }
.chips { display: grid; gap: 2px; min-width: 0; }
.chip { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--cb); color: var(--c); min-width: 0; }
.chip.k-big { font-weight: 700; }
.chip.k-rule { background: transparent; padding-left: 13px; position: relative; color: var(--c); }
.chip.k-rule::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateY(-50%); }
.chip.k-deadline { background: transparent; box-shadow: inset 0 0 0 1px var(--c); font-weight: 700; }
.chip.st-f { background: transparent; box-shadow: inset 0 0 0 1px currentColor; border: 0; opacity: .9; }
.chip.st-f.k-big { box-shadow: none; outline: 1px dashed currentColor; outline-offset: -1px; }
.chip .t-mini { display: none; }
.more { margin-top: auto; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 4px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 1100px) { .day { min-height: 112px; } }
@media (max-width: 680px) {
  .toolbar { position: static; }
  .sep { display: none; }
  .day { min-height: 82px; padding: 3px 2px 4px; gap: 2px; }
  .dnum { font-size: 15px; }
  .hol-name, .today-flag { display: none; }
  .chip { font-size: 9.5px; padding: 1px 3px; line-height: 1.25; }
  .chip.k-rule { padding-left: 9px; }
  .chip.k-rule::before { left: 2px; width: 4px; height: 4px; }
  .chip .t-full { display: none; }
  .chip .t-mini { display: inline; }
  .more { font-size: 9.5px; padding: 0 3px; }
  .month-h h2 .m-num { font-size: 32px; }
}

/* 凡例 */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); align-items: center; }
.legend .chip { display: inline-block; font-size: 11px; }
.lg { display: inline-flex; align-items: center; gap: 6px; }

/* 期間バー */
.span-sec h2, .year-sec h2, .about h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.sec-h p { margin: 0; color: var(--muted); font-size: 12.5px; }
.gantt-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.gantt { min-width: 860px; display: grid; grid-template-columns: 13.5em minmax(0, 1fr); }
.g-head-label, .g-label { padding: 0 10px; font-size: 12px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); min-width: 0; background: var(--surface); position: sticky; left: 0; z-index: 2; }
.g-head-label { font-size: 11px; color: var(--muted); }
.g-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-head { position: relative; height: 34px; border-bottom: 1px solid var(--line); }
.g-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-family: var(--f-num); font-size: 11px; color: var(--faint); padding: 2px 0 0 2px; }
.g-tick.m1 { border-left-color: var(--line-strong); color: var(--ink); font-weight: 700; }
.g-track { position: relative; height: 26px; border-bottom: 1px solid var(--line); }
.g-grid { position: absolute; inset: 0; pointer-events: none; }
.g-bar { position: absolute; top: 4px; height: 18px; border-radius: 3px; background: var(--cb); color: var(--c); border: 0; font-size: 11px; font-weight: 700; padding: 0 6px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.g-bar.st-f { background: transparent; outline: 1px dashed currentColor; outline-offset: -1px; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mark); z-index: 1; pointer-events: none; }

/* 年間 */
.tabs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.tabs button { border: 0; background: var(--surface); padding: 6px 14px; cursor: pointer; font-family: var(--f-num); font-size: 16px; font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.year-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.ym { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 10px 12px; min-width: 0; }
.ym-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.ym-h button { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--f-display); font-size: 17px; }
.ym-h button:hover { text-decoration: underline; }
.ym-h span { font-size: 11px; color: var(--muted); }
.ym-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.yw { text-align: center; font-size: 10px; color: var(--faint); }
.yd { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 3px; background: var(--heat-0); font-family: var(--f-num); font-size: 12px; font-weight: 600; cursor: pointer; position: relative; padding: 0; color: var(--ink); }
.yd.sun, .yd.hol { color: var(--sun); } .yd.sat:not(.hol) { color: var(--sat); }
.yd.h1 { background: var(--heat-1); } .yd.h2 { background: var(--heat-2); color: var(--heat-ink); }
.yd.h3 { background: var(--heat-3); color: var(--heat-ink); } .yd.h4 { background: var(--heat-4); color: #fff; }
.yd.big::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 1px; background: currentColor; opacity: .75; }
.yd.today { box-shadow: 0 0 0 2px var(--ink); z-index: 1; }
.yd.blank { background: transparent; cursor: default; }
.yd.inview { box-shadow: inset 0 0 0 1px var(--line-strong); }
.heat-legend { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.heat-legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ポップアップ */
.pop { position: fixed; z-index: 60; width: min(400px, calc(100vw - 24px)); max-height: min(72vh, 620px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); }
.pop-h, .sheet-h { position: sticky; top: 0; background: var(--surface); padding: 11px 14px 9px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; z-index: 1; }
.pop-h b, .sheet-h b { font-size: 15px; }
.pop-h span, .sheet-h span { color: var(--muted); font-size: 12px; }
.x { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 6px; }
.evlist { list-style: none; margin: 0; padding: 4px 0 8px; }
.ev { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 14px 9px 10px; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; }
.ev-rank { font-family: var(--f-num); font-size: 18px; font-weight: 700; color: var(--c); text-align: right; line-height: 1.2; }
.ev-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-org { font-size: 11.5px; font-weight: 700; color: var(--c); background: var(--cb); padding: 0 6px; border-radius: 3px; }
.badge { font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.badge.b-c { border-color: var(--ink); color: var(--ink); }
.badge.b-f { border-style: dashed; }
.badge.b-chk { background: var(--mark-soft); border-color: var(--mark); color: var(--ink); }
.badge.b-new { background: var(--mark); border-color: var(--mark); color: var(--mark-ink); }
.ev-name { font-weight: 700; font-size: 14px; margin-top: 2px; }
.ev-when { font-size: 12px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.ev-ben { font-size: 12.5px; margin-top: 3px; }
.ev-reach { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ev-reach b { color: var(--ink); font-family: var(--f-num); font-size: 14px; }
.ev details { margin-top: 4px; font-size: 12px; color: var(--muted); }
.ev summary { cursor: pointer; color: var(--ec); width: fit-content; }
.ev dl { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
.ev dt { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ev dd { margin: 0; overflow-wrap: anywhere; }
.sheet-back { position: fixed; inset: 0; background: rgba(10, 14, 24, .45); z-index: 70; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 82vh; overflow: auto; background: var(--surface); border-radius: 12px 12px 0 0; box-shadow: var(--shadow); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 720px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); border-radius: 10px; } }

/* マイ設定 */
.my-grid { display: grid; gap: 14px; padding: 12px 16px 16px; }
.my-cat h3 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.my-orgs { display: flex; flex-wrap: wrap; gap: 6px; }
.my-orgs label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 7px; cursor: pointer; }
.my-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* データについて */
.about { display: grid; gap: 14px; }
.about-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
td.n { font-family: var(--f-num); font-size: 14px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note-list { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: 12.5px; display: grid; gap: 4px; max-width: 70ch; }
.kind-est { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .pop { animation: pop-in .12s ease-out; }
  @keyframes pop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

[hidden] { display: none !important; }
img { max-width: 100%; }
.nav-label, .ym-h button, .tag-mark { font-weight: 800; }

/* サイト共通の枠 */
.site-head { border-bottom: 1px solid var(--line); background: var(--surface); }
.site-head-in { max-width: 1560px; margin: 0 auto; padding-inline: 16px; padding-block: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
@media (min-width: 900px) { .site-head-in { padding-inline: 28px; } }
.site-name { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 15px; }
.crumbs { display: flex; gap: 6px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.site-foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px; }
.site-foot-in { max-width: 1560px; margin: 0 auto; padding-inline: 16px; padding-block: 18px 28px; display: grid; gap: 8px; }
@media (min-width: 900px) { .site-foot-in { padding-inline: 28px; } }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.site-foot a { color: var(--ink); }
.lead { margin: 6px 0 0; max-width: 70ch; color: var(--muted); font-size: 13.5px; }
.noscript { background: var(--mark-soft); border: 1px solid var(--mark); border-radius: var(--r); padding: 10px 14px; font-size: 13px; }

/* 静的な一覧（検索エンジンにも読まれる） */
.list-sec .tbl-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.list-sec td small, .about td small { color: var(--muted); }
.st-tag { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 3px; border: 1px solid var(--line-strong); white-space: nowrap; }
.st-tag.fc { border-style: dashed; color: var(--muted); }
.st-tag.ok { border-color: var(--ink); }
.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 900px) { .next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.next-list li { padding: 10px 14px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.next-list li:first-child { border-top: 0; }
@media (min-width: 900px) { .next-list li:nth-child(2) { border-top: 0; } .next-list li:nth-child(odd) { border-right: 1px solid var(--line); } }
.next-q { font-weight: 700; }
.next-a { color: var(--muted); font-size: 13px; }
.next-a b { color: var(--ink); }

/* 出典リンクの列は折り返さない（「開く」が2行に割れないように） */
.about td:last-child a, .list-sec td:last-child a { white-space: nowrap; }
.site-foot p { margin: 0; max-width: 90ch; }