/**
 * イベント登録モーダル + ショートコード出力 CSS
 *
 * 仕様書: .claude/specs/n2-events-system.md §3-0
 *
 * テーマ変数（--n2s-* / --n2s-text-primary 等）のみを使用。
 * 直書きの hex は禁止。ライト/ダーク両対応。
 */

/* ============================================================
   モーダル（管理画面）
   ============================================================ */

.n2s-event-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 40px 20px;
    box-sizing: border-box;
}

.n2s-event-modal .n2s-event-modal-content {
    background: var(--n2s-bg-primary);
    color: var(--n2s-text-primary);
    border: 1px solid var(--n2s-border);
    border-radius: 8px;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 80px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.n2s-event-modal .n2s-event-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--n2s-border);
    background: var(--n2s-bg-secondary);
}

.n2s-event-modal .n2s-event-modal-header h3 {
    margin: 0;
    color: var(--n2s-text-primary);
    font-size: 16px;
    font-weight: 600;
}

.n2s-event-modal .n2s-event-modal-close {
    background: none;
    border: none;
    color: var(--n2s-text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.n2s-event-modal .n2s-event-modal-close:hover {
    background: var(--n2s-bg-tertiary);
    color: var(--n2s-text-primary);
}

/* Article loading and analysis stay visible above the scrolling form. */
.n2s-event-modal .n2s-event-article-progress {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--n2s-border);
    border-left: 4px solid var(--n2s-accent-blue);
    background: var(--n2s-bg-secondary);
    color: var(--n2s-text-primary);
}
.n2s-event-modal .n2s-event-article-progress[hidden] { display: none !important; }
.n2s-event-article-progress-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
.n2s-event-article-progress-detail {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--n2s-text-secondary);
}
.n2s-event-article-progress-icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    color: var(--n2s-accent-blue);
}
.n2s-event-article-progress.is-busy .n2s-event-article-progress-icon {
    border: 3px solid var(--n2s-border);
    border-top-color: var(--n2s-accent-blue);
    border-right-color: var(--n2s-accent-blue);
    border-radius: 50%;
    animation: n2s-event-article-progress-spin .8s linear infinite;
}
.n2s-event-article-progress[data-state="success"] { border-left-color: var(--n2s-accent-green); }
.n2s-event-article-progress[data-state="success"] .n2s-event-article-progress-icon { color: var(--n2s-accent-green); }
.n2s-event-article-progress[data-state="error"] { border-left-color: var(--n2s-accent-red); }
.n2s-event-article-progress[data-state="error"] .n2s-event-article-progress-icon { color: var(--n2s-accent-red); }
.n2s-event-article-progress[data-state="cancelled"] { border-left-color: var(--n2s-text-secondary); }
.n2s-event-article-progress[data-state="cancelled"] .n2s-event-article-progress-icon { color: var(--n2s-text-secondary); }
@keyframes n2s-event-article-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .n2s-event-article-progress.is-busy .n2s-event-article-progress-icon { animation: none; }
}

/* ライトモード：モーダルは .n2s-wrap の外（フッター出力）なので、開く時に JS が
   .n2s-wrap から n2s-light クラスをコピーする。ここで変数を供給する（admin.css のライトと同値）。
   投稿編集画面は .n2s-wrap が無く enqueue のインライン変数でライト固定（そちらが効く）。 */
.n2s-event-modal.n2s-light {
    --n2s-bg-primary: #ffffff;
    --n2s-bg-secondary: #f6f8fa;
    --n2s-bg-tertiary: #eaeef2;
    --n2s-border: #d0d7de;
    --n2s-border-light: #afb8c1;
    --n2s-text-primary: #1f2328;
    --n2s-text-secondary: #424a53;
    --n2s-text-muted: #656d76;
    --n2s-accent-blue: #0969da;
    --n2s-accent-green: #1a7f37;
    --n2s-accent-yellow: #9a6700;
    --n2s-accent-red: #cf222e;
    --n2s-accent-purple: #8250df;
}

/* フォーム: ヘッダ・フッタは固定、grid だけ縦スクロール */
.n2s-event-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    color: var(--n2s-text-primary);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.n2s-event-form-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
}

/* ===== チラシ常時表示ステージ（2カラム：左=大画像 / 右=フォーム） ===== */
/* チラシ候補がある時だけ .n2s-has-flyer が付き、モーダルが横に広がる */
.n2s-event-modal .n2s-event-modal-content.n2s-has-flyer {
    max-width: 1080px;
}

.n2s-event-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
/* body 直下の form-grid は右カラムとして伸びる（縦スクロールは form-grid 側） */
.n2s-event-body > .n2s-event-form-grid {
    flex: 1 1 auto;
    min-width: 0;
}

.n2s-event-stage {
    flex: 0 0 42%;
    max-width: 460px;
    box-sizing: border-box;
    border-right: 1px solid var(--n2s-border);
    background: var(--n2s-bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    overflow-y: auto;
}

.n2s-event-stage-image {
    position: sticky;
    top: 0;
}
.n2s-event-stage-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--n2s-border);
    background: #fff;
}
.n2s-event-stage-zoom {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--n2s-accent-blue, #0969da);
    text-decoration: none;
}
.n2s-event-stage-zoom:hover {
    text-decoration: underline;
}
.n2s-event-stage-pick > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n2s-text-secondary);
}

/* 狭い画面では縦積み（大画像→フォーム）に切り替え */
@media (max-width: 860px) {
    .n2s-event-modal .n2s-event-modal-content.n2s-has-flyer {
        max-width: 720px;
    }
    .n2s-event-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .n2s-event-stage {
        flex: 0 0 auto;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--n2s-border);
        overflow: visible;
    }
    .n2s-event-stage-image {
        position: static;
    }
    .n2s-event-stage-image img {
        max-height: 50vh;
    }
}

.n2s-event-form .n2s-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.n2s-event-form .n2s-form-row label {
    font-size: 12px;
    color: var(--n2s-text-secondary);
    font-weight: 600;
}

.n2s-event-form .n2s-required {
    color: var(--n2s-accent-red);
    margin-left: 2px;
}

.n2s-event-form .n2s-form-help {
    font-weight: normal;
    color: var(--n2s-text-muted);
    font-size: 11px;
    margin-left: 4px;
}

