/* Tickets Core 公開側（お客様向け）— スマホ前提の軽量CSS。
 * ★外部フォント・外部ライブラリ禁止（全社規約）。system-ui のみ。
 * ★ライブの現場は慌ただしい。慌てていても迷わない大きさ・余白にする（指示書9章）。 */

:root {
  --ink: #1b1e27; --sub: #6b7280; --line: #e2e5ec; --bg: #f7f8fa; --panel: #fff;
  --brand: #1f2937; --accent: #d94f4f; --ok: #1e7e34;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
       color: var(--ink); background: var(--bg); line-height: 1.7; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }

.site-header { background: var(--panel); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; min-height: 60px; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: .06em; color: var(--ink); text-decoration: none; }
.brand-logo { max-height: 36px; width: auto; display: block; }
.site-footer { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--sub); font-size: 12px; }
main.wrap { padding-top: 24px; }

h1 { font-size: 20px; margin: 8px 0 16px; }
h2 { font-size: 16px; margin: 28px 0 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; margin: 0 0 16px; }
.help { color: var(--sub); font-size: 13px; }
.empty { text-align: center; color: var(--sub); padding: 28px 8px; }

.notice { border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.notice-error { background: #fdf0ef; border: 1px solid #eabcb6; color: #c0392b; }
.notice-info { background: #eef5ee; border: 1px solid #bcd9c0; color: var(--ok); }

/* 公演の一覧 */
ul.events { list-style: none; margin: 0; padding: 0; }
ul.events li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
               padding: 16px; margin: 0 0 10px; }
ul.events .date { font-size: 13px; color: var(--accent); font-weight: 600; }
ul.events .title { font-size: 17px; font-weight: 700; margin: 2px 0 4px; }
ul.events .meta { font-size: 13px; color: var(--sub); }

[hidden] { display: none !important; }

/* ── Phase 4（申込フロー・マイページ）で使う部品 ─────────────────
 * ★もとは各ページが <style> で同じ内容を吐いていた（9ファイル重複）。
 *   1か所に集約したので、直すときはここだけを直せばよい。
 * ★Bill Core のトンマナに合わせる約束:
 *     ・.btn は白い基底、主ボタンは .btn-primary
 *     ・装飾は .table クラスを付けた表にしか当たらない
 *     ・フォームは label.field > span + input が唯一の型
 * ★公開側の見た目の作り込み（Retail Core の購入画面に寄せる）は Phase 9 で行う。
 */
.site-lead{color:var(--sub);font-size:14px;margin:0 0 12px}
.btn{display:inline-block;padding:12px 18px;font-size:15px;font-weight:600;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-block{display:block;width:100%;text-align:center}
.field{display:block;margin:0 0 14px}
.field>span{display:block;font-size:13px;font-weight:600;margin:0 0 4px}
.field input{width:100%;padding:10px 12px;font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
table.table{width:100%;border-collapse:collapse;font-size:14px}
table.table th,table.table td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.table th{width:38%;color:var(--sub);font-weight:600}
table.amount td.total{font-size:16px;font-weight:700}
.hero{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:20px;margin:0 0 16px}
.hero-label{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:4px;padding:2px 10px;margin:0 0 8px}
.hero-date{color:var(--accent);font-weight:600;font-size:13px;margin:0}
.hero-title{font-size:22px;font-weight:700;margin:2px 0 4px}
.hero-artist{font-size:14px;margin:0}
.hero-meta{color:var(--sub);font-size:13px;margin:2px 0 0}
.hero-phase{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.hero-phase-name{font-weight:600;margin:0}
.hero-phase-end{color:var(--sub);font-size:13px;margin:2px 0 10px}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 8px;background:var(--line);color:var(--ink);margin-left:6px}
.badge-open{background:var(--accent);color:#fff}
/* ★★受付の4状態を、文字を読まずに見分けられるようにする（2026-08-06 に足した）。
 *   それまで［受付予定］と［受付終了］は**どちらも素の .badge** で、ブラウザで
 *   実測すると背景 #e2e5ec・文字 #1b1e27 が1バイトも違わなかった。一覧は
 *   「赤が1つ＝受付中、あとは全部同じ灰色」にしか見えず、指示書9章の
 *   「受付前／受付中／受付終了／完売が**一目で**分かること」を満たしていない。
 *   ★語（4文字）が違うことは、色が同じでよい理由にならない。慌てている方は
 *     まず色で仕分けてから、必要なものだけ字を読む。
 *   ★.badge（Bill Core 系の基底）は触らず modifier だけを足す。
 *   ★明るさも段で分けてある（赤→青→灰→黒）。色覚のご事情で色相が近く見える方でも
 *     濃さの違いで並び順が読めるようにするため。 */
.badge-soon{background:#1f5fa8;color:#fff}      /* 受付予定＝これから（無効ではない） */
.badge-closed{background:var(--sub);color:#fff} /* 受付終了＝終わった */
/* 中止・販売停止の1語の札（e.php / tokusho.php）。語の原本は cancel.php の
 * EVENT_CANCEL_SHORT_LABELS。★受付の3状態と**同じ灰色にしない**——中止は
 * 「受付が終わった」のではなく「公演が無くなった」で、意味の重さが違う。 */
.badge-stop{background:#7a1f1f;color:#fff}
.event-action{margin-top:10px}
.event-note{color:var(--sub);font-size:13px;margin-top:8px}
.state{display:inline-block;font-size:15px;font-weight:700;border-radius:6px;padding:6px 12px;margin:0 0 6px}
.state-ok{background:#eef5ee;color:var(--ok)}
.state-warn{background:#fdf0ef;color:var(--accent)}
.state-wait{background:#f2f4f8;color:var(--ink)}
.state-plain{background:#f2f4f8;color:var(--sub)}
.app-no{font-size:12px;color:var(--sub);margin:0 0 4px}
.app-date{color:var(--accent);font-weight:600;font-size:13px;margin:0}
.app-title{font-size:17px;font-weight:700;margin:2px 0 4px}
.app-meta{font-size:13px;color:var(--sub);margin:0 0 4px}
.app-announce{font-size:14px;margin:8px 0 0}
.entry-no{font-size:20px;font-weight:700;margin:10px 0 0}
.links p{margin:6px 0}
ul.plain{list-style:none;margin:0;padding:0}
ul.plain li{padding:6px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:none}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:600;word-break:break-all;background:#f2f4f8;border-radius:6px;padding:8px 10px}
.terms{font-size:13px;color:var(--sub);margin-top:8px}
.logout-form{margin:24px 0}
.step{margin:26px 0 10px;font-size:15px;font-weight:700}
.step .no{display:inline-block;min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:12px;background:var(--brand);color:#fff;font-size:12px;margin-right:8px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.field .hint{display:block;font-weight:400;color:var(--sub);font-size:12px;margin-top:4px}
.req{color:var(--accent);font-size:11px;margin-left:6px}
.btn:disabled{opacity:.45;cursor:not-allowed}
table.table td.num{text-align:right;white-space:nowrap}
table.table tr.total th,table.table tr.total td{font-size:16px;font-weight:700;border-bottom:none}
.row-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.row-line:last-child{border-bottom:none}
.row-line .nm{font-weight:600}
.row-line .pr{color:var(--sub);font-size:13px}
.row-line select{width:auto;min-width:88px;padding:8px 10px;font-size:16px;border:1px solid var(--line);border-radius:8px;background:#fff}
.pick{display:block;border:1px solid var(--line);border-radius:8px;padding:12px;margin:0 0 8px;background:#fff}
.pick input{margin-right:8px}
.consent{margin:0;padding-left:1.2em;font-size:14px}
.consent li{margin:0 0 8px}
.check{display:block;padding:10px 0;font-size:14px}
.check input{width:18px;height:18px;margin-right:8px;vertical-align:-3px}
.warn{background:#fdf6ec;border:1px solid #f0d9b5;border-radius:8px;padding:12px 14px;font-size:14px;margin:0 0 16px}
.field input,.field select{width:100%;padding:10px 12px;font-size:16px;line-height:1.5;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
#card-container{min-height:92px}
.cardbox{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}
.appno{font-size:22px;font-weight:700;letter-spacing:.08em}
.links a{display:inline-block;margin:0 12px 8px 0;font-size:13px}

/* ── Phase 5（一般発売＝先着・順番待ち）で使う部品 ───────────────
 * ★在庫の数は1つも出さない（指示書6-6）。出してよいのは「残りわずか」「完売」の2語だけ。
 * ★順番待ちの画面は「いま自分がどうなっているか」を1画面で言い切る。
 *   慌てている人が読むので、いちばん大きい字は必ず「状態」か「残り時間」にする（指示書9章）。
 */
.stock-badge{display:inline-block;font-size:12px;font-weight:700;border-radius:4px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.stock-low{background:#fdf6ec;border:1px solid #f0d9b5;color:#a86a12}
/* ★★［完売］は4つの札の中で**いちばんはっきり読める**こと（2026-08-06 に直した）。
 *   もとは背景 #f2f4f8・文字 #6b7280 で、［受付中］［受付予定］［受付終了］の
 *   どれよりも薄かった。「もう買えない」がいちばん弱く出ていて、優先順位が
 *   逆転していた（お客様がいちばん先に知りたいのは、買えるか買えないか）。
 * ★赤（受付中）と混ぜないために、色ではなく**濃さ**でいちばん強くする。 */
.stock-sold{background:var(--ink);border:1px solid var(--ink);color:#fff}

/* 順番待ちページ */
.q-ev{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 16px}
.q-ev-artist{font-size:13px;color:var(--sub);margin:0}
.q-ev-title{font-size:18px;font-weight:700;margin:2px 0 4px}
.q-ev-meta{font-size:14px;margin:0}
.q-ev-phase{font-size:13px;color:var(--sub);margin:6px 0 0}
.q-hero{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px 20px;margin:0 0 16px;text-align:center}
.q-hero.is-turn{border:2px solid var(--accent)}
.q-state{font-size:19px;font-weight:700;margin:0 0 6px}
.q-lead{font-size:14px;margin:0}
.q-ahead{font-size:15px;margin:16px 0 0}
.q-ahead .n{font-size:40px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;display:inline-block;margin:0 4px}
.q-drawno{font-size:13px;color:var(--sub);margin:10px 0 0}
.q-when{font-size:17px;font-weight:700;margin:8px 0 0}
.q-timer{font-size:34px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;margin:10px 0 0}
.q-timer.is-hurry{color:var(--accent)}
.q-act{margin:16px 0 0}
.q-live{font-size:12px;color:var(--sub);margin:16px 0 0}
.q-live .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px;animation:qpulse 2s ease-in-out infinite}
.q-live .off{display:none}
.q-live.is-off .on{display:none}
.q-live.is-off .off{display:inline}
.q-live.is-off .dot{background:var(--sub);animation:none}
@keyframes qpulse{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.q-live .dot{animation:none}}
.q-why{background:#f2f4f8;border-radius:8px;padding:12px 14px;font-size:13px;margin:16px 0 0;text-align:left}
.q-why b{display:block;font-size:13px;margin:0 0 4px}
.q-why p{margin:0 0 8px}
.q-why p:last-child{margin:0}
.q-tips{margin:0;padding-left:1.2em;font-size:13px;color:var(--sub)}
.q-tips li{margin:0 0 6px}

/* 購入画面の上に貼りつく残り時間（apply.php） */
.fc-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
        background:var(--brand);color:#fff;border-radius:0 0 10px 10px;padding:10px 14px;margin:-24px -16px 16px;font-size:13px}
.fc-bar .fc-time{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-bar.is-hurry{background:var(--accent)}
.fc-over{margin:0 0 16px}

/* ── Phase 7（チケットと入場・分配）で使う部品 ───────────────────
 * ★ライブの現場は慌ただしい。この画面でいちばん大きい字は必ず
 *   「お座席」か「整理番号」にする（当日いちばん見られる情報）。
 * ★QRは白地に黒で固定する。テーマの色を当てると読み取り機が読めなくなるため、
 *   canvas の背景も枠も色を変えない。
 * ★動きは JS が進める（.tk-dot の位置・.tk-ring-fg の stroke-dashoffset）。
 *   CSS アニメーションにすると、描画が止まっていても回り続けてしまい、
 *   「静止画＝スクリーンショット」を一目で見抜くという目的を果たせない。
 */
.tk-hero{text-align:center}
.tk-hero-title{font-size:17px;font-weight:700;margin:0 0 2px}
.tk-hero-meta{font-size:13px;color:var(--sub);margin:0 0 2px}
.tk-big-label{font-size:12px;color:var(--sub);margin:14px 0 0;letter-spacing:.08em}
.tk-big{font-size:44px;font-weight:700;line-height:1.1;margin:2px 0 0;letter-spacing:.02em;word-break:break-all}
.tk-sub{font-size:13px;color:var(--sub);margin:6px 0 0}

/* QRの箱 */
.tk-qr{text-align:center}
.tk-noshot{display:inline-block;background:#fdf0ef;border:1px solid #eabcb6;color:var(--accent);
           font-size:13px;font-weight:700;border-radius:6px;padding:6px 12px;margin:0 0 14px}
.tk-qr-frame{position:relative;display:block;max-width:340px;margin:0 auto;padding:0;line-height:0}
.tk-qr-canvas{display:block;margin:0 auto;background:#fff;border-radius:4px}
.tk-dot{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;
        background:var(--accent);transform:translate(-50%,-50%);pointer-events:none}
.tk-live{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px 0 0}
.tk-ring{width:48px;height:48px;flex:none;transform:rotate(-90deg)}
.tk-ring-bg{fill:none;stroke:var(--line);stroke-width:4}
.tk-ring-fg{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.tk-live-text{text-align:left}
.tk-clock{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;margin:0}
.tk-count{font-size:13px;color:var(--sub);margin:2px 0 0}
.tk-code-label{font-size:12px;color:var(--sub);margin:16px 0 4px}
.tk-code{letter-spacing:.06em;text-align:center}
.tk-note{font-size:13px;color:var(--accent);margin:12px 0 0}
.tk-tips{margin:16px 0 0;padding-left:1.2em;font-size:13px;color:var(--sub);text-align:left}
.tk-tips li{margin:0 0 6px}

/* 入場済み・分配済み・無効 */
.tk-in{text-align:center;border-color:#bcd9c0;background:#eef5ee}
.tk-in-title{font-size:22px;font-weight:700;color:var(--ok);margin:0}
.tk-in-time{font-size:16px;font-weight:600;margin:4px 0 8px}
.tk-shared-title,.tk-void-title{font-size:17px;font-weight:700;margin:0 0 6px}
.tk-void{border-color:#eabcb6}
.tk-void-title{color:var(--accent)}

/* 法定表示（★不正転売禁止法の3要件。文言の原本は app/inc/legal.php） */
.legal-h{font-size:13px;font-weight:700;margin:14px 0 4px}
.legal-h:first-child{margin-top:0}
.legal-p{font-size:13px;color:var(--sub);margin:0}
.legal-extra{margin-top:10px}

/* 受け取り画面 */
.tk-claim-lead{font-size:15px;font-weight:600;margin:0 0 10px}

/* マイページのチケット一覧と分配 */
.tk-list{border-top:1px solid var(--line);margin:14px 0 0;padding:12px 0 0}
.tk-list-head{font-size:13px;font-weight:700;margin:0 0 8px}
.tk-list-note{margin:10px 0 0}
.tk-item{border:1px solid var(--line);border-radius:8px;padding:12px;margin:0 0 10px;background:#fff}
.tk-item-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.tk-item-no{font-size:20px;font-weight:700}
.tk-item-sub{font-size:12px;color:var(--sub)}
.tk-badge{display:inline-block;font-size:13px;font-weight:700;border-radius:6px;padding:4px 10px;margin:0 0 6px}
.tk-badge-ok{background:#eef5ee;color:var(--ok)}
.tk-badge-share{background:#f2f4f8;color:var(--ink)}
.tk-badge-wait{background:#fdf6ec;color:#a86a12}
.tk-badge-plain{background:#f2f4f8;color:var(--sub)}
.tk-form{display:inline-block;margin:8px 8px 0 0}
.tk-share{margin:8px 0 0}
.tk-url{width:100%;padding:10px 12px;font-size:13px;line-height:1.5;border:1px solid var(--line);
        border-radius:8px;background:#f7f8fa;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.tk-share-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.tk-copied{font-size:13px;color:var(--ok);font-weight:600;margin:6px 0 0}

/* ══════════════════════════════════════════════════════════════
 * Phase 9（公開サイトの作り込み）
 * ★Bill Core のトンマナに従い、末尾に Phase 9 ぶんだけ足す。
 *   ①.btn は白い基底・主ボタンは .btn-primary（上で定義済み。ここでは増やさない）
 *   ②装飾は .table クラスを付けた表にしか当たらない（.tokusho も .table を併記する）
 *   ③フォームは label.field > span + input が唯一の型
 *   ④★[hidden] の指定を絶対に消さない（apply.php / mypage.php / queue.php の
 *     JS がこれを前提にしている。消すとお届け先の欄が出しっぱなしになる）
 * ══════════════════════════════════════════════════════════════ */

/* ヘッダのロゴ（未設定時の既定マーク） */
.brand{display:flex;align-items:center;gap:8px}
.brand-mark{flex:none;color:var(--brand)}
.brand-name{font-weight:700}

/* ヘッダ下の導線 */
.site-nav{display:flex;gap:8px;margin:0 0 16px}
.site-nav-item{flex:1;text-align:center;padding:10px 8px;font-size:14px;font-weight:600;
               border:1px solid var(--line);border-radius:8px;background:#fff;
               color:var(--ink);text-decoration:none}
.site-nav-item.is-current{background:var(--brand);border-color:var(--brand);color:#fff}

/* フッターの法定リンク（★ここが消えると規約類のページは実質存在しないのと同じ） */
.site-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 12px;padding:0}
.site-links a{color:var(--sub);text-decoration:underline}
.site-copy{margin:0}

/* ── 公演カード（トップ・アーティストページ・公演ページで共通）───────── */
.ev-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
         padding:16px;margin:0 0 12px}
.ev-date{font-size:13px;color:var(--accent);font-weight:600;margin:0}
.ev-title{font-size:17px;font-weight:700;margin:2px 0 4px}
.ev-title a{color:var(--ink);text-decoration:none}
.ev-meta{font-size:13px;color:var(--sub);margin:0}
.ev-phases{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.ev-phase{padding:6px 0;border-top:1px solid var(--line)}
.ev-phase.is-open{font-weight:600}
/* ★受付前（is-soon）の文字色を落とさない（2026-08-06 に直した）。
 *   もとは `.ev-phase.is-soon{color:var(--sub)}` で灰色にしていた。ところが
 *   隣のカードには灰色の［受付終了］が並ぶので、**同じ弱さで並んだ「受付予定」を
 *   『もう終わった』と読む**。慌てて開いた方は、次の受付を待たずにそのまま離脱する。
 *   受付前は「これから」であって「無効」ではない。
 * ★状態の区別は front_phase_state_badge() の札（.badge / .badge-open）が持つので、
 *   行の文字色まで落とす必要はない。
 * ★クラス自体は残す（front_event_card() が is-soon を出しており、
 *   将来ここに指定を足したくなったときの足場になる）。★灰色に戻さないこと。 */
.ev-phase.is-soon{color:var(--ink)}
/* 終わった受付の1行（★受付が全部終わった公演のカードにだけ1行だけ出る。
 *   「先行抽選 2026年8月7日(金) 23:59 に受付を終了しました」）。
 * ★灰色に落とさない。締切を勘違いして開いた方が**その日時を確かめに来ている**ので、
 *   ここは読ませる行であって、薄く添える飾りではない。 */
.ev-phase.is-closed{color:var(--ink)}
/* 申し込みへの導線。★2026-08-06 から**アーティストページのカードにも**出る
 *   （もとは大バナーだけで、/a.php には btn-primary が1つも無かった）。
 *   .btn-block はカードの内側いっぱいに広がるだけなので、.ev-card の padding の
 *   中に収まる。ここで幅や余白を上書きしない（トップと2種類の見え方に割れる）。
 * ★.ev-cta は**申し込みへの導線だけ**（.btn.btn-primary）。押しても申し込めない
 *   ボタンをここに混ぜないこと——「このページに申込の入口はいくつあるか」を
 *   grep や試験で数えられなくなる（実際、試験が class="ev-cta" の個数で
 *   「受付中の公演にだけボタンが出ている」ことを見張っている）。 */
.ev-cta{margin:12px 0 0}
/* ★受付前・受付終了・完売・**販売停止・中止**のカードに出す［公演の詳細を見る］
 *   （2026-08-06 に足した。販売停止・中止は同日中に足し直した）。
 *   これが無いと、受付中でないカードには**押せるものが1つも無い**。見出しはリンク
 *   なのだが、下の `.ev-title a` が色も下線も消しているのでリンクだと分からない。
 *   「いくらなのか」「いつから買えるのか」を確かめたい方が、公演ページへ行けないまま
 *   離れていた（受付前のカードがいちばん深刻で、その方は待てば買えたはずの方）。
 * ★★販売停止のカードは、そのうえ文言が「詳細が決まり次第ご案内いたします」なので、
 *   **いちばん詳細を知りたい方に、詳細へ行く道が無い**状態だった。
 *   中止のカードも同じで、行き先の公演ページには返金の範囲と時期、そして
 *   販売事業者（＝返金の請求先）の特商法表記への導線がある。
 * ★このボタンは .ev-stop（赤い停止・中止のお知らせ）の**すぐ下**にも並ぶ。
 *   .ev-stop の下余白は 0 なので、ここの上余白 12px がそのまま間隔になる。
 * ★Bill Core のトンマナどおり**白い基底の `.btn`**（主ボタンは `.btn-primary`）。
 *   取り違えると、申し込めないボタンが青く目立つ。
 * ★余白は .ev-cta と同じ値。見え方を2種類に割らないため、片方を直したら両方直す。 */
.ev-more{margin:12px 0 0}
/* 中止・販売停止のお知らせ（★一覧から黙って消さない） */
.ev-stop{margin:10px 0 0;padding:10px 12px;border-radius:8px;font-size:14px;
         background:#fdf0ef;border:1px solid #eabcb6;color:#c0392b}

/* 受付中公演の大バナー（トップ上部。★一目でチケット販売サイトと分かるように） */
.ev-banner{border-color:var(--brand);border-width:2px;padding:20px}
.ev-banner .ev-title{font-size:22px;line-height:1.4}
.ev-banner .ev-date{font-size:15px}

/* 公演ページの明細（★Retail Core の購入画面に寄せる＝内訳を行で見せ、合計を最後に大きく） */
.ev-detail{margin:0 0 16px}
.ev-price-total{display:flex;justify-content:space-between;align-items:baseline;
                border-top:2px solid var(--line);margin:10px 0 0;padding:10px 0 0}
.ev-price-total .label{font-size:14px;font-weight:600}
.ev-price-total .amount{font-size:22px;font-weight:700}
.ev-section{margin:0 0 10px}
.ev-section-h{font-size:13px;font-weight:700;color:var(--sub);margin:0 0 4px}

/* 中止のお知らせ欄（トップの独立枠） */
.notice-cancel{background:#fdf6ec;border:1px solid #e6d3ae;border-radius:10px;
               padding:16px;margin:0 0 16px}
.notice-cancel h2{margin:0 0 8px;font-size:15px}
.notice-cancel ul{list-style:none;margin:0;padding:0;font-size:14px}
.notice-cancel li{padding:6px 0;border-top:1px solid #e6d3ae}
.notice-cancel li:first-child{border-top:0}

/* ── 規約・個人情報の取扱い（長文）───────────────────────────── */
.legal-doc{font-size:14px;line-height:1.9}
.legal-doc .legal-meta{font-size:13px;color:var(--sub);margin:0 0 16px}
.legal-doc .legal-lead{margin:0 0 12px}
.legal-doc .legal-high{list-style:none;margin:0 0 20px;padding:14px 16px;
                       background:#fdf6ec;border:1px solid #e6d3ae;border-radius:8px;font-weight:600}
.legal-doc .legal-high li{padding:4px 0}
.legal-doc h2{font-size:15px;margin:22px 0 8px;padding-top:14px;border-top:1px solid var(--line)}
.legal-doc h2:first-of-type{border-top:0}
.legal-p2{margin:0 0 8px}
.legal-list{margin:0 0 10px;padding-left:1.3em}
.legal-list li{margin:0 0 4px}
/* ★券面からの引用（legal.php の定数）。地の文と見分けがつく形にする */
.legal-quote{margin:10px 0;padding:12px 14px;border-left:4px solid var(--brand);
             background:#f7f8fa;border-radius:0 8px 8px 0;font-size:13px;color:var(--ink)}

/* ── 特定商取引法に基づく表記（★.table を併記して装飾を当てる）──────── */
/* ★white-space:pre-line は使わない。改行は tokusho_table_html() が nl2br_h() で
 *   <br> にしているので、両方効かせると1行おきに空行が入る。 */
.tokusho td{line-height:1.8}
/* ★`.tokusho .tokusho-note` はここに書かない。同じ4つの指定が下の
 *   `.tokusho-note`（表の外でも効く版）にもあり、**中身が1文字も違わない写し**が
 *   2つ並んでいた。片方だけ直された日に、表の中と外で補足の見た目が割れる。 */
/* ★空欄は「—」で埋めない。社員ログイン中だけ赤字で出す（お客様には見せない） */
.tokusho .tokusho-missing{color:#c0392b;font-weight:700}
/* ★スマホでは項目名と中身を縦に積む（Retail Core の特商法ページと同じ作法）。
 *   .table の th は幅38%固定なので、そのままだと「役務の提供時期」のような
 *   長い項目名が1文字ずつ折り返され、肝心の中身が読めなくなる。
 *   法定表示は「書いてある」だけでなく「読める」ことに意味がある。 */
@media (max-width:600px){
  .tokusho,.tokusho tbody,.tokusho tr,.tokusho th,.tokusho td{display:block;width:100%}
  .tokusho th{border-bottom:none;padding-bottom:2px}
  .tokusho td{padding-top:0;padding-bottom:14px}
}

/* ── 購入画面（★Retail Core の購入画面に寄せる。指示書9章）──────────
 * お客様の層が同じなので、Retail Core（shop.s3cr.tokyo）で使っている
 * 「金額の見せ方」に揃える:
 *   ・内訳は1行1項目。品目は左・金額は右
 *   ・合計だけを最後に大きく（Retail Core の .summary .line.total と同じ考え方）
 *   ・数字は等幅（tabular-nums）。桁が揃わないと金額を読み違える
 * ★HTML には手を入れていない。apply_confirm.php が既に出している
 *   `table.table` ＋ `tr.total` ＋ `td.num` の見た目だけを寄せている
 *   （申込フローのPHPは Phase 4 の担当ぶんなので1文字も触らない）。
 * ★これらは上の .btn / .table / .field の約束の上に足しているだけで、
 *   Bill Core のトンマナ（白い基底の .btn・主は .btn-primary）は崩さない。 */
table.table td.num{font-variant-numeric:tabular-nums}
table.table tr.total th,table.table tr.total td{border-top:2px solid var(--line);padding-top:12px}
table.table tr.total td{font-size:22px;font-weight:800;line-height:1.3}
/* 合計行の見出しは大きくしない（★大きくすべきは金額のほうだけ） */
table.table tr.total th{font-size:14px;color:var(--ink)}
/* 公演ページの合計（front の .ev-price-total）も同じ見え方に揃える */
.ev-price-total .amount{font-weight:800;font-variant-numeric:tabular-nums}

/* ★規約の条文へ直接リンクしたとき（フッターの「チケットの転売について」＝
 *   view.php の FRONT_RESALE_URL ＝ /terms.php#term12）に、
 *   見出しが画面のいちばん上ぎりぎりに来ないようにする。 */
.legal-doc h2{scroll-margin-top:16px}

/* フッターの運営者名（★特商法の表記そのものは /tokusho.php が原本。
 *   ここは「誰が売っているサイトか」を足元に出すためだけの1行） */
.site-operator{display:block;margin-top:2px}

/* ══════════════════════════════════════════════════════════════
 * Phase 9 の手直し（2026-08-06）
 * ★index.php / a.php / e.php にあった style 属性 21 個を、ここへ集約した。
 *   style 属性は「どのファイルにあるか」を探せないので、同じ意味の余白が
 *   3ページで少しずつ違う値に育つ（実際に margin が 6px / 8px / 10px に割れていた）。
 * ★[hidden]{display:none!important} の指定は上のほうにある。**絶対に消さないこと**
 *   （apply.php / mypage.php / queue.php の JS がこれを前提にしており、
 *     消すとお届け先の欄が出しっぱなしになる）。
 * ══════════════════════════════════════════════════════════════ */

/* 見出しの3段目。★style.css に h3 の指定が無く、ブラウザ既定（1.17em ≒ 19px）で
 *   h2（16px）より**大きく**描かれていた。見出しの大小が逆転すると、
 *   どちらが親でどちらが子なのか読めなくなる。 */
h3{font-size:15px;margin:18px 0 6px}

/* 表の見出しの右寄せ（★td.num は上で定義済みだが、th.num には当たっていなかった。
 *   e.php が style 属性で補っていたぶん） */
table.table th.num{text-align:right}

/* 公演カードの中の表（公演の概要・受付区分の明細） */
.ev-card table.table{margin-top:12px}

/* 小さな補足の一言。★これまで `.tokusho .tokusho-note` と表の中に限っていたが、
 *   e.php は表の外（券種の備考・会場の行き方など）でも使っており、
 *   そこでは素の <span> のまま本文と同じ大きさで出ていた。どこでも同じ見た目にする。
 * ★この指定は**この1本だけ**（上の `.tokusho` の中にあった同内容の写しは消した）。
 * ★display:block。**行の中に小さく添える印には使わないこと**——1行落ちて薄く出る。
 *   実際、tokusho.php の「公演中止」の印がこれを借りていて、いちばん見分けて
 *   ほしい印がいちばん弱くなっていた（いまは .badge の札で出している）。 */
.tokusho-note{display:block;font-size:12px;color:var(--sub);margin-top:4px}

/* 表・引用のすぐ下に置く補足の1行 */
.ev-note{margin:8px 0 0}

/* 「ご注意」の本文（.ev-section の中）と、カードの末尾に置くボタンの行 */
.ev-body{margin:0}
.ev-section .legal-quote{margin:0}
.card-foot{margin:0}

/* 「ありません」の箱（★空の箱で終わらせず、次にどこを見ればよいかを必ず添える。
 *   index.php と a.php が同じ形を使う＝見た目が2種類に割れない） */
.empty-box .empty{padding-bottom:8px}
.empty-box .help{text-align:center;margin:0}

/* 中止・販売停止のお知らせの本文（トップ・アーティストページ・公演ページ・特商法） */
.notice-cancel p{margin:0 0 8px}
.notice-cancel p:last-child{margin-bottom:0}
.notice-cancel .help{margin-top:10px}

/* 特商法の表の**上**に出る1行（tokusho_table_html() が出す
 *   TOKUSHO_OPERATOR_LEAD ＝「チケットの販売事業者は公演ごとの興行主です」）。
 * ★.site-lead（灰色・小さい）を流用しないこと——規約と法定表示が食い違って
 *   読まれるのを防ぐための1行なので、ここは薄くしてはいけない。 */
.tokusho-lead{margin:0 0 12px;font-size:14px;font-weight:600}

/* 郵便番号 → 住所の自動入力（申込画面のお届け先。JS は BODY 側 app/assets/postal.js＝全社共通・
 *   原本は LIB/postal.js）。案内文と候補の選択肢は label.field の外に置くので、ここで間隔だけ整える。
 * ★候補のボタンは .btn（白い基底）のまま。主ボタンにしない（押すのは「選ぶ」であって「送る」ではない）。 */
.postal-msg{font-size:12px;color:var(--sub);margin:-8px 0 12px}
.postal-pick{margin:-4px 0 12px}
.postal-pick .btn{font-size:14px;padding:6px 10px}