/**
 * n2events_list v3 ショートコード用 CSS
 *
 * 仕様書: .claude/specs/n2-events-system-v3.md §4-§5
 *
 * renderer:
 *   matsuri_today / event_calendar / event_thisweekend / open_close_matome / closed_archive_link
 *
 * 方針：
 *   - 直書き hex は禁止。色は --n2s-text-primary 等のテーマ変数を参照。
 *   - フロント側はテーマに変数が無い前提でフォールバック値を併記する（var(--name, fallback) 形式）。
 *   - レイアウトは記事カラム幅に追従するシンプル構造。装飾は最小限・テーマ既定を尊重。
 *   - matsuri_matome の既存スタイル（n2matome-flyer / n2matome-postcard / n2matome-map）は
 *     events.css 側に既存。ここでは Phase 3.3 で追加した v3 専用 class のみ補完する。
 */

/* ============================================================
   共通：空状態・月見出し
   ============================================================ */
.n2matome.n2matome-empty {
    margin: 1em 0;
    color: var(--n2s-text-secondary, #57606a);
}

.n2matome .n2matome-month {
    margin: 1.6em 0 0.6em;
    padding: 0.3em 0;
    border-bottom: 2px solid var(--n2s-accent-blue, #0969da);
    color: var(--n2s-text-primary, #1f2328);
    font-size: 1.4em;
}

.n2matome .n2matome-month-tbd {
    border-bottom-color: var(--n2s-text-muted, #656d76);
}

/* 町内限定カードは通常一覧の各日付セクションへ JS が差し込むため、プレースホルダ自体は
   高さを持たない（未登録誘導の一文だけここに入る）。 */
.n2s-town-local-widget {
    margin: 0;
}

.n2s-town-local-widget.is-empty {
    margin: 0;
}

/* 町内限定イベントは通常まとめと全く同じ素のマークアップ（.n2matome）で描画するため、
   専用カード・専用背景は持たない。未登録時の誘導文だけ地の文として軽く整える。 */
.n2s-town-local-note {
    margin: 1em 0;
}

.n2s-town-local-lead-collapsible {
    position: relative;
    max-height: 132px;
    overflow: hidden;
    transition: max-height 0.18s ease;
}

.n2s-town-local-lead-collapsible::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 247, 232, 0), #fff7e8 78%);
}

.n2s-town-local-lead-collapsible.is-open {
    max-height: none;
}

.n2s-town-local-lead-collapsible.is-open::after {
    content: none;
}

.n2s-town-local-lead-toggle {
    position: absolute;
    right: 50%;
    bottom: 10px;
    z-index: 1;
    transform: translateX(50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 7px 18px;
    border: 1px solid #c0392b;
    border-radius: 999px;
    background: #fff;
    color: #c0392b;
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.n2s-town-local-lead-toggle[hidden] {
    display: none;
}

.n2s-town-local-lead-toggle:hover,
.n2s-town-local-lead-toggle:focus {
    background: #c0392b;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .n2s-town-local-lead-collapsible {
        transition: none;
    }
}

/* デイリー記事（きょうの夏祭り）のカード描画モードの各カードの間隔。 */
.n2s-town-local-card {
    margin: 1.2em 0;
}

/* ============================================================
   ③ 町名登録モーダル（記事ページから gomi の登録フォームを軽量再利用）
   body 直下にマウントするため .n2matome の --n2s-* に頼れない。モーダル自身に
   ローカル変数を持たせ、prefers-color-scheme でダーク両対応する（白窓事故の防止）。
   ============================================================ */
.n2s-tl-modal {
    --n2s-tl-bg: #ffffff;
    --n2s-tl-bg2: #f6f8fa;
    --n2s-tl-fg: #1f2328;
    --n2s-tl-fg2: #57606a;
    --n2s-tl-border: #d0d7de;
    --n2s-tl-green: #1a7f37;
    --n2s-tl-red: #cf222e;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}
@media (prefers-color-scheme: dark) {
    .n2s-tl-modal {
        --n2s-tl-bg: #161b22;
        --n2s-tl-bg2: #0d1117;
        --n2s-tl-fg: #e6edf3;
        --n2s-tl-fg2: #9198a1;
        --n2s-tl-border: #30363d;
        --n2s-tl-green: #3fb950;
        --n2s-tl-red: #f85149;
    }
}
.n2s-tl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.n2s-tl-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 1.4em 1.3em 1.5em;
    border-radius: 10px;
    background: var(--n2s-tl-bg);
    color: var(--n2s-tl-fg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.n2s-tl-modal-close {
    position: absolute;
    top: 0.5em;
    right: 0.6em;
    width: 1.8em;
    height: 1.8em;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--n2s-tl-fg2);
    font-size: 1.3em;
    line-height: 1;
    cursor: pointer;
}
.n2s-tl-modal-title {
    margin: 0 0 0.4em;
    font-size: 1.15em;
    color: var(--n2s-tl-fg);
}
.n2s-tl-modal-lead {
    margin: 0 0 1em;
    font-size: 0.9em;
    color: var(--n2s-tl-fg2);
}
.n2s-tl-form {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
}
.n2s-tl-field {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    font-size: 0.9em;
    color: var(--n2s-tl-fg);
}
.n2s-tl-field input,
.n2s-tl-field select {
    padding: 0.5em 0.6em;
    border: 1px solid var(--n2s-tl-border);
    border-radius: 6px;
    background: var(--n2s-tl-bg2);
    color: var(--n2s-tl-fg);
    font-size: 1em;
}
.n2s-tl-submit {
    margin-top: 0.2em;
    padding: 0.6em 1em;
    border: 0;
    border-radius: 6px;
    background: var(--n2s-tl-green);
    color: #ffffff;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
}
.n2s-tl-submit:disabled {
    opacity: 0.5;
    cursor: default;
}
.n2s-tl-msg {
    margin: 0;
    font-size: 0.85em;
    color: var(--n2s-tl-red);
}

/* ============================================================
   matsuri_today（記事 /301785/ 想定）
   ============================================================ */
.n2matome-today .n2matome-today-area {
    margin: 1em 0 0.4em;
    padding-left: 0.6em;
    border-left: 4px solid var(--n2s-accent-green, #1a7f37);
    font-size: 1.15em;
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-today-card {
    margin: 0.4em 0 1em;
    padding: 0.8em 1em;
    border: 1px solid var(--n2s-border, #d0d7de);
    border-radius: 6px;
    background: var(--n2s-bg-secondary, #f6f8fa);
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-today-card-title {
    margin: 0 0 0.3em;
    font-size: 1.1em;
}

.n2matome-today-card-title a {
    color: var(--n2s-text-primary, #1f2328);
    text-decoration: none;
}

.n2matome-today-card-title a:hover {
    text-decoration: underline;
}

.n2matome-today-card-time {
    margin: 0 0 0.3em;
    font-size: 0.9em;
    color: var(--n2s-text-secondary, #57606a);
}

.n2matome-today-card-desc {
    margin: 0.3em 0;
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-today-card-flyer {
    margin-top: 0.5em;
}

.n2matome-today-card-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ============================================================
   event_calendar / event_thisweekend（記事 /312694/ 想定）
   ============================================================ */
.n2matome-event-calendar .n2matome-calendar-card,
.n2matome-thisweekend .n2matome-calendar-card {
    display: flex;
    gap: 14px;
    margin: 0.8em 0;
    padding: 0.9em 1em;
    border: 1px solid var(--n2s-border, #d0d7de);
    border-radius: 8px;
    background: var(--n2s-bg-primary, #ffffff);
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-calendar-card-flyer {
    flex: 0 0 130px;
    max-width: 130px;
}

.n2matome-calendar-card-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.n2matome-calendar-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.n2matome-calendar-card-period {
    margin: 0 0 0.3em;
    font-size: 0.95em;
    color: var(--n2s-accent-blue, #0969da);
    font-weight: 600;
}

.n2matome-calendar-card-title {
    margin: 0 0 0.4em;
    font-size: 1.15em;
}

.n2matome-calendar-card-title a {
    color: var(--n2s-text-primary, #1f2328);
    text-decoration: none;
}

.n2matome-calendar-card-title a:hover {
    text-decoration: underline;
}

.n2matome-calendar-card-venue,
.n2matome-calendar-card-desc {
    margin: 0.2em 0;
    font-size: 0.95em;
    color: var(--n2s-text-secondary, #57606a);
}

.n2matome-calendar-card-link {
    margin: 0.4em 0 0;
    font-size: 0.9em;
}

.n2matome-thisweekend-heading {
    margin: 0.6em 0 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 1px dashed var(--n2s-accent-blue, #0969da);
    font-size: 1.3em;
    color: var(--n2s-text-primary, #1f2328);
}

/* レスポンシブ：狭い画面ではチラシを上に積む */
@media (max-width: 480px) {
    .n2matome-event-calendar .n2matome-calendar-card,
    .n2matome-thisweekend .n2matome-calendar-card {
        flex-direction: column;
    }
    .n2matome-calendar-card-flyer {
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* ============================================================
   open_close_matome（記事 /312673/ 想定）
   ============================================================ */
.n2matome-open-close-card {
    display: flex;
    gap: 14px;
    margin: 0.8em 0;
    padding: 0.9em 1em;
    border: 1px solid var(--n2s-border, #d0d7de);
    border-radius: 8px;
    background: var(--n2s-bg-primary, #ffffff);
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-open-close-card-img-wrap {
    flex: 0 0 110px;
    max-width: 110px;
}

.n2matome-open-close-card-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.n2matome-open-close-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.n2matome-open-close-card-meta {
    margin: 0 0 0.3em;
    font-size: 0.95em;
}

.n2matome-open-close-label {
    display: inline-block;
    padding: 0 0.4em;
    margin-right: 0.3em;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 600;
}

/* v2.6.0 Phase B6: 色は /312673/ 現物の慣習に合わせる（spec open-close-form-proposal §2）
 *   赤 = 開店・移転オープン / 青地 = 閉店・移転 / 無色 = リニューアル・休業・営業再開
 * 旧 per-type 色（open=緑 等）は廃止し、renderer が出す n2matome-oc-color-* で塗る。 */
.n2matome-oc-color-red {
    background: var(--n2s-accent-red, #cf222e);
    color: #fff;
}

.n2matome-oc-color-blue {
    background: var(--n2s-accent-blue, #0969da);
    color: #fff;
}

.n2matome-oc-color-none {
    background: transparent;
    border: 1px solid var(--n2s-border, #d0d7de);
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-open-close-date {
    color: var(--n2s-text-secondary, #57606a);
}

.n2matome-open-close-card-title {
    margin: 0 0 0.3em;
    font-size: 1.15em;
}

.n2matome-open-close-card-title a {
    color: var(--n2s-text-primary, #1f2328);
    text-decoration: none;
}

.n2matome-open-close-card-title a:hover {
    text-decoration: underline;
}

.n2matome-open-close-card-venue,
.n2matome-open-close-card-desc {
    margin: 0.2em 0;
    font-size: 0.95em;
    color: var(--n2s-text-secondary, #57606a);
}

.n2matome-open-close-card-link {
    margin: 0.4em 0 0;
    font-size: 0.9em;
}

@media (max-width: 480px) {
    .n2matome-open-close-card {
        flex-direction: column;
    }
    .n2matome-open-close-card-img-wrap {
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* ============================================================
   closed_archive_link
   ============================================================ */
.n2matome-closed-archive .n2matome-closed-archive-list {
    margin: 0.6em 0;
    padding-left: 1.2em;
}

.n2matome-closed-archive-item {
    margin: 0.3em 0;
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-closed-archive-date {
    color: var(--n2s-text-muted, #656d76);
    font-size: 0.9em;
    margin-right: 0.4em;
}

.n2matome-closed-archive-item a {
    color: var(--n2s-text-primary, #1f2328);
}

.n2matome-closed-archive-item a:hover {
    text-decoration: underline;
}

/* ============================================================
   ダークモード自動適応（テーマ側に --n2s-* 変数が無い記事ページ向けフォールバック）
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .n2matome:not(.n2s-light) {
        --n2s-text-primary: #e6edf3;
        --n2s-text-secondary: #9198a1;
        --n2s-text-muted: #656d76;
        --n2s-border: #30363d;
        --n2s-bg-primary: #0d1117;
        --n2s-bg-secondary: #161b22;
        --n2s-bg-tertiary: #21262d;
        --n2s-accent-blue: #2f81f7;
        --n2s-accent-green: #3fb950;
        --n2s-accent-yellow: #d29922;
        --n2s-accent-red: #f85149;
    }
}