/* =====================================================================
   푸터 CSS : 푸터에 관한 스타일은 모두 이 파일 한 곳에 둔다.
   [1] 푸터 틀(레이아웃) : 배경, 3단 배치, 컨테이너 여백, 위젯 간격
   [2] 푸터 위젯 내용   : 대두 COT 카드 / 날씨 / 일식 애니메이션 / 금성 통과 애니메이션
   마크업은 외모 > 위젯, 위젯 동작은 /wp-content/js/widget-*.js. 로딩은 functions.php 의 자산 표('priority' => 30).
   style.css 다음에 불러온다. (예전에 위젯 본문의 <style> 이라 style.css 보다 나중에 적용되던 순서를 유지한다.)
   ================================================================== */

/* ---------------------------------------------------------------------------------------
 *  [1] 푸터 틀(레이아웃)  (예전 style.css "웹사이트 기본 : 푸터")
 * --------------------------------------------------------------------------------------- */

.footer-widgets {
    background-image: linear-gradient(to top, var(--gray-2) 0, #373737 1%, #2b2b2b 31%, #1e1e1e 75%, var(--font-color-dark) 100%);
}

.site-footer .footer-widgets .inside-footer-widgets>* {
    flex-basis: 33.33%;
    box-sizing: border-box;
    padding-bottom: 0px;
    text-align: justify;
    width: 100%;
}

.footer-widgets-container {
    padding: 30px 20px 0px 20px;
}

@media (max-width: 768px) {
    .footer-widgets-container {
        padding: 30px 15px 0px 15px;
    }
}

.site-footer .footer-widgets .inside-footer-widgets {
    flex-wrap: wrap;
}

.footer-widgets .widget {
    margin-bottom: 0px;
}

/* -------------------------------------------------------------------------------------
 *  대두 COT 카드  (위젯 블록 121)
 * ------------------------------------------------------------------------------------- */

.soybean-cot-latest-card {
    border: none;
}

.soybean-cot-table-footer {
    width: 100%;
    margin-top: 0px;
    background-color: var(--gray-3);
    text-align: center;
}

/* 행: 4개 열을 모든 행이 동일하게 공유하는 grid */
.soybean-cot-table-footer .cot-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* 셀: 위쪽+왼쪽 테두리만 사용 (이중선 방지) */
.soybean-cot-table-footer .cot-cell {
    padding: var(--padding-base) 0px;
    border-top: var(--border-base);
    border-left: var(--border-base);
    box-sizing: border-box;
}

/* 좌측 외곽 테두리 제거 + 첫 셀 좌우 패딩 */
.soybean-cot-table-footer .cot-cell:first-child {
    border-left: none;
    padding: var(--padding-base);
}

/* 상단 외곽 테두리 제거 (첫 행) */
.soybean-cot-table-footer .cot-row:first-child .cot-cell {
    border-top: none;
}

/* colspan="4" 대체: 4칸 모두 차지 */
.soybean-cot-table-footer .cot-cell.full {
    grid-column: span 4;
}

/* 라벨(1칸) + 값(colspan=3, 3칸) 행 대체 */
.soybean-cot-table-footer .cot-cell.ratio-1 {
    grid-column: span 1;
}
.soybean-cot-table-footer .cot-cell.ratio-3 {
    grid-column: span 3;
}

/* 3~5번째 행(투기/상업/기타)의 2~4번째 셀 스타일 */
.soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(2),
.soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(3),
.soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(4) {
    font-family: var(--font-mono);
    background-color: var(--gray-4);
}

@media (max-width: 500px) {
    .soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(2),
    .soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(3),
    .soybean-cot-table-footer .cot-row:nth-child(n+3) .cot-cell:nth-child(4) {
        font-size: 17px;
    }
}

/* -------------------------------------------------------------------------------------
 *  날씨 + 마이너스케일 로고  (위젯 블록 139)
 * ------------------------------------------------------------------------------------- */

.minorscale-logo-container {
    display: flex;          
    align-items: center;
    justify-content: center;
    gap: 15px; 
}

.minorscale-logo-img {
    height: 45px;           
    width: auto;
    display: block;
}

.minorscale-logo-text {
    display: flex;
    flex-direction: column; 
    text-align: center;
    line-height: 1.5; 
}

.minorscale-logo-main-title {
    font-size: var(--font-size-base);      
}

.minorscale-logo-sub-title {
    font-size: var(--font-size-sub);
}

#seoul-weather {
    font-family: Nexon;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
    width: fit-content !important;    
}

/* table → div(flex) */
.weather-widget-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.weather-cell {
    display: flex;
    align-items: center;
}

#icon-cell img {
    height: 4.5em;
    width: auto;
    margin-right: 0px;
    position: relative;
    top: 0px;
}

#temp-cell {
    text-align: center;
}

/* -------------------------------------------------------------------------------------
 *  일식 애니메이션(크리스마스섬 금환일식)  (위젯 블록 137)
 * ------------------------------------------------------------------------------------- */

/* 부모 컨테이너 (개기일식, 금환일식, 금성통과 공통) */

.astro-container {
    background-color: var(--gray-2);
}

/* 금환일식 애니메이션 (1582-12-25, 크리스마스섬) */

#sun {
    fill: #FCE570;
    animation: sunColorChange 20s linear infinite;
}

#moon {
    fill: black;
    transform-origin: center center;
    animation: moonMove 20s linear infinite;
}

/* 고리 광휘: 금환 순간에 달 둘레로 남는 태양 고리 */

#ring-glow {
    fill: none;
    stroke: #FFD866;
    stroke-width: 3.9;
    filter: url(#blur-filter);
    opacity: 0;
    animation: ringGlow 20s linear infinite;
}

/* 붉은 테두리: 태양 가장자리는 어둡고 붉은 빛(주연감광)이라, 고리로 남으면 가장자리 색이 도드라짐 */

#ring-limb {
    fill: none;
    stroke: #E8431F;
    stroke-width: 5.2;
    filter: url(#limb-filter);
    opacity: 0;
    animation: ringLimb 20s linear infinite;
}

