:root {
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-text: #1f1f1f;
    --color-text-muted: #666;
    --color-border: #eaeaea;
    --color-accent: #3D7DCA;

    /* バッジ（薄いタグ風: bg は淡く、文字は濃いめで識別性確保） */
    --badge-pokemon-bg:  #FFF6CC;
    --badge-pokemon-fg:  #8B6F00;
    --badge-web-bg:      #E3F2FD;
    --badge-web-fg:      #1E5BA8;
    --badge-store-bg:    #FCE4E4;
    --badge-store-fg:    #B5240A;
    --badge-app-bg:      #EDE7F6;
    --badge-app-fg:      #5E3A9C;
    --badge-reserve-bg:  #E8F5E9;
    --badge-reserve-fg:  #2E7032;
    --badge-invite-bg:   #EEEEEE;
    --badge-invite-fg:   #555555;
    --badge-other-bg:    #EEEEEE;
    --badge-other-fg:    #555555;

    /* カウントダウン用の濃い赤（識別性のためバッジとは分離して残す） */
    --color-countdown: #E3350D;

    --radius: 12px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
    --container-max: 720px;
    --gap: 12px;
    --gap-section: 32px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 16px;
}

.skip-link {
    position: absolute;
    left: -9999px; top: 0;
    padding: 8px 12px;
    background: #000;
    color: #fff;
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ===== Header ===== */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner {
    padding: 12px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-header__logo { text-decoration: none; color: inherit; }
.site-header__brand { font-weight: 700; font-size: 1.15rem; }
.site-header__catch { display: block; font-size: .8rem; color: var(--color-text-muted); }
.site-header__updated { font-size: .75rem; color: #888; margin: 0; }

/* ===== Main ===== */
.main { padding: 24px 0 40px; }

.intro__title { font-size: 1.4rem; margin: 0 0 4px; }
.intro__lead { color: var(--color-text-muted); margin: 0 0 24px; }

/* ===== Filters ===== */
.filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.filter-group__label {
    font-size: .8rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: 4px;
}
.filter-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .85rem;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.filter-chip:hover { border-color: var(--color-accent); }
.filter-chip.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* ===== Sections ===== */
.cards-section { margin-bottom: var(--gap-section); }
.cards-section__title {
    font-size: 1.1rem;
    margin: 0 0 12px;
    padding-left: 4px;
    border-left: 4px solid var(--color-accent);
}
.cards-section__title [data-count] { font-weight: normal; color: var(--color-text-muted); font-size: .9em; }
.cards { display: flex; flex-direction: column; gap: var(--gap); }

/* ===== Card ===== */
.card {
    padding: 16px;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.card.is-hidden { display: none; }
.card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1.6;
    font-weight: 500;
}
.badge--category { background: var(--badge-pokemon-bg); color: var(--badge-pokemon-fg); }
.badge--web      { background: var(--badge-web-bg);     color: var(--badge-web-fg); }
.badge--store    { background: var(--badge-store-bg);   color: var(--badge-store-fg); }
.badge--app      { background: var(--badge-app-bg);     color: var(--badge-app-fg); }
.badge--reserve  { background: var(--badge-reserve-bg); color: var(--badge-reserve-fg); }
.badge--invite   { background: var(--badge-invite-bg);  color: var(--badge-invite-fg); }
.badge--other    { background: var(--badge-other-bg);   color: var(--badge-other-fg); }

.card__product { font-size: 1rem; margin: 0 0 4px; line-height: 1.4; }
.card__store { font-size: .85rem; color: var(--color-text-muted); margin: 0 0 12px; }

.card__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0 0 12px;
    font-size: .85rem;
}
.card__details-term {
    color: var(--color-text-muted);
    font-weight: normal;
}
.card__details-desc { margin: 0; }
.card__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--color-countdown);
}
.card__countdown[data-expired="true"] { color: var(--color-text-muted); }

.card__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: .8rem;
    flex-wrap: wrap;
}
.card__cta {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background .15s;
}
.card__cta:hover { background: #2a5e9e; }

/* ===== Empty ===== */
.empty {
    padding: 32px 16px;
    background: var(--color-surface);
    border-radius: var(--radius);
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--gap-section);
}
.empty__hint { font-size: .85rem; color: #999; margin-top: 8px; }

/* ===== FAQ ===== */
.faq { margin-top: var(--gap-section); }
.faq__title {
    font-size: 1.1rem;
    margin: 0 0 12px;
    padding-left: 4px;
    border-left: 4px solid var(--color-accent);
}
.faq__item {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    margin-bottom: 8px;
    padding: 12px 16px;
}
.faq__q {
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    position: relative;
    padding-right: 24px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "+";
    position: absolute;
    right: 0;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: .9rem;
}

/* ===== Error / Maintenance ===== */
.error { padding: 48px 16px; text-align: center; }
.error h1 { font-size: 1.4rem; margin: 0 0 12px; }

/* ===== Footer ===== */
.site-footer {
    padding: 32px 0;
    margin-top: 48px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .85rem;
    color: var(--color-text-muted);
}
.site-footer__disclaimer,
.site-footer__sources,
.site-footer__copy { margin: 0 0 8px; }
.site-footer a { color: var(--color-text-muted); }

/* ===== A11y ===== */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
    html { scroll-behavior: auto; }
}