/* 지금 울산 UI system v3 */
:root {
    --color-text-strong: var(--text-primary);
    --color-text-normal: var(--text-secondary);
    --color-text-assistive: var(--text-tertiary);
    --color-background-canvas: var(--page-background);
    --color-background-subtle: var(--surface-soft);
    --color-background-layered: var(--surface);
    --color-background-floated: var(--surface-raised);
    --color-border-default: var(--border);
    --color-action-primary: var(--accent);
    --color-action-primary-soft: var(--accent-soft);
    --color-status-success: var(--success);
    --color-status-success-soft: var(--success-soft);
    --color-status-warning: var(--warning);
    --color-status-warning-soft: var(--warning-soft);
    --color-status-danger: var(--danger);
    --color-status-danger-soft: var(--danger-soft);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --radius-control: 14px;
    --radius-card: 22px;
    --radius-layer: 26px;
    --radius-round: 999px;
    --type-page-title: clamp(2.25rem, 6vw, 3.25rem);
    --type-section-title: 1.5rem;
    --type-body: 1rem;
    --type-body-small: 0.9375rem;
    --type-assistive: 0.8125rem;
    --touch-target-min: 44px;
    --focus-ring-color: var(--accent);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    color: #ffffff;
    background: var(--accent);
    font-size: 0.9375rem;
    font-weight: 700;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

#main-content:focus {
    outline: none;
}

:where(a, button, input, select, textarea, summary,
    [role="button"], [role="tab"], [role="switch"]):focus-visible {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 3px;
}

:where(button, [role="button"], [role="tab"], summary) {
    min-height: var(--touch-target-min);
}

.station-information-action,
.station-information-action > summary,
.station-information-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

.station-information-action > summary {
    display: grid;
    place-items: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    cursor: pointer;
}

.section-heading,
.weather-section-heading,
.lumi-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.section-heading h2,
.weather-section-heading h2,
.weather-section-heading h3,
.lumi-section-heading h2 {
    margin: 0;
    font-size: var(--type-section-title);
    line-height: 1.3;
    letter-spacing: -0.04em;
}

.section-heading > span,
.weather-section-heading > span {
    color: var(--text-tertiary);
    font-size: var(--type-assistive);
}

@media (max-width: 520px) {
    .section-heading,
    .weather-section-heading,
    .lumi-section-heading {
        align-items: flex-start;
    }
}

@media (prefers-contrast: more) {
    :where(.theme-button, .station-information-close,
        input, select, textarea) {
        border-color: currentColor;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea):focus-visible {
        outline: 3px solid CanvasText;
    }
}