/* 베일리 구슬: 달 가장자리 울퉁불퉁한 곳으로 새어 나오는 빛 */

.bead {
    fill: #FFF6C8;
    opacity: 0;
    filter: drop-shadow(0 0 2.6px #FFE9A0);
}

.bead-c2 {
    animation: beadC2 20s linear infinite;
}

.bead-c3 {
    animation: beadC3 20s linear infinite;
}

/* 관측지 좌표: 애니메이션 아래쪽 작은 글씨 */

#site-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    text-align: center;
    font-size: min(var(--font-size-sub), 4.2vw);
    line-height: 1.2;
    color: #cfcfcf;
    pointer-events: none;
}

#obsc-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* 가림 비율: 금환 구간(C2~C3)에서만 위쪽 가운데에 나타남 */

#obsc-label {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    text-align: center;
    font-size: min(var(--font-size-sub), 4.2vw);
    line-height: 1.2;
    color: #cfcfcf;
    opacity: 0;
    pointer-events: none;
    animation: obscFade 20s linear infinite;
}

#eclipse-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@keyframes moonMove {
    0% {
        transform: translate(289.23px, -10.24px);
        opacity: 0;
        /* 처음에 투명 */
    }

    1% {
        transform: translate(271.7px, -8.84px);
    }

    2% {
        transform: translate(254.6px, -7.5px);
        opacity: 1;
        /* 화면 밖에서 들어오며 나타남 */
    }

    2.5% {
        transform: translate(246.21px, -6.85px);
    }

    3.75% {
        transform: translate(225.7px, -5.3px);
    }

    5% {
        transform: translate(205.84px, -3.87px);
    }

    6.25% {
        transform: translate(186.6px, -2.56px);
    }

    7.5% {
        transform: translate(167.98px, -1.39px);
    }

    8.75% {
        transform: translate(149.95px, -0.39px);
    }

    10% {
        transform: translate(132.49px, 0.46px);
    }

    11.25% {
        transform: translate(115.57px, 1.11px);
    }

    12.5% {
        transform: translate(99.18px, 1.58px);
    }

    13.75% {
        transform: translate(83.27px, 1.84px);
    }

    15% {
        transform: translate(67.82px, 1.89px);
    }

    16.25% {
        transform: translate(52.81px, 1.71px);
    }

    17.5% {
        transform: translate(38.2px, 1.29px);
    }

    18.75% {
        transform: translate(23.95px, 0.63px);
    }

    19.38% {
        transform: translate(16.89px, 0.21px);
    }

    19.69% {
        transform: translate(13.45px, -0.03px);
    }

    19.85% {
        transform: translate(11.69px, -0.15px);
    }

    20% {
        transform: translate(10.81px, -0.22px);
    }

    20.31% {
        transform: translate(10.05px, -0.27px);
    }

    20.62% {
        transform: translate(9.6px, -0.31px);
    }

    21.25% {
        transform: translate(8.97px, -0.36px);
    }

    22.5% {
        transform: translate(8.13px, -0.42px);
    }

    25% {
        transform: translate(7px, -0.51px);
    }

    27.5% {
        transform: translate(6.14px, -0.58px);
    }

    30% {
        transform: translate(5.41px, -0.64px);
    }

    32.5% {
        transform: translate(4.75px, -0.69px);
    }

    35% {
        transform: translate(4.12px, -0.75px);
    }

    37.5% {
        transform: translate(3.51px, -0.8px);
    }

    40% {
        transform: translate(2.9px, -0.85px);
    }

    42.5% {
        transform: translate(2.29px, -0.9px);
    }

    45% {
        transform: translate(1.67px, -0.96px);
    }

    47.5% {
        transform: translate(1.04px, -1.01px);
    }

    50% {
        transform: translate(0.39px, -1.07px);
    }

    52.5% {
        transform: translate(-0.27px, -1.13px);
    }

    55% {
        transform: translate(-0.95px, -1.19px);
    }

    57.5% {
        transform: translate(-1.64px, -1.26px);
    }

    60% {
        transform: translate(-2.35px, -1.32px);
    }

    62.5% {
        transform: translate(-3.07px, -1.39px);
    }

    65% {
        transform: translate(-3.79px, -1.46px);
    }

    67.5% {
        transform: translate(-4.54px, -1.53px);
    }

    70% {
        transform: translate(-5.33px, -1.61px);
    }

    72.5% {
        transform: translate(-6.23px, -1.7px);
    }

    75% {
        transform: translate(-7.38px, -1.82px);
    }

    76.25% {
        transform: translate(-8.17px, -1.9px);
    }

    76.88% {
        transform: translate(-8.72px, -1.96px);
    }

    77.5% {
        transform: translate(-9.53px, -2.04px);
    }

    77.81% {
        transform: translate(-10.28px, -2.12px);
    }

    77.96% {
        transform: translate(-11.11px, -2.21px);
    }

    78.12% {
        transform: translate(-13.1px, -2.43px);
    }

    78.75% {
        transform: translate(-21.1px, -3.38px);
    }

    80% {
        transform: translate(-36.75px, -5.55px);
    }

    81.25% {
        transform: translate(-52.17px, -8.12px);
    }

    82.5% {
        transform: translate(-67.42px, -11.1px);
    }

    83.75% {
        transform: translate(-82.57px, -14.48px);
    }

    85% {
        transform: translate(-97.69px, -18.26px);
    }

    86.25% {
        transform: translate(-112.84px, -22.45px);
    }

    87.5% {
        transform: translate(-128.1px, -27.05px);
    }

    88.75% {
        transform: translate(-143.53px, -32.05px);
    }

    90% {
        transform: translate(-159.21px, -37.45px);
    }

    91.25% {
        transform: translate(-175.18px, -43.23px);
    }

    92.5% {
        transform: translate(-191.53px, -49.4px);
    }

    93.75% {
        transform: translate(-208.31px, -55.93px);
    }

    95% {
        transform: translate(-225.58px, -62.82px);
    }

    96.25% {
        transform: translate(-243.41px, -70.05px);
    }

    97.5% {
        transform: translate(-261.84px, -77.6px);
    }

    98% {
        transform: translate(-269.4px, -80.71px);
        opacity: 1;
        /* 유지 */
    }

    99% {
        transform: translate(-284.84px, -87.08px);
    }

    100% {
        transform: translate(-300.74px, -93.62px);
        opacity: 0;
        /* 화면 밖으로 나가며 사라짐 */
    }
}

