@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@800&display=swap');

/* ===== color tokens (_colors.css, inline) ===== */
/* =====================================================================
 * 整理券画面 共通カラートークン（CSS variables）
 *
 * 使い方:
 *   1) 各 facility CSS の先頭で読み込む:  @import url('_colors.css');
 *   2) 値は var() で参照:                 color: var(--tk-red);
 *
 * 新しい facility / 画面の CSS でも同じトークンを使い回せる。
 * パレットを変えたい時はここ 1 箇所だけ修正すれば全画面に反映。
 * ===================================================================== */

:root {
    /* ---- ベース ---- */
    --tk-white:        #FFFFFF;
    --tk-dark:         #111111;   /* 白ボタン上の文字 */
    --tk-bg-base:      #060B18;   /* 背景ベース色（画像未読込時のフォールバック） */

    /* ---- ブランド / 強調 ---- */
    --tk-red:          #EC352B;   /* タイトル・赤系のメイン */
    --tk-red-condition: #E8120C;  /* 同意条件内の赤字（強調テキスト） */
    --tk-red-2:        #E5392E;   /* カード見出し（予約内容など） */
    --tk-blue:         #3A6FE0;   /* 枠線アクセント（ボタン等） */
    --tk-blue-70:      rgba(58, 111, 224, .7);   /* --tk-blue の 70% 透過（カード区切り線・見出し下線など） */
    --tk-gray-blue:    #788C87;   /* 補助枠線 */

    /* ---- ステータス: ready（緑） ---- */
    --tk-green:        #1C8A3E;   /* ヘッダー背景・枠 */
    --tk-green-light:  #36C46A;   /* 文字・時刻 */
    --tk-green-bright: #30D158;   /* 予約番号枠 */

    /* ---- ステータス: waiting（黄） ---- */
    --tk-yellow:       #FFD60A;   /* ヘッダー背景・文字・枠 */
    --tk-yellow-ink:   #241D00;   /* 黄背景上の文字 */

    /* ---- ステータス: closed（赤） ---- */
    --tk-red-closed:   #FF453A;   /* 枠線 */
    --tk-red-light:    #FF5A4D;   /* 文字・時刻 */

    /* ---- テキスト（白〜グレー） ---- */
    --tk-text-1:       #F2F5FC;
    --tk-text-2:       #DFE4EC;
    --tk-text-3:       #C3C9D4;
    --tk-text-4:       #CDD5DF;
    --tk-text-muted:   #AAB2BD;

    /* ---- ボタン状態 ---- */
    --tk-btn-dark:     #080C18;            /* 暗いボタン背景のベース色 */
    --tk-btn-bg:       rgba(8, 12, 24, .6);   /* 暗い半透明ボタン背景 */
    --tk-active-light: #E9E9E9;            /* 白ボタン押下 */
    --tk-press-dark:   #2B2B2B;            /* 白ボタン押下時の反転背景（純黒より少し薄く） */
    --tk-press-red:    #EF5349;            /* 赤ボタン押下時の反転背景（少し薄い赤） */
    --tk-active-pink:  #FFF3F0;            /* 赤系ボタン押下 */

    /* ---- 枠線（半透明） ---- */
    --tk-resno-border: rgba(120, 140, 135, .5);   /* 予約番号の外枠 */

    /* ---- 背景 / オーバーレイ ---- */
    --tk-bg-deep:      #05060C;               /* 背景画像の下地 */
    --tk-bg-base-0:    rgba(6, 11, 24, 0);     /* --tk-bg-base の透明（グラデ端） */
    --tk-bg-overlay:   rgba(3, 6, 14, 0.72);   /* 背景画像オーバーレイ */
    --tk-card-bg:      rgba(6, 11, 24, .35);   /* カード背景 */
    --tk-card-bg-2:    rgba(4, 8, 18, 0.35);   /* カード背景（complete） */
    --tk-input-bg:     rgba(8, 12, 22, 0.55);  /* 入力欄背景 */
    --tk-black-25:     rgba(0, 0, 0, .25);     /* 予約番号枠背景 */

    /* ---- テキスト（追加） ---- */
    --tk-ink:          #1A1A1A;   /* 白カード上の本文 */
    --tk-text-5:       #B7C0D4;   /* エラー説明文 */
    --tk-note:         #444444;   /* 注記(※) */
    --tk-placeholder:  #6F6F72;   /* 入力プレースホルダ */

    /* ---- 枠線（白半透明 / 入力） ---- */
    --tk-line-04:      rgba(255, 255, 255, .04);
    --tk-line-06:      rgba(255, 255, 255, .06);
    --tk-line-10:      rgba(255, 255, 255, .10);
    --tk-line-12:      rgba(255, 255, 255, .12);
    --tk-line-18:      rgba(255, 255, 255, .18);
    --tk-input-border: #4A5566;
    --tk-dashed:       rgba(120, 150, 210, 0.6);   /* complete 点線区切り */

    /* ---- ボタン無効 ---- */
    --tk-btn-disabled-bg:  #4A4F5A;
    --tk-btn-disabled-ink: #CFD3DB;

    /* ---- ステータス pill 背景 ---- */
    --tk-green-pill-bg:  rgba(28, 138, 62, .22);
    --tk-yellow-pill-bg: rgba(255, 214, 10, .20);
    --tk-red-pill-bg:    rgba(255, 69, 58, .16);

    /* ---- 赤系透過（ボタン背景・グロー） ---- */
    --tk-red-28:       #28080866;
    --tk-red-40:       rgba(230, 0, 18, .4);
    --tk-red-2-45:     rgba(236, 53, 43, 0.45);
    --tk-red-2-70:     rgba(236, 53, 43, .7);

    /* ---- アイコン（SVG fill/stroke 用） ---- */
    --tk-icon-muted:   #AEB6C4;   /* 時計など補助アイコンのグレー */
    --tk-green-reload: #27C24C;   /* 「更新」アイコンの緑 */
    --tk-red-e6:       #E60012;   /* 警告アイコン等の赤（HTBブランド赤） */
    --tk-red-fail:     #EC1C11;   /* 発券失敗画面の警告アイコン赤 */

    /* ---- timeslot 選択リスト（tr-item / tr-stock / エラー枠） ---- */
    --tk-azure-45:         #4A7CE873;   /* 破線枠（空き状況エラー枠） */
    --tk-azure-55:         #4A7CE88C;   /* timeslot アイテム枠 */
    --tk-item-bg:          #0A101E73;   /* timeslot アイテム背景 */
    --tk-item-bg-selected: #28080873;   /* 選択中 timeslot アイテム背景 */
    --tk-item-shadow:      #2850AA1F;   /* timeslot アイテム内側シャドウ */
    --tk-red-55:           #EC352B8C;   /* 在庫バッジ枠（--tk-red の55%透過） */

    /* ---- 著作権表記（全画面最下部に固定するバー） ---- */
    --tk-white-55:         rgba(255, 255, 255, .55);   /* 著作権表記の文字色 */
    --tk-copyright-h:      16px;   /* 著作権表記バーの高さ（行高11 + 下padding5）。下部固定要素の余白計算に使う */
}

