/* DAMONO受信会 番組表表示用CSS */
/* Build 20260510-Ver.1.05 */

:root {
    --p-green: #2D5A27;
    --a-green: #e9f2e9;
    --bg-gray: #f0f3f0;
    --text-main: #333;
    
    /* 番組種別カラー */
    --live-red: #e74c3c;
    --recorded-green: #27ae60;
    --mb-blue: #3498db;
    --rerun-gray: #7f8c8d;
    --special-yellow: #f1c40f;
    --emergency-orange: #e67e22;
    --gov-navy: #34495e;
    --test-purple: #9b59b6;
    --rinji-pink: #d63031;
    --music-teal: #00cec9;
    --filler-lightgray: #b2bec3;

    /* 新規追加ジャンルカラー */
    --disaster-darkred: #8e0000;
    --news-blue: #2980b9;
    --weather-cyan: #3dbcc0;
    --traffic-gold: #d4ac0d;
    --variety-orange: #ff9f43;
    --talk-brown: #a0522d;
    --culture-olive: #6ab04c;
    --event-pink: #e84393;
    --sports-navy: #1e3799;
    --kids-yellow: #feca57;
    --welfare-heart: #ff7675;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: var(--bg-gray);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px;
    min-height: calc(100vh - 120px);
}

/* --- ヘッダー・タブ --- */
header {
    text-align: center;
    margin-bottom: 25px;
}
header h1 {
    color: var(--p-green);
    font-size: 1.4rem;
    margin: 0;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.disclaimer {
    font-size: 0.75rem; color: #777; display: block; margin-top: 5px;
}

.tabs {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
}
.tab {
    flex: 1;
    padding: 12px 2px;
    border: none;
    background: #fff;
    border-radius: 8px;
    font-weight: bold;
    color: #888;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    min-width: 40px;
    transition: 0.2s;
}
.tab.active {
    background: var(--p-green);
    color: #fff;
}

/* --- 番組カード基本スタイル --- */
.program-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card {
    background: #fff;
    border-radius: 12px;
    display: flex;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    border-left: 6px solid #ccc;
    overflow: hidden;
    transition: 
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
        box-shadow 0.4s ease, 
        background-color 0.4s ease, 
        border 0.4s ease;
    position: relative;
    width: 100%;
}

/* 番組種別ごとの左端アクセント */
.card-live      { border-left-color: var(--live-red); }
.card-recorded  { border-left-color: var(--recorded-green); }
.card-mb        { border-left-color: var(--mb-blue); }
.card-rerun, .card-res { border-left-color: var(--rerun-gray); }
.card-special   { border-left-color: var(--special-yellow); }
.card-emergency { border-left-color: var(--emergency-orange); }
.card-gov       { border-left-color: var(--gov-navy); }
.card-test      { border-left-color: var(--test-purple); }
.card-rinji     { border-left-color: var(--rinji-pink); border-left-style: double; }
.card-music     { border-left-color: var(--music-teal); }

/* filler専用：ストライプデザイン */
.card-filler {
    border-left: 6px solid transparent;
    background-image: linear-gradient(white, white), 
                      repeating-linear-gradient(-45deg, var(--filler-lightgray), var(--filler-lightgray) 8px, #fff 8px, #fff 16px);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* 新規追加分アクセント */
.card-disaster  { border-left-color: var(--disaster-darkred); }
.card-news      { border-left-color: var(--news-blue); }
.card-weather   { border-left-color: var(--weather-cyan); }
.card-traffic   { border-left-color: var(--traffic-gold); }
.card-variety   { border-left-color: var(--variety-orange); }
.card-talk      { border-left-color: var(--talk-brown); }
.card-culture   { border-left-color: var(--culture-olive); }
.card-event     { border-left-color: var(--event-pink); }
.card-sports    { border-left-color: var(--sports-navy); }
.card-kids      { border-left-color: var(--kids-yellow); }
.card-welfare   { border-left-color: var(--welfare-heart); }

/* --- 放送中の強調表示 --- */
@keyframes blink { 
    0% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.6; transform: scale(0.98); } 
    100% { opacity: 1; transform: scale(1); } 
}

.on-air-status { 
    display: block;
    width: fit-content;
    white-space: nowrap;
    font-size: 0.7rem; 
    font-weight: bold; 
    margin-bottom: 8px; 
    padding: 1px 6px;
    border: 1.5px solid var(--live-red); 
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--live-red) !important;
    animation: blink 1.2s infinite; 
    line-height: 1.2;
}

.card.is-now-playing {
    transform: scale(1.03); 
    z-index: 10;
    border: 3px solid transparent; 
    border-left-width: 14px !important;
}

/* オンエア中の種別連動スタイル */
.card.is-now-playing.now-live { border-color: var(--live-red) !important; background-color: #fff4f2 !important; box-shadow: 0 12px 40px rgba(231, 76, 60, 0.5) !important; }
.card.is-now-playing.now-special { border-color: var(--special-yellow) !important; background-color: #ffffe5 !important; box-shadow: 0 12px 40px rgba(241, 196, 15, 0.5) !important; }
.card.is-now-playing.now-mb { border-color: var(--mb-blue) !important; background-color: #f0f7ff !important; box-shadow: 0 12px 40px rgba(52, 152, 219, 0.45) !important; }
.card.is-now-playing.now-test { border-color: var(--test-purple) !important; background-color: #fbf6ff !important; box-shadow: 0 12px 40px rgba(155, 89, 182, 0.45) !important; }
.card.is-now-playing.now-recorded { border-color: var(--recorded-green) !important; background-color: #f5fff5 !important; box-shadow: 0 12px 40px rgba(39, 174, 96, 0.4) !important; }
.card.is-now-playing.now-rinji { border-color: var(--rinji-pink) !important; background-color: #fff0f0 !important; box-shadow: 0 12px 40px rgba(214, 48, 49, 0.45) !important; }
.card.is-now-playing.now-music { border-color: var(--music-teal) !important; background-color: #f0ffff !important; box-shadow: 0 12px 40px rgba(0, 206, 201, 0.4) !important; }
.card.is-now-playing.now-disaster { border-color: var(--disaster-darkred) !important; background-color: #fdf2f2 !important; box-shadow: 0 12px 40px rgba(142, 0, 0, 0.4) !important; }
.card.is-now-playing.now-news { border-color: var(--news-blue) !important; background-color: #f0f7ff !important; box-shadow: 0 12px 40px rgba(41, 128, 185, 0.4) !important; }
.card.is-now-playing.now-weather { border-color: var(--weather-cyan) !important; background-color: #f4ffff !important; box-shadow: 0 12px 40px rgba(61, 188, 192, 0.4) !important; }
.card.is-now-playing.now-res,
.card.is-now-playing.now-rerun { border-color: var(--rerun-gray) !important; background-color: #f9f9f9 !important; box-shadow: 0 12px 30px rgba(127, 140, 141, 0.4) !important; }

/* fillerオンエア中：ストライプを維持した強調表示 */
.card.is-now-playing.now-filler { 
    border-color: var(--filler-lightgray) !important; 
    background-color: #fcfcfc !important; 
    box-shadow: 0 12px 30px rgba(178, 190, 195, 0.4) !important;
    background-image: linear-gradient(#fcfcfc, #fcfcfc), 
                      repeating-linear-gradient(-45deg, var(--filler-lightgray), var(--filler-lightgray) 8px, #fff 8px, #fff 16px);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* --- カード内部レイアウト --- */
.time-box { 
    width: 95px; padding: 15px 5px; background: rgba(0,0,0,0.04); 
    display: flex; align-items: center; justify-content: center; 
    font-weight: bold; color: var(--p-green); text-align: center; 
    flex-shrink: 0; font-size: 1.1rem; border-right: 1px solid rgba(0,0,0,0.05); 
}
.info-box { padding: 15px 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

.program-title { 
    margin: 0 0 8px 0; font-size: 1.35rem; font-weight: bold; 
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #111; line-height: 1.3; 
}

/* 種別バッジ */
.badge { font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; color: #fff; font-weight: bold; }
.badge-live      { background-color: var(--live-red); }
.badge-recorded  { background-color: var(--recorded-green); }
.badge-mb        { background-color: var(--mb-blue); }
.badge-rerun     { background-color: var(--rerun-gray); }
.badge-special   { background-color: var(--special-yellow); color: #333; }
.badge-emergency { background-color: var(--emergency-orange); }
.badge-gov       { background-color: var(--gov-navy); }
.badge-test      { background-color: var(--test-purple); }
.badge-rinji     { background-color: var(--rinji-pink); }
.badge-music     { background-color: var(--music-teal); }
.badge-filler    { 
    background-image: repeating-linear-gradient(-45deg, var(--filler-lightgray), var(--filler-lightgray) 4px, #99aab5 4px, #99aab5 8px);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.badge-disaster  { background-color: var(--disaster-darkred); }
.badge-news      { background-color: var(--news-blue); }
.badge-weather   { background-color: var(--weather-cyan); }
.badge-traffic   { background-color: var(--traffic-gold); color: #333; }
.badge-variety   { background-color: var(--variety-orange); }
.badge-talk      { background-color: var(--talk-brown); }
.badge-culture   { background-color: var(--culture-olive); }
.badge-event     { background-color: var(--event-pink); }
.badge-sports    { background-color: var(--sports-navy); }
.badge-kids      { background-color: var(--kids-yellow); color: #333; }
.badge-welfare   { background-color: var(--welfare-heart); }

.dj-name { font-size: 1.05rem; color: #444; font-weight: 500; }

/* --- フッター --- */
footer { 
    text-align: center; padding: 15px 10px; color: #5a6d5a; font-size: 0.75rem; 
    background-color: #dae5da; border-top: 1px solid #c0d0c0; margin-top: 30px; line-height: 1.4; 
}

/* --- レスポンシブ --- */
@media (max-width: 480px) {
    .time-box { width: 85px; font-size: 1rem; }
    .program-title { font-size: 1.15rem; }
    .info-box { padding: 12px 15px; }
    .card.is-now-playing { transform: scale(1.01); }
}