@charset "UTF-8";
/* CSS Document */
/* あの日のISS｜この日のISS */
/* みんなの知識 ちょっと便利帳 */
/* 2026/07/31 */

.iss-wrap{
    --iss-bg: #0E1526;
    --iss-border: #2A3A5C;
    --iss-text: #C9D6E8;
    --iss-heading: #EAF2FF;
    --iss-sub: #8A9BB5;
    --iss-accent: #F2B33D;
    --iss-accent-dark: #C98A1D;
    --iss-card-bg: #16213A;
    --iss-card-border: #2A3A5C;
    --iss-tint: #1C2B4A;
    --iss-tint-border: #33456B;
    --iss-history: #6FA8DC;
    --iss-history-dark: #3F6E9E;
    --iss-gap: 18px;

    font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
    background: var(--iss-bg);
    margin: 10px auto;
    padding: 0 10px 15px 0;
    border: 2px solid var(--iss-border);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    color: var(--iss-text);
    line-height: 1.9;
    font-size: 21px;
    text-align: left;
}
.iss-wrap *{ box-sizing:border-box; }

.iss-container{ max-width:820px; margin:auto; padding:22px 0 32px; }

.iss-header{ text-align:left; padding:6px var(--iss-gap) 4px; }
.iss-header h2{
    font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
    font-size: clamp(23px, 4.5vw, 30px);
    margin: 0 0 10px;
    letter-spacing:.04em;
    color: var(--iss-heading);
    text-align:center;
}
.iss-header p{ margin:0; font-size:15px; color: var(--iss-text); font-weight:500; line-height:150%; }
.iss-header p.iss-subtitle{
    text-align:center;
    font-size:16px;
    color: var(--iss-accent);
    font-weight:700;
    letter-spacing:.08em;
    margin:0 0 12px;
}

.iss-mode-toggle{
    display:flex; gap:8px;
    margin:20px var(--iss-gap) 0;
}
.iss-wrap button.iss-mode-btn{
    flex:1;
    padding:12px 10px !important;
    font-size:16px !important;
    font-weight:700 !important;
    border-radius:8px !important;
    border:1px solid var(--iss-card-border) !important;
    background: var(--iss-card-bg) !important;
    color: var(--iss-sub) !important;
    cursor:pointer;
    transition: all .15s ease;
    line-height:normal !important;
}
.iss-wrap button.iss-mode-btn.active{
    background: var(--iss-accent) !important;
    border-color: var(--iss-accent) !important;
    color:#241a04 !important;
}
.iss-wrap button.iss-mode-btn[data-mode="history"].active{
    background: var(--iss-history) !important;
    border-color: var(--iss-history) !important;
    color:#0B1A29 !important;
}