/* ===== base.css (整理券発券画面) ===== */
/* =====================================================================
 * 整理券発券画面 既定テーマ CSS（default.css）
 *
 * 整理券発券画面（confirm / cancel / cancel_complete / fail）の装飾スタイル。
 * facility_id → CSS の対応付けは js/facility_ticket_css.js の HBFacilityCss.map で管理。
 *   未登録の facility_id は本ファイル（default.css）/ '456' → eva.css など追加可。
 * 各ページは onInit で HBFacilityCss.load() を呼ぶだけ。
 *
 * ※ background-image の url は本ファイル位置（css/facility-ticket/）基準のため
 *    ../img/ で app_html/img/ を指す。
 * ===================================================================== */

/* 共通カラートークン（var(--tk-*)） */

/* ============================ confirm ============================ */
#ticket_reservation_confirm .trc-wrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    /* 横向き時のノッチ分も左右に確保 */
    padding: env(safe-area-inset-top)
        max(30px, env(safe-area-inset-right))
        calc(110px + var(--tk-copyright-h))
        max(30px, env(safe-area-inset-left));
    min-height: 100%;
    color: var(--tk-white);
}

#ticket_reservation_confirm .trc-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(30px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(30px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

#ticket_reservation_confirm .px-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#ticket_reservation_confirm .trc-card {
    margin-left: 0;
    margin-right: 0;
}

#ticket_reservation_confirm .trc-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#ticket_reservation_confirm .trc-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    text-align: center;
    color: var(--tk-red);
}

#ticket_reservation_confirm .trc-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    color: var(--tk-white);
}

#ticket_reservation_confirm .trc-updated {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-3);
}

#ticket_reservation_confirm .trc-reload {
    margin-left: 8px;
    cursor: pointer;
    line-height: 0;
}

#ticket_reservation_confirm .trc-spin {
    animation: trc-spin 1s linear infinite;
}

@keyframes trc-spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

#ticket_reservation_confirm .trc-card {
    border-radius: 14px;
    /* padding-top: 22px; */
    overflow: hidden;
    border: 1px solid transparent;
    background: var(--tk-card-bg);
}

#ticket_reservation_confirm .trc-status {
    color: var(--tk-white);
    text-align: center;
    padding: 20px 15px 15px 15px;
    margin-bottom: 20px;
}

#ticket_reservation_confirm .trc-status-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 40px;
    margin-left: 12px;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
}

#ticket_reservation_confirm .trc-status-sub {
    opacity: .92;
}

/* ready 状態のみ: 入場可能 の下に表示する案内 */
#ticket_reservation_confirm .trc-status-note {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--tk-white);
    text-align: center;
    margin: 10px 0 0;
}

#ticket_reservation_confirm .trc-card-body {
    padding: 0 0 10px;
}

#ticket_reservation_confirm .trc-date {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-1);
    margin: 0 0 20px;
    /* 狭い端末で日付が折り返さないよう、両脇の飾り線を縮ませて 1 行に収める。
       padding で飾り線がカード端に接しないよう左右の余白を必ず確保する */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    white-space: nowrap;
}

#ticket_reservation_confirm .trc-date-line {
    display: inline-block;
    /* 基本 52px、幅が足りなければ縮む（margin は親の gap に移管） */
    flex: 0 1 52px;
    min-width: 0;
    height: 1px;
    background: currentColor;
    margin: 0;
    vertical-align: middle;
    text-indent: -9999px;
    overflow: hidden;
}

#ticket_reservation_confirm .trc-pill {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    padding: 8px 14px;
    border-radius: 20px;
}

#ticket_reservation_confirm .trc-time {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 60px;
    font-weight: 500;
    line-height: 60px;
    letter-spacing: 2px;
    margin: 6px 0 14px;
}

#ticket_reservation_confirm .trc-time-unit {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0;
    margin-left: 6px;
}

#ticket_reservation_confirm .trc-resno {
    border-radius: 8px;
    padding: 5px;
    margin: 0 20px;
    background: var(--tk-black-25);
    border: 1px solid var(--tk-resno-border);
}

#ticket_reservation_confirm .trc-resno-label {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 15px;
    font-weight: 500;
    margin: 4px 0px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

#ticket_reservation_confirm .trc-resno-value {
    display: inline-block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 7px;
    margin-top: 8px;
    padding: 6px 10px 6px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
}

/* status テーマ */
#ticket_reservation_confirm .trc-card--ready {
    border-color: var(--tk-green);
}

