@charset "UTF-8";
/*
    수 정 일 시: 2026년 6월 23일
    작 업 내 용: 국토위성 궤도정보(index/trackinfo, 한·영) 공통 스타일
                - .satellite-compare 2단 레이아웃 (1호 좌 / 2호 우)
                - 지도 범례 체크박스 UI (.legend-sat / .orbit-toggle)
                - 위성보기 1호/2호 텍스트 버튼 (.sat-view-btn, JS focusSatIndex 와 연동)
    영 향 범 위: index.html, eng/index.html, nsintro_trackinfo.html, eng/nsintro_trackinfo.html
    작  업  자: 백승재
*/

/* ── 1호/2호 2단 비교 레이아웃 (.satellite-compare) ── */
.satellite-compare { display:flex; flex-wrap:wrap; gap:2rem; margin-top:20px; align-items:stretch; }
.satellite-compare .sat-col { flex:1 1 calc(50% - 1rem); min-width:34rem; display:flex; flex-direction:column; }
.satellite-compare .sat-col > .col-title {
    margin:0; padding:1.2rem 1.6rem; background:#16408d; color:#fff;
    font-size:2.2rem; font-weight:600; border-radius:4px 4px 0 0;
}
.satellite-compare .satellite-detail { margin-top:0; flex:1 1 auto; }
.satellite-compare .satellite-detail article { width:100%; margin-left:0; }
/* 위성정보: ul(좌 회색박스) + dl 3개(우) 가로 한 줄 — grid로 배치 */
.satellite-compare .satellite-detail article.info {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: start;
    overflow-x: auto;
}
.satellite-compare .satellite-detail article.info h4 {
    grid-column: 1 / -1;
}
.satellite-compare .satellite-detail article.info ul,
.satellite-compare .satellite-detail article.info dl {
    float: none;
    width: auto;
    margin: 0;
    padding-top: 1.5rem;
}
.satellite-compare .satellite-detail article.info ul {
    padding: 1.5rem 2rem;
    margin-right: 1rem;
}
.satellite-compare .satellite-detail article.info ul li {
    float: none;
    display: block;
    width: auto;
    white-space: nowrap;
}
.satellite-compare .satellite-detail article.info dl {
    margin-right: 2rem;
    padding-left: 0;
}
.satellite-compare .satellite-detail article.info dl dt,
.satellite-compare .satellite-detail article.info dl dd {
    white-space: nowrap;
}
@media (max-width:1041px) {
    .satellite-compare .satellite-detail article.info ul { width: auto; padding-left: 2rem; }
    .satellite-compare .satellite-detail article.info dl { width: auto; margin-left: 0; padding-left: 0; }
}
@media (max-width:756px) {
    .satellite-compare .satellite-detail article.info ul { width: auto; padding-left: 1.5rem; }
    .satellite-compare .satellite-detail article.info ul li { float: none; display: block; width: auto; padding-left: 0; }
    .satellite-compare .satellite-detail article.info dl { width: auto; padding-left: 0; margin-left: 0; }
    .satellite-compare .satellite-detail article.info li,
    .satellite-compare .satellite-detail article.info dt,
    .satellite-compare .satellite-detail article.info dd { font-size: 1.4rem; line-height: 2rem; }
    .satellite-compare .satellite-detail article.info li strong { font-size: 1.6rem; }
    .satellite-compare .satellite-detail article.info dl dt { margin-bottom: 0.3rem; }
    .satellite-compare .satellite-detail article.info dl dd { margin-bottom: 1.2rem; }
}
.satellite-compare .satellite-detail article.location { width:calc(50% - 1rem); margin:1.5rem 1rem 0 0; }
.satellite-compare .satellite-detail article.time { width:calc(50% - 1rem); margin:1.5rem 0 0 1rem; }
@media (max-width:1236px) {
    .satellite-compare .sat-col { flex:1 1 100%; }
}

/* ── 지도 범례: 위성별·궤도별 체크박스 (JS sat-toggle / orbit-toggle) ── */
.map-wrap .map-legend .legend-group { margin-top:.6rem; }
.map-wrap .map-legend .legend-group:first-child { margin-top:0; }
.map-wrap .map-legend .legend-sat { display:flex; align-items:center; font-weight:700; cursor:pointer; }
.map-wrap .map-legend .legend-sat input[type="checkbox"] { width:14px; height:14px; margin:0 5px 0 0; cursor:pointer; flex:0 0 auto; }
.map-wrap .map-legend .legend-sub { padding-left:19px; }
.map-wrap .map-legend .legend-item { margin:.2rem 0; }
.map-wrap .map-legend .legend-item label { display:flex; align-items:center; cursor:pointer; }
.map-wrap .map-legend .legend-item input[type="checkbox"] { width:14px; height:14px; margin:0 4px 0 0; cursor:pointer; flex:0 0 auto; }

/*
 * ── 위성보기 1호/2호 버튼 (.sat-view-btn) ──
 * · 5rem 정사각형, 아이콘 없이 2줄 텍스트
 * · .active: JS setFocusSatellite() 가 li·button 에 부여
 * · hover: button:hover 와 li:hover 이중 적용(!important) — 아이콘 제거 후 hover 누락 방지
 */
.map-wrap .tool li.sat-view-btn {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--pointC1);
    box-sizing: border-box;
}
.map-wrap .tool li.sat-view-btn button {
    width: 100%;
    height: 100%;
    text-indent: 0 !important;
    border: none;
    background-image: none !important;
    background-size: auto !important;
    font-size: 1rem;
    font-weight: 600;
    color: #16408d;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    padding: 0 0.3rem;
    box-sizing: border-box;
}
.map-wrap .tool li.sat-view-btn:not(.active) button:hover {
    background-color: #e6f5ff !important;
}
.map-wrap .tool li.sat-view-btn:not(.active):hover {
    background-color: #e6f5ff;
}
.map-wrap .tool li.sat-view-btn.active { border-color: #16408d; }
.map-wrap .tool li.sat-view-btn.active button { background-color: #e6f5ff; }