@keyframes sunColorChange {

    0%,
    10.42% {
        fill: #FCE570;
    }

    51.14% {
        fill: #E8A93A;
    }

    87.14%,
    100% {
        fill: #FCE570;
    }
}

@keyframes ringGlow {

    0% {
        opacity: 0;
    }

    34.51% {
        opacity: 0;
    }

    37.51% {
        opacity: 0.25;
    }

    51.14% {
        opacity: 0.45;
    }

    63.24% {
        opacity: 0.25;
    }

    66.24% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes obscFade {

    0% {
        opacity: 0;
    }

    9.92% {
        opacity: 0;
    }

    10.42% {
        opacity: 1;
    }

    87.14% {
        opacity: 1;
    }

    87.64% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ringLimb {

    0% {
        opacity: 0;
    }

    34.51% {
        opacity: 0;
    }

    37.51% {
        opacity: 0.4;
    }

    51.14% {
        opacity: 0.65;
    }

    63.24% {
        opacity: 0.4;
    }

    66.24% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes beadC2 {

    0% {
        opacity: 0;
    }

    36.31% {
        opacity: 0;
    }

    36.91% {
        opacity: 1;
    }

    37.51% {
        opacity: 0.3;
    }

    38.11% {
        opacity: 1;
    }

    38.71% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes beadC3 {

    0% {
        opacity: 0;
    }

    62.04% {
        opacity: 0;
    }

    62.64% {
        opacity: 1;
    }

    63.24% {
        opacity: 0.3;
    }

    63.84% {
        opacity: 1;
    }

    64.44% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 테이블 그리드 (개기일식, 금환일식, 금성통과 공통) */

.astro-table {
    width: 100%;
    border-top: var(--border-base);
    border-bottom: var(--border-base);
}

.astro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.astro-cell {
    padding: var(--padding-base);
    border-bottom: var(--border-base);
    text-align: center;
}

.astro-row:last-child .astro-cell {
    border-bottom: none;
}

.astro-cell:first-child {
    background: var(--gray-3);
    border-right: var(--border-base);
}

.astro-cell:last-child {
    background: var(--gray-4);
}

/* -------------------------------------------------------------------------------------
 *  금성 통과 애니메이션(서울)  (위젯 블록 138)
 * ------------------------------------------------------------------------------------- */

/* 부모 컨테이너 (개기일식, 금환일식, 금성통과 공통) */

.astro-container {
    background-color: var(--gray-2);
}

/* 금성 통과 애니메이션 (2012-06-06, 서울 사직동) */

#vt-sun {
    fill: #FCE570;
    animation: vtSunColorChange 20s linear infinite;
}

/* 금성: 태양 안에서는 검은 원, 태양 밖에서는 실제로 보이지 않으므로 얇은 실선 윤곽(위치 표시)만 그림 */

#vt-venus {
    fill: black;
    transform-origin: center center;
    animation: vtVenusMove 20s linear infinite;
}

/* 하늘 기준 모드일 때는 아래 경로로 바꿈 (스크립트 맨 위의 VT_HORIZON_MODE가 false일 때 vt-sky 클래스가 붙음) */

#vt-container.vt-sky #vt-venus,
#vt-container.vt-sky #vt-venus-out {
    animation-name: vtVenusMoveSky;
}

#vt-venus-out {
    fill: none;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 0.78;
    transform-origin: center center;
    animation: vtVenusMove 20s linear infinite;
}

/* 해가 진 뒤: 지평선 아래의 가상 태양이라는 뜻으로 점선 윤곽과 안내 문구를 보임 */

#vt-sun-outline {
    fill: none;
    stroke: rgb(200, 210, 235);
    stroke-width: 1.3;
    stroke-dasharray: 5.2 5.2;
    opacity: 0;
    animation: vtNightOutline 20s linear infinite;
}

.vt-night-label {
    font-size: 11.05px;
    fill: #9aa6c8;
    opacity: 0;
}

#vt-night-before {
    animation: vtNightBefore 20s linear infinite;
}

#vt-night-after {
    animation: vtNightAfter 20s linear infinite;
}

/* 관측지 좌표: 애니메이션 아래쪽 작은 글씨 */

#vt-site-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    text-align: center;
    font-size: min(var(--font-size-sub), 4.2vw);
    line-height: 1.2;
    color: #cfcfcf;
    pointer-events: none;
}

/* 태양 고도: 금환일식의 태양 가림 글씨와 같은 때에 위쪽 가운데에 나타남 */

#vt-alt-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

#vt-alt {
    position: absolute;
    left: 0;
    right: 0;
    top: 6px;
    text-align: center;
    font-size: min(var(--font-size-sub), 4.2vw);
    line-height: 1.2;
    color: #cfcfcf;
    opacity: 0;
    pointer-events: none;
    animation: vtAltFade 20s linear infinite;
}

#vt-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