#ticket_reservation_confirm .trc-card--ready .trc-status {
    background: var(--tk-green);
    color: var(--tk-white);
}

#ticket_reservation_confirm .trc-card--ready .trc-time,
#ticket_reservation_confirm .trc-card--ready .trc-date-line,
#ticket_reservation_confirm .trc-card--ready .trc-resno-value {
    color: var(--tk-green-light);
}

#ticket_reservation_confirm .trc-card--ready .trc-pill {
    background: var(--tk-green-pill-bg);
    color: var(--tk-green-light);
}

#ticket_reservation_confirm .trc-card--ready .trc-resno-value {
    border-color: var(--tk-green-bright);
}

#ticket_reservation_confirm .trc-card--waiting {
    border-color: var(--tk-yellow);
}

#ticket_reservation_confirm .trc-card--waiting .trc-status {
    background: var(--tk-yellow);
    color: var(--tk-yellow-ink);
}

#ticket_reservation_confirm .trc-card--waiting .trc-time,
#ticket_reservation_confirm .trc-card--waiting .trc-date-line,
#ticket_reservation_confirm .trc-card--waiting .trc-resno-value {
    color: var(--tk-yellow);
}

#ticket_reservation_confirm .trc-card--waiting .trc-pill {
    background: var(--tk-yellow-pill-bg);
    color: var(--tk-yellow);
}

#ticket_reservation_confirm .trc-card--waiting .trc-resno-value {
    border-color: var(--tk-yellow);
}

#ticket_reservation_confirm .trc-card--closed {
    border-color: var(--tk-red-2);
}

#ticket_reservation_confirm .trc-card--closed .trc-status {
    background: var(--tk-red-2);
    color: var(--tk-white);
}

#ticket_reservation_confirm .trc-card--closed .trc-time,
#ticket_reservation_confirm .trc-card--closed .trc-date-line,
#ticket_reservation_confirm .trc-card--closed .trc-resno-value {
    color: var(--tk-red-closed);
}

#ticket_reservation_confirm .trc-card--closed .trc-pill {
    background: var(--tk-red-pill-bg);
    color: var(--tk-red-closed);
}

#ticket_reservation_confirm .trc-card--closed .trc-resno-value {
    border-color: var(--tk-red-closed);
}

#ticket_reservation_confirm .trc-btn {
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--tk-white);
    color: var(--tk-dark);
    /* border: 1px solid var(--tk-blue); */
    padding: 15px 16px;
    margin-bottom: 12px;
    font-size: 15px;
}

/* 押下時・API実行中(.is-loading): 色を反転してフィードバック */
#ticket_reservation_confirm .trc-btn:active,
#ticket_reservation_confirm .trc-btn.is-loading {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

/* アイコンは img(黒系SVG) のため、反転フィルタで白にする */
#ticket_reservation_confirm .trc-btn:active img,
#ticket_reservation_confirm .trc-btn.is-loading img {
    filter: invert(1);
}

#ticket_reservation_confirm .trc-btn-ico {
    width: 22px;
    display: flex;
    justify-content: center;
}

#ticket_reservation_confirm .trc-btn-label {
    flex-grow: 1;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 1px;
    text-align: center;
    color: var(--tk-dark);
}

#ticket_reservation_confirm .trc-btn-chev {
    width: 22px;
    display: flex;
    justify-content: flex-end;
    opacity: .85;
}

#ticket_reservation_confirm .trc-history-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-white);
}

#ticket_reservation_confirm .trc-history {
    background: var(--tk-line-04);
    overflow: hidden;
    border: 1px solid var(--tk-line-18);
}

#ticket_reservation_confirm .trc-history-head {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-1);
    padding: 13px 16px;
    border-bottom: 1px solid var(--tk-line-18);
    background: var(--tk-line-06);
}

/* 履歴ヘッダーのセル（整理券 / 整理券番号 / 取得日時）: Figma 指定 */
#ticket_reservation_confirm .trc-history-head .trc-col-name,
#ticket_reservation_confirm .trc-history-head .trc-col-date,
#ticket_reservation_confirm .trc-history-head .trc-col-status {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-3);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

#ticket_reservation_confirm .trc-history-row {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: var(--tk-white);
    padding: 16px 12px;
    border-bottom: 1px solid var(--tk-line-10);
    align-items: center;
}

#ticket_reservation_confirm .trc-history-row:last-child {
    border-bottom: none;
}

#ticket_reservation_confirm .trc-history-empty {
    color: var(--tk-text-muted);
}

#ticket_reservation_confirm .trc-col-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-1);
}

#ticket_reservation_confirm .trc-col-date {
    flex: 0 0 36%;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-2);
    white-space: nowrap;
}

#ticket_reservation_confirm .trc-col-status {
    flex: 0 0 24%;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-text-2);
    white-space: nowrap;
}

#ticket_reservation_confirm .trc-back-btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 15px 50px;
    background: var(--tk-btn-bg);
    color: var(--tk-white);
    border: 1px solid var(--tk-blue);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
}

/* 押下時: 色を反転（暗ボタン → 白背景・黒文字） */
#ticket_reservation_confirm .trc-back-btn:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

#ticket_reservation_confirm .trc-back-arrow {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

/* ============================ cancel ============================ */
#ticket_reservation_cancel .trc2-wrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    min-height: 100%;
    /* 横向き時のノッチ分も左右に確保 */
    padding: env(safe-area-inset-top)
        max(30px, env(safe-area-inset-right))
        calc(160px + var(--tk-copyright-h))
        max(30px, env(safe-area-inset-left));
    color: var(--tk-white);
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_cancel .px-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#ticket_reservation_cancel .trc2-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(30px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(30px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

#ticket_reservation_cancel .trc2-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#ticket_reservation_cancel .trc2-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 42px;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    color: var(--tk-red);
}

