/* =====================================================
   SKIN: Retro（昭和レトロスナック）
   ===================================================== */
:root {
    --tnn-color-primary: #CC4E1A;
    --tnn-color-primary-dark: #AA3810;
    --tnn-color-accent: #E8952A;
    --tnn-color-accent-dark: #CC7B18;
    --tnn-color-bg: #FAF3E0;
    --tnn-color-card-bg: #FFF8EB;
    --tnn-color-text-main: #2A1A0A;
    --tnn-color-text-sub: #7A5A3A;
    --tnn-color-border: #DDD0B0;
    --tnn-color-header-bg: #2A1A06;
    --tnn-color-header-text: #FFF0D0;
    --tnn-color-tag-bg: rgba(204, 78, 26, .1);
    --tnn-color-tag-text: #CC4E1A;
    --tnn-color-tag-border: rgba(204, 78, 26, .3);
    --tnn-color-rank-badge-1: linear-gradient(135deg, #FFDF40, #E07B00);
    --tnn-rank1-text: #3A1A00;
    --tnn-color-rank-badge-2: linear-gradient(135deg, #D0C0A0, #B0A080);
    --tnn-rank2-text: #2A1A0A;
    --tnn-color-rank-badge-3: linear-gradient(135deg, #CC8855, #884422);
    --tnn-rank3-text: #FFF0D0;
    --tnn-radius-card: 6px;
}

body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23FAF3E0'/%3E%3Crect x='0' y='0' width='1' height='60' fill='rgba(160,120,60,.05)'/%3E%3Crect x='0' y='0' width='60' height='1' fill='rgba(160,120,60,.05)'/%3E%3C/svg%3E");
}

.tnn-header {
    background: linear-gradient(135deg, #2A1A06 0%, #4A2A0A 100%);
    border-bottom: 3px solid #CC4E1A;
}

.tnn-header__logo {
    font-family: 'Georgia', 'Times New Roman', serif;
    letter-spacing: .08em;
}

.tnn-shop-card {
    border: 1px solid #DDD0B0;
    box-shadow: 0 2px 8px rgba(100, 60, 10, .12), 2px 2px 0 rgba(160, 120, 60, .15);
}

.tnn-shop-card:hover {
    border-color: #CC4E1A;
    box-shadow: 0 4px 16px rgba(204, 78, 26, .2), 2px 2px 0 rgba(160, 120, 60, .2);
}

.tnn-shop-card__info th {
    background: #FFF3D0;
}

.tnn-btn--contact {
    background: linear-gradient(135deg, #E8952A, #CC4E1A);
    animation: tnn-retro-pulse 2s infinite;
}

@keyframes tnn-retro-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 149, 42, .5);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(232, 149, 42, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(232, 149, 42, 0);
    }
}

.tnn-filter__chip {
    background: #FFF8EB;
    border-color: #DDD0B0;
}

.tnn-filter__chip.is-active {
    background: #CC4E1A;
    border-color: #CC4E1A;
}

.tnn-footer {
    background: linear-gradient(135deg, #2A1A06, #4A2A0A);
    border-top: 3px solid #CC4E1A;
}