@keyframes vtAltFade {
    0% {
        opacity: 0;
    }

    9.92% {
        opacity: 0;
    }

    10.42% {
        opacity: 1;
    }

    87.14% {
        opacity: 1;
    }

    87.64% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 금성 경로 (지평선 기준: 화면 위쪽이 천정) */

@keyframes vtVenusMove {
    0% {
        transform: translate(-149.88px, -55.25px);
        opacity: 0;
        /* 처음에 투명 */
    }

    0.42% {
        transform: translate(-149.38px, -50.34px);
    }

    0.83% {
        transform: translate(-148.72px, -45.69px);
    }

    1.25% {
        transform: translate(-147.88px, -41.06px);
    }

    1.67% {
        transform: translate(-146.88px, -36.58px);
    }

    2% {
        transform: translate(-146px, -33.18px);
        opacity: 1;
        /* 화면 밖에서 들어오며 나타남 */
    }

    2.34% {
        transform: translate(-144.99px, -29.79px);
    }

    2.67% {
        transform: translate(-143.93px, -26.61px);
    }

    3% {
        transform: translate(-142.8px, -23.54px);
    }

    3.33% {
        transform: translate(-141.59px, -20.58px);
    }

    3.75% {
        transform: translate(-139.95px, -16.98px);
    }

    4.17% {
        transform: translate(-138.22px, -13.58px);
    }

    4.59% {
        transform: translate(-136.41px, -10.36px);
    }

    5% {
        transform: translate(-134.56px, -7.41px);
    }

    5.42% {
        transform: translate(-132.6px, -4.57px);
    }

    5.83% {
        transform: translate(-130.63px, -1.99px);
    }

    6.25% {
        transform: translate(-128.56px, 0.48px);
    }

    6.67% {
        transform: translate(-126.45px, 2.76px);
    }

    7.08% {
        transform: translate(-124.36px, 4.81px);
    }

    7.5% {
        transform: translate(-122.19px, 6.74px);
    }

    7.91% {
        transform: translate(-120.06px, 8.46px);
    }

    8.33% {
        transform: translate(-117.86px, 10.06px);
    }

    8.75% {
        transform: translate(-115.66px, 11.5px);
    }

    9.17% {
        transform: translate(-113.45px, 12.78px);
    }

    9.59% {
        transform: translate(-111.24px, 13.91px);
    }

    10% {
        transform: translate(-109.09px, 14.88px);
    }

    10.42% {
        transform: translate(-106.9px, 15.73px);
    }

    10.84% {
        transform: translate(-104.72px, 16.44px);
    }

    11.25% {
        transform: translate(-102.61px, 17.02px);
    }

    11.67% {
        transform: translate(-100.47px, 17.49px);
    }

    12.08% {
        transform: translate(-98.39px, 17.83px);
    }

    12.5% {
        transform: translate(-96.29px, 18.08px);
    }

    12.91% {
        transform: translate(-94.26px, 18.21px);
    }

    13.33% {
        transform: translate(-92.2px, 18.24px);
    }

    14.16% {
        transform: translate(-88.21px, 18.01px);
    }

    15% {
        transform: translate(-84.28px, 17.42px);
    }

    15.83% {
        transform: translate(-80.5px, 16.51px);
    }

    16.67% {
        transform: translate(-76.78px, 15.28px);
    }

    17.5% {
        transform: translate(-73.21px, 13.8px);
    }

    17.91% {
        transform: translate(-71.51px, 12.99px);
    }

    18.33% {
        transform: translate(-70.07px, 12.24px);
    }

    18.75% {
        transform: translate(-68.92px, 11.61px);
    }

    19.16% {
        transform: translate(-67.96px, 11.06px);
    }

    20% {
        transform: translate(-66.23px, 10.02px);
    }

    21.67% {
        transform: translate(-62.96px, 7.85px);
    }

    23.33% {
        transform: translate(-59.8px, 5.51px);
    }

    25% {
        transform: translate(-56.69px, 3px);
    }

    26.67% {
        transform: translate(-53.67px, 0.36px);
    }

    28.33% {
        transform: translate(-50.73px, -2.38px);
    }

    30% {
        transform: translate(-47.84px, -5.22px);
    }

    31.67% {
        transform: translate(-44.98px, -8.13px);
    }

    33.33% {
        transform: translate(-42.16px, -11.07px);
    }

    35% {
        transform: translate(-39.32px, -14.06px);
    }

    36.67% {
        transform: translate(-36.45px, -17.07px);
    }

    38.33% {
        transform: translate(-33.53px, -20.07px);
    }

    40% {
        transform: translate(-30.49px, -23.08px);
    }

    41.67% {
        transform: translate(-27.29px, -26.05px);
    }

    43.33% {
        transform: translate(-23.9px, -28.96px);
    }

    45% {
        transform: translate(-20.21px, -31.8px);
    }

    45.84% {
        transform: translate(-18.23px, -33.17px);
    }

    46.67% {
        transform: translate(-16.17px, -34.49px);
    }

    47.5% {
        transform: translate(-14.01px, -35.76px);
    }

    48.33% {
        transform: translate(-11.72px, -36.96px);
    }

    49.17% {
        transform: translate(-9.27px, -38.1px);
    }

    50% {
        transform: translate(-6.71px, -39.12px);
    }

    50.84% {
        transform: translate(-3.96px, -40.04px);
    }

    51.67% {
        transform: translate(-1.08px, -40.81px);
    }

    52.5% {
        transform: translate(1.97px, -41.41px);
    }

    53.33% {
        transform: translate(5.19px, -41.81px);
    }

    54.16% {
        transform: translate(8.59px, -41.97px);
    }

    55% {
        transform: translate(12.19px, -41.86px);
    }

    55.84% {
        transform: translate(15.94px, -41.44px);
    }

    56.67% {
        transform: translate(19.77px, -40.66px);
    }

    57.5% {
        transform: translate(23.67px, -39.5px);
    }

    57.92% {
        transform: translate(25.67px, -38.77px);
    }

    58.33% {
        transform: translate(27.61px, -37.94px);
    }

    58.75% {
        transform: translate(29.6px, -36.99px);
    }

    59.17% {
        transform: translate(31.57px, -35.93px);
    }

    59.58% {
        transform: translate(33.47px, -34.8px);
    }

    60% {
        transform: translate(35.39px, -33.53px);
    }

    60.41% {
        transform: translate(37.22px, -32.2px);
    }

    60.83% {
        transform: translate(39.04px, -30.74px);
    }

    61.25% {
        transform: translate(40.81px, -29.18px);
    }

    61.67% {
        transform: translate(42.52px, -27.54px);
    }

    62.09% {
        transform: translate(44.16px, -25.82px);
    }

    62.5% {
        transform: translate(45.68px, -24.08px);
    }

    63.33% {
        transform: translate(48.53px, -20.37px);
    }

    64.17% {
        transform: translate(51.08px, -16.45px);
    }

    65% {
        transform: translate(53.25px, -12.46px);
    }

    65.83% {
        transform: translate(55.09px, -8.44px);
    }

    66.67% {
        transform: translate(56.63px, -4.38px);
    }

    67.5% {
        transform: translate(57.86px, -0.43px);
    }

    68.33% {
        transform: translate(58.85px, 3.42px);
    }

    69.16% {
        transform: translate(59.61px, 7.16px);
    }

    70% {
        transform: translate(60.19px, 10.81px);
    }

    70.84% {
        transform: translate(60.61px, 14.32px);
    }

    71.67% {
        transform: translate(60.9px, 17.64px);
    }

    72.5% {
        transform: translate(61.08px, 20.82px);
    }

    73.33% {
        transform: translate(61.18px, 23.87px);
    }

    74.16% {
        transform: translate(61.22px, 26.78px);
    }

    75% {
        transform: translate(61.22px, 29.63px);
    }

    75.84% {
        transform: translate(61.17px, 32.53px);
    }

    76.26% {
        transform: translate(61.13px, 34.08px);
    }

    76.67% {
        transform: translate(61.08px, 35.72px);
    }

    77.09% {
        transform: translate(61.01px, 37.57px);
    }

    77.5% {
        transform: translate(60.93px, 39.6px);
    }

    78.33% {
        transform: translate(60.75px, 44.09px);
    }

    79.16% {
        transform: translate(60.59px, 48.37px);
    }

    80% {
        transform: translate(60.48px, 52.45px);
    }

    80.84% {
        transform: translate(60.43px, 56.3px);
    }

    81.67% {
        transform: translate(60.47px, 59.91px);
    }

    82.5% {
        transform: translate(60.59px, 63.37px);
    }

    83.33% {
        transform: translate(60.8px, 66.68px);
    }

    84.17% {
        transform: translate(61.11px, 69.9px);
    }

    85% {
        transform: translate(61.51px, 72.97px);
    }

    85.83% {
        transform: translate(62px, 75.95px);
    }

    86.67% {
        transform: translate(62.6px, 78.86px);
    }

    87.5% {
        transform: translate(63.29px, 81.65px);
    }

    88.33% {
        transform: translate(64.08px, 84.36px);
    }

    89.17% {
        transform: translate(64.98px, 87.02px);
    }

    90% {
        transform: translate(65.97px, 89.58px);
    }

    90.83% {
        transform: translate(67.07px, 92.06px);
    }

    91.67% {
        transform: translate(68.29px, 94.5px);
    }

    92.5% {
        transform: translate(69.6px, 96.83px);
    }

    93.33% {
        transform: translate(71.02px, 99.1px);
    }

    94.16% {
        transform: translate(72.56px, 101.28px);
    }

    95% {
        transform: translate(74.22px, 103.42px);
    }

    95.84% {
        transform: translate(76.01px, 105.47px);
    }

    96.67% {
        transform: translate(77.9px, 107.42px);
    }

    98% {
        transform: translate(81.17px, 110.35px);
        opacity: 1;
        /* 유지 */
    }

    98.33% {
        transform: translate(82.04px, 111.04px);
    }

    99.16% {
        transform: translate(84.3px, 112.71px);
    }

    100% {
        transform: translate(86.73px, 114.29px);
        opacity: 0;
        /* 화면 밖으로 나가며 사라짐 */
    }
}

/* 금성 경로 (하늘 기준: 화면 위쪽이 북쪽) */

@keyframes vtVenusMoveSky {
    0% {
        transform: translate(-148.31px, -59.35px);
        opacity: 0;
        /* 처음에 투명 */
    }

    1.67% {
        transform: translate(-139.79px, -58.05px);
    }

    2% {
        transform: translate(-138.11px, -57.8px);
        opacity: 1;
        /* 화면 밖에서 들어오며 나타남 */
    }

    3.33% {
        transform: translate(-131.33px, -56.77px);
    }

    5% {
        transform: translate(-122.8px, -55.5px);
    }

    6.67% {
        transform: translate(-114.27px, -54.23px);
    }

    8.33% {
        transform: translate(-105.77px, -52.97px);
    }

    10% {
        transform: translate(-97.2px, -51.72px);
    }

    11.67% {
        transform: translate(-88.62px, -50.47px);
    }

    13.33% {
        transform: translate(-80.06px, -49.24px);
    }

    15% {
        transform: translate(-71.43px, -48px);
    }

    16.67% {
        transform: translate(-62.78px, -46.77px);
    }

    17.5% {
        transform: translate(-58.48px, -46.16px);
    }

    17.91% {
        transform: translate(-56.39px, -45.86px);
    }

    18.12% {
        transform: translate(-55.44px, -45.73px);
    }

    18.33% {
        transform: translate(-54.59px, -45.61px);
    }

    18.75% {
        transform: translate(-53.13px, -45.4px);
    }

    19.16% {
        transform: translate(-51.92px, -45.23px);
    }

    20% {
        transform: translate(-49.7px, -44.91px);
    }

    21.67% {
        transform: translate(-45.42px, -44.31px);
    }

    23.33% {
        transform: translate(-41.17px, -43.71px);
    }

    25% {
        transform: translate(-36.94px, -43.12px);
    }

    26.67% {
        transform: translate(-32.74px, -42.53px);
    }

    28.33% {
        transform: translate(-28.63px, -41.95px);
    }

    30% {
        transform: translate(-24.56px, -41.38px);
    }

    31.67% {
        transform: translate(-20.57px, -40.82px);
    }

    33.33% {
        transform: translate(-16.69px, -40.27px);
    }

    35% {
        transform: translate(-12.86px, -39.73px);
    }

    36.67% {
        transform: translate(-9.12px, -39.2px);
    }

    38.33% {
        transform: translate(-5.48px, -38.69px);
    }

    40% {
        transform: translate(-1.91px, -38.19px);
    }

    41.67% {
        transform: translate(1.59px, -37.69px);
    }

    43.33% {
        transform: translate(5px, -37.21px);
    }

    45% {
        transform: translate(8.36px, -36.74px);
    }

    46.67% {
        transform: translate(11.65px, -36.27px);
    }

    48.33% {
        transform: translate(14.86px, -35.81px);
    }

    50% {
        transform: translate(18.03px, -35.36px);
    }

    51.67% {
        transform: translate(21.15px, -34.92px);
    }

    53.33% {
        transform: translate(24.21px, -34.48px);
    }

    55% {
        transform: translate(27.24px, -34.05px);
    }

    56.67% {
        transform: translate(30.23px, -33.62px);
    }

    58.33% {
        transform: translate(33.17px, -33.2px);
    }

    60% {
        transform: translate(36.09px, -32.78px);
    }

    61.67% {
        transform: translate(38.98px, -32.36px);
    }

    63.33% {
        transform: translate(41.83px, -31.95px);
    }

    65% {
        transform: translate(44.68px, -31.53px);
    }

    66.67% {
        transform: translate(47.51px, -31.12px);
    }

    68.33% {
        transform: translate(50.31px, -30.71px);
    }

    70% {
        transform: translate(53.11px, -30.3px);
    }

    71.67% {
        transform: translate(55.91px, -29.9px);
    }

    73.33% {
        transform: translate(58.68px, -29.49px);
    }

    75% {
        transform: translate(61.48px, -29.08px);
    }

    75.84% {
        transform: translate(62.99px, -28.86px);
    }

    76.67% {
        transform: translate(64.72px, -28.6px);
    }

    77.09% {
        transform: translate(65.76px, -28.44px);
    }

    77.5% {
        transform: translate(66.94px, -28.27px);
    }

    78.33% {
        transform: translate(69.7px, -27.86px);
    }

    80% {
        transform: translate(75.35px, -27.02px);
    }

    81.67% {
        transform: translate(81px, -26.18px);
    }

    83.33% {
        transform: translate(86.61px, -25.33px);
    }

    85% {
        transform: translate(92.24px, -24.48px);
    }

    86.67% {
        transform: translate(97.87px, -23.63px);
    }

    88.33% {
        transform: translate(103.46px, -22.78px);
    }

    90% {
        transform: translate(109.07px, -21.92px);
    }

    91.67% {
        transform: translate(114.67px, -21.05px);
    }

    93.33% {
        transform: translate(120.24px, -20.19px);
    }

    95% {
        transform: translate(125.82px, -19.33px);
    }

    96.67% {
        transform: translate(131.4px, -18.46px);
    }

    98% {
        transform: translate(135.83px, -17.77px);
        opacity: 1;
        /* 유지 */
    }

    98.33% {
        transform: translate(136.93px, -17.6px);
    }

    100% {
        transform: translate(142.49px, -16.72px);
        opacity: 0;
        /* 화면 밖으로 나가며 사라짐 */
    }
}

/* 태양색: 해가 낮게 떠 있을 때(일출·일몰 무렵) 붉게, 진 뒤에는 어두운 남색 */

@keyframes vtSunColorChange {

    0% {
        fill: #2F364D;
    }

    10.95% {
        fill: #2F364D;
    }

    11% {
        fill: #30364D;
    }

    11.05% {
        fill: #30374D;
    }

    11.1% {
        fill: #31374D;
    }

    11.15% {
        fill: #31374D;
    }

    11.2% {
        fill: #32374D;
    }

    11.25% {
        fill: #33384D;
    }

    11.3% {
        fill: #34384D;
    }

    11.35% {
        fill: #35394D;
    }

    11.4% {
        fill: #36394D;
    }

    11.45% {
        fill: #373A4D;
    }

    11.5% {
        fill: #393B4D;
    }

    11.55% {
        fill: #3A3C4D;
    }

    11.6% {
        fill: #3C3C4D;
    }

    11.65% {
        fill: #3E3D4D;
    }

    11.7% {
        fill: #403E4D;
    }

    11.75% {
        fill: #423F4D;
    }

    11.8% {
        fill: #44404D;
    }

    11.85% {
        fill: #47414D;
    }

    11.9% {
        fill: #49434D;
    }

    11.95% {
        fill: #4C444D;
    }

    12% {
        fill: #4E454D;
    }

    12.05% {
        fill: #51474D;
    }

    12.1% {
        fill: #54484D;
    }

    12.15% {
        fill: #574A4D;
    }

    12.2% {
        fill: #5A4B4D;
    }

    12.25% {
        fill: #5E4D4D;
    }

    12.3% {
        fill: #614F4D;
    }

    12.35% {
        fill: #65514D;
    }

    12.4% {
        fill: #68534D;
    }

    12.45% {
        fill: #6C554D;
    }

    12.5% {
        fill: #70574D;
    }

    12.55% {
        fill: #74594D;
    }

    12.6% {
        fill: #785C4D;
    }

    12.65% {
        fill: #7D5E4D;
    }

    12.7% {
        fill: #81614D;
    }

    12.75% {
        fill: #86634E;
    }

    12.8% {
        fill: #8A664E;
    }

    12.85% {
        fill: #8F694E;
    }

    12.9% {
        fill: #946C4E;
    }

    12.95% {
        fill: #996F4F;
    }

    13% {
        fill: #9D724F;
    }

    13.05% {
        fill: #A2754F;
    }

    13.1% {
        fill: #A77950;
    }

    13.15% {
        fill: #AB7C50;
    }

    13.2% {
        fill: #B07F51;
    }

    13.25% {
        fill: #B48251;
    }

    13.3% {
        fill: #B88652;
    }

    13.35% {
        fill: #BC8952;
    }

    13.4% {
        fill: #C08C53;
    }

    13.45% {
        fill: #C48F54;
    }

    13.5% {
        fill: #C89354;
    }

    13.55% {
        fill: #CB9655;
    }

    13.6% {
        fill: #CE9956;
    }

    13.65% {
        fill: #D29C57;
    }

    13.7% {
        fill: #D59F57;
    }

    13.75% {
        fill: #D8A358;
    }

    13.8% {
        fill: #DBA659;
    }

    13.85% {
        fill: #DEA95A;
    }

    13.9% {
        fill: #E0AC5B;
    }

    13.95% {
        fill: #E3AF5C;
    }

    14% {
        fill: #E5B25C;
    }

    14.05% {
        fill: #E8B55D;
    }

    14.1% {
        fill: #EAB85E;
    }

    14.15% {
        fill: #ECBB5F;
    }

    14.2% {
        fill: #EEBD60;
    }

    14.25% {
        fill: #F0C061;
    }

    14.3% {
        fill: #F1C262;
    }

    14.35% {
        fill: #F3C562;
    }

    14.4% {
        fill: #F4C763;
    }

    14.45% {
        fill: #F6CA64;
    }

    14.5% {
        fill: #F7CC65;
    }

    14.55% {
        fill: #F8CE66;
    }

    14.6% {
        fill: #F9D066;
    }

    14.65% {
        fill: #FAD267;
    }

    14.7% {
        fill: #FAD368;
    }

    14.75% {
        fill: #FBD568;
    }

    14.8% {
        fill: #FBD669;
    }

    14.85% {
        fill: #FCD86A;
    }

    14.9% {
        fill: #FCD96A;
    }

    14.95% {
        fill: #FCDA6B;
    }

    15% {
        fill: #FCDB6B;
    }

    15.05% {
        fill: #FCDC6B;
    }

    15.1% {
        fill: #FCDD6C;
    }

    15.15% {
        fill: #FCDE6C;
    }

    15.2% {
        fill: #FCDE6D;
    }

    15.25% {
        fill: #FCDF6D;
    }

    15.3% {
        fill: #FCE06D;
    }

    15.35% {
        fill: #FCE06E;
    }

    15.4% {
        fill: #FCE16E;
    }

    15.45% {
        fill: #FCE16E;
    }

    15.5% {
        fill: #FCE26E;
    }

    15.55% {
        fill: #FCE26E;
    }

    15.6% {
        fill: #FCE26F;
    }

    15.65% {
        fill: #FCE36F;
    }

    15.75% {
        fill: #FCE36F;
    }

    15.8% {
        fill: #FCE46F;
    }

    15.9% {
        fill: #FCE46F;
    }

    15.95% {
        fill: #FCE470;
    }

    16.05% {
        fill: #FCE470;
    }

    16.1% {
        fill: #FCE570;
    }

    100% {
        fill: #FCE570;
    }
}

@keyframes vtNightOutline {

    0% {
        opacity: 0.6;
    }

    10.85% {
        opacity: 0.6;
    }

    10.9% {
        opacity: 0.599;
    }

    10.95% {
        opacity: 0.599;
    }

    11% {
        opacity: 0.598;
    }

    11.05% {
        opacity: 0.597;
    }

    11.1% {
        opacity: 0.595;
    }

    11.15% {
        opacity: 0.594;
    }

    11.2% {
        opacity: 0.592;
    }

    11.25% {
        opacity: 0.589;
    }

    11.3% {
        opacity: 0.586;
    }

    11.35% {
        opacity: 0.583;
    }

    11.4% {
        opacity: 0.58;
    }

    11.45% {
        opacity: 0.576;
    }

    11.5% {
        opacity: 0.571;
    }

    11.55% {
        opacity: 0.567;
    }

    11.6% {
        opacity: 0.562;
    }

    11.65% {
        opacity: 0.557;
    }

    11.7% {
        opacity: 0.551;
    }

    11.75% {
        opacity: 0.545;
    }

    11.8% {
        opacity: 0.539;
    }

    11.85% {
        opacity: 0.532;
    }

    11.9% {
        opacity: 0.525;
    }

    11.95% {
        opacity: 0.517;
    }

    12% {
        opacity: 0.509;
    }

    12.05% {
        opacity: 0.501;
    }

    12.1% {
        opacity: 0.493;
    }

    12.15% {
        opacity: 0.484;
    }

    12.2% {
        opacity: 0.475;
    }

    12.25% {
        opacity: 0.465;
    }

    12.3% {
        opacity: 0.455;
    }

    12.35% {
        opacity: 0.445;
    }

    12.4% {
        opacity: 0.434;
    }

    12.45% {
        opacity: 0.423;
    }

    12.5% {
        opacity: 0.412;
    }

    12.55% {
        opacity: 0.4;
    }

    12.6% {
        opacity: 0.388;
    }

    12.65% {
        opacity: 0.376;
    }

    12.7% {
        opacity: 0.363;
    }

    12.75% {
        opacity: 0.35;
    }

    12.8% {
        opacity: 0.336;
    }

    12.85% {
        opacity: 0.322;
    }

    12.9% {
        opacity: 0.309;
    }

    12.95% {
        opacity: 0.295;
    }

    13% {
        opacity: 0.281;
    }

    13.05% {
        opacity: 0.267;
    }

    13.1% {
        opacity: 0.254;
    }

    13.15% {
        opacity: 0.241;
    }

    13.2% {
        opacity: 0.228;
    }

    13.25% {
        opacity: 0.215;
    }

    13.3% {
        opacity: 0.203;
    }

    13.35% {
        opacity: 0.191;
    }

    13.4% {
        opacity: 0.18;
    }

    13.45% {
        opacity: 0.169;
    }

    13.5% {
        opacity: 0.158;
    }

    13.55% {
        opacity: 0.147;
    }

    13.6% {
        opacity: 0.137;
    }

    13.65% {
        opacity: 0.128;
    }

    13.7% {
        opacity: 0.118;
    }

    13.75% {
        opacity: 0.109;
    }

    13.8% {
        opacity: 0.101;
    }

    13.85% {
        opacity: 0.093;
    }

    13.9% {
        opacity: 0.085;
    }

    13.95% {
        opacity: 0.077;
    }

    14% {
        opacity: 0.07;
    }

    14.05% {
        opacity: 0.063;
    }

    14.1% {
        opacity: 0.057;
    }

    14.15% {
        opacity: 0.051;
    }

    14.2% {
        opacity: 0.045;
    }

    14.25% {
        opacity: 0.039;
    }

    14.3% {
        opacity: 0.034;
    }

    14.35% {
        opacity: 0.03;
    }

    14.4% {
        opacity: 0.025;
    }

    14.45% {
        opacity: 0.021;
    }

    14.5% {
        opacity: 0.018;
    }

    14.55% {
        opacity: 0.014;
    }

    14.6% {
        opacity: 0.012;
    }

    14.65% {
        opacity: 0.009;
    }

    14.7% {
        opacity: 0.007;
    }

    14.75% {
        opacity: 0.005;
    }

    14.8% {
        opacity: 0.004;
    }

    14.85% {
        opacity: 0.002;
    }

    14.9% {
        opacity: 0.002;
    }

    14.95% {
        opacity: 0.001;
    }

    15% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes vtNightBefore {

    0% {
        opacity: 1;
    }

    10.8% {
        opacity: 1;
    }

    10.85% {
        opacity: 0.999;
    }

    10.9% {
        opacity: 0.999;
    }

    10.95% {
        opacity: 0.998;
    }

    11% {
        opacity: 0.996;
    }

    11.05% {
        opacity: 0.995;
    }

    11.1% {
        opacity: 0.992;
    }

    11.15% {
        opacity: 0.989;
    }

    11.2% {
        opacity: 0.986;
    }

    11.25% {
        opacity: 0.982;
    }

    11.3% {
        opacity: 0.977;
    }

    11.35% {
        opacity: 0.972;
    }

    11.4% {
        opacity: 0.966;
    }

    11.45% {
        opacity: 0.96;
    }

    11.5% {
        opacity: 0.952;
    }

    11.55% {
        opacity: 0.945;
    }

    11.6% {
        opacity: 0.937;
    }

    11.65% {
        opacity: 0.928;
    }

    11.7% {
        opacity: 0.918;
    }

    11.75% {
        opacity: 0.908;
    }

    11.8% {
        opacity: 0.898;
    }

    11.85% {
        opacity: 0.886;
    }

    11.9% {
        opacity: 0.875;
    }

    11.95% {
        opacity: 0.862;
    }

    12% {
        opacity: 0.849;
    }

    12.05% {
        opacity: 0.836;
    }

    12.1% {
        opacity: 0.821;
    }

    12.15% {
        opacity: 0.807;
    }

    12.2% {
        opacity: 0.791;
    }

    12.25% {
        opacity: 0.775;
    }

    12.3% {
        opacity: 0.759;
    }

    12.35% {
        opacity: 0.741;
    }

    12.4% {
        opacity: 0.724;
    }

    12.45% {
        opacity: 0.705;
    }

    12.5% {
        opacity: 0.686;
    }

    12.55% {
        opacity: 0.667;
    }

    12.6% {
        opacity: 0.647;
    }

    12.65% {
        opacity: 0.626;
    }

    12.7% {
        opacity: 0.604;
    }

    12.75% {
        opacity: 0.583;
    }

    12.8% {
        opacity: 0.56;
    }

    12.85% {
        opacity: 0.537;
    }

    12.9% {
        opacity: 0.514;
    }

    12.95% {
        opacity: 0.491;
    }

    13% {
        opacity: 0.468;
    }

    13.05% {
        opacity: 0.446;
    }

    13.1% {
        opacity: 0.423;
    }

    13.15% {
        opacity: 0.401;
    }

    13.2% {
        opacity: 0.38;
    }

    13.25% {
        opacity: 0.359;
    }

    13.3% {
        opacity: 0.338;
    }

    13.35% {
        opacity: 0.319;
    }

    13.4% {
        opacity: 0.3;
    }

    13.45% {
        opacity: 0.281;
    }

    13.5% {
        opacity: 0.263;
    }

    13.55% {
        opacity: 0.246;
    }

    13.6% {
        opacity: 0.229;
    }

    13.65% {
        opacity: 0.213;
    }

    13.7% {
        opacity: 0.197;
    }

    13.75% {
        opacity: 0.182;
    }

    13.8% {
        opacity: 0.168;
    }

    13.85% {
        opacity: 0.154;
    }

    13.9% {
        opacity: 0.141;
    }

    13.95% {
        opacity: 0.129;
    }

    14% {
        opacity: 0.117;
    }

    14.05% {
        opacity: 0.105;
    }

    14.1% {
        opacity: 0.094;
    }

    14.15% {
        opacity: 0.084;
    }

    14.2% {
        opacity: 0.075;
    }

    14.25% {
        opacity: 0.066;
    }

    14.3% {
        opacity: 0.057;
    }

    14.35% {
        opacity: 0.049;
    }

    14.4% {
        opacity: 0.042;
    }

    14.45% {
        opacity: 0.036;
    }

    14.5% {
        opacity: 0.03;
    }

    14.55% {
        opacity: 0.024;
    }

    14.6% {
        opacity: 0.019;
    }

    14.65% {
        opacity: 0.015;
    }

    14.7% {
        opacity: 0.011;
    }

    14.75% {
        opacity: 0.008;
    }

    14.8% {
        opacity: 0.006;
    }

    14.85% {
        opacity: 0.004;
    }

    14.9% {
        opacity: 0.003;
    }

    14.95% {
        opacity: 0.001;
    }

    15% {
        opacity: 0.001;
    }

    15.05% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes vtNightAfter {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 테이블 그리드 (개기일식, 금환일식, 금성통과 공통) */

.astro-table {
    width: 100%;
    border-top: var(--border-base);
    border-bottom: var(--border-base);
}

.astro-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.astro-cell {
    padding: var(--padding-base);
    border-bottom: var(--border-base);
    text-align: center;
}

.astro-row:last-child .astro-cell {
    border-bottom: none;
}

.astro-cell:first-child {
    background: var(--gray-3);
    border-right: var(--border-base);
}

.astro-cell:last-child {
    background: var(--gray-4);
}