#ticket_reservation_cancel .trc2-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--tk-white);
}

#ticket_reservation_cancel .trc2-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 25.5px;
    letter-spacing: 0;
    text-align: center;
    color: var(--tk-white);
}

#ticket_reservation_cancel .trc2-card {
    background: transparent;
    border: 1px solid var(--tk-blue-70);
    border-radius: 14px;
    margin: 24px 0 0;
    padding: 22px 20px 8px;
}

#ticket_reservation_cancel .trc2-card-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    color: var(--tk-red);
    font-size: 25px;
    padding-bottom: 12px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--tk-blue-70);
}

#ticket_reservation_cancel .trc2-row {
    padding: 16px 0;
    border-bottom: 1px solid var(--tk-line-12);
}

#ticket_reservation_cancel .trc2-row:last-child {
    border-bottom: none;
}

#ticket_reservation_cancel .trc2-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    color: var(--tk-white);
    font-size: 18px;
}

#ticket_reservation_cancel .trc2-value {
    margin-left: auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    color: var(--tk-white);
    font-size: 18px;
}

#ticket_reservation_cancel .trc2-value-red {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    color: var(--tk-red);
    letter-spacing: 1px;
}

#ticket_reservation_cancel .trc2-note {
    background: transparent;
    border-radius: 10px;
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid var(--tk-blue);
}

#ticket_reservation_cancel .trc2-note-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--tk-red);
}

#ticket_reservation_cancel .trc2-note-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26.25px;
    letter-spacing: 0;
    color: var(--tk-white);
}

#ticket_reservation_cancel .trc2-btn-outline,
#ticket_reservation_cancel .trc2-btn-fill {
    width: 100%;
    padding: 15px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
}

#ticket_reservation_cancel .trc2-btn-outline {
    background: var(--tk-white);
    color: var(--tk-dark);
    border: none;
}

/* 押下時・API実行中: 色を反転（白 → 黒） */
#ticket_reservation_cancel .trc2-btn-outline:active,
#ticket_reservation_cancel .trc2-btn-outline.is-loading {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

#ticket_reservation_cancel .trc2-btn-fill {
    background: var(--tk-btn-bg);
    color: var(--tk-white);
    border: 1px solid var(--tk-blue);
}

/* 押下時: 色を反転（暗 → 白） */
#ticket_reservation_cancel .trc2-btn-fill:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

/* ======================= cancel_complete ======================= */
#ticket_reservation_cancel_complete .trc3-wrap {
    position: relative;
    z-index: 1;
    max-width: 100vw;
    overflow: hidden;
    min-height: 100%;
    color: var(--tk-white);
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_cancel_complete .trc3-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    /* iPhone のノッチ / Dynamic Island に隠れないよう safe-area 分を上下左右に確保 */
    padding: calc(20px + env(safe-area-inset-top))
        max(30px, env(safe-area-inset-right))
        0
        max(30px, env(safe-area-inset-left));
    text-align: center;
}

#ticket_reservation_cancel_complete .trc3-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(30px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(30px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

#ticket_reservation_cancel_complete .trc3-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#ticket_reservation_cancel_complete .trc3-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 42px;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    color: var(--tk-red);
}

#ticket_reservation_cancel_complete .trc3-message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 0
        max(30px, env(safe-area-inset-right))
        0
        max(30px, env(safe-area-inset-left));
}

#ticket_reservation_cancel_complete .trc3-message p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 21px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    color: var(--tk-white);
}

#ticket_reservation_cancel_complete .trc3-back-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: var(--tk-btn-bg);
    color: var(--tk-white);
    border: 1px solid var(--tk-blue);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
}

#ticket_reservation_cancel_complete .trc3-back-arrow {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

/* ======================= fail（発券失敗） ======================= */
#ticket_reservation_fail .trc4-wrap {
    position: relative;
    z-index: 1;
    max-width: 100vw;
    overflow: hidden;
    min-height: 100%;
    color: var(--tk-white);
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_fail .trc4-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#ticket_reservation_fail .trc4-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    /* iPhone のノッチ / Dynamic Island に隠れないよう safe-area 分を上下左右に確保 */
    padding: calc(20px + env(safe-area-inset-top))
        max(30px, env(safe-area-inset-right))
        0
        max(30px, env(safe-area-inset-left));
    text-align: center;
}

#ticket_reservation_fail .trc4-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 35px;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    color: var(--tk-red);
}

/* 中央：警告アイコン + メッセージ（画面中央に固定） */
#ticket_reservation_fail .trc4-center {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 0
        max(30px, env(safe-area-inset-right))
        0
        max(30px, env(safe-area-inset-left));
}

#ticket_reservation_fail .trc4-icon {
    margin-bottom: 36px;
    line-height: 0;
}

#ticket_reservation_fail .trc4-message p {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: 0;
    color: var(--tk-white);
    margin: 0 0 24px;
}

#ticket_reservation_fail .trc4-message p:last-child {
    margin-bottom: 0;
}

/* フッター（2ボタン・下部固定） */
#ticket_reservation_fail .trc4-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(30px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(30px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

/* 画面が低い端末のみ: 中央固定をやめてフロー配置にしスクロール可能にする。
   高い画面（従来通り）は上のルールのまま＝中央固定で見た目そのまま。
   フッターは常に固定。閾値 740px は内容がほぼ収まる高さ。必要なら調整可 */
@media (max-height: 740px) {
    #ticket_reservation_fail .trc4-wrap {
        display: flex;
        flex-direction: column;
        /* 固定フッター分（約146px + safe-area）+ 著作権表記バーを確保しスクロール時に隠れないように */
        padding-bottom: calc(150px + var(--tk-copyright-h) + env(safe-area-inset-bottom));
    }

    #ticket_reservation_fail .trc4-top {
        position: static;
    }

    #ticket_reservation_fail .trc4-center {
        position: static;
        flex: 1 0 auto;
        /* 横向き時のノッチ分も左右に確保 */
        padding: 24px
            max(30px, env(safe-area-inset-right))
            24px
            max(30px, env(safe-area-inset-left));
    }
}

