/* CSS変数をラッパーに限定して定義 */
        #coupon-app-wrapper {
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden;

            /* 配色は新 /coupon/ アプリのトークンに統一 */
            --c-primary: #0d0e10;
            --c-accent: #0064d6;
            --c-bg: #ffffff;
            --c-bg-secondary: #f0f2f6;
            --c-border: rgba(40, 44, 56, 0.14);
            --c-text: #0d0e10;
            --c-text-sub: rgba(40, 44, 56, 0.74); /* コントラスト確保(白背景で約4.6:1) */
            --c-highlight: rgba(0, 100, 214, 0.12);
            --c-shadow: rgba(13, 25, 50, 0.08);

            /* モダン化トークン（角丸・種類色・セール色） */
            --radius: 14px;
            /* チップ(コード欄/バッジ/リスト左/セール)は白文字を乗せるため、ライト/ダーク共通の濃色に固定(コントラスト確保) */
            /* カノニカル統一パレット(カード基準・モバイルと同一) */
            --t-normal: #246a37; --t-glo: #7a35c9; --t-sma: #2d44d4; --t-ifp: #d2601f;
            --t-blog: #c2185b; --t-business: #0e7c86; --t-luc: #5b616b;
            --s-spring: #d61f4e; --s-choice: #8a6a00; --s-wallet: #8a34b5; --s-outside: #5a5f68;

            --sticky-top: 10px;
            --sticky-z: 1000;
        }

        /* Dark Mode Support */
        .darking #coupon-app-wrapper,
        .sitedark #coupon-app-wrapper {
            --c-primary: #f5f6f8;
            --c-accent: #66adff;
            --c-bg: #1c1d20;
            --c-bg-secondary: #121316;
            --c-border: rgba(140, 144, 152, 0.30);
            --c-text: #f5f6f8;
            --c-text-sub: rgba(240, 242, 246, 0.82); /* コントラスト確保(暗背景で十分) */
            --c-highlight: rgba(102, 173, 255, 0.20);
            --c-shadow: rgba(0, 0, 0, 0.5);

            /* チップ色はダークでも明るくしない(白文字の可読性優先・上の固定値を継承) */
        }

        #coupon-app-wrapper *,
        #coupon-app-wrapper *::before,
        #coupon-app-wrapper *::after {
            box-sizing: border-box;
        }

        #coupon-app {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px 8px 60px;
            background-color: var(--c-bg-secondary);
            border-radius: 12px;
        }

        @media (min-width: 768px) {
            #coupon-app {
                padding: 20px 20px 60px;
            }
        }

        /* --- 更新日時 --- */
        .update-time {
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            color: var(--c-text);
            margin-bottom: 10px;
            padding: 6px 12px;
            background: var(--c-bg);
            border: 1px solid var(--c-border);
            border-radius: 8px;
            display: none;
        }

        .update-time.visible {
            display: block;
        }

        /* --- タブ --- */
        #typeTabs {
            display: flex;
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            gap: 0;
            border-bottom: 2px solid #b5b5b5;
            margin-bottom: 12px;
            -webkit-overflow-scrolling: touch;
        }

        #typeTabs button {
            flex: 0 0 auto;
            background: none;
            border: none;
            padding: 10px 14px;
            font-size: 14px;
            font-weight: 600;
            color: #999;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
        }

        .darking #typeTabs button,
        .sitedark #typeTabs button {
            color: #999;
        }

        #typeTabs button.active {
            color: #000;
        }

        .darking #typeTabs button.active,
        .sitedark #typeTabs button.active {
            color: #fff;
        }

        #typeTabs button.active::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #000;
        }

        .darking #typeTabs button.active::after,
        .sitedark #typeTabs button.active::after {
            background: #fff !important;
        }

        #typeTabs::-webkit-scrollbar {
            display: none;
        }

        /* --- コントロールパネル (PC: 通常表示 / スマホ: ボトムシート) --- */
        .control-panel {
            width: 100%;
            background: var(--c-bg);
            border: 2px solid var(--c-border);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
            box-shadow: 0 2px 8px var(--c-shadow);
        }

        /* スマホではコントロールパネルを非表示にしてボトムシートに移す */
        @media (max-width: 767px) {
            .control-panel {
                display: none;
            }
        }

        /* --- 表示切替 + フィルターボタン (モバイルバー) --- */
        .mobile-bar {
            display: none;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            gap: 8px;
        }

        @media (max-width: 767px) {
            .mobile-bar {
                display: flex;
            }
        }

        .view-toggle-btn,
        .filter-open-btn {
            background: var(--c-bg);
            border: 1.5px solid var(--c-border);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--c-text);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .filter-open-btn {
            flex: 1;
            justify-content: center;
        }

        .filter-open-btn .filter-count {
            background: var(--c-accent);
            color: var(--c-bg);
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 4px;
        }

        /* PC用表示切替 */
        .pc-view-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        @media (max-width: 767px) {
            .pc-view-toggle {
                display: none;
            }
        }

        .pc-view-toggle button {
            background: var(--c-bg);
            border: 1.5px solid var(--c-border);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            color: var(--c-text-sub);
            cursor: pointer;
        }

        .pc-view-toggle button.active {
            background: var(--c-accent);
            color: var(--c-bg);
            border-color: var(--c-accent);
        }

        /* コピーのみモード トグル */
        .copy-only-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
            font-size: 12px;
            color: var(--c-text-sub);
            cursor: pointer;
            user-select: none;
        }
        .copy-only-toggle input[type="checkbox"] {
            display: none;
        }
        .copy-only-switch {
            position: relative;
            width: 36px;
            height: 20px;
            background: var(--c-border);
            border-radius: 10px;
            transition: background 0.2s;
        }
        .copy-only-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            transition: transform 0.2s;
        }
        .copy-only-toggle input:checked + .copy-only-switch {
            background: #e63946;
        }
        .copy-only-toggle input:checked + .copy-only-switch::after {
            transform: translateX(16px);
        }
        .copy-only-badge {
            display: none;
            font-size: 10px;
            background: #e63946;
            color: #fff;
            padding: 1px 6px;
            border-radius: 4px;
            font-weight: 700;
        }
        .copy-only-toggle input:checked ~ .copy-only-badge {
            display: inline;
        }

        /* --- ボトムシート --- */
        .bottom-sheet-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .bottom-sheet-overlay.open {
            display: block;
            opacity: 1;
        }

        .bottom-sheet {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--c-bg);
            border-radius: 16px 16px 0 0;
            padding: 20px 16px 32px;
            z-index: 10001;
            transform: translateY(100%);
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            max-height: 70vh;
            overflow-y: auto;
        }

        .bottom-sheet.open {
            transform: translateY(0);
        }

        .bottom-sheet-handle {
            width: 40px;
            height: 4px;
            background: #ccc;
            border-radius: 2px;
            margin: 0 auto 16px;
        }

        .darking .bottom-sheet-handle {
            background: #666;
        }

        .bottom-sheet-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--c-text);
            text-align: center;
        }

        .bottom-sheet-section {
            margin-bottom: 20px;
        }

        .bottom-sheet-section-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--c-text-sub);
            margin-bottom: 8px;
        }

        .bottom-sheet .segment-switch,
        .bottom-sheet .sale-switch,
        .bottom-sheet .link-mode-switch {
            margin-bottom: 0;
        }

        .bottom-sheet-close {
            width: 100%;
            padding: 12px;
            background: var(--c-accent);
            color: var(--c-bg);
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            margin-top: 8px;
        }

        .segment-switch {
            display: flex;
            width: 100%;
            background: var(--c-bg-secondary);
            border-radius: 8px;
            padding: 4px;
            margin-bottom: 16px;
            border: 1px solid var(--c-border);
        }

        .segment-btn {
            flex: 1;
            background: transparent;
            border: none;
            padding: 8px 4px;
            font-size: 12px;
            font-weight: 600;
            color: var(--c-text-sub);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }

        @media (min-width: 400px) {
            .segment-btn {
                font-size: 13px;
                padding: 8px;
            }
        }

        .segment-btn.active {
            background: var(--c-bg);
            color: var(--c-text);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .sale-switch {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .sale-btn {
            background: var(--c-bg);
            border: 1.5px solid;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
            color: inherit;
        }

        .sale-btn.active {
            background: currentColor;
            color: #fff !important;
        }

        .sale-btn:active {
            transform: scale(0.96);
        }

        /* ===== ボタン配色 ===== */
        .sale-btn {
            border-color: #d40000 !important;
            color: #d40000 !important;
        }

        .darking .sale-btn {
            border-color: #d40000 !important;
            color: #d40000 !important;
        }

        .sale-btn.active {
            background: #d40000 !important;
            color: #fff !important;
        }

        .sale-btn[data-sale="11.11"] {
            border-color: #2c5be8 !important;
            color: #2c5be8 !important;
        }

        .sale-btn[data-sale="11.11"].active {
            background: #2c5be8 !important;
            color: #fff !important;
        }

        .sale-btn[data-sale="cho"] {
            border-color: #8a6a00 !important;
            color: #8a6a00 !important; /* 黄文字は白背景で不可読(1.86)→濃ゴールド(約5:1) */
        }

        .sale-btn[data-sale="cho"].active {
            background: #d4bf00 !important;
            color: #222 !important;
        }

        .sale-btn[data-sale="win"] {
            border-color: #d400bf !important;
            color: #d400bf !important;
        }

        .sale-btn[data-sale="win"].active {
            background: #d400bf !important;
            color: #fff !important;
        }

        .sale-btn[data-sale="bf"] {
            border-color: #444 !important;
            color: #444 !important;
        }

        .sale-btn[data-sale="bf"].active {
            background: #444 !important;
            color: #eee !important;
        }

        /* --- Amount Control (Sticky機能付き) --- */
        #amount-control-wrapper {
            position: relative;
            width: 100%;
        }

        #sticky-sentinel {
            position: absolute;
            top: -10px;
            width: 100%;
            height: 1px;
            pointer-events: none;
            opacity: 0;
        }

        .amount-control {
            background: var(--c-bg-secondary);
            border-radius: 8px;
            padding: 12px;
            border: 1px solid var(--c-border);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            width: 100%;
            z-index: 10;
            margin-bottom: 12px;
        }

        .amount-control.is-stuck {
            position: fixed;
            top: 55px;
            left: 50%;
            transform: translateX(-50%);
            width: 92%;
            max-width: 600px;
            z-index: var(--sticky-z);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            border-color: #999;
            padding: 16px 12px 20px 12px;
        }

        .darking .amount-control.is-stuck {
            background: rgba(50, 50, 50, 0.95);
            border-color: #777;
        }

        .amount-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
            transition: opacity 0.2s, margin 0.2s;
        }

        .amount-control.is-stuck .amount-header {
            display: none;
        }

        .amount-input-wrap {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .amount-input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--c-border);
            border-radius: 6px;
            background: var(--c-bg);
            color: var(--c-text);
            font-weight: bold;
            font-size: 16px;
            line-height: normal;
            transition: all 0.2s;
        }

        .amount-control.is-stuck .amount-input {
            padding: 6px 10px;
            font-size: 14px;
            border-color: #aaa;
        }

        .clear-btn {
            position: absolute;
            right: 8px;
            background: #ccc;
            border: none;
            color: #fff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .range-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            outline: none;
            margin-top: 12px;
            padding: 0;
            display: block;
            transition: opacity 0.2s;
        }

        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--c-accent);
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* --- カード --- */
        .group-header {
            font-size: 1rem;
            font-weight: bold;
            margin: 24px 0 12px;
            padding: 4px;
            text-align: center;
            border-bottom: 1px solid #444;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 8px;
        }

        .darking .group-header,
        .sitedark .group-header {
            color: #ccc;
            border-bottom: 1px solid #aaa;
        }

        .next-coupon-suggestion {
            margin-left: 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--c-text-sub);
            background-color: var(--c-bg);
            padding: 3px 10px;
            border-radius: 12px;
            border: 1px solid var(--c-border);
            white-space: nowrap;
        }

        .card-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            width: 100%;
            margin-bottom: 12px;
        }

        @media (min-width: 500px) {
            .card-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 16px;
            }
        }

        /* リスト表示時はグリッド無効 */
        .card-grid.list-mode {
            grid-template-columns: 1fr !important;
            gap: 2px;
        }

        .coupon-card {
            position: relative;
            display: flex;
            width: 100%;
            border: 2px solid #ddd;
            border-radius: 12px;
            box-shadow: 0 2px 8px var(--c-shadow);
            background-color: #fff;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
            box-sizing: border-box;
            height: 90px;
        }

        .coupon-card:active {
            transform: translateY(1px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .coupon-card.highlighted {
            box-shadow: 0 0 10px 3px #ffeb3b;
            border-color: #ffc107;
        }

        .coupon-card.dimmed {
            opacity: 0.4;
        }

        .badge-container {
            position: absolute;
            top: -10px;
            left: 10px;
            display: flex;
            gap: 5px;
            z-index: 4;
        }

        .card-badge {
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
        }

        .card-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 16px 12px 6px 16px;
            color: #333;
            min-width: 0;
        }

        .main-target {
            font-size: 13px;
            font-weight: 500;
            color: #666;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .main-discount {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.3;
            color: #111;
            white-space: nowrap;
        }

        .discount-rate {
            font-size: 11px;
            font-weight: 600;
            color: #c2410c;
            margin-left: 4px;
        }

        .darking .discount-rate,
        .sitedark .discount-rate {
            color: #ffab40;
        }

        .main-expiry {
            font-size: 10px;
            color: var(--c-text-sub); /* コントラスト確保トークンへ統一 */
            line-height: 1.3;
            white-space: nowrap;
        }

        .card-code-area {
            flex: 0 0 90px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-left: 2px dashed #ddd;
            font-family: monospace, sans-serif;
            transition: filter 0.2s ease;
            border-radius: 0 10px 10px 0;
        }

        .card-code {
            font-size: 15px;
            font-weight: 600;
            color: #fff;
            margin-top: 22px;
            margin-bottom: 6px;
        }

        .new-badge {
            padding: 3px 10px;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            background-color: #c62828;
            pointer-events: none;
        }

        .used-btn {
            font-size: 10px;
            font-weight: 600;
            border-radius: 4px;
            padding: 2px 6px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: background 0.2s;
            white-space: nowrap;
        }

        .used-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .coupon-card.used .used-btn {
            background: rgba(0, 0, 0, 0.2);
            color: #ccc;
            border-color: rgba(0, 0, 0, 0.4);
        }

        .coupon-card.used {
            cursor: default;
            border-color: #ccc;
        }

        .coupon-card.used .badge-container,
        .coupon-card.used .card-main {
            filter: grayscale(1);
            opacity: 0.6;
        }

        .coupon-card.used .card-code-area {
            background-color: #b0b0b0;
        }

        .darking .coupon-card.used .card-code-area,
        .sitedark .coupon-card.used .card-code-area {
            background-color: #555;
        }

        .coupon-card.used .card-code {
            opacity: 0.7;
        }

        .used-mark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-15deg);
            font-size: 24px;
            font-weight: bold;
            color: rgba(255, 0, 0, 0.5);
            border: 3px solid rgba(255, 0, 0, 0.5);
            border-radius: 8px;
            padding: 5px 15px;
            pointer-events: none;
            display: none;
            z-index: 5;
        }

        .coupon-card.used .used-mark {
            display: block;
        }

        /* --- 在庫ないかもスタンプ（ハンコ風） --- */
        .stock-out-stamp {
            position: absolute;
            top: 50%;
            left: 56%;
            transform: translate(-50%, -50%) rotate(-18deg);
            width: 64px;
            height: 64px;
            border: 3px solid rgba(180, 0, 0, 0.6);
            border-radius: 50%;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 900;
            color: rgba(180, 0, 0, 0.6);
            z-index: 5;
            pointer-events: none;
            line-height: 1.2;
            text-align: center;
            background: rgba(255, 255, 255, 0.15);
        }

        .coupon-card.stock-out .stock-out-stamp {
            display: flex;
        }

        .coupon-card.stock-out .card-main {
            opacity: 0.65;
        }

        .coupon-card.stock-out .card-code-area {
            opacity: 0.65;
        }

        /* 在庫ないかも + 使用済み重複時は使用済みを優先 */
        .coupon-card.used.stock-out .stock-out-stamp {
            display: none;
        }

        /* リスト表示の在庫ないかも */
        .list-row.stock-out {
            opacity: 0.65;
        }

        .list-stock-badge {
            font-size: 8px;
            font-weight: 700;
            color: #fff;
            background: #b40000;
            padding: 1px 5px;
            border-radius: 3px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .darking .coupon-card,
        .sitedark .coupon-card {
            background-color: #242424;
            border-color: #555;
        }

        .darking .card-main,
        .sitedark .card-main {
            color: #eee;
        }

        .darking .main-target,
        .sitedark .main-target {
            color: #bbb;
        }

        .darking .main-discount,
        .sitedark .main-discount {
            color: #fff;
        }

        .darking .main-expiry,
        .sitedark .main-expiry {
            color: var(--c-text-sub); /* ダークもトークン(0.82)で十分なコントラスト */
        }

        .darking .card-code-area,
        .sitedark .card-code-area {
            border-left-color: #444;
        }

        .darking .stock-out-stamp {
            border-color: rgba(255, 60, 60, 0.6);
            color: rgba(255, 60, 60, 0.6);
            background: rgba(0, 0, 0, 0.15);
        }

        .type-business {
            border-color: #4a90e2;
            background-color: hsl(212, 71%, 95%);
        }

        .type-business .card-badge {
            background-color: #4a90e2;
        }

        .type-ifp {
            border-color: #b84a39;
            background-color: hsl(7, 55%, 95%);
        }

        .type-ifp .card-badge {
            background-color: #b84a39;
        }

        .type-normal {
            border-color: #2f7a3e;
            background-color: hsl(131, 45%, 95%);
        }

        .type-normal .card-badge {
            background-color: #2f7a3e;
        }

        .type-glo {
            border-color: #7b3fe4;
            background-color: hsl(262, 76%, 95%);
        }

        .type-glo .card-badge {
            background-color: #7b3fe4;
        }

        .type-blog {
            border-color: #d81b60;
            background-color: hsl(339, 77%, 95%);
        }

        .type-blog .card-badge {
            background-color: #d81b60;
        }

        .type-sma {
            border-color: hsl(231, 100%, 62%);
            background-color: hsl(231, 100%, 96%);
        }

        .type-sma .card-badge {
            background-color: hsl(231, 100%, 62%);
        }

        .type-luc {
            border-color: hsl(0, 0%, 35%);
            background-color: hsl(0, 0%, 95%);
        }

        .type-luc .card-badge {
            background-color: hsl(0, 0%, 35%);
        }

        .type-business .card-code-area {
            background-color: #4a90e2;
        }

        .type-ifp .card-code-area {
            background-color: #b84a39;
        }

        .type-normal .card-code-area {
            background-color: #2f7a3e;
        }

        .type-glo .card-code-area {
            background-color: #7b3fe4;
        }

        .type-blog .card-code-area {
            background-color: #d81b60;
        }

        .type-sma .card-code-area {
            background-color: hsl(231, 100%, 62%);
        }

        .type-luc .card-code-area {
            background-color: hsl(0, 0%, 35%);
        }

        .card-code-area:hover {
            filter: brightness(85%);
        }

        /* --- リスト表示 (チケット風コンパクトモード) --- */
        .list-row {
            display: flex;
            align-items: stretch;
            width: 100%;
            cursor: pointer;
            transition: opacity 0.2s, transform 0.1s;
            min-height: 48px;
            border-bottom: 1px solid var(--c-border);
            background: var(--c-bg);
        }

        .list-row:first-child {
            border-radius: 8px 8px 0 0;
        }

        .list-row:last-child {
            border-radius: 0 0 8px 8px;
            border-bottom: none;
        }

        .list-row:active {
            transform: scale(0.99);
        }

        .list-row.dimmed {
            opacity: 0.4;
        }

        .list-row.highlighted {
            box-shadow: inset 0 0 0 2px #ffc107, 0 0 8px rgba(255, 193, 7, 0.3);
        }

        .list-row.used {
            opacity: 0.4;
            cursor: default;
        }

        .list-row.used .list-amount {
            text-decoration: line-through;
        }

        .list-row.used .list-code-text {
            text-decoration: line-through;
            opacity: 0.6;
        }

        /* 左側: 割引額エリア（チケット左半分） */
        .list-left {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            min-width: 100px;
            padding: 6px 10px;
            position: relative;
            flex-shrink: 0;
            gap: 3px;
        }

        /* チケット風の丸い切り欠き（上下） */
        .list-left::before,
        .list-left::after {
            content: '';
            position: absolute;
            right: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--c-bg-secondary);
            z-index: 2;
        }

        .list-left::before {
            top: -5px;
        }

        .list-left::after {
            bottom: -5px;
        }

        /* チケット風の点線区切り */
        .list-divider {
            width: 0;
            border-left: 2px dashed var(--c-border);
            align-self: stretch;
            margin: 4px 0;
            flex-shrink: 0;
        }

        .list-amount {
            font-size: 15px;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            white-space: nowrap;
        }

        .list-amount-sub {
            font-size: 10px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.85);
        }

        /* 中央: 情報エリア */
        .list-center {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 8px 8px 12px;
            min-width: 0;
        }

        .list-sale-badge {
            font-size: 9px;
            font-weight: 700;
            color: #fff;
            background: #c62828;
            padding: 2px 6px;
            border-radius: 3px;
            white-space: nowrap;
        }

        .list-expiry-pill {
            font-size: 10px;
            font-weight: 600;
            color: var(--c-text-sub);
            background: var(--c-bg-secondary);
            border: 1px solid var(--c-border);
            padding: 2px 6px;
            border-radius: 10px;
            white-space: nowrap;
        }

        .list-expiry-text {
            font-size: 10px;
            color: var(--c-text-sub);
            white-space: nowrap;
        }

        /* 右側: バッジ + 期限エリア */
        .list-right {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 4px 4px 0;
            flex-shrink: 0;
        }

        .list-code-text {
            font-family: 'SF Mono', 'Consolas', monospace;
            font-size: 13px;
            font-weight: 700;
            color: var(--c-text);
            background: rgba(0, 0, 0, 0.06);
            padding: 3px 6px;
            border-radius: 4px;
            border: 1px dashed var(--c-border);
            white-space: nowrap;
            flex-shrink: 0;
            width: 95px;
            text-align: center;
            letter-spacing: 0.3px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .darking .list-code-text {
            background: rgba(255, 255, 255, 0.08);
        }

        .list-meta {
            display: flex;
            align-items: baseline;
            gap: 4px;
            flex-wrap: nowrap;
            overflow: hidden;
            min-width: 0;
            flex-shrink: 1;
        }

        .list-target-text {
            font-size: 12px;
            color: var(--c-text-sub);
            white-space: nowrap;
        }

        .list-rate-text {
            font-size: 11px;
            font-weight: 700;
            color: #c2410c;
            white-space: nowrap;
        }

        .darking .list-rate-text {
            color: #ffab40;
        }

        /* 右側: チェックボタン */
        .list-used-btn {
            font-size: 16px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            color: var(--c-text-sub);
            flex-shrink: 0;
            line-height: 1;
            display: flex;
            align-items: center;
        }

        .list-row.used .list-used-btn {
            color: #4caf50;
        }

        /* タイプ別カラー (左側背景) */
        .list-row.list-type-normal .list-left {
            background: #2f7a3e;
        }

        .list-row.list-type-glo .list-left {
            background: #7b3fe4;
        }

        .list-row.list-type-sma .list-left {
            background: hsl(231, 100%, 55%);
        }

        .list-row.list-type-ifp .list-left {
            background: #b84a39;
        }

        .list-row.list-type-blog .list-left {
            background: #d81b60;
        }

        .list-row.list-type-business .list-left {
            background: #4a90e2;
        }

        .list-row.list-type-luc .list-left {
            background: #595959;
        }

        /* タイプ別カラー (行全体の薄い背景) */
        .list-row.list-type-normal {
            background: hsl(131, 35%, 97%);
        }

        .list-row.list-type-glo {
            background: hsl(262, 50%, 97%);
        }

        .list-row.list-type-sma {
            background: hsl(231, 60%, 97%);
        }

        .list-row.list-type-ifp {
            background: hsl(7, 40%, 97%);
        }

        .list-row.list-type-blog {
            background: hsl(339, 50%, 97%);
        }

        .list-row.list-type-business {
            background: hsl(212, 50%, 97%);
        }

        .list-row.list-type-luc {
            background: hsl(0, 0%, 97%);
        }

        /* ダークモード */
        .darking .list-row.list-type-normal {
            background: hsl(131, 20%, 16%);
        }

        .darking .list-row.list-type-glo {
            background: hsl(262, 20%, 16%);
        }

        .darking .list-row.list-type-sma {
            background: hsl(231, 20%, 16%);
        }

        .darking .list-row.list-type-ifp {
            background: hsl(7, 20%, 16%);
        }

        .darking .list-row.list-type-blog {
            background: hsl(339, 20%, 16%);
        }

        .darking .list-row.list-type-business {
            background: hsl(212, 20%, 16%);
        }

        .darking .list-row.list-type-luc {
            background: hsl(0, 0%, 18%);
        }

        .darking .list-row {
            border-bottom-color: #444;
        }

        .card-grid.list-mode {
            grid-template-columns: 1fr !important;
            gap: 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--c-border);
            margin-bottom: 8px;
        }

        /* スマホ用: 2行レイアウト */
        @media (max-width: 767px) {
            .list-left {
                width: 64px;
                min-width: 64px;
                padding: 4px 4px;
                flex-direction: column;
                gap: 0;
            }

            .list-amount {
                font-size: 14px;
            }

            .list-amount-sub {
                font-size: 8px;
            }

            .list-center {
                padding: 6px 4px 6px 8px;
                gap: 4px;
                flex-wrap: wrap;
            }

            .list-center-line1 {
                display: flex;
                align-items: center;
                gap: 6px;
                width: 100%;
            }

            .list-center-line2 {
                display: flex;
                align-items: center;
                gap: 6px;
                width: 100%;
            }

            .list-code-text {
                width: auto;
                min-width: 70px;
                font-size: 12px;
                padding: 2px 6px;
            }

            .list-target-text {
                font-size: 11px;
            }

            .list-rate-text {
                font-size: 10px;
            }

            /* PC用の.list-rightを非表示にしてline2に移動 */
            .list-right {
                display: none;
            }

            .list-sale-badge {
                font-size: 8px;
                padding: 1px 4px;
            }

            .list-expiry-pill {
                font-size: 9px;
                padding: 1px 5px;
            }

            .list-used-btn {
                padding: 6px;
                font-size: 14px;
            }
        }

        /* PC用: line1/line2は横並びのまま、line2非表示 */
        @media (min-width: 768px) {
            .list-center-line1 {
                display: contents;
            }

            .list-center-line2 {
                display: none;
            }
        }

        /* --- リンクモード切替 --- */
        .link-mode-switch {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
            font-size: 12px;
            color: var(--c-text-sub);
        }

        .link-mode-switch span {
            font-weight: 600;
        }

        .link-toggle {
            display: flex;
            background: var(--c-bg-secondary);
            border-radius: 6px;
            border: 1px solid var(--c-border);
            overflow: hidden;
        }

        .link-toggle button {
            background: transparent;
            border: none;
            padding: 5px 10px;
            font-size: 11px;
            font-weight: 600;
            color: var(--c-text-sub);
            cursor: pointer;
            transition: all 0.2s;
        }

        .link-toggle button.active {
            background: var(--c-accent);
            color: var(--c-bg);
        }

        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s;
            z-index: 9999;
            width: max-content;
            max-width: 90vw;
            white-space: nowrap;
        }

        .toast.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        /* --- FABボタン（上へ戻る） --- */
        .fab-top {
            position: fixed;
            bottom: 24px;
            right: 16px;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--c-accent);
            color: var(--c-bg);
            border: none;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
        }

        .fab-top.visible {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }

        /* ============================================================
         *  モダン化オーバーライド（新 /coupon/ アプリへ寄せる）
         *  構造・HTML・JSは不変。末尾追記＝素のセレクタで既存を上書き、
         *  used/stock-out 等の状態ルール(より高詳細度)は保持される。
         *  色はトークン参照でライト/ダーク両対応。
         * ============================================================ */
        #coupon-app-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        #coupon-app { background-color: var(--c-bg-secondary); border-radius: 16px; }

        /* グリッド間隔をつめる */
        .card-grid { gap: 9px; margin-bottom: 9px; }
        @media (min-width: 500px) { .card-grid { gap: 11px; } }
        .card-grid.list-mode { gap: 5px; }

        /* カード: ニュートラル面・細枠・やわらかい影・モダン角丸 */
        .coupon-card {
            border: 1px solid var(--c-border);
            border-radius: var(--radius);
            background-color: var(--c-bg);
            box-shadow: 0 1px 3px var(--c-shadow);
        }
        .coupon-card:hover { box-shadow: 0 4px 14px var(--c-shadow); }
        .coupon-card.highlighted {
            border-color: var(--c-accent);
            box-shadow: 0 0 0 2px var(--c-accent), 0 6px 18px var(--c-shadow);
        }
        .card-main { color: var(--c-text); }
        .main-target { color: var(--c-text-sub); }
        .main-discount { color: var(--c-text); }

        /* 種類色（バッジ・コード欄）を新パレットへ */
        .type-normal .card-badge,   .type-normal .card-code-area   { background-color: var(--t-normal); }
        .type-glo .card-badge,      .type-glo .card-code-area      { background-color: var(--t-glo); }
        .type-sma .card-badge,      .type-sma .card-code-area      { background-color: var(--t-sma); }
        .type-ifp .card-badge,      .type-ifp .card-code-area      { background-color: var(--t-ifp); }
        .type-blog .card-badge,     .type-blog .card-code-area     { background-color: var(--t-blog); }
        .type-business .card-badge, .type-business .card-code-area { background-color: var(--t-business); }
        .type-luc .card-badge,      .type-luc .card-code-area      { background-color: var(--t-luc); }

        /* リスト: OFF金額ボックスを種類色へ */
        .list-row.list-type-normal .list-left   { background: var(--t-normal); }
        .list-row.list-type-glo .list-left      { background: var(--t-glo); }
        .list-row.list-type-sma .list-left      { background: var(--t-sma); }
        .list-row.list-type-ifp .list-left      { background: var(--t-ifp); }
        .list-row.list-type-blog .list-left     { background: var(--t-blog); }
        .list-row.list-type-business .list-left { background: var(--t-business); }
        .list-row.list-type-luc .list-left      { background: var(--t-luc); }

        /* 予約クーポン: 使用開始日（表示専用・アクセント色） */
        .main-start {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 2px;
            color: var(--c-accent);
            font-weight: 700;
            font-size: 12px;
            line-height: 1.2;
        }
        .main-start .cpc-icn { width: 12px; height: 12px; flex-shrink: 0; }
        .list-start-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 1px 8px;
            border-radius: 9999px;
            border: 1px solid var(--c-accent);
            color: var(--c-accent);
            font-weight: 700;
            font-size: 11px;
            white-space: nowrap;
        }
        .list-start-badge .cpc-icn { width: 11px; height: 11px; flex-shrink: 0; }

        /* 種類タブ: アクセント反映 */
        #typeTabs button { font-weight: 600; letter-spacing: -.01em; }
        #typeTabs button.active { color: var(--c-accent); }
        #typeTabs button.active::after { background: var(--c-accent); height: 2.5px; border-radius: 2px; }

        /* セグメント/セールボタン: フラット・新パレット */
        .segment-btn { border-radius: 9px; font-weight: 600; }
        .segment-btn.active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
        .sale-btn { border-radius: 9999px; font-weight: 600; }
        .sale-btn.active { color: #fff; border-color: transparent; }
        .sale-btn[data-sale="all"].active   { background: var(--c-accent); }
        .sale-btn[data-sale="11.11"].active { background: var(--s-spring); }
        .sale-btn[data-sale="cho"].active   { background: var(--s-choice); }
        .sale-btn[data-sale="win"].active   { background: var(--s-wallet); }
        .sale-btn[data-sale="bf"].active    { background: var(--s-outside); }

        /* グループ見出し・FAB・金額枠 */
        .group-header { color: var(--c-text); font-weight: 700; }
        .fab-top { background: var(--c-accent); color: #fff; }
        .amount-control { border-radius: 14px; }

        /* --- ダーク版オーバーライド（既存 .darking/.sitedark ルールへ寄せる） --- */
        .darking .coupon-card,
        .sitedark .coupon-card {
            background-color: var(--c-bg);
            border-color: var(--c-border);
        }
        .darking #typeTabs button.active,
        .sitedark #typeTabs button.active { color: var(--c-accent); }
        .darking #typeTabs button.active::after,
        .sitedark #typeTabs button.active::after { background: var(--c-accent) !important; }
        .darking .main-discount,
        .sitedark .main-discount { color: var(--c-text); }
        .darking .group-header,
        .sitedark .group-header { color: var(--c-text); }

        /* ============================================================
         *  SVGアイコン（絵文字置換）＋ カード高密度化
         * ============================================================ */
        .cpc-icn {
            width: 1.05em; height: 1.05em;
            fill: none; stroke: currentColor; stroke-width: 2;
            stroke-linecap: round; stroke-linejoin: round;
            vertical-align: -2px; flex-shrink: 0;
        }
        #pcViewCard, #pcViewList, .view-toggle-btn, .filter-open-btn, .used-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        }
        .list-used-btn, .clear-btn, .fab-top { display: inline-flex; align-items: center; justify-content: center; }
        .fab-top .cpc-icn { width: 20px; height: 20px; stroke-width: 2.4; }
        .list-used-btn .cpc-icn { width: 16px; height: 16px; }
        .clear-btn .cpc-icn { width: 14px; height: 14px; }

        /* 高密度化: カード面積を縮小して1画面により多く表示 */
        .card-grid { gap: 8px; margin-bottom: 8px; }
        @media (min-width: 500px) {
            /* 長い種類バッジ＋新バッジが収まる最小幅。詰めすぎると上部バッジ行が崩れるため240pxに */
            .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }
        }
        .coupon-card { height: auto; min-height: 60px; }
        /* バッジ行がカード幅を超えて崩れるのを防止（長い新バッジは省略表示） */
        .badge-container { max-width: calc(100% - 16px); }
        .card-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
        .new-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
        .card-main { padding: 17px 8px 7px 13px; } /* 上余白はバッジ(top:-8px)と重ならない値に */
        .main-target { font-size: 11.5px; line-height: 1.2; }
        .main-discount { font-size: 15px; line-height: 1.25; }
        .main-expiry { font-size: 9.5px; line-height: 1.2; }
        .discount-rate { font-size: 10px; }
        .card-badge { font-size: 9.5px; padding: 2px 8px; }
        .badge-container { top: -8px; }
        .card-code-area { flex: 0 0 84px; border-radius: 0 var(--radius) var(--radius) 0; }
        .card-code { font-size: 13px; margin-top: 15px; margin-bottom: 5px; }

        /* スタンプ(ハンコ)を高密度カードに合わせて縮小 */
        .stock-out-stamp { width: 48px; height: 48px; font-size: 8.5px; border-width: 2.5px; line-height: 1.15; }
        .used-mark { font-size: 15px; padding: 3px 11px; border-width: 2.5px; }

        /* バッジの高さを固定（カードによる高さのばらつきを解消。幅は内容に応じて可変のまま） */
        .badge-container { align-items: center; }
        .card-badge, .new-badge {
            height: 20px; line-height: 1;
            padding-top: 0; padding-bottom: 0;
            display: inline-flex; align-items: center;
            font-size: 9.5px;
        }

        /* ============================================================
         *  コントロールパネル刷新（PC専用・ラベル付き整列でスッキリ）
         * ============================================================ */
        .control-panel {
            background: var(--c-bg);
            border: 1px solid var(--c-border);
            border-radius: 16px;
            padding: 13px 16px;
            margin: 0 0 16px;
            box-shadow: 0 1px 3px var(--c-shadow);
        }
        @media (min-width: 768px) {
            .control-panel { display: flex; flex-direction: column; gap: 10px; }
        }
        .cp-row { display: flex; align-items: center; gap: 12px; }
        .cp-row-sale { align-items: flex-start; }
        .cp-label {
            flex: 0 0 52px;
            font-size: 11px; font-weight: 700;
            color: var(--c-text-sub);
            letter-spacing: .03em;
            padding-top: 1px;
        }
        /* 行内に収めるため余白・寄せ・幅を調整 */
        .control-panel .segment-switch { margin-bottom: 0; flex: 0 1 280px; }
        .control-panel .sale-switch { margin-bottom: 0; justify-content: flex-start; gap: 7px; }
        .control-panel .link-toggle { box-shadow: 0 1px 2px var(--c-shadow); }

        /* 表示切替(カード/リスト+コピーのみ)をコントロールパネル行に統合 */
        .control-panel .pc-view-toggle { display: flex; flex: 1; margin-bottom: 0; align-items: center; gap: 8px; }
        .control-panel .pc-view-toggle .copy-only-toggle { margin-left: auto; }

        /* ============================================================
         *  リスト表示を「普通のリスト」に（チケット風装飾を除去）
         * ============================================================ */
        .list-left::before, .list-left::after { display: none; }      /* 丸い切り欠きを除去 */
        .list-divider { display: none; }                               /* 点線区切りを除去 */
        #coupon-app-wrapper .list-row[class*="list-type-"] .list-left { background: transparent; } /* 色塗りボックスを廃止 */
        #coupon-app-wrapper .list-row[class*="list-type-"] { background: var(--c-bg); }            /* 行の色付き地を廃止 */
        .list-left { width: 86px; min-width: 86px; justify-content: flex-start; padding-left: 12px; }
        .list-amount { color: var(--c-text); }                         /* 白文字→通常テキスト色 */
        .list-amount-sub { color: var(--c-text-sub); }
        .list-row:first-child, .list-row:last-child { border-radius: 0; } /* グループ角丸を外して素のリストに */

        /* ===== アクセシビリティ: 文字サイズ切替ボタン ===== */
        .a11y-seg {
            display: inline-flex;
            gap: 4px;
            background: var(--c-bg-secondary);
            border-radius: 9px;
            padding: 3px;
        }
        .a11y-seg button {
            border: none;
            background: transparent;
            color: var(--c-text-sub);
            font-weight: 700;
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 7px;
            cursor: pointer;
            transition: all 0.15s;
            line-height: 1;
        }
        .a11y-seg button:nth-child(2) { font-size: 14px; }
        .a11y-seg button:nth-child(3) { font-size: 16px; }
        .a11y-seg button.active {
            background: var(--c-accent);
            color: #fff;
        }

        /* ===== 拡大機能 (文字サイズ・高齢層向け / localStorage保存) ===== */
        /* zoom はレイアウトごと拡大。FAB/シートの固定位置がずれないよう内側 #coupon-app のみ拡大 */
        #coupon-app-wrapper.fs-large  #coupon-app { zoom: 1.25; }
        #coupon-app-wrapper.fs-xlarge #coupon-app { zoom: 1.6; }

        /* ===== 設定フローティングボタン (スマホ表示時に設定/フィルターを開く) ===== */
        .fab-settings {
            display: none;
            position: fixed;
            bottom: 78px;
            right: 16px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--c-accent);
            color: #fff;
            border: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 14px var(--c-shadow);
            z-index: 1001;
            -webkit-tap-highlight-color: transparent;
        }
        .fab-settings .cpc-icn { width: 24px; height: 24px; }
        @media (max-width: 767px) {
            .fab-settings { display: flex; }
        }

        /* ===== 高コントラスト配色 (色覚多様性に配慮した識別しやすいパレット) ===== */
        /* タイプ色トークンを上書き。白文字が乗るため全色を濃い高コントラスト系で統一 */
        #coupon-app-wrapper.cb-safe {
            --t-normal:   #1b7837; /* 緑 */
            --t-glo:      #6a1b9a; /* 紫 */
            --t-sma:      #1565c0; /* 青 */
            --t-ifp:      #b35806; /* 焦茶橙 */
            --t-business: #00695c; /* 深いティール */
            --t-blog:     #ad1457; /* 濃ピンク */
            --t-luc:      #424242; /* グレー */
        }