/* 遠州しゅうまつ手帳（仮）イベント一覧 — 色・書体は ../site.css に合わせて変数を差し替え（2026-11-06）
   以下は元の遠州しゅうまつ手帳 イベント欄の注記
   2026-11-06: 既存試作 catalog_20261101_0631/index.html の色（--ink/--green/--cream/--orange）・書体・最大幅に合わせて変数を更新。
   以前は既存サイトのデザイントークンが未確認だったため、色・書体・余白はすべて下記の変数に集約。
   統合時は既存 CSS の値に合わせて :root（または .yj-events）の変数だけを差し替える。
   クラスは .yj- 接頭辞で既存スタイルと衝突しないようにしている。 */
:root {
  --yj-bg: #ffd83d;
  --yj-surface: #ffffff;
  --yj-ink: #141414;
  --yj-ink-soft: #3d3d3d;
  --yj-line: #141414;
  --yj-accent: #141414;
  --yj-accent-ink: #ffffff;
  --yj-free: #2f6b4a;
  --yj-free-bg: #e6f2ea;
  --yj-paid: #6b4f2f;
  --yj-paid-bg: #f4ece1;
  --yj-unknown: #5d5d66;
  --yj-unknown-bg: #ececf0;
  --yj-warn: #8a3b12;
  --yj-warn-bg: #fbeee6;
  --yj-radius: 12px;
  --yj-gap: 1rem;
  --yj-max: 1080px;
  --yj-font: "Dela Gothic One", "Hiragino Sans", sans-serif;
  --yj-font-ui: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;
  --yj-orange: #c76f44;
  --yj-notice-bg: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--yj-bg); color: var(--yj-ink); font-family: var(--yj-font-ui); line-height: 1.75; }

.yj-skip { position: absolute; left: -9999px; }
.yj-skip:focus { left: 1rem; top: 1rem; background: var(--yj-surface); padding: .5rem 1rem; z-index: 10; }
.yj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.yj-site-header { max-width: var(--yj-max); margin: 0 auto; padding: 24px 32px; display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid var(--yj-line); }
.yj-brand { font-family: var(--yj-font); font-size: 28px; font-weight: bold; letter-spacing: .15em; color: var(--yj-ink); text-decoration: none; }
.yj-brand small { font: 11px var(--yj-font-ui); display: block; letter-spacing: .24em; }
.yj-section-name { color: var(--yj-ink-soft); font-size: .9rem; letter-spacing: .08em; }

.yj-events { max-width: var(--yj-max); margin: 0 auto; padding: 0 1.25rem 4rem; }
.yj-events h1, .yj-events h2 { font-family: var(--yj-font); font-weight: 500; letter-spacing: .06em; }
.yj-events h1 { font-size: 1.8rem; margin: 1.5rem 0 .75rem; }
.yj-events h2 { font-size: 1.25rem; margin: 2.5rem 0 .75rem; }

.yj-notice { background: var(--yj-notice-bg); border-left: 3px solid var(--yj-accent); padding: .75rem 1rem; font-size: .9rem; }
.yj-basis, .yj-count, .yj-source, .yj-diagnostics, .yj-audience-note { color: var(--yj-ink-soft); font-size: .85rem; }

.yj-tabs { display: flex; gap: .5rem; margin: 2rem 0 1rem; border-bottom: 1px solid var(--yj-line); }
.yj-tabs button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .9rem; color: var(--yj-ink-soft); cursor: pointer; min-height: 44px; }
.yj-tabs button[aria-selected="true"] { color: var(--yj-ink); border-bottom-color: var(--yj-accent); }

.yj-filters, .yj-submit-form { background: var(--yj-surface); border: 1px solid var(--yj-line); border-radius: var(--yj-radius); padding: 1rem; }
.yj-filters fieldset, .yj-submit-form fieldset { border: 0; margin: 0 0 .75rem; padding: 0; }
.yj-filters legend, .yj-submit-form legend { font-size: .85rem; color: var(--yj-ink-soft); margin-bottom: .4rem; }

.yj-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.yj-chip { position: relative; }
.yj-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.yj-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border: 1px solid var(--yj-line); border-radius: 999px; font-size: .9rem; background: var(--yj-bg); }
.yj-chip input:checked + span { background: var(--yj-accent); border-color: var(--yj-accent); color: var(--yj-accent-ink); }
.yj-chip input:focus-visible + span { outline: 2px solid var(--yj-accent); outline-offset: 2px; }
.yj-chip small { margin-left: .35rem; opacity: .75; }