/* 再発行ボタン（暗い背景 + 青枠） */
#ticket_reservation_fail .trc4-btn-retry {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--tk-white);
    color: var(--tk-dark);
    border: none;
    padding: 15px 16px;
    margin-bottom: 12px;
}

/* 押下時: 色を反転（白 → 黒）。img アイコンは反転フィルタ */
#ticket_reservation_fail .trc4-btn-retry:active {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

#ticket_reservation_fail .trc4-btn-retry:active img {
    filter: invert(1);
}

#ticket_reservation_fail .trc4-btn-retry:active .trc4-btn-label {
    color: var(--tk-white);
}

#ticket_reservation_fail .trc4-btn-ico {
    width: 22px;
    display: flex;
    justify-content: center;
}

#ticket_reservation_fail .trc4-btn-label {
    flex-grow: 1;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 1px;
    color: var(--tk-dark);
}

#ticket_reservation_fail .trc4-btn-chev {
    width: 22px;
    display: flex;
    justify-content: flex-end;
    opacity: .85;
}

/* アプリに戻る（白ボタン） */
#ticket_reservation_fail .trc4-btn-back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 15px 50px;
    background: var(--tk-btn-bg);
    color: var(--tk-white);
    border: 1px solid var(--tk-blue);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
}

/* 押下時: 色を反転（暗 → 白） */
#ticket_reservation_fail .trc4-btn-back:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

#ticket_reservation_fail .trc4-back-arrow {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
}

/* ============================ ticket_reservation ============================ */
#ticket_reservation .tr-wrap,
#ticket_reservation_agreement .tr-wrap,
#ticket_reservation_complete .tr-wrap {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 100vw;
    overflow-x: hidden;
    /* 横向き時のノッチ分も左右に確保 */
    padding: env(safe-area-inset-top)
        max(28px, env(safe-area-inset-right))
        32px
        max(28px, env(safe-area-inset-left));
    min-height: 100%;
    color: var(--tk-white);
}

#ticket_reservation_agreement .tr-bg,
#ticket_reservation_complete .tr-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#ticket_reservation .tr-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(0deg, var(--tk-bg-overlay), var(--tk-bg-overlay)), var(--tk-bg-image, url('../img/ticket_reservation_bg.png')), var(--tk-bg-deep);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#ticket_reservation .tr-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 42px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    text-align: center;
    color: var(--tk-red);
}

#ticket_reservation .tr-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
    color: var(--tk-white);
}

/* 一覧取得失敗時のエラー表示 */
#ticket_reservation .tr-error {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tk-azure-45);
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
}

#ticket_reservation .tr-error-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 27.2px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: var(--tk-white);
    margin: 0;
}

#ticket_reservation .tr-error-desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22.95px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: var(--tk-text-5);
    margin-top: 20px;
}

#ticket_reservation .tr-error-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 8px;
    background: var(--tk-red-28);
    border: 1px solid var(--tk-red);
    color: var(--tk-red);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 1px;
    text-align: center;
    vertical-align: middle;
}

/* 押下時・API実行中: 色を反転（赤枠 → 赤地に白文字） */
#ticket_reservation .tr-error-btn:active,
#ticket_reservation .tr-error-btn.is-loading {
    background: var(--tk-press-red);
    color: var(--tk-white);
}

#ticket_reservation .tr-error-btn-ico {
    display: inline-flex;
    line-height: 0;
}

/* Timeslot List */
#ticket_reservation .tr-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#ticket_reservation .tr-item {
    display: flex;
    align-items: center;
    background: var(--tk-item-bg);
    border: 1px solid var(--tk-azure-55);
    box-shadow: 0px 0px 10px 1px var(--tk-item-shadow) inset;
    border-radius: 6px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

#ticket_reservation .tr-item.is-selected {
    border-color: var(--tk-red);
    background: var(--tk-item-bg-selected);
    box-shadow: none;
}

#ticket_reservation .tr-item.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

#ticket_reservation .tr-item:last-child {
    margin-bottom: 25px;
}

#ticket_reservation .tr-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--tk-text-muted);
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ticket_reservation .tr-item.is-selected .tr-radio {
    border-color: var(--tk-red);
}

#ticket_reservation .tr-radio-inner {
    width: 10px;
    height: 10px;
    background: var(--tk-red);
    border-radius: 50%;
}

#ticket_reservation .tr-time {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 19px;
    font-weight: 700;
    flex-grow: 1;
    color: var(--tk-white);
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

#ticket_reservation .tr-time-icon {
    width: 24px;
    height: 24px;
    margin-right: 9px;
}

#ticket_reservation .tr-stock {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 8px 6px 8px;
    border-radius: 7px;
    border: 1px solid var(--tk-red-55);
    white-space: nowrap;
    color: var(--tk-red);   /* 残り数は常に赤（0人でも） */
}

/* Footer & Buttons */
#ticket_reservation .tr-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(26px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(26px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
    z-index: 10;
}

#ticket_reservation .tr-btn-primary,
#ticket_reservation .tr-btn-secondary {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

#ticket_reservation .tr-btn-primary {
    padding: 15px;
    background: var(--tk-btn-bg);
    border: 1px solid var(--tk-blue);
    color: var(--tk-white);
}

#ticket_reservation .tr-btn-primary:disabled {
    opacity: 0.8;
}

#ticket_reservation .tr-btn-secondary {
    padding: 15px;
    min-height: 50px;
    background: var(--tk-white);
    color: var(--tk-dark);
}

#ticket_reservation .tr-btn-secondary:disabled {
    background: var(--tk-btn-disabled-bg);
    color: var(--tk-btn-disabled-ink);
    opacity: 1;
}

