.lumi-page-heading {
    padding-bottom: 24px;
}

.lumi-date-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
}

.lumi-location {
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--brand-ulsan);
    background: var(--brand-ulsan-soft);
    font-size: 0.75rem;
    font-weight: 900;
}

.lumi-date-panel strong {
    font-size: 0.95rem;
}

.lumi-primary-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.lumi-card {
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lumi-sun-card {
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(255, 187, 56, 0.15),
            transparent 42%
        ),
        var(--surface);
}

.lumi-moon-card {
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(120, 111, 255, 0.16),
            transparent 42%
        ),
        var(--surface);
}

.lumi-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lumi-card-heading p,
.lumi-card-heading h2 {
    margin: 0;
}

.lumi-card-heading p {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 800;
}

.lumi-card-heading h2 {
    margin-top: 2px;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
}

.lumi-main-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 19px;
}

.lumi-main-icon svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lumi-sun-icon {
    color: #e78b00;
    background: #fff1cc;
}

.lumi-moon-icon {
    color: #655bd8;
    background: #ece9ff;
}

.lumi-moon-icon svg {
    fill: currentColor;
    stroke: none;
}

.lumi-time-pair {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 25px;
}

.lumi-time-pair > div {
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-soft);
}

.lumi-time-pair span,
.lumi-time-pair strong {
    display: block;
}

.lumi-time-pair span {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.lumi-time-pair strong {
    margin-top: 4px;
    font-size: clamp(1.7rem, 5vw, 2.45rem);
    letter-spacing: -0.055em;
}

.lumi-transit {
    display: flex;
    justify-content: space-between;
    margin: 14px 2px 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.lumi-transit strong {
    color: var(--text-secondary);
}

.lumi-detail-section {
    margin-top: 48px;
}

.lumi-section-heading h2,
.lumi-section-heading p {
    margin: 0;
}

.lumi-section-heading h2 {
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

.lumi-section-heading > p:last-child {
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.twilight-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.twilight-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--surface);
}

.twilight-card > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.twilight-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.twilight-civil {
    background: #ffb020;
}

.twilight-nautical {
    background: #6575d8;
}

.twilight-astronomical {
    background: #43397e;
}

.twilight-card > p {
    min-height: 42px;
    margin: 9px 0 16px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.twilight-card dl {
    margin: 0;
}

.twilight-card dl > div {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.twilight-card dt {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.twilight-card dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
}

html[data-theme="dark"] .lumi-sun-icon {
    color: #ffd06e;
    background: rgba(255, 176, 32, 0.16);
}

html[data-theme="dark"] .lumi-moon-icon {
    color: #b3adff;
    background: rgba(120, 111, 255, 0.18);
}

@media (max-width: 760px) {
    .lumi-primary-grid,
    .twilight-grid {
        grid-template-columns: 1fr;
    }

    .twilight-card > p {
        min-height: 0;
    }
}

@media (max-width: 420px) {
    .lumi-card {
        padding: 18px;
        border-radius: 21px;
    }

    .lumi-time-pair > div {
        padding: 15px;
    }

    .lumi-date-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}