/**
 * クライアント個別上書きCSS
 * main.css で使うデザイントークンを定義します。
 */

/* ============================================
  CSS変数定義（カスタマイズ可能）
  ============================================ */
  :root {
    /* テーマカラー */
    --color-ui-h: 236.31;
    --color-ui-c: 0.145;

    --color-main: oklch(0.7513 0.145 236.31);
    --color-accent: oklch(0.8108 0.1098 236.61);
    --color-base: oklch(0.9724 0.0137 247.97);

    --color-main-50: oklch(0.7513 0.145 236.31 / 0.5);
    --color-accent-50: oklch(0.8108 0.1098 236.61 / 0.5);
    --color-base-50: oklch(0.9724 0.0137 247.97 / 0.5);

    /* グレースケール */
    --gray-l-0: 1.000;
    --gray-l-1: 0.985;
    --gray-l-2: 0.970;
    --gray-l-3: 0.940;
    --gray-l-4: 0.900;
    --gray-l-5: 0.820;
    --gray-l-6: 0.740;
    --gray-l-7: 0.600;
    --gray-l-8: 0.480;
    --gray-l-9: 0.420;
    --gray-l-10: 0.321;
    --gray-l-11: 0.220;
    --gray-l-12: 0.150;
    --gray-l-13: 0.080;
    --gray-l-14: 0.030;
    --gray-l-15: 0.000;

    /* 彩度変数 */
    --c-muted: 0.05;
    --c-soft: 0.125;
    --c-normal: 0.165;
    --c-strong: 0.20;
    --c-vivid: 0.24;

    /* モノクロ */
    --color-white: oklch(var(--gray-l-0) 0 0);
    --color-gray-1: oklch(var(--gray-l-1) 0 0);
    --color-gray-2: oklch(var(--gray-l-2) 0 0);
    --color-gray-3: oklch(var(--gray-l-3) 0 0);
    --color-gray-4: oklch(var(--gray-l-4) 0 0);
    --color-gray-5: oklch(var(--gray-l-5) 0 0);
    --color-gray-6: oklch(var(--gray-l-6) 0 0);
    --color-gray-7: oklch(var(--gray-l-7) 0 0);
    --color-gray-8: oklch(var(--gray-l-8) 0 0);
    --color-gray-9: oklch(var(--gray-l-9) 0 0);
    --color-gray-10: oklch(var(--gray-l-10) 0 0);
    --color-gray-11: oklch(var(--gray-l-11) 0 0);
    --color-gray-12: oklch(var(--gray-l-12) 0 0);
    --color-gray-13: oklch(var(--gray-l-13) 0 0);
    --color-gray-14: oklch(var(--gray-l-14) 0 0);
    --color-black: oklch(var(--gray-l-15) 0 0);

    /* テーマカラー(グレースケール) */
    --theme-lightest: oklch(var(--gray-l-1) var(--c-muted) var(--color-ui-h));
    --theme-lighter: oklch(var(--gray-l-2) var(--c-muted) var(--color-ui-h));
    --theme-light: oklch(var(--gray-l-3) var(--c-soft) var(--color-ui-h));
    --theme-light-lighter: oklch(var(--gray-l-4) var(--c-normal) var(--color-ui-h));
    --theme-base: oklch(var(--gray-l-5) var(--c-normal) var(--color-ui-h));
    --theme-dark-lighter: oklch(var(--gray-l-6) var(--c-normal) var(--color-ui-h));
    --theme-dark: oklch(var(--gray-l-7) var(--c-strong) var(--color-ui-h));
    --theme-dark-lighter: oklch(var(--gray-l-8) var(--c-strong) var(--color-ui-h));
    --theme-dark-normal: oklch(var(--gray-l-9) var(--c-strong) var(--color-ui-h));
    --theme-dark-strong: oklch(var(--gray-l-10) var(--c-strong) var(--color-ui-h));
    --theme-dark-vivid: oklch(var(--gray-l-11) var(--c-strong) var(--color-ui-h));
    --theme-dark-darker: oklch(var(--gray-l-12) var(--c-strong) var(--color-ui-h));
    --theme-dark-darkest: oklch(var(--gray-l-13) var(--c-strong) var(--color-ui-h));
    --theme-dark-darkestest: oklch(var(--gray-l-14) var(--c-strong) var(--color-ui-h));

    /* グラデーション */
    --bg-gradient-start: var(--color-main);
    --bg-gradient-end: var(--color-base);

    /* ナビゲーション背景色 */
    --nav-bg: var(--color-white);
    --nav-active-bg: oklch(var(--gray-l-6) var(--c-normal) var(--color-ui-h) / 0.1);

    /* テキスト色 */
    --text-primary: oklch(var(--gray-l-10) 0 0);
    --text-secondary: oklch(var(--gray-l-8) 0.02 var(--color-ui-h));
    --text-light: oklch(var(--gray-l-1) 0 0);
    --text-muted: oklch(var(--gray-l-5) 0 0);

    /* アクセント色 */
    --red-h: 28;
    --vermilion-h: 30;
    --orange-h: 43;
    --yellow-h: 90;
    --yellowgreen-h: 120;
    --green-h: 145;
    --teal-h: 200;
    --cyan-h: 220;
    --blue-h: 245;
    --navy-h: 270;
    --indigo-h: 280;
    --purple-h: 300;
    --magenta-h: 320;
    --pink-h: 345;
    --rose-h: 355;

    /* RED */
    --red-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--red-h));
    --red-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--red-h));
    --red-main: oklch(var(--gray-l-7) var(--c-vivid) var(--red-h));
    --red-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--red-h));
    --red-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--red-h));

    /* VERMILION */
    --vermilion-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--vermilion-h));
    --vermilion-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--vermilion-h));
    --vermilion-main: oklch(var(--gray-l-7) var(--c-strong) var(--vermilion-h));
    --vermilion-darker: oklch(var(--gray-l-9) var(--c-strong) var(--vermilion-h));
    --vermilion-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--vermilion-h));

    /* ORANGE */
    --orange-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--orange-h));
    --orange-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--orange-h));
    --orange-main: oklch(0.70 var(--c-strong) var(--orange-h));
    --orange-darker: oklch(var(--gray-l-9) var(--c-strong) var(--orange-h));
    --orange-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--orange-h));

    /* YELLOW */
    --yellow-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--yellow-h));
    --yellow-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--yellow-h));
    --yellow-main: oklch(var(--gray-l-5) var(--c-normal) var(--yellow-h));
    --yellow-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--yellow-h));
    --yellow-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--yellow-h));

    /* YELLOWGREEN */
    --yellowgreen-rightest: oklch(var(--gray-l-3) var(--c-muted) var(--yellowgreen-h));
    --yellowgreen-lighter: oklch(var(--gray-l-4) var(--c-soft) var(--yellowgreen-h));
    --yellowgreen-main: oklch(var(--gray-l-4) var(--c-strong) var(--yellowgreen-h));
    --yellowgreen-darker: oklch(var(--gray-l-6) var(--c-vivid) var(--yellowgreen-h));
    --yellowgreen-darkest: oklch(var(--gray-l-9) var(--c-vivid) var(--yellowgreen-h));

    /* GREEN */
    --green-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--green-h));
    --green-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--green-h));
    --green-main: oklch(var(--gray-l-6) var(--c-strong) var(--green-h));
    --green-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--green-h));
    --green-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--green-h));

    /* TEAL */
    --teal-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--teal-h));
    --teal-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--teal-h));
    --teal-main: oklch(var(--gray-l-6) var(--c-vivid) var(--teal-h));
    --teal-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--teal-h));
    --teal-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--teal-h));

    /* CYAN */
    --cyan-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--cyan-h));
    --cyan-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--cyan-h));
    --cyan-main: oklch(var(--gray-l-6) var(--c-soft) var(--cyan-h));
    --cyan-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--cyan-h));
    --cyan-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--cyan-h));

    /* BLUE */
    --blue-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--blue-h));
    --blue-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--blue-h));
    --blue-main: oklch(var(--gray-l-8) var(--c-vivid) var(--blue-h));
    --blue-darker: oklch(var(--gray-l-10) var(--c-strong) var(--blue-h));
    --blue-darkest: oklch(var(--gray-l-11) var(--c-strong) var(--blue-h));

    /* NAVY */
    --navy-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--navy-h));
    --navy-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--navy-h));
    --navy-main: oklch(var(--gray-l-10) var(--c-normal) var(--navy-h));
    --navy-darker: oklch(var(--gray-l-11) var(--c-normal) var(--navy-h));
    --navy-darkest: oklch(var(--gray-l-12) var(--c-strong) var(--navy-h));

    /* INDIGO */
    --indigo-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--indigo-h));
    --indigo-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--indigo-h));
    --indigo-main: oklch(calc(var(--gray-l-7) - 0.05) var(--c-strong) var(--indigo-h));
    --indigo-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--indigo-h));
    --indigo-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--indigo-h));

    /* PURPLE */
    --purple-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--purple-h));
    --purple-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--purple-h));
    --purple-main: oklch(var(--gray-l-8) var(--c-vivid) var(--purple-h));
    --purple-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--purple-h));
    --purple-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--purple-h));

    /* MAGENTA */
    --magenta-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--magenta-h));
    --magenta-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--magenta-h));
    --magenta-main: oklch(var(--gray-l-7) var(--c-vivid) var(--magenta-h));
    --magenta-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--magenta-h));
    --magenta-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--magenta-h));

    /* PINK */
    --pink-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--pink-h));
    --pink-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--pink-h));
    --pink-main: oklch(var(--gray-l-6) var(--c-vivid) var(--pink-h));
    --pink-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--pink-h));
    --pink-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--pink-h));

    /* ROSE */
    --rose-rightest: oklch(var(--gray-l-4) var(--c-muted) var(--rose-h));
    --rose-lighter: oklch(var(--gray-l-5) var(--c-soft) var(--rose-h));
    --rose-main: oklch(var(--gray-l-7) var(--c-vivid) var(--rose-h));
    --rose-darker: oklch(var(--gray-l-9) var(--c-vivid) var(--rose-h));
    --rose-darkest: oklch(var(--gray-l-11) var(--c-vivid) var(--rose-h));

    --color-accent-red: var(--red-main);
    --color-accent-vermilion: var(--vermilion-main);
    --color-accent-orange: var(--orange-main);
    --color-accent-yellow: var(--yellow-main);
    --color-accent-yellowgreen: var(--yellowgreen-main);
    --color-accent-green: var(--green-main);
    --color-accent-teal: var(--teal-main);
    --color-accent-cyan: var(--cyan-main);
    --color-accent-blue: var(--blue-main);
    --color-accent-navy: var(--blue-darkest);
    --color-accent-purple: var(--purple-main);
    --color-accent-magenta: var(--magenta-main);
    --color-accent-pink: var(--pink-main);
    --color-accent-rose: var(--rose-main);

    --bg: oklch(var(--gray-l-2) 0.00875 var(--color-ui-h));
    /* カード・コンポーネント */
    --card-bg: oklch(var(--gray-l-2) 0.01 var(--color-ui-h));
    --card-radius: 16px;
    --card-shadow: 3px 3px 6px oklch(var(--gray-l-9) 0.01 var(--color-ui-h));
    --card-padding: 20px;

    --skeuomor-shadow:
        inset 3px 3px 6px oklch(var(--gray-l-0) 0.01 var(--color-ui-h)),
        inset -3px -3px 6px oklch(var(--gray-l-5) 0.02 var(--color-ui-h));

    --neumo-shadow:
        -4px -4px 8px oklch(var(--gray-l-0) 0.01 var(--color-ui-h)),
        4px 4px 8px oklch(var(--gray-l-5) 0.02 var(--color-ui-h));

    --neumo-shadow-inset:
        inset -4px -4px 8px oklch(var(--gray-l-0) 0.01 var(--color-ui-h)),
        inset 4px 4px 8px oklch(var(--gray-l-5) 0.02 var(--color-ui-h));

    --neumo-shadow-soft:
        -1px -1px 1px oklch(var(--gray-l-0) 0.01 var(--color-ui-h)),
        1px 1px 1px oklch(var(--gray-l-5) 0.02 var(--color-ui-h));

    --neumo-shadow-inset-soft:
        inset -1.5px -1.5px 1px oklch(var(--gray-l-0) 0.01 var(--color-ui-h)),
        inset 1px 1px 1px oklch(var(--gray-l-5) 0.02 var(--color-ui-h));

    /* 半透明カード（店舗情報用） */
    --glass-bg: oklch(1 0 0 / 0.8);
    --glass-blur: blur(10px);
    --glass-border: oklch(1 0 0 / 0.3);

    /* ボタン */
    --btn-primary-bg: oklch(0.646 0.1423 253.92);
    --btn-primary-color: oklch(1 0 0);
    --btn-primary-hover: oklch(0.55 0.12 253);
    --btn-secondary-bg: oklch(0.88 0 0);
    --btn-secondary-color: oklch(0.25 0 0);

    /* 入力フィールド */
    --input-bg: var(--color-white);
    --input-border: oklch(var(--gray-l-3) 0 0);
    --input-border-focus: var(--color-accent-blue);
    --input-radius: 8px;

    /* スタンプ・アイコン */
    --stamp-color: transparent;
    --stamp-active: oklch(0.646 0.1423 253.92);
    --stamp-grid-border: 1px solid oklch(0.65 0.14 253.93 / 0.2);

    /* スペーシング */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;



    /* フォントサイズ */
    --font-3xs: 10px;
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-xxl: 24px;

    /* タブ毎の背景色 */
    --tab-reward-bg: linear-gradient(175deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
    --tab-store-info-bg: var(--tab-reward-bg);
    --tab-sister-stores-view-bg: var(--tab-reward-bg);
    --tab-single-store-view-bg: linear-gradient(175deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);

    /* ヘッダー - タブ毎の背景色 */
    --header-reward-bg: oklch(1 0 0 / 0.1);
    --header-store-info-bg: oklch(1 0 0 / 0.9);


    /* ヘッダーアイコン - タブ毎の色 */
    --header-icon-reward-color: var(--text-light);
    --header-icon-store-info-color: var(--text-primary);

    /* ヘッダーアイコン - タブ毎の丸枠スタイル */
    --header-icon-reward-bg: oklch(1 0 0 / 0.2);
    --header-icon-reward-border: oklch(1 0 0 / 0.3);
    --header-icon-store-info-bg: oklch(1 0 0 / 0.9);
    --header-icon-store-info-border: var(--text-primary);

    /* ヘッダー中央：見ため・サイズ・余白のみ（レイアウトは reward.css）。305行付近のヘッダー系トークンと同じ運用 */
    --header-store-selector-margin-inline: var(--spacing-md);
    --header-store-selector-border: 1px solid rgba(255, 255, 255, 0.3);
    --header-store-selector-bg: rgba(255, 255, 255, 0.2);
    --header-store-selector-bg-hover: rgba(255, 255, 255, 0.3);
    --header-store-selector-color: var(--text-light);
    --header-store-selector-font-size: var(--font-sm);
    --header-store-list-bg: rgba(255, 255, 255, 0.95);
    --header-store-list-border: 1px solid rgba(255, 255, 255, 0.3);
    --header-store-list-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --header-store-list-max-height: 200px;
    --header-store-list-item-color: var(--text-primary);
    --header-store-list-item-border: 1px solid rgba(0, 0, 0, 0.05);
    --header-store-list-item-hover-bg: rgba(0, 0, 0, 0.05);
    --header-store-list-item-active-bg: rgba(102, 126, 234, 0.1);
    --header-store-list-item-active-color: var(--btn-primary-bg);
    --header-store-list-item-active-font-weight: 500;

    --header-store-brand-gap: var(--spacing-sm);
    --header-store-brand-margin-inline: var(--spacing-md);
    --header-store-logo-size: 32px;
    --header-store-logo-border: 1px solid oklch(1 0 0 / 0.35);
    --header-store-brand-name-font-size: var(--font-sm);
    --header-store-brand-name-font-weight: 600;
    --header-store-brand-name-color-reward: var(--text-light);
    --header-store-brand-name-color-store-tabs: var(--header-icon-store-info-color);
    --header-store-banner-max-width: min(220px, 100%);
    --header-store-banner-max-height: 38px;
    --header-store-brand-align-items: center;
    --header-store-brand-justify-content: center;
    --header-store-brand-justify-banner: center;
}