/* `.n2s-event-modal` で詳細度を上げる：collector.css の `.n2s-form-row input`
   （同詳細度で後勝ち・しかも壊れた var(--n2s-border-color) で枠が消える）に勝つため。
   これで枠を border-light ではっきり表示する。 */
.n2s-event-modal .n2s-event-form input[type="text"],
.n2s-event-modal .n2s-event-form input[type="url"],
.n2s-event-modal .n2s-event-form input[type="number"],
.n2s-event-modal .n2s-event-form input[type="datetime-local"],
.n2s-event-modal .n2s-event-form select,
.n2s-event-modal .n2s-event-form textarea {
    padding: 8px 10px;
    background: var(--n2s-bg-secondary);
    color: var(--n2s-text-primary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.n2s-event-modal .n2s-event-form input:focus,
.n2s-event-modal .n2s-event-form select:focus,
.n2s-event-modal .n2s-event-form textarea:focus {
    outline: none;
    border-color: var(--n2s-accent-blue);
    box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.2);
}

.n2s-event-form textarea {
    resize: vertical;
    min-height: 60px;
}

.n2s-event-form .n2s-inline-fields {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.n2s-event-form .n2s-inline-fields > input,
.n2s-event-form .n2s-inline-fields > select {
    flex: 1 1 auto;
    min-width: 120px;
}

.n2s-event-form .n2s-sep {
    color: var(--n2s-text-muted);
    flex: 0 0 auto;
}

.n2s-event-form .n2s-checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--n2s-text-secondary);
    font-size: 13px;
    font-weight: normal;
    margin-top: 4px;
}

.n2s-event-form .n2s-checkbox-inline input {
    margin: 0;
}

/* 重複警告 */
.n2s-event-form .n2s-form-row-duplicates {
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-accent-yellow);
    border-radius: 4px;
    padding: 10px 12px;
}

/* 自動取得情報の参考表示 */
.n2s-event-form .n2s-form-row-auto-meta {
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 4px;
    padding: 8px 12px;
}
.n2s-event-auto-meta-display {
    color: var(--n2s-text-secondary);
    font-size: 12px;
    line-height: 1.6;
}
.n2s-event-auto-meta-item {
    margin-bottom: 2px;
}

/* P2: フライヤー候補ピッカー */
.n2s-event-flyer-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}
.n2s-event-flyer-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 160px;
    padding: 6px;
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.15s ease;
    color: var(--n2s-text-primary);
}
.n2s-event-flyer-card:hover {
    border-color: var(--n2s-accent);
    transform: translateY(-1px);
}
.n2s-event-flyer-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    background: var(--n2s-bg-secondary);
}
.n2s-event-flyer-meta {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--n2s-text-primary);
}
.n2s-event-flyer-meta .n2s-flyer-title {
    font-weight: 600;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.n2s-event-flyer-meta .n2s-flyer-date,
.n2s-event-flyer-meta .n2s-flyer-venue {
    color: var(--n2s-text-secondary);
    margin-top: 2px;
}
.n2s-event-flyer-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--n2s-text-secondary);
}
.n2s-event-flyer-pending-text {
    color: var(--n2s-text-secondary);
    font-size: 12px;
}

/* 別イベントのチラシ振り分け（このイベントに使う / 別イベント登録 / 別ToDo分割） */
.n2s-flyer-fork-note {
    width: 100%;
    margin: 2px 0 4px;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--n2s-text-primary);
    background: var(--n2s-bg-secondary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px;
}
.n2s-event-flyer-card {
    cursor: default; /* div 化したのでカード自体はクリック対象でない */
}
.n2s-flyer-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.n2s-flyer-card-actions .n2s-btn {
    width: 100%;
    justify-content: center;
    font-size: 11px;
}
.n2s-event-flyer-card.is-done {
    opacity: 0.6;
}
.n2s-flyer-done-label {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--n2s-accent);
}

/* 複数日程（日ごとに日付＋時間） */
.n2s-days-wrap {
    margin-top: 4px;
}
.n2s-event-day-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.n2s-event-day-row .n2s-day-date,
.n2s-event-day-row .n2s-day-hm {
    padding: 6px 8px;
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px;
    color: var(--n2s-text-primary);
    /* ネイティブ日付/時刻のアイコンはテーマに追従させる（ライトで白アイコンが消える事故防止）。
       既定はダーク、モーダルが .n2s-light のときライトに切替。 */
    color-scheme: dark;
}
/* 時刻はHHMMの4桁直接入力（社長指示 2026-07-02）。数字が読みやすいよう中央寄せ・等幅寄り。 */
.n2s-event-day-row .n2s-day-hm {
    width: 64px;
    text-align: center;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.n2s-event-modal.n2s-light .n2s-event-day-row .n2s-day-date,
.n2s-event-modal.n2s-light .n2s-event-day-row .n2s-day-hm,
.n2s-event-modal.n2s-light .n2s-month-wrap input[type="month"] {
    color-scheme: light;
}
.n2s-event-day-row .n2s-day-times {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.n2s-event-day-row .n2s-day-remove {
    margin-left: auto;
    width: 28px;
    height: 28px;
    line-height: 1;
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px;
    background: transparent;
    color: var(--n2s-text-secondary);
    cursor: pointer;
}
.n2s-event-day-row .n2s-day-remove:hover {
    color: #fff;
    border-color: var(--n2s-danger, #e5534b);
    background: var(--n2s-danger, #e5534b);
}
.n2s-day-add {
    margin: 2px 0 8px;
    padding: 6px 12px;
    border: 1px dashed var(--n2s-border-light);
    border-radius: 6px;
    background: transparent;
    color: var(--n2s-text-primary);
    cursor: pointer;
    font-size: 13px;
}
.n2s-day-add:hover {
    border-color: var(--n2s-accent);
    color: var(--n2s-accent);
}
.n2s-month-wrap input[type="month"] {
    padding: 6px 8px;
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px;
    color: var(--n2s-text-primary);
    color-scheme: dark;
}

/* 日時未定 / 終日 のチェック並び */
.n2s-event-form .n2s-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}
.n2s-event-form .n2s-checkbox-group .n2s-checkbox-inline {
    margin-top: 0;
}

/* 日時モード 3択ラジオ */
.n2s-event-form .n2s-date-mode-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
    padding: 4px 0;
}
.n2s-event-form .n2s-radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--n2s-text-secondary);
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
}
.n2s-event-form .n2s-radio-inline input[type="radio"] {
    margin: 0;
}