.iss-control-bar{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px var(--iss-gap);
    margin:14px var(--iss-gap) 0;
    padding:16px 20px;
    background: var(--iss-card-bg);
    border:1px solid var(--iss-card-border);
    border-radius:8px;
}
.iss-status-indicator{
    display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600;
}
.iss-status-badge{
    display:inline-block; width:12px; height:12px; border-radius:50%;
    background:#8A9BB5; transition: background-color .3s;
}
.iss-status-badge.active{ background: #2ECC71; box-shadow: 0 0 8px #2ECC71; }
.iss-status-badge.error{ background: #E74C3C; box-shadow: 0 0 8px #E74C3C; }

.iss-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.iss-wrap button.iss-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-size:18px !important; font-weight:600 !important; padding:6px 20px !important; border-radius:6px !important; cursor:pointer;
    border:1px solid transparent; transition: transform .08s ease, background-color .15s ease;
    line-height:normal !important;
}
.iss-wrap button.iss-btn:active{ transform:scale(0.97); }
.iss-wrap button.iss-btn-primary{ background: var(--iss-accent) !important; color:#241a04 !important; }
.iss-wrap button.iss-btn-primary:hover{ background:#ffc659 !important; color:#241a04 !important; }
.iss-wrap button.iss-btn-secondary{
    background: transparent !important;
    border:1px solid var(--iss-history) !important;
    color: var(--iss-history) !important;
}
.iss-wrap button.iss-btn-secondary:hover{ background: rgba(111,168,220,0.12) !important; }

.iss-date-bar{
    margin:14px var(--iss-gap) 0;
    padding:16px 20px;
    background: var(--iss-card-bg);
    border:1px solid var(--iss-card-border);
    border-radius:8px;
}
.iss-date-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.iss-date-row label{ font-size:14px; color: var(--iss-sub); font-weight:600; }
.iss-wrap input.iss-date-input{
    background:#0B101D !important;
    color: var(--iss-heading) !important;
    border:1px solid var(--iss-tint-border) !important;
    border-radius:6px !important;
    padding:8px 10px !important;
    font-size:16px !important;
    font-family: inherit;
    flex:1 1 220px;
    min-width:0;
}
.iss-preset-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.iss-wrap button.iss-preset-btn{
    font-size:12.5px !important; font-weight:600 !important;
    padding:6px 13px !important; border-radius:20px !important;
    border:1px solid var(--iss-tint-border) !important;
    background: var(--iss-tint) !important;
    color: var(--iss-text) !important;
    cursor:pointer;
    line-height:normal !important;
}
.iss-wrap button.iss-preset-btn:hover{ border-color: var(--iss-history) !important; color: var(--iss-history) !important; }
.iss-date-msg{ margin-top:10px; font-size:14px; font-weight:600; min-height:1.4em; }
.iss-date-msg.iss-msg-ok{ color:#7FD79C; }
.iss-date-msg.iss-msg-err{ color:#F0A0A0; }

.iss-map-block{
    margin:18px var(--iss-gap) 0;
    padding:14px;
    background: var(--iss-card-bg);
    border:1px solid var(--iss-card-border);
    border-radius:8px;
}
.iss-map-wrap{
    position:relative;
    width:100%;
    height: 420px;
    border-radius:6px;
    overflow:hidden;
    background:#0B101D;
}
#iss-map{ width:100%; height:100%; z-index: 1; }

.leaflet-container { background: #0b101d !important; }
.leaflet-tile { filter: brightness(0.7) invert(1) contrast(1.2) hue-rotate(200deg); }
.leaflet-popup-content-wrapper{ background: var(--iss-card-bg); color: var(--iss-text); border-radius:8px; }
.leaflet-popup-tip{ background: var(--iss-card-bg); }
.leaflet-popup-content{ font-size:13px; line-height:1.6; margin:10px 12px; }
.leaflet-popup-content b{ color: var(--iss-heading); }

.iss-custom-marker{ display:flex; align-items:center; justify-content:center; }
.iss-marker-icon{ font-size:28px; line-height:1; filter: drop-shadow(0 0 6px var(--iss-accent)); }
.iss-marker-icon.iss-marker-history{ filter: drop-shadow(0 0 7px var(--iss-history)); }

.iss-grid-details{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap:14px;
    margin:18px var(--iss-gap) 0;
}
.iss-grid-card{
    background: var(--iss-tint);
    border:1px solid var(--iss-tint-border);
    padding:16px 14px;
    border-radius:8px;
    text-align:center;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    min-height:88px;
}
.iss-grid-card.iss-card-history{ border-color: var(--iss-history-dark); }
.iss-card-label{ font-size:15.5px; color: #C7D4E8; }
.iss-card-val{ font-size:22px; font-weight:bold; color: var(--iss-heading); }
.iss-card-val.iss-val-sm{ font-size:17px; }

.iss-trivia{
    margin:18px var(--iss-gap) 0;
    padding:18px 20px;
    background: linear-gradient(135deg, rgba(111,168,220,0.14), rgba(111,168,220,0.03));
    border:1px solid var(--iss-history-dark);
    border-radius:8px;
}
.iss-trivia h3{
    margin:0 0 14px; font-size:16px; font-weight:700; color: var(--iss-history);
    display:flex; align-items:center; gap:8px;
}
.iss-trivia-list{
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.iss-trivia-item{ font-size:13.5px; color: var(--iss-sub); }
.iss-trivia-item b{ display:block; font-size:20px; color: var(--iss-heading); margin-top:4px; font-weight:700; }

.iss-note{
    text-align:left;
    margin:22px var(--iss-gap) 0;
    padding:14px 16px;
    background: var(--iss-tint);
    border-left:4px solid var(--iss-accent);
    border-radius:4px;
}
.iss-note p{ margin:0; font-size:14px; line-height:150%; color:#E1E9F7; padding-left:1em; text-indent:-1em; }
.iss-note p + p{ margin-top:8px; }

@media (max-width:420px){
    .iss-control-bar{ flex-direction:column; align-items:stretch; }
    .iss-btns{ width:100%; justify-content:center; }
    .iss-map-wrap{ height: 320px; }
    .iss-date-row{ flex-direction:column; align-items:stretch; }
}