/* DAMONO受信会 週間番組表表示用CSS */
/* Build 20260317-Ver.1.03 */

:root {
    --p-green: #2D5A27;
    --bg-gray: #f8faf8;
    --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;

    --header-weekday: #81a687; 
    --header-sat: #7fbce0; 
    --header-sun: #e58d83;
    --min-unit-h: 1.2px;
    --border: #d1d9d1;
}

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;
    overflow-x: hidden;
}

/* ポップアップ中央寄せギミック */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none; z-index: 3000;
}

.week-popup {
    background: rgba(45, 90, 39, 0.95);
    color: #fff;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    text-align: center;
    line-height: 1.6;
    word-break: keep-all;
    max-width: 85%;
    opacity: 0;
    transform: translateY(20px);
    backdrop-filter: blur(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.week-popup.is-visible {
    opacity: 1;
    transform: translateY(-20vh);
}

.header-banner { padding: 20px 20px 15px; text-align: center; }
.brand-name { display: block; color: var(--p-green); font-size: 2.2rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1.0; }
.sub-title { color: var(--p-green); font-size: 1.1rem; letter-spacing: 0.35em; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; opacity: 0.9; }
.header-notes { font-size: 0.75rem; color: #666; line-height: 1.4; margin: 0; }

.content-wrapper { 
    flex: 1; padding: 0 15px 40px; max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box;
    overflow-x: auto; cursor: grab;
}

.timetable-grid {
    display: grid;
    grid-template-columns: 75px repeat(7, 1fr);
    grid-template-rows: 45px repeat(1440, minmax(var(--min-unit-h), auto)) 10px;
    background: #fff; 
    border-radius: 24px 24px 0 24px; 
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06); 
    border: 1px solid var(--border);
    min-width: 1000px; 
    position: relative;
}

.day-header { grid-row: 1; display: flex; align-items: center; justify-content: center; background: var(--header-weekday); color: #fff; font-weight: bold; font-size: 0.9rem; position: sticky; top: 0; z-index: 100; }
.day-header.sat { background: var(--header-sat); } 
.day-header.sun { background: var(--header-sun); }

.time-column-bg { 
    grid-column: 1; 
    grid-row: 2 / -1; 
    background: linear-gradient(to bottom, #81a687 0%, #f39c12 20%, #e67e22 50%, #3498db 100%); 
    z-index: 40; 
    position: sticky; 
    left: 0;
}

.time-label { 
    grid-column: 1; 
    color: #fff; 
    font-weight: bold; 
    font-size: 0.8rem; 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding-top: 8px; 
    position: sticky; 
    left: 0; 
    z-index: 50;
    border-bottom: none;
}

.hour-row-bg { border-top: 1px solid #edf2ed; z-index: 1; }
.grid-footer-spacer { grid-row: -2 / -1; grid-column: 2 / -1; background: #fff; z-index: 5; }
.grid-cell.weekday-bg { background-color: #fafdfa; }

/* --- 番組カードのデザイン --- */
.program-card { 
    display: flex; 
    flex-direction: column; 
    padding: 10px; 
    gap: 4px;      
    border-radius: 12px; 
    margin: 4px; 
    z-index: 10; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.12); 
    overflow: hidden; 
    border: 1.5px solid #b0bab0; 
    transition: transform 0.1s, box-shadow 0.1s; 
    box-sizing: border-box;
}
.program-card:hover { transform: scale(1.01); z-index: 20; box-shadow: 0 6px 15px rgba(0,0,0,0.2); border-color: #777; }

/* 種別ごとの配色設定（透過背景と濃い文字色） */
.card-live      { background-color: #ffeae8; color: #922b21; }
.card-recorded  { background-color: #e9f7ef; color: #1e8449; }
.card-mb        { background-color: #ebf5fb; color: #21618c; }
.card-rerun, .card-res { background-color: #f4f6f6; color: #566573; }
.card-rinji     { background-color: #fff0f0; color: #a52a2a; }
.card-special   { background-color: #fef9e7; color: #7d6608; }
.card-emergency { background-color: #fdedec; color: #943126; border: 1.5px solid var(--emergency-orange); }
.card-gov       { background-color: #f0f3f5; color: #2c3e50; }
.card-test      { background-color: #fbf6ff; color: #5b2c6f; }
.card-music     { background-color: #f0ffff; color: #008b8b; }
.card-filler    { background-color: #fcfcfc; color: #888; border-style: dashed; }

/* 新規ジャンルの背景配色 */
.card-disaster  { background-color: #fdf2f2; color: #8e0000; border-width: 2px; }
.card-news      { background-color: #f0f7ff; color: #1a5276; }
.card-weather   { background-color: #f4ffff; color: #148f77; }
.card-traffic   { background-color: #fffaf0; color: #7d6608; }
.card-variety   { background-color: #fff5eb; color: #d35400; }
.card-talk      { background-color: #f9f4f2; color: #6e2c00; }
.card-culture   { background-color: #f5fff5; color: #1d8348; }
.card-event     { background-color: #fff0f6; color: #c2185b; }
.card-sports    { background-color: #f0f2ff; color: #1a237e; }
.card-kids      { background-color: #fffeeb; color: #7d6608; }
.card-welfare   { background-color: #fff2f2; color: #c0392b; }

/* --- バッジ配色 --- */
.badge { font-size: 0.6rem; padding: 1px 6px; border-radius: 4px; color: #fff; font-weight: 800; width: fit-content; border: 1px solid rgba(0,0,0,0.1); }

.card-live .badge      { background-color: var(--live-red); }
.card-recorded .badge  { background-color: var(--recorded-green); }
.card-mb .badge        { background-color: var(--mb-blue); }
.card-rerun .badge     { background-color: var(--rerun-gray); }
.card-special .badge   { background-color: var(--special-yellow); color: #333; }
.card-emergency .badge { background-color: var(--emergency-orange); animation: emergency-pulse 2s infinite; }
.card-gov .badge       { background-color: var(--gov-navy); }
.card-test .badge      { background-color: var(--test-purple); }
.card-rinji .badge     { background-color: var(--rinji-pink); }
.card-music .badge     { background-color: var(--music-teal); }
.card-filler .badge    { background-color: var(--filler-lightgray); color: #333; }

/* 新規ジャンルのバッジ */
.card-disaster .badge  { background-color: var(--disaster-darkred); }
.card-news .badge      { background-color: var(--news-blue); }
.card-weather .badge   { background-color: var(--weather-cyan); }
.card-traffic .badge   { background-color: var(--traffic-gold); color: #333; }
.card-variety .badge   { background-color: var(--variety-orange); }
.card-talk .badge      { background-color: var(--talk-brown); }
.card-culture .badge   { background-color: var(--culture-olive); }
.card-event .badge     { background-color: var(--event-pink); }
.card-sports .badge    { background-color: var(--sports-navy); }
.card-kids .badge      { background-color: var(--kids-yellow); color: #333; }
.card-welfare .badge   { background-color: var(--welfare-heart); }

@keyframes emergency-pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

.c-time { font-weight: bold; opacity: 0.85; font-size: 0.65rem; }
.c-title { font-weight: 800; line-height: 1.4; font-size: 0.85rem; word-break: break-all; }
.c-dj { font-size: 0.75rem; font-weight: 600; opacity: 0.9; }

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;
}
.trademark-info { display: block; margin-top: 4px; font-size: 0.7rem; opacity: 0.9; }