/* ===== 夏祭り(matsuri)モード：UI簡素化＋並び替え（単一カラム grid の order） ===== */
/* 日付モードラジオ（月だけ/日時未定）と「終日」チェックは出さない＝常に日付指定 */
.n2s-event-form-grid.is-matsuri .n2s-date-mode-radios { display: none; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-datetime .n2s-checkbox-group { display: none; }

/* フィールド並び（event-modal-improvements item3） */
.n2s-event-form-grid.is-matsuri .n2s-form-row-type               { order: 1; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-featured           { order: 2; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-parent-picker      { order: 3; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-title              { order: 4; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-datetime           { order: 5; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-target-date        { order: 5; }
/* Phase 2（重要日付）: 申込締切/プレ日は開催日時の直後（同 order はDOM順でタイブレーク） */
.n2s-event-form-grid.is-matsuri .n2s-form-row-apply-deadline     { order: 5; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-preopen            { order: 5; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-venue              { order: 6; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-address            { order: 7; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-audience           { order: 8; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-contributor        { order: 9; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-related            { order: 10; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-instagram          { order: 11; }
.n2s-event-form-grid.is-matsuri .n2s-event-minreq-divider        { order: 12; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-text-materials     { order: 13; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-content-highlights { order: 14; }
.n2s-event-form-grid.is-matsuri .n2s-event-divider-plain         { order: 15; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-short-desc         { order: 16; }
/* 最上部のセクション見出し「夏祭りまとめ」は先頭へ（order:11 を上書き） */
.n2s-event-form-grid.is-matsuri .n2s-event-divider-top           { order: 0; }
/* 文字なしの区切り線（「どんなお祭りか」の上）。span を持たないので gap:0 で1本の連続線に */
.n2s-event-form-grid.is-matsuri .n2s-event-divider-plain         { gap: 0; margin: 8px 0; }
/* 参考枠・チラシ候補・重複警告などの補助行は末尾へ */
.n2s-event-form-grid.is-matsuri .n2s-form-row-auto-meta,
.n2s-event-form-grid.is-matsuri .n2s-form-row-flyer-picker,
.n2s-event-form-grid.is-matsuri .n2s-form-row-flyer-pending,
.n2s-event-form-grid.is-matsuri .n2s-form-row-duplicates  { order: 20; }

/* 「ここまで入力すればOK」区切り線（夏祭りモードのみ表示・両テーマ対応） */
.n2s-event-minreq-divider { display: none; }
.n2s-event-form-grid.is-matsuri .n2s-event-minreq-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--n2s-text-muted);
}
.n2s-event-form-grid.is-matsuri .n2s-event-minreq-divider::before,
.n2s-event-form-grid.is-matsuri .n2s-event-minreq-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--n2s-border);
}
.n2s-event-form-grid.is-matsuri .n2s-event-minreq-divider > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 夏祭り：日付のカレンダーアイコンを左隅へ（よく使うので押しやすく）。
   幅は内容ぶんに抑え、「＋時刻」ボタンが日付の右側に並ぶようにする（下に回り込ませない）。 */
.n2s-event-form-grid.is-matsuri .n2s-day-date {
    position: relative;
    padding-left: 32px;
    width: auto;
    flex: 0 1 auto;
    max-width: 220px;
}
.n2s-event-form-grid.is-matsuri .n2s-day-date::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 8px;
    margin: 0;
    cursor: pointer;
}

/* 夏祭り：例の注釈は出さない */
.n2s-event-form-grid.is-matsuri .n2s-days-wrap > .n2s-form-help {
    display: none;
}

/* 夏祭り：「＋時刻」「×時刻」トグルボタン */
.n2s-event-form-grid.is-matsuri .n2s-day-addtime,
.n2s-event-form-grid.is-matsuri .n2s-day-rmtime {
    padding: 5px 10px;
    border: 1px dashed var(--n2s-border-light);
    border-radius: 6px;
    background: transparent;
    color: var(--n2s-text-secondary);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.n2s-event-form-grid.is-matsuri .n2s-day-addtime:hover,
.n2s-event-form-grid.is-matsuri .n2s-day-rmtime:hover {
    border-color: var(--n2s-accent);
    color: var(--n2s-accent);
}

/* 夏祭り：時刻入力（HHMM 4桁・コンパクト） */
.n2s-event-form-grid.is-matsuri .n2s-day-times {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* v3.3.9: open/close/renewal/closure_temp/limited の target_date 入力欄を夏祭り日付行と
   同じ「カレンダーアイコン左寄せ」スタイルに統一（社長指示：UI 統一）。
   ::-webkit-calendar-picker-indicator は WebKit ベースのブラウザで効くが、
   それ以外（Firefox）でもアイコン左の余白で見た目を揃える。 */
.n2s-form-row-target-date #n2s-event-target-date-input {
    position: relative;
    padding-left: 32px;
    width: auto;
    max-width: 220px;
}
.n2s-form-row-target-date #n2s-event-target-date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 8px;
    margin: 0;
    cursor: pointer;
}
.n2s-form-row-target-date #n2s-event-target-date-precision {
    margin-top: 6px;
    max-width: 320px;
}

/* §2-5/§2-6：関連リンク・SNSは夏祭り、および記事補完の通常イベントで表示
   （`.n2s-event-form .n2s-form-row{display:flex}` と同等以上の詳細度で隠す必要がある） */
.n2s-event-form .n2s-form-row-related,
.n2s-event-form .n2s-form-row-instagram { display: none; }
.n2s-event-form-grid.is-matsuri .n2s-form-row-related,
.n2s-event-form-grid.is-matsuri .n2s-form-row-instagram { display: flex; }

.n2s-town-local-panel {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--n2s-border, #d0d7de);
    border-radius: 6px;
    background: var(--n2s-bg-secondary, #f6f8fa);
}
.n2s-town-label {
    display: block;
    margin: 0 0 5px;
    color: var(--n2s-text-secondary, #57606a);
    font-size: 12px;
    font-weight: 700;
}
.n2s-town-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    margin-bottom: 8px;
}
.n2s-town-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--n2s-border-light, #afb8c1);
    border-radius: 14px;
    background: var(--n2s-bg-primary, #ffffff);
    color: var(--n2s-text-primary, #1f2328);
    font-size: 12px;
    line-height: 1.2;
}
.n2s-town-chip.is-suggestion {
    cursor: pointer;
}
.n2s-town-chip.is-suggestion:hover {
    border-color: var(--n2s-accent-blue, #0969da);
}
.n2s-town-chip-remove {
    border: 0;
    background: transparent;
    color: var(--n2s-text-muted, #656d76);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.n2s-town-manual-add {
    display: flex;
    gap: 6px;
}
.n2s-town-manual-add input {
    flex: 1 1 auto;
}
.n2s-town-warning {
    color: var(--n2s-accent-red, #cf222e);
}
.n2s-town-jichikai-block {
    margin: 4px 0 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--n2s-border, #d0d7de);
}
.n2s-town-jichikai-add {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.n2s-town-jichikai-add input {
    flex: 1 1 200px;
}
.n2s-jichikai-msg {
    margin: 6px 0 0;
    color: var(--n2s-text-secondary, #57606a);
    font-size: 12px;
}
.n2s-jichikai-reverse {
    margin: 4px 0 0;
    color: var(--n2s-text-secondary, #57606a);
    font-size: 12px;
}
.n2s-town-empty {
    align-self: center;
    color: var(--n2s-text-muted, #656d76);
    font-size: 12px;
}
.n2s-ev-missing-towns td {
    background: rgba(207, 34, 46, 0.06);
}

/* 関連リンクの各行（ラベル＋URL＋削除） */
.n2s-related-link-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}
.n2s-related-link-row .n2s-rl-label,
.n2s-related-link-row .n2s-rl-url { width: auto; }
.n2s-related-link-row .n2s-rl-label { flex: 0 0 30%; min-width: 0; }
.n2s-related-link-row .n2s-rl-url   { flex: 1 1 auto; min-width: 0; }
.n2s-related-link-row .n2s-rl-remove {
    flex: 0 0 auto;
    width: 28px; height: 28px; line-height: 1;
    border: 1px solid var(--n2s-border-light);
    border-radius: 6px; background: transparent;
    color: var(--n2s-text-secondary); cursor: pointer;
}
.n2s-related-link-row .n2s-rl-remove:hover {
    color: #fff; border-color: var(--n2s-danger, #e5534b); background: var(--n2s-danger, #e5534b);
}
.n2s-related-add {
    margin-top: 2px; padding: 6px 12px;
    border: 1px dashed var(--n2s-border-light); border-radius: 6px;
    background: transparent; color: var(--n2s-text-primary);
    cursor: pointer; font-size: 13px;
}
.n2s-related-add:hover { border-color: var(--n2s-accent); color: var(--n2s-accent); }

/* disabled な日時入力をグレーアウト */
.n2s-event-form input[type="datetime-local"]:disabled,
.n2s-event-form input[type="text"][readonly]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* readonly な flatpickr input がブラウザ標準でグレー背景にならないように
   テーマ変数で確実に塗りつぶす（社長視点で「グレッぽくて見えない」対策） */
.n2s-event-form input#n2s-event-start-at,
.n2s-event-form input#n2s-event-end-at {
    background: var(--n2s-bg-secondary) !important;
    color: var(--n2s-text-primary) !important;
    border: 1px solid var(--n2s-border) !important;
    cursor: pointer;
}
.n2s-event-form input#n2s-event-start-at:focus,
.n2s-event-form input#n2s-event-end-at:focus {
    border-color: var(--n2s-accent-blue) !important;
    box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.2);
}

/* ============================================================
   flatpickr カレンダーのテーマ統合
   appendTo でモーダル内に置いているので CSS 変数が継承される
   ============================================================ */
.flatpickr-calendar {
    background: var(--n2s-bg-primary) !important;
    color: var(--n2s-text-primary) !important;
    border: 1px solid var(--n2s-border) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--n2s-border) !important; }
.flatpickr-calendar.arrowTop:after  { border-bottom-color: var(--n2s-bg-primary) !important; }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--n2s-border) !important; }
.flatpickr-calendar.arrowBottom:after  { border-top-color: var(--n2s-bg-primary) !important; }

.flatpickr-months,
.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekdaycontainer,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer,
.flatpickr-time {
    background: var(--n2s-bg-primary) !important;
}
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
    color: var(--n2s-text-primary) !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent !important;
}
.flatpickr-monthDropdown-month {
    background: var(--n2s-bg-primary) !important;
    color: var(--n2s-text-primary) !important;
}

.flatpickr-day {
    color: var(--n2s-text-primary) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
    color: var(--n2s-text-muted) !important;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--n2s-bg-tertiary) !important;
    color: var(--n2s-text-primary) !important;
    border-color: var(--n2s-border-light) !important;
}
.flatpickr-day.today {
    border-color: var(--n2s-accent-blue) !important;
}
.flatpickr-day.today:hover {
    background: var(--n2s-accent-blue) !important;
    color: #ffffff !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--n2s-accent-blue) !important;
    border-color: var(--n2s-accent-blue) !important;
    color: #ffffff !important;
}

/* 月送りボタン */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--n2s-text-secondary) !important;
    fill: var(--n2s-text-secondary) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--n2s-text-secondary) !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--n2s-accent-blue) !important;
}

/* 時刻部分 */
.flatpickr-time {
    border-top: 1px solid var(--n2s-border) !important;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    background: transparent !important;
    color: var(--n2s-text-primary) !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus,
.flatpickr-time .numInputWrapper:hover,
.flatpickr-time .numInputWrapper span:hover {
    background: var(--n2s-bg-tertiary) !important;
}
.flatpickr-time .numInputWrapper span {
    border-color: var(--n2s-border) !important;
}
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--n2s-text-secondary) !important; }
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--n2s-text-secondary) !important; }
.flatpickr-time-separator,
.flatpickr-am-pm {
    color: var(--n2s-text-primary) !important;
}

.n2s-event-duplicate-list {
    margin: 6px 0 0 16px;
    padding: 0;
    color: var(--n2s-text-secondary);
    font-size: 13px;
}

.n2s-event-duplicate-list li {
    margin-bottom: 4px;
}

/* v3.2: open/close 親候補ピッカー */
.n2s-event-parent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.n2s-event-parent-pick {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--n2s-border-light, var(--n2s-border));
    background: var(--n2s-bg-secondary);
    color: var(--n2s-text-primary);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
.n2s-event-parent-pick:hover {
    border-color: var(--n2s-accent-blue, #58a6ff);
    background: var(--n2s-bg-tertiary, var(--n2s-bg-secondary));
}
.n2s-event-parent-pick.is-selected {
    border-color: var(--n2s-accent-green, #3fb950);
    background: rgba(63, 185, 80, 0.12);
    font-weight: 600;
}
.n2s-event-parent-pick.is-selected::after {
    content: ' ✓ 紐付け中';
    color: var(--n2s-accent-green, #3fb950);
    font-weight: 400;
    margin-left: 4px;
}

/* v3.3.10: 親候補に match_reasons バッジを表示
 * 文字色は var(--n2s-text-primary) でダーク/ライト両対応（feedback_theme_text_color_rule 厳守）。
 * 背景・枠線は accent カラーの低 alpha 版で識別性を出す。
 */
.n2s-event-parent-pick .n2s-parent-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--n2s-text-primary);
    border: 1px solid var(--n2s-border);
    background: var(--n2s-bg-tertiary);
    vertical-align: middle;
}
.n2s-event-parent-pick .n2s-parent-badge-store {
    border-color: var(--n2s-accent-green, #3fb950);
    background: rgba(63, 185, 80, 0.16);
}
.n2s-event-parent-pick .n2s-parent-badge-address {
    border-color: var(--n2s-accent-blue, #58a6ff);
    background: rgba(88, 166, 255, 0.16);
}

/* v2.6.0 B1: 店マスタピッカー（親候補ピッカーと同じ見た目・ダーク/ライト両対応） */
.n2s-event-store-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.n2s-event-store-pick {
    text-align: left;
    padding: 8px 12px;
    border: 1px solid var(--n2s-border-light, var(--n2s-border));
    background: var(--n2s-bg-secondary);
    color: var(--n2s-text-primary);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
.n2s-event-store-pick:hover {
    border-color: var(--n2s-accent-blue, #58a6ff);
    background: var(--n2s-bg-tertiary, var(--n2s-bg-secondary));
}
.n2s-event-store-pick.is-selected {
    border-color: var(--n2s-accent-green, #3fb950);
    background: rgba(63, 185, 80, 0.12);
    font-weight: 600;
}
.n2s-event-store-pick.is-selected::after {
    content: ' ✓ 選択中';
    color: var(--n2s-accent-green, #3fb950);
    font-weight: 400;
    margin-left: 4px;
}

/* v2.6.0 B2: 住所フォールバックボタン */
.n2s-address-fallback-btn {
    margin-top: 6px;
}

/* v2.6.0 B5: 到達状態チェックリスト（文字色は text-primary 基調・OK/NG は左ボーダーで識別） */
.n2s-event-readiness-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}
.n2s-readiness-line {
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--n2s-text-primary);
    background: var(--n2s-bg-secondary);
    border-left: 3px solid var(--n2s-border);
}
.n2s-readiness-line.is-ok {
    border-left-color: var(--n2s-accent-green, #3fb950);
    background: rgba(63, 185, 80, 0.10);
}
.n2s-readiness-line.is-ng {
    border-left-color: var(--n2s-accent-yellow, #d29922);
    background: rgba(210, 153, 34, 0.10);
}

/* v3.3.10: チラシ解析ボタン群と常駐バナー */
.n2s-flyer-force-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
}
.n2s-flyer-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid var(--n2s-border);
    background: var(--n2s-bg-tertiary);
    color: var(--n2s-text-primary);
    font-size: 13px;
    line-height: 1.5;
}
.n2s-flyer-banner .n2s-flyer-banner-icon {
    flex: 0 0 auto;
    font-size: 18px;
}
.n2s-flyer-banner .n2s-flyer-banner-text {
    flex: 1 1 auto;
}
.n2s-flyer-banner .n2s-flyer-banner-close {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: 1px solid var(--n2s-border);
    color: var(--n2s-text-primary);
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
}
.n2s-flyer-banner .n2s-flyer-banner-close:hover {
    background: var(--n2s-bg-secondary);
}
.n2s-flyer-banner.is-progress {
    border-color: var(--n2s-accent-blue, #58a6ff);
    background: rgba(88, 166, 255, 0.10);
}
.n2s-flyer-banner.is-success {
    border-color: var(--n2s-accent-green, #3fb950);
    background: rgba(63, 185, 80, 0.14);
}
.n2s-flyer-banner.is-error {
    border-color: var(--n2s-accent-red, #f85149);
    background: rgba(248, 81, 73, 0.14);
}
/* 進捗バナーのアイコンは回して「動いてる感」を出す */
.n2s-flyer-banner.is-progress .n2s-flyer-banner-icon {
    display: inline-block;
    animation: n2s-flyer-spin 1.1s linear infinite;
}

/* チラシ解析中：フッタの解析ボタン自体に回転スピナー＋「取得中…」を出す（クリック位置で動作中が分かる） */
#n2s-event-flyer-force-btn.is-analyzing {
    opacity: 1;
    cursor: progress;
}
#n2s-event-flyer-force-btn.is-analyzing::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid var(--n2s-accent-blue, #58a6ff);
    border-top-color: transparent;
    border-radius: 50%;
    animation: n2s-flyer-spin 0.8s linear infinite;
}
@keyframes n2s-flyer-spin { to { transform: rotate(360deg); } }

.n2s-chl-merge,
.n2s-event-decision {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}
.n2s-chl-merge-box,
.n2s-event-decision-box {
    width: min(520px, 92vw);
    max-height: min(680px, 90vh);
    overflow: auto;
    padding: 20px;
    border: 1px solid var(--n2s-border);
    border-radius: 8px;
    background: var(--n2s-bg-primary);
    color: var(--n2s-text-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.n2s-chl-merge-title,
.n2s-event-decision-title {
    margin: 0 0 6px;
    color: var(--n2s-text-primary);
    font-weight: 700;
}
.n2s-chl-merge-desc,
.n2s-event-decision-desc {
    margin: 0 0 10px;
    color: var(--n2s-text-secondary);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.n2s-chl-merge-preview {
    max-height: 220px;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--n2s-border);
    border-radius: 6px;
    background: var(--n2s-bg-tertiary);
    color: var(--n2s-text-primary);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.n2s-chl-merge-actions,
.n2s-event-decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

/* フッタ: モーダル下に固定 */
.n2s-event-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--n2s-border);
    background: var(--n2s-bg-secondary);
    margin: 0;
}
.n2s-event-footer-left,
.n2s-event-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.n2s-event-footer-left {
    justify-content: flex-start;
}
.n2s-event-footer-right {
    justify-content: flex-end;
    margin-left: auto;
}

/* メッセージ枠は grid とフッタの間に表示する */
.n2s-event-form-message {
    flex: 0 0 auto;
}

.n2s-event-form .n2s-button {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid var(--n2s-border);
    background: var(--n2s-bg-tertiary);
    color: var(--n2s-text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
}

.n2s-event-form .n2s-button:hover {
    background: var(--n2s-bg-secondary);
}

.n2s-event-form .n2s-button-primary {
    background: var(--n2s-accent-blue);
    color: var(--n2s-text-primary);
    border-color: var(--n2s-accent-blue);
}

.n2s-event-form .n2s-button-primary:hover {
    opacity: 0.9;
}

/* メッセージ */
.n2s-event-form-message {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--n2s-text-primary);
    display: none;
}

.n2s-event-form-message.is-error {
    display: block;
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid var(--n2s-accent-red);
}

.n2s-event-form-message.is-success {
    display: block;
    background: rgba(63, 185, 80, 0.12);
    border: 1px solid var(--n2s-accent-green);
}

/* ToDo 一覧画面の「イベント登録」ボタン */
.n2s-event-register-btn {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--n2s-border);
    background: var(--n2s-bg-tertiary);
    color: var(--n2s-text-primary);
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
}

.n2s-event-register-btn:hover {
    background: var(--n2s-bg-secondary);
    border-color: var(--n2s-accent-blue);
    color: var(--n2s-accent-blue);
}

/* ============================================================
   ショートコード出力（読者向け、フロント側）
   ============================================================ */

.n2events-list {
    margin: 1.5em 0;
}

.n2events-list.n2events-empty p {
    color: var(--n2s-text-muted, #666);
    font-style: italic;
    text-align: center;
    padding: 1em;
}

.n2events-group {
    margin-bottom: 1.5em;
}

.n2events-group-heading {
    font-size: 1.05em;
    margin: 0 0 0.5em;
    padding: 0.3em 0.6em;
    background: var(--n2s-bg-tertiary, #f3f4f6);
    color: var(--n2s-text-primary, #1f2328);
    border-left: 4px solid var(--n2s-accent-blue, #388bfd);
    border-radius: 2px;
}

.n2event-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--n2s-border, #e5e7eb);
    border-radius: 6px;
    margin-bottom: 10px;
    background: var(--n2s-bg-primary, #ffffff);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.n2event-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.n2event-flyer {
    flex: 0 0 auto;
    max-width: 140px;
}

.n2event-flyer-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.n2event-body {
    flex: 1 1 auto;
    min-width: 0;
}

.n2event-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    background: var(--n2s-bg-tertiary, #f3f4f6);
    color: var(--n2s-text-secondary, #424a53);
    margin-bottom: 4px;
}

.n2event-type-badge.n2event-type-matsuri {
    background: rgba(248, 197, 81, 0.18);
    color: var(--n2s-accent-yellow, #c9740b);
}
.n2event-type-badge.n2event-type-open {
    background: rgba(63, 185, 80, 0.18);
    color: var(--n2s-accent-green, #2da44e);
}
.n2event-type-badge.n2event-type-close {
    background: rgba(248, 81, 73, 0.18);
    color: var(--n2s-accent-red, #cf222e);
}

.n2event-title {
    margin: 0.2em 0 0.3em;
    font-size: 1.05em;
    color: var(--n2s-text-primary, #1f2328);
    line-height: 1.4;
}

.n2event-title a {
    color: inherit;
    text-decoration: none;
}

.n2event-title a:hover {
    text-decoration: underline;
}

.n2event-article-link {
    margin: 0.4em 0 0;
    font-size: 0.9em;
}

.n2event-article-link a {
    color: var(--n2s-accent-blue, #0969da);
    text-decoration: none;
    font-weight: 600;
}

.n2event-article-link a:hover {
    text-decoration: underline;
}

.n2event-meta {
    margin: 0.2em 0;
    font-size: 0.9em;
    color: var(--n2s-text-secondary, #424a53);
}

.n2event-meta .n2event-sep {
    color: var(--n2s-text-muted, #6b7280);
    margin: 0 0.2em;
}

.n2event-desc {
    margin: 0.3em 0;
    color: var(--n2s-text-primary, #1f2328);
    font-size: 0.95em;
    line-height: 1.5;
}

.n2event-contributor {
    margin: 0.4em 0 0;
    font-size: 0.85em;
    color: var(--n2s-text-muted, #6b7280);
}

.n2event-status {
    margin-top: 0.4em;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: 600;
}

.n2event-status-cancelled {
    background: rgba(248, 81, 73, 0.18);
    color: var(--n2s-accent-red, #cf222e);
}

.n2event-status-postponed {
    background: rgba(248, 197, 81, 0.18);
    color: var(--n2s-accent-yellow, #c9740b);
}

.n2event-map a {
    font-size: 0.85em;
}

@media (max-width: 560px) {
    .n2event-item {
        flex-direction: column;
    }
    .n2event-flyer {
        max-width: 100%;
    }
}

/* ============================================================
 * 管理画面: イベント一覧（events-list.php）
 * バッジ文字色は必ず var(--n2s-text-primary)（ダーク/ライト両対応）
 * ============================================================ */
.n2s-ev-table .n2s-ev-muted {
    color: var(--n2s-text-muted);
}

/* 2026-10-11: 住所・地図が会場名だけの自動推定（要確認）のバッジと、モーダル住所欄の出どころ表示 */
.n2s-ev-table .n2s-ev-geo-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
    background: rgba(214, 137, 16, 0.18);
    border: 1px solid rgba(214, 137, 16, 0.6);
    color: var(--n2s-text-primary);
}
.n2s-event-modal .n2s-geo-hint {
    margin: 6px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    background: rgba(214, 137, 16, 0.14);
    border: 1px solid rgba(214, 137, 16, 0.5);
    color: var(--n2s-text-primary);
}

/* v3.3.10: イベント一覧の「すべて／ゴミ箱」タブ（.subsubsub）の文字色が
 * WP デフォルトだとダークモードで暗い灰になり読みにくい問題を fix。
 * テーマ変数で明示してダーク／ライト両対応にする（feedback_theme_text_color_rule 厳守）。
 */
.n2s-wrap .subsubsub {
    color: var(--n2s-text-primary);
}
.n2s-wrap .subsubsub li,
.n2s-wrap .subsubsub li a {
    color: var(--n2s-text-primary);
}
.n2s-wrap .subsubsub li a:hover {
    color: var(--n2s-accent-blue, #58a6ff);
}
.n2s-wrap .subsubsub li a.current,
.n2s-wrap .subsubsub li a.current:hover {
    color: var(--n2s-text-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--n2s-accent-blue, #58a6ff);
    padding-bottom: 2px;
}
.n2s-wrap .subsubsub .count {
    color: var(--n2s-text-secondary);
    margin-left: 2px;
}
.n2s-ev-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.n2s-ev-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--n2s-text-primary);
    background: var(--n2s-bg-tertiary);
    border: 1px solid var(--n2s-border);
}
.n2s-ev-badge-published {
    border-color: var(--n2s-accent-green);
    box-shadow: inset 3px 0 0 var(--n2s-accent-green);
}
.n2s-ev-badge-draft {
    border-color: var(--n2s-border-light);
    box-shadow: inset 3px 0 0 var(--n2s-border-light);
}
.n2s-ev-badge-cancelled {
    border-color: var(--n2s-accent-red);
    box-shadow: inset 3px 0 0 var(--n2s-accent-red);
}
.n2s-ev-badge-postponed {
    border-color: var(--n2s-accent-yellow);
    box-shadow: inset 3px 0 0 var(--n2s-accent-yellow);
}
.n2s-ev-badge-archived {
    border-color: var(--n2s-text-muted);
    box-shadow: inset 3px 0 0 var(--n2s-text-muted);
    opacity: 0.85;
}

/* 夏祭り専用ステータスバッジ（events-list）。サイズは .n2s-ev-badge 基底のまま。 */
/* 非公開（下書き）= ToDo の非公開バッジと同じ赤っぽい見た目（admin.css .n2s-status-private） */
.n2s-ev-badge-matsuri-private {
    background: rgba(248, 81, 73, 0.15);
    color: var(--n2s-accent-red);
    border-color: transparent;
    box-shadow: none;
}
/* きょう（公開＋内容あり）= 緑 */
.n2s-ev-badge-matsuri-today {
    background: rgba(63, 185, 80, 0.15);
    color: var(--n2s-accent-green);
    border-color: transparent;
    box-shadow: none;
}
/* まとめ（公開・内容なし）= 黄色（ToDoの下書きと同じ黄色tint） */
.n2s-ev-badge-matsuri-matome {
    background: rgba(210, 153, 34, 0.15);
    color: var(--n2s-accent-yellow);
    border-color: transparent;
    box-shadow: none;
}
/* 町内限定（タイトル右）= 青。ステータスバッジと同じピル見た目でタイトルの右に並べる。 */
.n2s-ev-badge-town-local {
    margin-left: 6px;
    vertical-align: middle;
    background: rgba(9, 105, 218, 0.15);
    color: var(--n2s-accent-blue, #0969da);
    border-color: transparent;
    box-shadow: none;
}
/* 対象町未設定（誰にも出ない）= 赤で警告。 */
.n2s-ev-badge-town-local.is-error {
    background: rgba(248, 81, 73, 0.15);
    color: var(--n2s-accent-red);
    font-weight: 700;
}

/* ============================================================
 * フロント: 近所の夏祭りスケジュール まとめ（preset="matsuri_matome"）
 * 見出し(h2/h3)・本文はテーマ素のスタイルに任せ、確立フォーマットに合わせる。
 * ここで足すのは「チラシ画像」と「マップ」だけ。
 * ============================================================ */
.n2matome {
    margin: 1.2em 0;
}

/* チラシ（必ず表示・フルサイズ） */
.n2matome-flyer {
    margin: 0.5em 0;
}
.n2matome-flyer-wanted {
    margin: 0.5em 0;
    font-size: 9pt;
}
.n2matome-flyer-img {
    max-width: 100%;
    height: auto;
    display: block;
}
.n2matome-content-highlights {
    margin: 0.2em 0 0.6em;
    padding-left: 1.3em;
    font-size: 9pt;
}

/* 関連記事カード（告知/レポ） */
.n2matome-postcard {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 0.5em 0;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: box-shadow 0.15s ease;
}
.n2matome-postcard:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.n2matome-postcard-thumb {
    flex: 0 0 auto;
}
.n2matome-postcard-thumb-img {
    width: 90px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.n2matome-postcard-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.n2matome-postcard-role {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72em;
    font-weight: 700;
    color: #fff;
    background: #e0a800;
    padding: 1px 8px;
    border-radius: 10px;
    margin-bottom: 3px;
}
.n2matome-postcard-title {
    font-weight: 600;
    line-height: 1.4;
    color: #1f2328;
}
.n2matome-postcard-date {
    font-size: 0.82em;
    color: #6b7280;
    margin-top: 2px;
}

/* チラシ選択ギャラリー（モーダル内・アップロード/候補クリック→選択済みリスト） */
.n2s-event-flyer-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.n2s-flyer-zone {
    /* 外枠・背景なし（社長指示 2026-06-15）。フォームに溶け込ませる */
    border: 0;
    background: transparent;
    padding: 0;
}
.n2s-flyer-zone-head {
    margin-bottom: 6px;
    color: var(--n2s-text-primary, #1f2328);
    font-size: 12px;
    font-weight: 700;
}
.n2s-flyer-upload-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.n2s-flyer-upload-button.button {
    min-height: 30px;
    line-height: 28px;
}
.n2s-flyer-upload-status {
    font-size: 12px;
    color: var(--n2s-text-muted, #656d76);
}
.n2s-flyer-upload-status {
    min-height: 16px;
    margin-top: 6px;
}
.n2s-flyer-upload-status.is-error {
    color: #cf222e;
}
.n2s-flyer-upload-input {
    display: none;
}
.n2s-event-flyer-gallery,
.n2s-event-flyer-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 100px;
}
.n2s-event-flyer-selected {
    align-items: flex-start;
    border: 1px dashed var(--n2s-border-light, #afb8c1);
    border-radius: 6px;
    background: var(--n2s-bg-secondary, #f6f8fa);
    padding: 8px;
}
.n2s-event-flyer-gallery .n2s-flyer-empty,
.n2s-event-flyer-gallery .n2s-flyer-loading {
    margin: auto 0;
    color: var(--n2s-text-muted, #656d76);
    font-size: 12px;
}
.n2s-flyer-empty {
    margin: 6px 0 0;
    color: var(--n2s-text-muted, #656d76);
    font-size: 12px;
}
.n2s-flyer-thumb {
    position: relative;
    width: 104px;
    min-height: 92px;
    border: 2px solid var(--n2s-border, #d0d7de);
    border-radius: 6px;
    padding: 4px;
    background: var(--n2s-bg-secondary, #f6f8fa);
    cursor: pointer;
}
.n2s-event-flyer-selected .n2s-flyer-thumb {
    cursor: grab;
}
.n2s-event-flyer-selected .n2s-flyer-thumb:active {
    cursor: grabbing;
}
.n2s-flyer-thumb.is-active {
    border-color: var(--n2s-accent-blue, #0969da);
    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.22);
}
/* 「代表」概念は廃止。先頭は順番バッジ(1)で示すだけで特別な強調はしない。 */
.n2s-event-flyer-gallery .n2s-flyer-thumb.is-in-list {
    border-color: var(--n2s-accent-green, #1a7f37);
    background: rgba(26, 127, 55, 0.08);
}
.n2s-flyer-preview {
    display: block;
    width: 100%;
    height: 78px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
}
.n2s-flyer-preview img,
.n2s-flyer-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.n2s-flyer-order-badge,
.n2s-flyer-primary-badge,
.n2s-flyer-guess,
.n2s-flyer-added-badge,
.n2s-flyer-remove {
    position: absolute;
    z-index: 2;
}
.n2s-flyer-order-badge {
    left: 6px;
    top: 6px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: rgba(31, 35, 40, 0.86);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.n2s-flyer-primary-badge {
    left: 6px;
    bottom: 6px;
    display: none;
    border-radius: 4px;
    background: var(--n2s-accent-green, #1a7f37);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    padding: 1px 5px;
}
.n2s-flyer-guess {
    right: 6px;
    bottom: 6px;
    border-radius: 4px;
    background: var(--n2s-accent-yellow, #d29922);
    color: #fff;
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 5px;
}
.n2s-flyer-added-badge {
    left: 6px;
    bottom: 6px;
    display: none;
    border-radius: 4px;
    background: var(--n2s-accent-green, #1a7f37);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    padding: 1px 5px;
}
.n2s-event-flyer-gallery .n2s-flyer-thumb.is-in-list .n2s-flyer-added-badge {
    display: inline-block;
}
.n2s-flyer-remove {
    right: -7px;
    top: -7px;
    display: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--n2s-border-light, #afb8c1);
    border-radius: 50%;
    background: #fff;
    color: #cf222e;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    padding: 0;
}
.n2s-event-flyer-selected .n2s-flyer-remove {
    display: block;
}
.n2s-flyer-thumb.is-uploading,
.n2s-flyer-thumb.is-upload-error {
    cursor: default;
}
.n2s-flyer-thumb.is-uploading .n2s-flyer-preview,
.n2s-flyer-thumb.is-upload-error .n2s-flyer-preview {
    display: flex;
    height: 78px;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: #fff;
    color: var(--n2s-text-muted, #656d76);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
}
.n2s-flyer-thumb.is-upload-error {
    border-color: #cf222e;
}
.n2s-flyer-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(9, 105, 218, 0.18);
    border-top-color: var(--n2s-accent-blue, #0969da);
    border-radius: 50%;
    animation: n2s-flyer-spin 0.8s linear infinite;
}
.n2s-flyer-placeholder {
    width: 104px;
    min-height: 92px;
    border: 2px dashed var(--n2s-accent-blue, #0969da);
    border-radius: 6px;
    background: rgba(9, 105, 218, 0.08);
}

/* 全夏祭りマップ（プラスα） */
.n2matome-map-wrap {
    margin: 1.4em 0;
}
.n2matome-map {
    height: 440px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d0d7de;
    z-index: 0;
}

/* イベントモーダル: 既存の日付入力行内に出す AI 情報 */
.n2s-ai-date-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.n2s-event-modal .n2s-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 16px;
    padding: 0 4px;
    border: 1px solid var(--n2s-accent-purple);
    border-radius: 5px;
    background: rgba(130, 80, 223, 0.16);
    color: var(--n2s-text-primary);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.n2s-event-modal .n2s-ai-proposal-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid var(--n2s-accent-yellow);
    border-radius: 6px;
    background: rgba(154, 103, 0, 0.14);
    color: var(--n2s-text-primary);
    font-size: 11px;
    line-height: 1.35;
}

.n2s-event-modal .n2s-ai-proposal-chip button {
    min-height: 0;
    padding: 2px 7px;
    border: 1px solid var(--n2s-accent-yellow);
    border-radius: 4px;
    background: var(--n2s-bg-primary);
    color: var(--n2s-text-primary);
    cursor: pointer;
    font-size: inherit;
    line-height: 1.35;
}

/* 通常イベントも記事由来の関連リンク・チラシ代替SNSを確認できる。 */
.n2s-event-form.n2s-event-article-fields .n2s-form-row-related,
.n2s-event-form.n2s-event-article-fields .n2s-form-row-instagram { display: flex; }