/* カードタブ時のヘッダー */
.app-header[data-tab="reward"] {
    background: var(--header-reward-bg);
}

/* 店舗情報・カスタムタブ時のヘッダー（店舗情報と同系統の半透明） */
.app-header[data-tab="store_info"] {
    background: oklch(100% 0 0 / 0.15);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid oklch(100% 0 0 / 0.2);
    box-shadow: 0 4px 24px oklch(0% 0 0 / 0.08);
}

.app-header[data-tab="custom1"],
.app-header[data-tab="custom2"],
.app-header[data-tab="custom3"] {
    background: oklch(100% 0 0 / 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-bottom: 1px solid oklch(100% 0 0 / 0.2);
    box-shadow: 0 4px 24px oklch(0% 0 0 / 0.08);
}

/* カードタブ時のヘッダーアイコン */
.app-header[data-tab="reward"] .header-icon,
.app-header[data-tab="store_info"] .header-icon {
    background: var(--header-icon-reward-bg);
    border: 1px solid var(--header-icon-reward-border);
}


.app-header[data-tab="custom1"] .header-icon,
.app-header[data-tab="custom2"] .header-icon,
.app-header[data-tab="custom3"] .header-icon {
    background: var(--header-icon-store-info-bg);
    border: 1px solid var(--header-icon-store-info-border);
}

/* カードタブ時のヘッダーアイコン */
.app-header[data-tab="reward"] .header-icon svg,
.app-header[data-tab="store_info"] .header-icon svg {
    stroke: var(--header-icon-reward-color);
}

/* カスタムタブ時のヘッダーアイコン */

.app-header[data-tab="custom1"] .header-icon svg,
.app-header[data-tab="custom2"] .header-icon svg,
.app-header[data-tab="custom3"] .header-icon svg {
    stroke: var(--header-icon-store-info-color);
}

/* ヘッダーブランド名のタブ別色（クライアント個別調整） */
.app-header[data-tab="reward"] .header-store-brand__name,
.app-header[data-tab="store_info"] .header-store-brand__name {
    color: var(--header-store-brand-name-color-reward, var(--header-icon-reward-color));
}


.app-header[data-tab="custom1"] .header-store-brand__name,
.app-header[data-tab="custom2"] .header-store-brand__name,
.app-header[data-tab="custom3"] .header-store-brand__name {
    color: var(--header-store-brand-name-color-store-tabs, var(--header-icon-store-info-color));
}




#custom1-tab {
    gap: var(--spacing-lg);
    background: var(--color-base);
    padding-top: var(--header-height);
    padding-block-end: var(--bottom-nav-height);
    position: relative;
}

#custom1-tab .content-carousel {
    background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--color-base) 95%);
}

.another-content-list {
    margin-inline: 1rem;
}

#custom2-tab {
    gap: var(--spacing-lg);
    background: var(--color-base);
    padding-top: var(--header-height);
    padding-block-end: var(--bottom-nav-height);
    position: relative;
}

.stamp-cell.has-stamp::before {
    background-image: url('../../img/stamp.png') !important;
}


@media (color-gamut: p3) {
    :root {
        --color-main: oklch(0.7513 0.148 236.31);
    }
}