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

/* ============================================================
   あの日の地球 - scoped styles (prefix: .ear-)
   カラーテーマ：Deep Space Navy & Solar Gold
============================================================ */
.ear-wrap{
    --ear-bg: #0E1526;
    --ear-border: #2A3A5C;
    --ear-text: #C9D6E8;
    --ear-heading: #EAF2FF;
    --ear-sub: #8A9BB5;
    --ear-accent: #F2B33D;
    --ear-accent-dark: #C98A1D;
    --ear-card-bg: #16213A;
    --ear-card-border: #2A3A5C;
    --ear-tint: #1C2B4A;
    --ear-tint-border: #33456B;
    --ear-gap: 18px;

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

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

.ear-header{ text-align:left; padding:6px var(--ear-gap) 4px; }
.ear-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(--ear-heading);
    text-align:center;
}
.ear-header p{ margin:0; font-size:15px; color: var(--ear-text); font-weight:500; line-height:150%; }
.ear-range-note{
    margin:8px 0 0 15px !important;
    font-size:13px !important;
    color: var(--ear-accent) !important;
    padding-left:1em; text-indent:-1em;
}

.ear-form{
    display:flex; flex-wrap:wrap; align-items:flex-end;
    gap:16px var(--ear-gap);
    margin:22px var(--ear-gap) 0;
    padding:20px;
    background: var(--ear-card-bg);
    border:1px solid var(--ear-card-border);
    border-radius:8px;
}
.ear-field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
.ear-field label{ font-size:19px; color: #C7D6EC; font-weight:600; }
.ear-ymd, .ear-hm{ display:flex; align-items:center; gap:6px; font-size:19px; flex-wrap:wrap; color: #DCE6F5; }
.ear-wrap input.ear-input,
.ear-wrap select.ear-input{
    font-size:22px !important;
    padding:14px 10px !important;
    border:1px solid var(--ear-card-border) !important;
    border-radius:6px !important;
    background:#0F1A30 !important;
    color: var(--ear-heading) !important;
    text-align:center !important;
    line-height:normal !important;
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none !important;
}
.ear-wrap input.ear-input:focus,
.ear-wrap select.ear-input:focus{
    outline:none !important;
    border-color: var(--ear-accent) !important;
    box-shadow:0 0 0 3px rgba(242,179,61,0.25) !important;
}
.ear-ymd-year{ width:92px; }
.ear-ymd-month, .ear-ymd-day, .ear-hm-hour, .ear-hm-min{ width:76px; }
.ear-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.ear-wrap button.ear-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-size:20px !important; font-weight:600 !important; padding:5px 26px !important; border-radius:6px !important; cursor:pointer;
    border:1px solid transparent; transition: transform .08s ease, background-color .15s ease;
    line-height:normal !important;
}
.ear-wrap button.ear-btn:active{ transform:scale(0.97); }
.ear-wrap button.ear-btn-primary{ background: var(--ear-accent) !important; color:#241a04 !important; }
.ear-wrap button.ear-btn-primary:hover{ background:#ffc659 !important; color:#241a04 !important; }
.ear-wrap button.ear-btn-ghost{ background:#0F1A30 !important; color: var(--ear-text) !important; border-color: var(--ear-card-border) !important; }
.ear-wrap button.ear-btn-ghost:hover{ background:#1B2C4C !important; color: var(--ear-heading) !important; border-color: var(--ear-accent) !important; }


.ear-globe-block{
    margin:18px var(--ear-gap) 0;
    padding:18px;
    background: var(--ear-card-bg);
    border:1px solid var(--ear-card-border);
    border-radius:8px;
    text-align:center;
}
.ear-canvas-wrap{
    position:relative;
    width:100%;
    max-width:760px;
    margin:0 auto;
    aspect-ratio: 2 / 1;
    border-radius:6px;
    overflow:hidden;
    background:#000;
}
#ear-canvas{ width:100%; height:100%; display:block; }
.ear-legend{
    margin-top:12px;
    font-size:16.5px;
    color: #C7D4E8;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
}
.ear-legend span{ display:inline-flex; align-items:center; gap:6px; }
.ear-toggle-line label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.ear-toggle-line input[type="checkbox"]{ width:20px; height:20px; accent-color: var(--ear-accent); cursor:pointer; }
.ear-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.ear-dot.night{ background: rgba(10,16,40,0.85); border:1px solid #445; }
.ear-dot.sun{ background: var(--ear-accent); }
.ear-dot.line{ width:16px; height:2px; border-radius:0; background:#7FB3D5; }

.ear-grid-details{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:14px;
    margin:18px var(--ear-gap) 0;
}
.ear-grid-card{
    background: var(--ear-tint);
    border:1px solid var(--ear-tint-border);
    padding:16px 14px;
    border-radius:8px;
    text-align:center;
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    min-height:88px;
}
.ear-card-label{ font-size:16.5px; color: #C7D4E8; }
.ear-card-val{ font-size:24px; font-weight:bold; color: var(--ear-heading); }
.ear-card-val.small{ font-size:19px; }

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

@media (max-width:420px){
    .ear-form{ padding:16px; }
    .ear-btns{ margin-left:0; width:100%; justify-content:center; }
    .ear-ymd-year{ width:84px; }
    .ear-ymd-month,.ear-ymd-day,.ear-hm-hour,.ear-hm-min{ width:68px; }
    .ear-grid-details{ grid-template-columns: 1fr; }
}