.yj-more summary { cursor: pointer; font-size: .9rem; padding: .4rem 0; min-height: 44px; display: flex; align-items: center; }
.yj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.yj-field { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.yj-field--wide { grid-column: 1 / -1; }
.yj-field input, .yj-field select, .yj-field textarea { font: inherit; font-size: 1rem; padding: .5rem .6rem; border: 1px solid var(--yj-line); border-radius: var(--yj-radius); background: var(--yj-surface); color: var(--yj-ink); min-height: 44px; width: 100%; }
.yj-tags { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; }
.yj-tags label { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; }
.yj-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.yj-quick button, .yj-empty button, .yj-submit-actions button { font: inherit; font-size: .9rem; padding: .45rem .9rem; min-height: 44px; border: 1px solid var(--yj-line); border-radius: var(--yj-radius); background: var(--yj-bg); color: var(--yj-ink); cursor: pointer; }
.yj-submit-actions button { background: var(--yj-accent); color: var(--yj-accent-ink); border-color: var(--yj-accent); }
.yj-reset { margin-left: auto; }

.yj-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--yj-gap); margin-top: .5rem; }
.yj-results:focus { outline: none; }
.yj-group-title { grid-column: 1 / -1; font-family: var(--yj-font); font-size: 1rem; color: var(--yj-ink-soft); border-top: 1px solid var(--yj-line); padding-top: 1rem; margin: 1rem 0 0; }

.yj-card { background: var(--yj-surface); border: 1px solid var(--yj-line); border-radius: var(--yj-radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.yj-card.is-ended, .yj-card.is-cancelled { opacity: .72; }
.yj-card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.yj-genre-list, .yj-tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.yj-genre-list li { font-size: .75rem; color: var(--yj-accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 .55rem; }
.yj-tag-list li { font-size: .75rem; background: var(--yj-bg); border-radius: 4px; padding: 0 .45rem; color: var(--yj-ink-soft); }
.yj-phase { font-size: .75rem; white-space: nowrap; color: var(--yj-ink-soft); }
.yj-phase.is-ongoing { color: var(--yj-free); font-weight: 600; }
.yj-phase.is-cancelled, .yj-phase.is-changed { color: var(--yj-warn); font-weight: 600; }
.yj-card-title { font-family: var(--yj-font); font-weight: 500; font-size: 1.1rem; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.yj-meta { margin: 0; font-size: .9rem; }
.yj-meta div { display: grid; grid-template-columns: 3em 1fr; gap: .5rem; padding: .15rem 0; }
.yj-meta dt { color: var(--yj-ink-soft); }
.yj-meta dd { margin: 0; overflow-wrap: anywhere; }
.yj-fee { display: inline-block; font-size: .75rem; font-weight: 600; border-radius: 4px; padding: 0 .45rem; }
.yj-fee.is-free { background: var(--yj-free-bg); color: var(--yj-free); }
.yj-fee.is-paid { background: var(--yj-paid-bg); color: var(--yj-paid); }
.yj-fee.is-unknown { background: var(--yj-unknown-bg); color: var(--yj-unknown); }
.yj-food { display: inline-block; font-size: .75rem; border-radius: 4px; padding: 0 .45rem; background: var(--yj-paid-bg); color: var(--yj-paid); margin-right: .25rem; }
.yj-fee-summary { display: block; font-size: .85rem; color: var(--yj-ink-soft); }
.yj-unknown { color: var(--yj-unknown); }
.yj-status-note { background: var(--yj-warn-bg); color: var(--yj-warn); font-size: .85rem; padding: .4rem .6rem; border-radius: 4px; margin: 0; }
.yj-unverified { font-size: .8rem; color: var(--yj-ink-soft); margin: 0; }
.yj-source { margin: 0; }
.yj-link-row { margin: auto 0 0; }
.yj-official { display: inline-flex; align-items: center; min-height: 44px; color: var(--yj-accent); font-weight: 600; text-underline-offset: .2em; }
.yj-official.is-disabled { color: var(--yj-ink-soft); font-weight: 400; text-decoration: none; }

.yj-empty { background: var(--yj-surface); border: 1px dashed var(--yj-line); border-radius: var(--yj-radius); padding: 1.5rem; text-align: center; margin-top: 1rem; }
.yj-empty h2 { margin-top: 0; font-size: 1.1rem; }
.yj-empty-actions { display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.yj-empty a { color: var(--yj-accent); }

.yj-sources ul { padding-left: 1.2rem; font-size: .9rem; }
.yj-sources li { margin-bottom: .5rem; }
.yj-sources a { color: var(--yj-accent); overflow-wrap: anywhere; }
.yj-sources .yj-perm { display: block; font-size: .8rem; color: var(--yj-ink-soft); }

.yj-submit-error { color: var(--yj-warn); font-size: .9rem; min-height: 1.2em; margin: 0; }
.yj-submit-form textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }

@media (max-width: 600px) {
  .yj-events h1 { font-size: 1.5rem; }
  .yj-results { grid-template-columns: 1fr; }
  .yj-grid { grid-template-columns: 1fr 1fr; }
  .yj-tabs button { flex: 1; padding: .6rem .4rem; font-size: .9rem; white-space: nowrap; }
  .yj-reset { margin-left: 0; }
}
@media (max-width: 360px) {
  .yj-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* 案C：カードに黒い影、見出しは太字ディスプレイ書体（2026-11-06） */
.yj-events h1, .yj-events h2 { font-weight: 400; }
.yj-card, .yj-filters, .yj-panel article { box-shadow: 4px 4px 0 #141414; border-width: 2px; }

/* 公開版：出典の内部向け状態は表示しない */
.yj-sources .yj-perm, .yj-perm { display: none !important; }