/* 無効時: 左アイコンは currentColor(var(--tk-btn-disabled-ink)) で追従、右の chevron は非表示 */
#ticket_reservation .tr-btn-secondary:disabled .tr-btn-chev {
    display: none;
}

#ticket_reservation .tr-btn-label {
    font-family: 'Noto Sans JP', sans-serif;
    flex-grow: 1;
    text-align: center;
    letter-spacing: 1px;
    font-size: 15px
}

#ticket_reservation .tr-btn-ico {
    width: 24px;
    display: flex;
    justify-content: center;
}

#ticket_reservation .tr-btn-chev {
    width: 22px;
    display: flex;
    justify-content: flex-end;
}

/* ======================= agreement ======================= */
#ticket_reservation .tr-wrap {
    /* 横向き時のノッチ分も左右に確保 */
    padding: env(safe-area-inset-top)
        max(26px, env(safe-area-inset-right))
        calc(180px + var(--tk-copyright-h))
        max(26px, env(safe-area-inset-left));
    min-height: 100%;
    color: var(--tk-white);
    display: flex;
    flex-direction: column;
}

/* 中央のコンテンツ領域を残りスペースいっぱいに広げる（エラー表示を中央寄せするため） */
#ticket_reservation .tr-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#ticket_reservation_agreement .tra-wrap {
    /* 横向き時のノッチ分も左右に確保 */
    padding: env(safe-area-inset-top)
        max(28px, env(safe-area-inset-right))
        calc(190px + var(--tk-copyright-h))
        max(28px, env(safe-area-inset-left));
    min-height: 100%;
    color: var(--tk-white);
}

/* フッター（同意する / 戻る）を画面下部に固定。他画面と統一 */
#ticket_reservation_agreement .tr-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    /* 横向き時のノッチ分も左右に確保 */
    padding: 16px
        max(28px, env(safe-area-inset-right))
        calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom))
        max(28px, env(safe-area-inset-left));
    background: linear-gradient(to top, var(--tk-bg-base) 60%, var(--tk-bg-base-0));
}

#ticket_reservation_agreement .tra-banner {
    margin-top: 20px;
}

#ticket_reservation_agreement .tra-banner-title {
    color: var(--tk-red);
    font-size: 42px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    margin: 0;
    text-shadow: 0 0 14px var(--tk-red-2-70);
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_agreement .tra-text-1,
#ticket_reservation_agreement .tra-text-2 {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-weight: 500;
    font-size: 15px;
    line-height: 24.75px;
    text-align: center;
    margin: 0;
}

#ticket_reservation_agreement .tra-text-2 {
    margin-top: 12px;
}

#ticket_reservation_agreement .tra-card {
    background: var(--tk-white);
    border-radius: 14px;
    padding: 25.2px 18px 20px 18px;
    /* 幅は固定せず、親幅に合わせて自動で折り返す（画面サイズに追従） */
}

#ticket_reservation_agreement .tra-card-title {
    color: var(--tk-dark);
    font-weight: 500;
    font-size: 19px;
    line-height: 26.6px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_agreement .tra-card-divider {
    height: 1px;
    background-color: var(--tk-blue);
    margin: 12px 0;
}

#ticket_reservation_agreement .tra-card-desc {
    color: var(--tk-ink);
    font-weight: 400;
    font-size: 15px;
    line-height: 27.75px;
    letter-spacing: 0%;
    vertical-align: middle;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_agreement .tra-checklist {
    margin-top: 16px;
}

#ticket_reservation_agreement .tra-check-group {
    margin-bottom: 16px;
    background: var(--tk-white);
    border-radius: 14px;
    padding: 18px;
}

#ticket_reservation_agreement .tra-check-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--tk-ink);
    margin-bottom: 16px;
}

#ticket_reservation_agreement .tra-check-box-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#ticket_reservation_agreement .tra-checkbox {
    width: 26px;
    height: 26px;
    border: 2px solid var(--tk-ink);
    border-radius: 4px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ticket_reservation_agreement .tra-checkbox.is-checked {
    background: var(--tk-blue);
    border-color: var(--tk-blue);
}

#ticket_reservation_agreement .tra-check-label {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    vertical-align: middle;
    color: var(--tk-dark);
}

/* チェックリスト下の注記（※...） */
/* condition 内（白カード）の注記（※...）。checkbox の下に表示 */
#ticket_reservation_agreement .tra-note {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22.95px;
    color: var(--tk-note);
    margin: 14px 0 0;
}

/* Form Styles */
#ticket_reservation_agreement .tra-label {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

#ticket_reservation_agreement .tra-required {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-red);
    border: 1px solid var(--tk-red);
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 8px;
    line-height: 100%;
    vertical-align: middle;
}

#ticket_reservation_agreement .tra-input {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    color: var(--tk-white);
    border-radius: 9px;
    padding: 13px 14px;
    font-size: 15px;
    box-sizing: border-box;
}

#ticket_reservation_agreement .tra-input::placeholder {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-placeholder);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    vertical-align: middle;
}

#ticket_reservation_agreement .tra-input:focus {
    border-color: var(--tk-blue);
    outline: none;
}

/* 生年月日プルダウン（年・月・日） */
#ticket_reservation_agreement .tra-dob {
    display: flex;
    align-items: center;
}

#ticket_reservation_agreement .tra-select-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;   /* flex アイテムが内容幅で横に溢れないように（モバイルで重要） */
}

#ticket_reservation_agreement .tra-dob-year {
    flex: 1.4 1 0;  /* 年は「2000年」の分だけ少し広く */
}

/* 年・月・日 のラベル */
#ticket_reservation_agreement .tra-dob-unit {
    flex: 0 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: var(--tk-white);
}

