@charset "UTF-8";
/* CSS Document */
/* あの日の地球と惑星 */
/* みんなの知識 ちょっと便利帳 */
/* 2026/08/09 */

/* ============================================================
   あの日の地球と惑星 - scoped styles (prefix: .epl-)
   カラーテーマ：「あの日の惑星」のパープル×ゴールドを継承
============================================================ */
.epl-wrap{
    --epl-bg: #0D081D;
    --epl-border: #2A1F4D;
    --epl-text: #D5CDE6;
    --epl-heading: #F3EEFF;
    --epl-sub: #9E8EC2;
    --epl-accent: #FFC857;
    --epl-card-bg: #16102E;
    --epl-card-border: #2D2350;
    --epl-tint: #1E1540;
    --epl-tint-border: #382A63;
    --epl-gap: 18px;

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

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

.epl-form{
    display:flex; flex-wrap:wrap; align-items:flex-end;
    gap:16px var(--epl-gap);
    margin:22px var(--epl-gap) 0;
    padding:20px;
    background: var(--epl-card-bg);
    border:1px solid var(--epl-card-border);
    border-radius:8px;
}
.epl-field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
.epl-field label{ font-size:19px; color:#C9CEEE; font-weight:600; }
.epl-ymd, .epl-hm{ display:flex; align-items:center; gap:6px; font-size:19px; flex-wrap:wrap; color:#DEE1F7; }
.epl-wrap input.epl-input,
.epl-wrap select.epl-input{
    font-size:22px !important;
    padding:14px 10px !important;
    border:1px solid var(--epl-card-border) !important;
    border-radius:6px !important;
    background:#12143A !important;
    color: var(--epl-heading) !important;
    text-align:center !important;
    line-height:normal !important;
    -webkit-appearance:none;
    appearance:none;
    box-shadow:none !important;
}
.epl-wrap input.epl-input:focus,
.epl-wrap select.epl-input:focus{
    outline:none !important;
    border-color: var(--epl-accent) !important;
    box-shadow:0 0 0 3px rgba(255,200,87,0.25) !important;
}
.epl-ymd-year{ width:92px; }
.epl-ymd-month, .epl-ymd-day, .epl-hm-hour, .epl-hm-min{ width:76px; }
.epl-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-left:auto; }
.epl-wrap button.epl-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;
}
.epl-wrap button.epl-btn:active{ transform:scale(0.97); }
.epl-wrap button.epl-btn:disabled{ opacity:.55; cursor:default; }
.epl-wrap button.epl-btn-primary{ background: var(--epl-accent) !important; color:#1A1000 !important; }
.epl-wrap button.epl-btn-primary:hover{ background:#FFE082 !important; color:#1A1000 !important; }
.epl-wrap button.epl-btn-ghost{ background:#12143A !important; color: var(--epl-text) !important; border-color: var(--epl-card-border) !important; }
.epl-wrap button.epl-btn-ghost:hover{ background:#1E2150 !important; color: var(--epl-heading) !important; border-color: var(--epl-accent) !important; }

.epl-status{ margin:10px var(--epl-gap) 0; font-size:14px; color: var(--epl-accent); min-height:18px; }

.epl-headline{
    margin:18px var(--epl-gap) 0; padding:20px;
    background: linear-gradient(135deg, #251B4D 0%, #1B1438 100%);
    border:1px solid #453380; border-radius:10px;
    text-align:center;
}
.epl-headline-eyebrow{ font-size:13px; color: var(--epl-sub); letter-spacing:.08em; margin-bottom:6px; }
.epl-headline-main{ font-size:clamp(20px,5vw,26px); font-weight:bold; color: var(--epl-heading); line-height:1.5; }
.epl-headline-main b{ color: var(--epl-accent); }
.epl-headline-sub{ margin-top:8px; font-size:14px; color: var(--epl-sub); }

.epl-diagram-block{
    margin:18px var(--epl-gap) 0; padding:18px;
    background: var(--epl-card-bg); border:1px solid var(--epl-card-border);
    border-radius:8px; text-align:center;
}
.epl-diagram-block h3{
    margin:0 0 6px; font-size:19px; color: var(--epl-heading);
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif; text-align:left;
}
.epl-diagram-desc{ margin:0 0 14px; font-size:14px; color: var(--epl-sub); text-align:left; }
.epl-canvas-wrap{
    position:relative; width:100%; max-width:440px; margin:0 auto;
    aspect-ratio: 1 / 1; border-radius:6px; overflow:hidden;
    background:radial-gradient(circle at 50% 50%, #1C1440 0%, #05030A 100%);
}
#epl-canvas{ width:100%; height:100%; display:block; }

.epl-rank-block{
    margin:18px var(--epl-gap) 0; padding:18px;
    background: var(--epl-card-bg); border:1px solid var(--epl-card-border);
    border-radius:8px;
}
.epl-rank-block h3{
    margin:0 0 12px; font-size:19px; color: var(--epl-heading);
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif; text-align:left;
}
.epl-rank-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.epl-rank-item{
    display:flex; align-items:center; gap:12px; padding:10px 12px;
    background: var(--epl-tint); border:1px solid var(--epl-tint-border); border-radius:8px;
}
.epl-rank-item.epl-rank-first{ border-color: var(--epl-accent); background:#2B2050; }
.epl-rank-no{ font-weight:bold; color: var(--epl-sub); font-size:15px; width:26px; text-align:center; flex-shrink:0; }
.epl-rank-first .epl-rank-no{ color: var(--epl-accent); }
.epl-rank-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.epl-rank-name{ font-weight:700; color: var(--epl-heading); flex-shrink:0; min-width:70px; }
.epl-rank-dist{ margin-left:auto; text-align:right; font-size:14px; color:#D3D6F2; }
.epl-rank-dist .epl-rank-km{ display:block; font-size:11.5px; color: var(--epl-sub); }

.epl-trivia{
    margin:14px 0 0; padding:13px 15px;
    background: var(--epl-tint); border:1px solid var(--epl-tint-border); border-radius:8px;
}
.epl-trivia-title{ font-weight:bold; color: var(--epl-accent); font-size:15.5px; margin-bottom:5px; }
.epl-trivia p{ margin:0; font-size:14.5px; line-height:160%; color:#CFC9E8; }

.epl-share-block{
    margin:18px var(--epl-gap) 0; padding:18px;
    background: var(--epl-card-bg); border:1px solid var(--epl-card-border);
    border-radius:8px;
}
.epl-share-block h3{
    margin:0 0 10px; font-size:19px; color: var(--epl-heading);
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif; text-align:left;
}
.epl-share-preview{
    font-size:14.5px; color:#CFC9E8; background: var(--epl-tint); border:1px solid var(--epl-tint-border);
    border-radius:6px; padding:10px 12px; margin-bottom:12px; white-space:pre-wrap; line-height:150%;
}
.epl-share-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.epl-wrap button.epl-share-btn{
    font-size:14.5px !important; font-weight:600 !important; padding:9px 18px !important; border-radius:6px !important;
    cursor:pointer; border:1px solid var(--epl-card-border) !important; background:#12143A !important; color: var(--epl-text) !important;
    display:inline-flex; align-items:center; gap:6px;
}
.epl-wrap button.epl-share-btn:hover{ border-color: var(--epl-accent) !important; color: var(--epl-heading) !important; }
.epl-wrap button.epl-share-btn.epl-share-x{ background:#12143A !important; }
.epl-share-copied{ color: var(--epl-accent); font-size:13px; margin-left:4px; }

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

@media (max-width:420px){
    .epl-form{ padding:16px; }
    .epl-btns{ margin-left:0; width:100%; justify-content:center; }
    .epl-ymd-year{ width:84px; }
    .epl-ymd-month,.epl-ymd-day,.epl-hm-hour,.epl-hm-min{ width:68px; }
    .epl-rank-dist{ font-size:13px; }
}