/* 選択ボックス（クリックでリストを開閉） */
#ticket_reservation_agreement .tra-select-display {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    color: var(--tk-white);
    border-radius: 9px;
    padding: 13px 22px 13px 12px;   /* 右はシェブロン分・左は詰めて数字の表示領域を広く */
    font-size: 15px;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ticket_reservation_agreement .tra-select-display.is-placeholder {
    color: var(--tk-white);
}

#ticket_reservation_agreement .tra-select-wrap.is-open .tra-select-display {
    border-color: var(--tk-blue);
}

/* input の直下に開くカスタムドロップダウン。高さは画面半分まで・超えたらスクロール */
#ticket_reservation_agreement .tra-select-list {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 30vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tk-input-bg);
    border: 1px solid var(--tk-input-border);
    border-radius: 9px;
    box-shadow: 0 8px 20px var(--tk-black-25);
}

#ticket_reservation_agreement .tra-select-option {
    font-family: 'Noto Sans JP', sans-serif;
    padding: 11px 12px;
    font-size: 15px;
    color: var(--tk-white);
    cursor: pointer;
    white-space: nowrap;
}

#ticket_reservation_agreement .tra-select-option.is-selected,
#ticket_reservation_agreement .tra-select-option:active {
    background: var(--tk-blue);
}

/* 外側タップ検知用の透明バックドロップ（リストの下・他要素の上） */
#ticket_reservation_agreement .tra-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* ドロップダウンの下向きシェブロン */
#ticket_reservation_agreement .tra-select-wrap::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%239AA4B8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
    pointer-events: none;
}

/* Button Styles */
#ticket_reservation_agreement .tra-btn-agree {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--tk-white);
    border: none;
    color: var(--tk-dark);
    width: 100%;
    padding: 16px 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

#ticket_reservation_agreement .tra-btn-agree:disabled {
    background-color: var(--tk-btn-disabled-bg);
    color: var(--tk-btn-disabled-ink);
    opacity: 1;
    cursor: not-allowed;
}

/* 無効時: 左アイコンは currentColor(var(--tk-btn-disabled-ink)) で追従、右の chevron は非表示 */
#ticket_reservation_agreement .tra-btn-agree:disabled .icon-right {
    display: none;
}

#ticket_reservation_agreement .tra-btn-agree .icon-left {
    position: absolute;
    left: 16px;
    line-height: 0;
}

#ticket_reservation_agreement .tra-btn-agree .icon-right {
    position: absolute;
    right: 16px;
    line-height: 0;
}

#ticket_reservation_agreement .tra-btn-back {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--tk-btn-bg);
    border: 1px solid var(--tk-blue);
    color: var(--tk-white);
    width: 100%;
    padding: 16px 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    margin-top: 11px;
}

#ticket_reservation_agreement .tra-btn-back .icon-left {
    position: absolute;
    left: 16px;
    line-height: 0;
}

/* =========================================
   ticket_reservation_complete.html
   ========================================= */

#ticket_reservation_complete .tr-complete-title {
    color: var(--tk-red);
    font-size: 38px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 5px;
    vertical-align: middle;
    margin: 0 0 18px 0;
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_complete .tr-complete-desc {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 15px;
    font-weight: 500;
    line-height: 25.5px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

/* 短い画面でもスクロールできるよう、フッターを絶対配置ではなくフロー内に置く（sticky footer） */
#ticket_reservation_complete .tr-wrap {
    display: flex;
    flex-direction: column;
}

#ticket_reservation_complete .tr-footer {
    /* margin-top:auto で内容が短い時は下端に固定、長い時はフロー通りに流れてスクロール可能 */
    margin-top: auto;
    /* このフッターはフロー内（fixed でない）。最下部固定の .tr-copyright と重ならないよう
       下側に本バー分の余白を確保する（他画面の固定フッターと余白感を揃える） */
    padding: 24px 0 calc(16px + var(--tk-copyright-h) + env(safe-area-inset-bottom));
}

#ticket_reservation_complete .tr-complete-card {
    border: 1px solid var(--tk-blue);
    border-radius: 14px;
    padding: 8px 20px;
    background: var(--tk-card-bg-2);
}

#ticket_reservation_complete .tr-complete-card-title {
    color: var(--tk-red);
    font-size: 25px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    margin: 0;
    text-shadow: 0px 0px 10px var(--tk-red-45);
    font-family: 'Noto Sans JP', sans-serif;
}

#ticket_reservation_complete .tr-complete-card-divider {
    height: 1px;
    background-color: var(--tk-blue-70);
    margin: 16px 0 17px 0;
}

#ticket_reservation_complete .tr-complete-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#ticket_reservation_complete .tr-complete-card-row:last-child {
    padding-bottom: 16px;
}

#ticket_reservation_complete .tr-complete-card-row-dashed {
    border-bottom: 1px dashed var(--tk-dashed);
    margin: 16px 0;
}

#ticket_reservation_complete .tr-complete-card-event {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0%;
    vertical-align: middle;
    /* 文字列内の \n を改行として表示する（HTML の空白畳み込みを回避） */
    white-space: pre-line;
}

#ticket_reservation_complete .tr-complete-card-label {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

#ticket_reservation_complete .tr-complete-card-value {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--tk-white);
    font-size: 18px;
    font-weight: 500;
}

#ticket_reservation_complete .tr-complete-card-red {
    color: var(--tk-red);
}

/* Share footer buttons style from agreement page */
#ticket_reservation_complete .tra-btn-agree {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--tk-white);
    border: none;
    color: var(--tk-dark);
    width: 100%;
    padding: 16px 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

#ticket_reservation_complete .tra-btn-agree .icon-left {
    position: absolute;
    left: 16px;
    line-height: 0;
}

#ticket_reservation_complete .tra-btn-agree .icon-right {
    position: absolute;
    right: 16px;
    line-height: 0;
}

#ticket_reservation_complete .tra-btn-back {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--tk-btn-bg);
    border: 1px solid var(--tk-blue);
    color: var(--tk-white);
    width: 100%;
    padding: 16px 46px;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    margin-top: 11px;
}

#ticket_reservation_complete .tra-btn-back .icon-left {
    position: absolute;
    left: 16px;
    line-height: 0;
}

/* =========================================
   押下時・API実行中(.is-loading)の反転フィードバック（チケットフロー全ボタン共通）
   ========================================= */
/* 一覧: 同意書確認へ進む（白 → 黒）。hold API 実行中も維持 */
#ticket_reservation .tr-btn-secondary:not(:disabled):active,
#ticket_reservation .tr-btn-secondary.is-loading {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

/* 一覧: 本日取得した整理券を確認する（暗 → 白） */
#ticket_reservation .tr-btn-primary:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

/* 同意書: 同意して整理券を取得する（白 → 黒）。confirm API 実行中も維持 */
#ticket_reservation_agreement .tra-btn-agree:not(:disabled):active,
#ticket_reservation_agreement .tra-btn-agree.is-loading {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

/* 同意書: 戻る（暗 → 白）。img アイコンは反転フィルタ */
#ticket_reservation_agreement .tra-btn-back:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

#ticket_reservation_agreement .tra-btn-back:active img {
    filter: invert(1);
}

/* 完了: 整理券を確認する（白 → 黒）/ アプリに戻る（暗 → 白） */
#ticket_reservation_complete .tra-btn-agree:active {
    background: var(--tk-press-dark);
    color: var(--tk-white);
}

#ticket_reservation_complete .tra-btn-agree:active img {
    filter: invert(1);
}

#ticket_reservation_complete .tra-btn-back:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

#ticket_reservation_complete .tra-btn-back:active img {
    filter: invert(1);
}

/* キャンセル完了: アプリに戻る（暗 → 白） */
#ticket_reservation_cancel_complete .trc3-back-btn:active {
    background: var(--tk-active-light);
    color: var(--tk-dark);
}

/* =====================================================================
 * standalone shim — OnsenUI(page/scroll) と global base.css の代替。
 * base.css は元アプリで ons-page + global base.css 前提のため、standalone に必要な
 *   1) html/body リセット（高さ100% + margin0）
 *   2) 各画面が使うユーティリティ（元 global base.css と同値）
 * のみを追加する。テーマ変更・装飾追加は一切しない（UI は元と同一）。
 * ===================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: var(--tk-bg-deep); -webkit-text-size-adjust: 100%; }
/* ---- 本家アプリ base.css と同じグローバルリセット ----
   単独動作のため base.css を読み込まない。これらが無いとブラウザ既定値が効いて本家と余白がずれる。
   特に <p> は既定 margin(1em 0 = font-size 比例) が付き、見出し周りが本家より広くなる */
p, ul, li, label { margin: 0; }
img { max-width: 100%; }
input { -webkit-appearance: none; border: none; }
/* 本家は <ons-page> が高さの基準を作るため、子の .tr-wrap などの min-height:100% が解決する。
   単独ページでは基準が無く解決しないため（= .tr-body が伸びずエラー表示が中央に来ない、
   フッターが下端に付かない）、ページ直下の要素に確定高さを与えて同じ条件を作る。
   height 固定でも中身が長い場合は溢れてページごとスクロールするため問題ない */
#ticket_reservation,
#ticket_reservation_agreement,
#ticket_reservation_complete,
#ticket_reservation_confirm,
#ticket_reservation_cancel,
#ticket_reservation_cancel_complete,
#ticket_reservation_fail { height: 100%; }

/* --- utilities（元 css/base.css と同値）--- */
.text-center { text-align: center; }
.fb { font-weight: 500; }
.mt-2 { margin-top: 15px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 30px; }
.pt-3 { padding-top: 20px; }
.pt-4 { padding-top: 30px; }
.pt-5 { padding-top: 40px; }
.px-3 { padding-left: 20px; padding-right: 20px; }
.py-3 { padding-top: 20px; padding-bottom: 20px; }
.py-5 { padding-top: 40px; padding-bottom: 40px; }
.d-flex { display: flex; }
.d-flex.align-items-center { align-items: center; }
.d-flex.justify-content-center { justify-content: center; }

/* DEBUG 用エラー詳細（CONFIG.DEBUG=true のときのみ JS が挿入。テスター確認用） */
.tr-debug-detail {
    margin-top: 16px;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    word-break: break-all;
    color: #ffb4b4;
    background: rgba(255, 0, 0, 0.12);
    border: 1px dashed rgba(255, 100, 100, 0.5);
    border-radius: 6px;
}

/* =====================================================================
 * 著作権表記（整理券フロー全画面共通・画面最下部に固定）
 *   各ページの .X-wrap 内に <p class="tr-copyright"> を置く。
 *   フッター(.X-footer, z-index:10)より前面(z-index:11)に重ね、
 *   フッターは padding-bottom で本バー分の余白を確保する（下の各 footer 参照）。
 *   背景は不透明・全幅で safe-area まで塗り切り、下端から背景画像を覗かせない。
 * ===================================================================== */
.tr-copyright {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 11;
    box-sizing: border-box;
    /* p 要素の既定マージンを打ち消す（残ると bottom:0 でも浮いて下端に隙間ができる） */
    margin: 0;
    /* 文字を画面下端ぎりぎりへ。左右はフッターと揃える */
    padding: 0
        max(30px, env(safe-area-inset-right))
        calc(5px + env(safe-area-inset-bottom))
        max(30px, env(safe-area-inset-left));
    background: var(--tk-bg-base);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 100%;
    letter-spacing: 0.5px;
    text-align: center;
    vertical-align: middle;
    color: var(--tk-white-55);
}