/* =============================================
   남산케이블카 - Design System & Styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* Design Tokens */
:root {
    /* Colors */
    --primary: #1a5f7a;
    --primary-light: #2980b9;
    --accent: #ffc107;
    --accent-glow: rgba(255, 193, 7, 0.4);

    /* Theme Colors (Dynamic) */
    --sky-top: #4FACFE;
    --sky-bottom: #00F2FE;
    --text-main: #ffffff;

    --dark: #0d1b2a;
    --dark-overlay: rgba(13, 27, 42, 0.6);
    --light: #f8f9fa;
    --white: #ffffff;

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(20px);

    /* Typography */
    --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-xxl: 5rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index */
    --z-video: -1;
    --z-overlay-video: 0;
    --z-content: 1;
    --z-header: 100;
    --z-altitude: 1000;
    --z-operation: 1001;
    --z-sidebar: 400;
    --z-overlay: 350;
}

/* Global Typography & Text Rules */
h1,
h2,
h3,
h4 {
    word-break: keep-all;
    overflow-wrap: break-word;
    /* Safety for very long words */
}

.nowrap {
    white-space: nowrap !important;
}

/* Language Specific Font Configuration */
html[lang="ko"] {
    --font-primary: 'Noto Sans KR', 'Pretendard', sans-serif;
}

html[lang="ja"] {
    --font-primary: 'Noto Sans JP', 'Meiryo', sans-serif;
}

html[lang="zh"] {
    --font-primary: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

html[lang="en"] {
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;

    /* 한글을 단어 단위로 끊어줍니다 */
    word-break: keep-all;

    /* 긴 단어(영어 등)가 영역을 넘칠 경우 강제로 줄바꿈 합니다 */
    overflow-wrap: break-word;
}

/* =============================================
   Video Background
   ============================================= */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-video);
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dynamic Time-Lapse Gradient */
    background: linear-gradient(180deg,
            var(--sky-top),
            transparent 50%,
            var(--sky-bottom));
    opacity: 0.8;
    mix-blend-mode: overlay;
    /* Blends better with video */
    pointer-events: none;
    transition: background 1s ease;
}

/* =============================================
   Header
   ============================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    z-index: var(--z-header);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
}

.header-logo {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Header Left (Logo + Menu Button) */
.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Space between logo and menu button */
}

/* Header Right - Vertical Stack */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align right */
    gap: 15px;
    position: relative;
    /* Context */
}

/* Language Selector */
.lang-selector {
    position: relative;
    display: inline-block;
}

.lang-btn {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-fast);
}

.lang-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.5);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.85);
    /* Black semi-opaque background per user request */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    list-style: none;
    padding: 8px 0;
    min-width: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-selector:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li a {
    display: block;
    padding: 8px 16px;
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.lang-dropdown li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

.usage-page-light .lang-btn {
    background: rgba(0, 0, 0, 0.7);
    border-color: transparent;
    color: #fff;
}

.usage-page-light .lang-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: transparent;
}



/* Global Navigation (GNB) - Centered Absolute */
.header-gnb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.gnb-list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-xl);
    list-style: none;
}

.gnb-list a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    opacity: 0.8;
    transition: var(--transition-fast);
}

.gnb-list a:hover {
    opacity: 1;
    color: var(--accent);
}

.gnb-list a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: var(--transition-normal);
}

.gnb-list a:hover::after {
    width: 100%;
}

@media (max-width: 1200px) {
    .gnb-list {
        gap: var(--space-lg);
    }

    .gnb-list a {
        font-size: 1rem;
    }
}

@media (max-width: 992px) {
    .gnb-list {
        gap: var(--space-md);
    }

    .gnb-list a {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .gnb-list {
        gap: var(--space-sm);
    }

    .gnb-list a {
        font-size: 0.8rem;
    }
}

/* Header Center - Time Slider */
.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Time Slider (Compact in Right) */
.time-slider-wrapper {
    display: flex;
    align-items: center;
    background: var(--glass-bg);
    padding: 8px 15px;
    border-radius: 30px;
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.time-slider-wrapper.compact {
    padding: 6px 12px;
}

#time-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    /* Smaller width */
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

#time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: transform 0.2s;
}

#time-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.time-labels {
    display: none;
    /* Hide labels for cleaner look */
}

/* Unified Status Dashboard - Floating Below */
.status-dashboard {
    display: flex;
    flex-direction: column;
    /* Vertical stack */
    align-items: flex-start;
    gap: 8px;
    padding: 15px 20px;
    border-radius: 20px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    /* Position physically in flow but aligned right by header-right flex */
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* More space between label and value */
    font-size: 0.9rem;
    width: 100%;
}

.status-label {
    opacity: 0.7;
    font-size: 0.8rem;
    width: 50px;
    /* Fixed width for alignment */
    text-align: left;
}

.status-value {
    font-weight: 700;
    color: var(--white);
}

.status-value.highlight {
    color: var(--accent);
}

.status-value.good {
    color: #2ecc71;
}

/* Divider removed */

.waiting-traffic.mini {
    display: flex;
    gap: 3px;
}

.waiting-traffic.mini .traffic-light {
    width: 6px;
    height: 6px;
}

/* Hide old large weather widget */
.weather-widget {
    display: none;
}

.weather-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Right align */
    gap: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* No background/border pill style anymore */
}

.weather-date {
    font-size: 0.9rem;
    color: var(--white);
    opacity: 0.9;
}

.weather-location {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 4px;
}

.weather-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-icon {
    font-size: 2.5rem;
    /* Larger icon */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.weather-temp {
    font-family: var(--font-display);
    font-size: 3rem;
    /* Huge temp */
    font-weight: 700;
    color: var(--accent);
    /* Yellow */
    line-height: 1;
}

.weather-detail {
    font-size: 0.85rem;
    color: var(--white);
    opacity: 0.9;
    margin-top: 4px;
}

/* Menu Button */
.menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.menu-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.menu-line {
    width: 20px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: var(--transition-normal);
}

/* =============================================
   Sidebar Menu
   ============================================= */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-overlay);
    transition: var(--transition-normal);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-menu {
    position: fixed;
    top: 0;
    left: -350px;
    width: 350px;
    height: 100%;
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    z-index: var(--z-sidebar);
    transition: var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.sidebar-menu.active {
    left: 0;
}

.close-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--white);
    font-size: 1.8rem;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(90deg);
}

.sidebar-content {
    flex: 1;
    padding: var(--space-xxl) var(--space-lg);
    overflow-y: auto;
}

.menu-list {
    list-style: none;
}

.menu-item {
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--glass-border);
}

.menu-title {
    width: 100%;
    padding: var(--space-md) 0;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-fast);
}

.menu-title::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 300;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bouncy pop */
}

.menu-item.active .menu-title::after {
    transform: rotate(45deg);
}

.menu-title:hover {
    color: var(--accent);
}

.submenu {
    list-style: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-item.active .submenu {
    max-height: 500px;
    /* Increased to accommodate content safely */
    opacity: 1;
}

.submenu li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-sm);
}

.submenu a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.submenu a:hover {
    color: var(--accent);
    padding-left: var(--space-xs);
}

.sidebar-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--glass-border);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

.social-links a {
    font-size: 1.5rem;
    text-decoration: none;
    transition: var(--transition-fast);
}

.social-links a:hover {
    transform: scale(1.2);
}

/* =============================================
   Scroll Container & Acts
   ============================================= */
#scroll-container {
    position: relative;
    z-index: var(--z-content);
}

.act {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 150px 0;
}

#act-1 {
    justify-content: center;
    /* Center vertically */
    padding-bottom: 0;
    padding-top: 20vh;
    /* Increased from 10vh to move content down */
    /* Push slightly down from very top if needed, but center is good */
}

/* ... existing code ... */

/* Mini Weather Widget */
.weather-widget-mini {
    display: flex;
    flex-direction: column;
    /* Stacked */
    align-items: center;
    gap: 2px;
    background: var(--glass-bg);
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
}

.weather-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.air-row {
    display: flex;
    gap: 4px;
    font-size: 0.75rem;
    align-items: center;
}

.air-label {
    opacity: 0.7;
}

.air-grade {
    font-weight: 700;
}

.air-grade.good {
    color: #2ecc71;
}

.air-grade.normal {
    color: #f1c40f;
}

.air-grade.bad {
    color: #e74c3c;
}

/* Glass Card Effect */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: var(--space-xl);
}

/* =============================================
   ACT 1: Cable Car Frame (SVG + Text)
   ============================================= */
/* =============================================
   ACT 1: Main Visual & Dashboard
   ============================================= */
.main-visual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8vh;
    /* Use viewport height for better spacing */
    width: 100%;
    height: 100%;
    z-index: 10;
    margin-top: -10vh;
    /* Lift content higher */
}

.main-message-wrapper {
    position: relative;
    text-align: center;
    width: 100%;
    animation: floatTitle 3s ease-in-out infinite;
}

@keyframes floatTitle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.main-message {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 4rem);
    /* Reduced size */
    font-weight: 700;
    /* Slightly lighter than 800 */
    line-height: 1.2;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3);
    color: var(--white);
    letter-spacing: -1px;
    margin-bottom: 20px;
    /* Space for subtitle */
}

.main-message-sub {
    font-family: var(--font-primary);
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    /* Restored to original size */
    font-weight: 500;
    /* Maintained bold weight for visibility */
    line-height: 1.6;
    color: var(--white);
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6);
    /* Maintained strong shadow */
    margin-top: 15px;
    word-break: keep-all;
    /* Prevent awkward breaks in Korean */
}

/* Status Dashboard Hero */
.status-dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    /* Generous spacing */
    padding: 30px 60px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    /* Pill shape */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.status-dashboard-hero:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.status-item-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.status-label-hero {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.status-value-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-value-hero {
    font-family: var(--font-display);
    font-size: 3.2rem;
    /* Very big */
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.status-value-hero.highlight {
    color: var(--accent);
}

.status-value-hero.good {
    color: #4cd137;
    /* Vivid Green */
}

.status-icon-hero {
    font-size: 3rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.waiting-traffic.hero {
    display: flex;
    gap: 8px;
    margin-left: 5px;
}

.waiting-traffic.hero .traffic-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.traffic-light.green.active {
    background: #4cd137;
    box-shadow: 0 0 15px #4cd137;
    transform: scale(1.2);
}

.traffic-light.yellow.active {
    background: #fbc531;
    box-shadow: 0 0 15px #fbc531;
    transform: scale(1.2);
}

.traffic-light.red.active {
    background: #e84118;
    box-shadow: 0 0 15px #e84118;
    transform: scale(1.2);
}

.divider-hero {
    width: 1px;
    height: 70px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

@media (max-width: 1024px) {
    .status-dashboard-hero {
        gap: 30px;
        padding: 25px 40px;
    }

    .status-value-hero {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .status-dashboard-hero {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
        width: 85%;
        border-radius: 30px;
    }

    .divider-hero {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    }

    .status-item-hero {
        width: 100%;
    }
}

/* =============================================
   ACT Content
   ============================================= */
.act-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    text-align: center;
}

.act-content h2 {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--white);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3);
}

.act-intro-desc {
    font-size: 1.2rem;
    color: var(--white);
    margin: 0 auto 50px;
    max-width: 800px;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4);
}

.act-content.wide {
    max-width: 1400px;
}

.courses-grid {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    height: 600px;
    /* Fixed height for even alignment */
    width: 100%;
}

.course-card {
    position: relative;
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.course-card:hover {
    flex: 2.5;
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.course-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.course-card:hover .course-image img {
    transform: scale(1.05);
}

.course-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    text-align: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.course-card:hover .course-info {
    transform: translateY(-10px);
}

.course-info h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.course-info p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--white);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.2s;
}

.course-card:hover .course-info p {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .courses-grid {
        flex-direction: column;
        height: auto;
    }

    .course-card {
        height: 400px;
        flex: none;
    }

    .course-card:hover {
        flex: none;
        transform: scale(1.02);
    }

    .course-info p {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .courses-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.act-content.center {
    background: transparent;
    border: none;
}

.act-label {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--accent);
    border-radius: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.act-content h2 {
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--space-xs);
    line-height: 1.3;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3);
}

.act-intro-desc {
    font-size: 1.2rem;
    color: var(--white);
    margin-bottom: var(--space-xl);
    font-weight: 500;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.4);
}

.act-content p {
    font-size: 1.1rem;
    color: var(--white);
    line-height: 1.8;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3);
}

/* =============================================
   ACT 4: Gallery
   ============================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 900px;
    margin-bottom: var(--space-xl);
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-item {
    overflow: hidden;
    padding: 0;
    aspect-ratio: 4/3;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
    transition: var(--transition-slow);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    border-radius: 0 0 24px 24px;
    font-weight: 500;
}

/* =============================================
   ACT 5: CTA
   ============================================= */
.cta-container {
    text-align: center;
    max-width: 500px;
}

.cta-button {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--accent) 0%, #e6a800 100%);
    color: var(--dark);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: var(--transition-normal);
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px var(--accent-glow);
}

/* =============================================
   Altitude Indicator
   ============================================= */
.altitude-indicator {
    position: fixed;
    right: 30px;
    bottom: 110px;
    /* Positioned above the operation bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: var(--z-altitude);
    background: rgba(13, 27, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 15px 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.altitude-value {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

#altitude-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: center;
}

.altitude-unit {
    font-size: 1rem;
    opacity: 0.7;
}

.altitude-bar {
    width: 6px;
    height: 160px;
    /* Increased height for better distribution */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    margin: 10px 0;
}

.altitude-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--accent), #fff);
    border-radius: 10px;
    transition: height 0.1s ease;
}

.altitude-steps {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10% 0;
    /* Align dots with content rhythm */
    z-index: 1;
}

.step-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s ease;
}

.step-dot.active {
    background: var(--accent);
    transform: scale(1.5);
    box-shadow: 0 0 10px var(--accent);
    border-color: var(--white);
}

.altitude-marker {
    position: absolute;
    top: 50%;
    /* Default middle, though script overrides */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.4rem;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    /* Added transition for discrete stepping */
    transition: top 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.altitude-arrow {
    font-size: 1.2rem;
    color: var(--accent);
    animation: bounce 1.5s ease infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.altitude-label {
    font-size: 0.75rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* =============================================
   Operation Status Bar
   ============================================= */
.operation-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-operation);
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    padding: var(--space-sm) var(--space-lg);
}

.operation-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.95rem;
}

.operation-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: statusPulse 2s ease infinite;
}

.status-dot.running {
    background: #2ecc71;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

.status-dot.maintenance {
    background: #f39c12;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

.status-dot.closed {
    background: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Operation Status Bar (Sophisticated) */
.operation-bar {
    position: fixed;
    bottom: 30px;
    /* Slight float */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    z-index: var(--z-operation);
    background: rgba(13, 27, 42, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    /* Pill shape */
    padding: 12px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    /* Clickable */
    transition: transform 0.2s, background 0.2s;
}

.operation-bar:hover {
    transform: translateX(-50%) scale(1.02);
    background: rgba(13, 27, 42, 0.95);
}

.operation-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.85rem;
    font-family: var(--font-display);
    letter-spacing: 1px;
}

.operation-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-weight: 500;
}

.status-highlight {
    font-weight: 700;
    color: var(--accent);
}

.operation-time {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 400;
}

/* =============================================
   Responsive Design
   ============================================= */
@media (max-width: 768px) {
    .main-header {
        padding: var(--space-sm);
    }

    .header-logo {
        height: 35px;
    }

    .weather-widget {
        display: none;
    }

    .sidebar-menu {
        width: 100%;
        left: -100%;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        padding: 0 var(--space-md);
    }

    .altitude-indicator {
        right: var(--space-sm);
        bottom: 80px;
        padding: var(--space-sm);
    }

    #altitude-number {
        font-size: 1.5rem;
    }

    .altitude-bar {
        height: 60px;
    }

    .operation-content {
        flex-direction: column;
        gap: var(--space-xs);
        font-size: 0.85rem;
    }

    .operation-divider {
        display: none;
    }

    .act {
        padding: 0;
    }

    .glass-card {
        padding: var(--space-lg);
    }
}

@media (max-width: 480px) {
    .main-message {
        font-size: 1.3rem;
    }

    .act-content h2 {
        font-size: 1.5rem;
    }

    .cta-button {
        width: 100%;
        text-align: center;
    }
}

/* =============================================
   Operation Modal
   ============================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-title {
    margin-bottom: var(--space-md);
    font-size: 1.5rem;
}

.operation-table-wrapper {
    margin-bottom: var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.operation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.operation-table th,
.operation-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.operation-table th {
    background: rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

.operation-table tr:last-child td {
    border-bottom: none;
}

.text-left {
    text-align: left !important;
    line-height: 1.5;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.status-badge.running {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.status-badge.maintenance {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
}

.modal-note {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Instagram Section */
.insta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Instagram Section Refined */
.instagram-full-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    padding-bottom: 20px;
}

.instagram-full-wrapper::-webkit-scrollbar {
    display: none;
}

.instagram-grid {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 20px 20px 20px 0;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.insta-item {
    position: relative;
    flex: 0 0 350px;
    height: 350px;
    border-radius: 12px;
    /* Slightly less rounded for a tighter grid look */
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insta-item:hover img {
    transform: scale(1.08);
}

.insta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    /* contents.html과 비슷한 오버레이 딤 처리 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insta-item:hover .insta-overlay {
    opacity: 1;
}

.insta-overlay .caption-text {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    padding: 0 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.insta-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.insta-type-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 1.2rem;
    z-index: 10;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
}

.insta-item:hover .insta-icon {
    transform: translateY(0);
}

@keyframes rolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 10px));
        /* Half the items + half gap */
    }
}

@media (max-width: 900px) {
    .insta-item {
        flex: 0 0 300px;
        height: 300px;
    }

    .instagram-grid {
        animation-duration: 25s;
    }
}



/* Operation Bar Interactivity */
.operation-bar {
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.operation-bar:hover {
    transform: translateX(-50%) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
}

/* =============================================
   ACT 4: History (Horizontal Timeline)
   ============================================= */
#act-2,
#act-3 {
    background: #000;
}

#act-history {
    background: #000;
    overflow: hidden;
    position: relative;
    /* For pseudo-element absolute positioning */
}

/* Blurred Background Image for History Section */
#act-history::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('resources/time_connect_back.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(8px);
    opacity: 0.4;
    z-index: 0;
}

#act-history .act-content {
    position: relative;
    z-index: 1;
    /* Ensure content is above blur */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    text-align: left;
    /* Left align everything by default */
}

#act-history h2 {
    text-align: left;
    margin: 0 0 0.5rem 0;
    /* Clear auto margins */
    width: 100%;
}

#act-history .act-intro-desc {
    text-align: left;
    margin: 0 0 1rem 0;
    /* Further reduced margin to 1rem */
    width: 100%;
    max-width: none;
    /* Ensure no width constraint centering */
}


#act-history {
    background: #000;
    overflow: hidden;
    position: relative;
    /* For pseudo-element absolute positioning */
    padding: 150px 0;
    /* Ensure symmetrical padding */
}

/* ... existing before pseudo-element styles ... */

.history-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    /* Vertically center the text and image */
    margin-bottom: 0;
    /* Removed extra bottom margin */
    text-align: left;
}

/* 제목 스타일 */
.history-main-title {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 20px;
    /* 부제목과의 간격 */
    color: #fff;
    /* Changed from #111 to white for dark bg */
    line-height: 1.2;
    white-space: nowrap;
}

/* 부제목 스타일 */
.history-sub-header {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    /* Changed to accent color for visibility */
    /* ★ 부제목과 본문 사이의 여백을 넉넉히 줌 */
    margin-bottom: 45px;
}

/* 설명글 (행간 똑같이 맞추기) */
.history-content {
    font-size: 0.9rem;
    /* ★ 모든 문장의 간격을 동일하게 1.8~2.0배로 고정 */
    line-height: 2 !important;
    color: rgba(255, 255, 255, 0.9);
    /* Changed from #555 to light gray */
    word-break: keep-all;
    font-weight: 300 !important;
    /* Made thinner */
}

.history-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
}

.cablecar-illust {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease;
    display: block;
}

/* Vertical History Timeline (Inside Text Box) */
.history-timeline {
    margin-top: 40px;
    /* 상세 설명글과의 간격 */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Adapted for dark theme */
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 줄 간격 */
}

/* 각 줄(아이템) */
.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    /* 연도와 내용 사이 간격 */
    font-size: 0.95rem;
    /* 본문보다 살짝 작게 */
    line-height: 1.5;
}

/* 연도 글씨 */
.timeline-item .year {
    font-weight: 700;
    color: var(--accent);
    /* Adapted for dark theme (was #1e3c72) */
    min-width: 70px;
    /* 연도 너비 고정으로 정렬 유지 */
    flex-shrink: 0;
}

/* 사건 내용 */
.timeline-item .event {
    color: rgba(255, 255, 255, 0.8);
    /* Adapted for dark theme (was #666) */
    word-break: keep-all;
}

/* 마우스 올렸을 때 살짝 강조 (디테일) */
.timeline-item:hover .year {
    color: #ff4d4d;
    /* 남산의 포인트 컬러나 다른 강조색 */
    transition: color 0.3s ease;
}

.cablecar-illust:hover {
    transform: scale(1.02);
}

.timeline-horizontal-wrapper {
    position: relative;
    padding: 60px 0;
    margin-top: 40px;
}

.timeline-h-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-h-items {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 30px;
}

.timeline-h-item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-h-dot {
    width: 14px;
    height: 14px;
    background: var(--accent);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 15px var(--accent-glow);
}

.timeline-h-content {
    width: 100%;
    flex: 1;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Stagger up and down */
.timeline-h-item:nth-child(odd) .timeline-h-content {
    margin-bottom: 60px;
}

.timeline-h-item:nth-child(even) .timeline-h-content {
    margin-top: 60px;
}

.timeline-year {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 10px;
}

.timeline-h-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.timeline-h-content p {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
}

.timeline-h-content:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

@media (max-width: 1024px) {

    /* 이미지는 오른쪽에 고정 유지 - 2열 레이아웃 유지 */
    .history-intro-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: 'text image' !important;
        gap: 40px !important;
    }

    #act-history .act-content {
        padding: 0 30px;
    }

    .timeline-h-items {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .timeline-h-item {
        flex: 0 0 calc(50% - 15px);
        margin-bottom: 40px;
    }

    .timeline-h-line {
        display: none;
    }

    .timeline-h-dot {
        display: none;
    }

    .timeline-h-content {
        margin: 0 !important;
    }
}

@media (max-width: 900px) {
    .history-intro-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas: 'text image' !important;
        gap: 24px !important;
    }

    .history-main-title {
        font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    }

    .history-sub-header {
        font-size: 1rem;
    }

    .history-content {
        font-size: 0.85rem;
    }

    .history-image {
        min-height: 200px;
    }

    .cablecar-illust {
        min-height: 200px;
        object-fit: cover;
        object-position: center 25%;
    }
}

@media (max-width: 600px) {
    .timeline-h-item {
        flex: 0 0 100%;
    }
}

/* =============================================
   ACT 5: Safety & Specs
   ============================================= */
#act-safety {
    background: #000;
}

.safety-mobile-header {
    display: none;
}

.safety-pc-header {
    display: block;
}

.safety-pc-card-content {
    display: block;
}

.safety-mobile-card-content {
    display: none;
}

.safety-split-container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Reduced image column width ratio */
    gap: 60px;
    align-items: center;
    /* Vertically center the image relative to the cards */
    margin-top: 40px;
}

.safety-visual {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.safety-image {
    width: 100%;
    height: auto;
    max-height: 380px;
    /* Reduced picture height */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease;
}

.safety-image:hover {
    transform: scale(1.02);
}

.safety-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.safety-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.safety-card {
    text-align: left;
    padding: 30px !important;
}

.card-icon {
    font-size: 2.2rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.safety-list {
    list-style: none;
    margin-bottom: 20px;
}

.safety-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-weight: 500;
}

.safety-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.safety-note {
    font-size: 0.9rem;
    opacity: 0.7;
    line-height: 1.6;
}

.specs-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px !important;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spec-item:last-child {
    border-bottom: none;
}

.spec-label {
    font-size: 0.95rem;
    opacity: 0.6;
}

.spec-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.facility-guide {
    text-align: left;
}

.facility-guide h3 {
    margin-bottom: 25px;
    font-size: 1.4rem;
}

.floor-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.floor-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.floor-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateX(5px);
}

.floor-num {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--accent);
    min-width: 70px;
}

.floor-info strong {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.floor-info p {
    font-size: 0.85rem;
    opacity: 0.6;
    margin: 0;
}

@media (max-width: 1100px) {
    .safety-split-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .safety-visual {
        position: static;
        max-width: 600px;
        margin: 0 auto;
    }

    .floor-num {
        font-size: 2rem;
        min-width: 60px;
    }
}

/* Stacked Operation Bar Styles */
.operation-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 600px;
    padding: 15px 25px;
    height: auto;
    min-height: 80px;
    flex-direction: column;
}

.operation-content-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.op-title-row {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.status-label-main {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 1px;
}

.op-details-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.operation-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
}

/* Collapsible Operation Bar Logic */
.operation-bar {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.operation-bar:not(.expanded) {
    padding: 10px 20px;
    width: auto;
    max-width: 300px;
    min-height: 0;
}

.operation-bar:not(.expanded) .op-title-row {
    display: none;
}

.operation-bar:not(.expanded) .op-details-row .op-divider,
.operation-bar:not(.expanded) .op-details-row .op-info {
    display: none;
}

.operation-bar:not(.expanded) .operation-indicator {
    background: transparent;
    padding: 0;
}

.operation-bar.expanded {
    width: 90%;
    max-width: 600px;
    padding: 20px 25px;
    min-height: 100px;
    background: rgba(13, 27, 42, 0.95);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.operation-bar.expanded .status-dot::after {
    content: '(닫기)';
    font-size: 0.7rem;
    margin-left: 5px;
    opacity: 0.5;
    display: none;
    /* Optional close hint */
}

/* Refined Pill-to-Card Animation */
.operation-bar {
    transform-origin: center bottom;
    border-radius: 50px !important;
}

.operation-bar:not(.expanded) {
    width: 220px !important;
    padding: 12px 0 !important;
    border-radius: 50px !important;
    background: rgba(13, 27, 42, 0.9) !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3) !important;
}

.operation-bar:not(.expanded):hover {
    transform: translateX(-50%) scale(1.05) !important;
    background: var(--accent) !important;
}

.operation-bar.expanded {
    border-radius: 20px !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    animation: expandCard 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes expandCard {
    from {
        width: 220px;
        border-radius: 50px;
        opacity: 0.5;
    }

    to {
        width: 90%;
        border-radius: 20px;
        opacity: 1;
    }
}

/* Altitude Marker Transition */
#altitude-marker {
    transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Enhanced Smoothness */
#altitude-marker {
    transition: top 0.8s cubic-bezier(0.45, 0, 0.55, 1) !important;
}

/* Section Navigator */
.section-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
}

.nav-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}


/* =========================================
   Google Translate Widget Hidden Utilities
   ========================================= */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.skiptranslate.goog-te-banner-frame,
body>.skiptranslate,
#google_translate_element,
div[id^="goog-"],
div[class^="VIpgJd-"] {
    display: none !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

font {
    background-color: transparent !important;
}

.nav-steps {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 20px;
    align-items: center;
    z-index: 101;
}

.nav-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s;
}

.nav-dot.active {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transform: scale(1.2);
}

.nav-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    top: 0%;
    transition: top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 102;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Force Black Sidebar */
.sidebar-menu {
    background: #000 !important;
    z-index: 10000 !important;
}

.sidebar-menu .menu-list {
    padding-top: 50px;
}

/* Align Header Right to Bottom */
.main-header .header-right {
    align-self: flex-end;
    margin-bottom: -5px;
    /* Fine tune */
}

/* Force Status Dashboard to Bottom Right of Header */
.main-header .status-dashboard {
    position: absolute;
    bottom: 10px;
    right: 30px;
    align-items: flex-end;
    text-align: right;
}

/* Relocated Status Dashboard (Below Section Nav) */
.status-dashboard {
    position: fixed !important;
    top: calc(50% + 180px) !important;
    right: 30px !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    z-index: 100;
}

/* Safety Footer */
.safety-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 60px;
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.safety-footer .footer-left p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.safety-footer .footer-right {
    display: flex;
    gap: 20px;
}

.safety-footer .social-icon {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.safety-footer .social-icon:hover {
    color: var(--accent);
}

/* Safety Footer - Separate Section Black Bar */
.safety-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 60px 10%;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

.safety-footer .footer-left p {
    margin: 5px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.safety-footer .footer-right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.safety-footer .social-icon {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.safety-footer .social-icon:hover {
    color: var(--accent);
}

/* Footer Title */
.safety-footer .footer-title {
    margin-bottom: 10px !important;
    font-size: 1.2rem !important;
    font-weight: 700;
    color: #fff !important;
}

/* Copyright Text */
.safety-footer .copyright {
    margin-top: 15px !important;
    font-size: 0.8rem !important;
    opacity: 0.5;
}

/* --- Usage Info Page Styles --- */

.page-title-section {
    position: relative;
    padding: 180px 20px 80px;
    text-align: center;
    background: linear-gradient(to bottom, #000, #111);
    z-index: 10;
}

.page-title {
    font-size: clamp(2rem, 2.5vw + 1.2rem, 4rem);
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

.page-desc {
    font-size: clamp(0.95rem, 0.5vw + 0.9rem, 1.15rem);
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

/* Sticky Navigation */
.sticky-nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 20px;
}

.section-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    white-space: nowrap;
}

.tab-link {
    padding: 20px 5px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
}

.tab-link:hover,
.tab-link.active {
    color: var(--accent);
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 -2px 10px var(--accent);
}

/* Usage Content Wrapper */
.usage-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 150px;
}

.usage-section {
    padding-top: 100px;
    /* Offset for sticky header */
    margin-bottom: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 80px;
}

.usage-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    display: block;
    color: var(--accent);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.section-header h2 {
    font-size: clamp(1.6rem, 1.5vw + 1.2rem, 2.8rem);
    color: #fff;
    margin-bottom: 15px;
}

.section-header p {
    color: rgba(255, 255, 255, 0.6);
}

/* Fee Table */
.fee-table-container {
    padding: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.usage-table th {
    text-align: left;
    padding: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--accent);
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
}

.usage-table td {
    padding: 25px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.usage-table tr:last-child td {
    border-bottom: none;
}

.table-note p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
}

/* Operating Hours Grid */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.info-card {
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
}

.info-card .icon-box {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 25px;
}

.info-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #fff;
}

.highlight-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.sub-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Directions Placeholder */
.location-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.map-container {
    position: relative;
    height: 400px;
    overflow: hidden;
    padding: 0 !important;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.3);
    gap: 15px;
}

.map-placeholder i {
    font-size: 3rem;
}

.address-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
}

.address-box p {
    margin: 5px 0;
    color: #fff;
    font-size: 0.95rem;
}

.transport-guide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.transport-item {
    padding: 30px;
}

.transport-item h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.3rem;
    color: #fff;
}

.transport-item h3 i {
    color: var(--accent);
}

.transport-item ul {
    list-style: none;
    padding: 0;
}

.transport-item li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.transport-item li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* Shuttle Bus */
.shuttle-container {
    padding: 40px;
}

.shuttle-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.route-desc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 30px;
}

.route-desc i {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
}

.shuttle-text h3 {
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 15px;
}

.mt-4 {
    margin-top: 30px;
}

.shuttle-text p {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.8);
}

.shuttle-image {
    height: 300px;
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.2);
    gap: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
    .info-card-grid {
        grid-template-columns: 1fr;
    }

    .transport-guide {
        grid-template-columns: 1fr;
    }

    .shuttle-info-row {
        grid-template-columns: 1fr;
    }

    .section-tabs {
        justify-content: flex-start;
        padding-bottom: 10px;
    }

    .fee-table-container {
        padding: 20px;
    }
}


/* --- Refined Fees Section Styles --- */

.fee-container {
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    /* For border radius */
}

/* Tabs */
.fee-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fee-tab-btn {
    flex: 1;
    padding: 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    font-family: var(--font-main);
}

.fee-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.fee-tab-btn.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.fee-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
}

/* Tab Content */
.fee-content {
    display: none;
    padding: 40px;
    animation: fadeIn 0.4s ease;
}

.fee-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-th {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 4px;
}

.price {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
}

/* Criteria List */
.criteria-list {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.criteria-item {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge {
    display: inline-block;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #fff;
    font-weight: 600;
}

/* Group Info Header */
.group-info-header {
    text-align: center;
    margin-bottom: 30px;
}

.group-info-header h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #fff;
}

/* Payment Alert Bar */
.payment-alert-bar {
    background: var(--accent);
    color: #fff;
    /* Dark text for contrast on accent usually, but let's check accent color. Assuming orange/blue? default is usually light on dark. Let's make it dark bg with border or accent bg. */
    background: linear-gradient(45deg, #d35400, #e67e22);
    /* Orange gradient for alert */

    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.payment-alert-bar i {
    font-size: 1.2rem;
}

/* Responsive Table Adjustments */
@media (max-width: 768px) {
    .fee-content {
        padding: 20px;
    }

    .usage-table th,
    .usage-table td {
        padding: 15px 10px;
        font-size: 0.9rem;
    }

    .sub-th {
        font-size: 0.7rem;
    }

    .fee-tab-btn {
        font-size: 1rem;
        padding: 15px;
    }
}


/* Mobile Table Scrolling */
@media (max-width: 768px) {
    .responsive-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .fee-content {
        padding: 20px 10px;
        /* Reduce padding to give more width */
    }
}


/* --- Usage Page Hero Section --- */

.page-title-section {
    position: relative;
    /* Height: 1/3 of viewport */
    height: 33vh;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Background Image */
    background-image: url('resources/gallery_night_view.png');
    /* Using existing asset as placeholder */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-bottom: 0;
    /* Reset */
    padding-top: 60px;
    /* Account for fixed header if needed, but centering handles it mostly */
}

/* Black Overlay */
.page-title-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* 50% Opacity */
    z-index: 1;
}

.page-title,
.page-desc {
    position: relative;
    z-index: 2;
    /* Text above overlay */
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    /* Clean Gothic */
}

.page-title {
    font-size: clamp(2rem, 3vw + 1.5rem, 4rem);
    /* Big and Bold */
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.page-desc {
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Ensure sticky nav sits right below */
.sticky-nav-wrapper {
    z-index: 10;
    position: sticky;
    top: 0;
    /* Adjust if header is fixed */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .page-title-section {
        height: 40vh;
        /* A bit taller on mobile relative to content or keep 1/3 */
        min-height: 250px;
    }

    .page-title {
        /* Fluid typography handles this, overriding or keeping for specificity if needed */
        font-size: clamp(2rem, 4vw + 1rem, 2.5rem);
    }

    .page-desc {
        font-size: 1rem;
        padding: 0 20px;
        word-break: keep-all;
    }
}


/* --- Usage Page Light Theme (Minimalist) --- */

body.usage-page-light {
    background-color: #FFFFFF !important;
    color: #333333 !important;
}

/* Override Header Background for Light Page if not Hero */
/* The hero section covers the top, so header transparency is fine. 
   But sticky nav needs attention. */

/* Content Wrapper Background */
.usage-page-light .usage-content-wrapper {
    background: #FFFFFF;
}

/* Sections */
.usage-page-light .usage-section {
    padding: 80px 0;
    border-bottom: 1px solid #F8F9FA;
}

.usage-page-light .section-header h2 {
    color: #111111;
}

.usage-page-light .section-header p {
    color: #666666;
}

.usage-page-light .section-subtitle {
    color: #006400;
    /* Brand Green */
}

/* Restyle Glass Cards to Minimal White Cards */
.usage-page-light .glass-card {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    backdrop-filter: none;
    border-radius: 16px;
}

.usage-page-light .glass-card-sm {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Tables */
.usage-page-light .usage-table th {
    background-color: #F8F9FA;
    border-bottom: 2px solid #E9ECEF;
    color: #333;
    font-weight: 700;
}

.usage-page-light .usage-table td {
    border-bottom: 1px solid #F1F3F5;
    color: #333;
}

.usage-page-light .price {
    color: #006400;
    /* Brand Green */
}

.usage-page-light .sub-th {
    color: #888;
}

/* Tabs (Fee & Section) */
.usage-page-light .fee-tabs {
    background: #F8F9FA;
    border-bottom: 1px solid #E9ECEF;
}

.usage-page-light .fee-tab-btn {
    color: #888;
}

.usage-page-light .fee-tab-btn:hover {
    color: #333;
    background: #F1F3F5;
}

.usage-page-light .fee-tab-btn.active {
    color: #006400;
    /* Brand Green */
    background: #FFFFFF;
    border-bottom: 2px solid #006400;
}

.usage-page-light .fee-tab-btn.active::after {
    display: none;
    /* Remove old accent line if needed, or keeping styling above */
}

/* Sticky Nav */
.usage-page-light .section-tabs {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #E9ECEF;
    backdrop-filter: blur(10px);
}

.usage-page-light .tab-link {
    color: #888;
}

.usage-page-light .tab-link.active {
    color: #006400;
    font-weight: 700;
    border-bottom: 2px solid #006400;
}

/* Info Cards (Hours, etc) */
.usage-page-light .info-card h3 {
    color: #111;
}

.usage-page-light .info-card .icon-box {
    color: #006400;
    background: rgba(0, 100, 0, 0.05);
    /* Light green bg for icon */
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin: 0 auto 25px;
}

.usage-page-light .highlight-text {
    color: #111;
}

.usage-page-light .sub-text {
    color: #666;
}

/* Directions */
.usage-page-light .map-placeholder {
    background: #F1F3F5;
    color: #ADB5BD;
}

.usage-page-light .address-box {
    background: #FFFFFF;
    border: 1px solid #E9ECEF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: #333;
}

.usage-page-light .address-box p {
    color: #333;
}

.usage-page-light .transport-item h3 {
    color: #111;
}

.usage-page-light .transport-item h3 i {
    color: #006400;
}

.usage-page-light .transport-item li {
    color: #555;
}

.usage-page-light .transport-item li::before {
    color: #006400;
}

/* Shuttle */
.usage-page-light .route-desc,
.usage-page-light .route-desc i,
.usage-page-light .shuttle-text p {
    color: #555;
}

.usage-page-light .shuttle-image {
    background: #F1F3F5;
    border: 1px solid #E9ECEF;
}

.usage-page-light .image-placeholder {
    color: #ADB5BD;
    border-color: #DEE2E6;
}

/* Alert Bar */
.usage-page-light .payment-alert-bar {
    background: transparent;
    border: 2px solid #006400;
    color: #006400;
    border-radius: 8px;
    /* Rounded corners */
    margin-top: 20px;
}

.usage-page-light .criteria-item {
    color: #777;
}

/* 공지사항의 배지와 겹쳐서 일단 주석처리한다. 다은곳에서 사용하는지는 체크해봐야 한다.
.usage-page-light .badge {
    background: #F1F3F5;
    color: #555;
    border: 1px solid #DEE2E6;
}
*/

/* Footer for usage page */
.usage-page-light footer {
    background: #F8F9FA;
    border-top: 1px solid #E9ECEF;
    color: #555;
}

.usage-page-light .footer-title {
    color: #111;
}

.usage-page-light .copyright {
    color: #888;
}

/* Status Dashboard override for light page if present */
/* If kept, it needs light styles too, but it's floating. */
.usage-page-light .status-dashboard {
    background: #FFF;
    color: #333;
    border: 1px solid #E9ECEF;
}

.usage-page-light .status-label {
    color: #888;
}

.usage-page-light .status-value {
    color: #111;
}


/* --- Refined Light Theme Details --- */

/* 1. Tab Menu Refinement */
.usage-page-light .fee-tabs {
    background: transparent;
    /* Clean background */
    border-bottom: 2px solid #E9ECEF;
    /* Solid base line */
    gap: 30px;
    padding: 0 20px;
}

.usage-page-light .fee-tab-btn {
    color: #999;
    /* Inactive Grey */
    font-weight: 500;
    padding: 15px 5px;
    background: transparent !important;
    /* No background change on hover/active */
    border: none !important;
    /* Remove borders */
    position: relative;
    transition: color 0.3s ease;
}

.usage-page-light .fee-tab-btn:hover {
    color: #555;
}

.usage-page-light .fee-tab-btn.active {
    color: #006400;
    /* Point Color */
    font-weight: 800;
    /* Bold */
}

.usage-page-light .fee-tab-btn.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    /* Overlap the base line */
    left: 0;
    width: 100%;
    height: 3px;
    background: #006400;
    /* Point Color Line */
}

/* 2. Modern List Style Table */
.usage-page-light .usage-table {
    border-collapse: separate;
    border-spacing: 0;
}

.usage-page-light .usage-table th {
    background: transparent;
    border-bottom: 2px solid #333;
    /* Strong top divider */
    color: #111;
    font-weight: 700;
    padding: 20px 10px;
    text-align: left;
}

.usage-page-light .usage-table td {
    border-bottom: 1px solid #F1F3F5;
    /* Subtle divider */
    padding: 24px 10px;
}

.usage-page-light .usage-table tr:last-child td {
    border-bottom: 1px solid #E9ECEF;
    /* Closing divider */
}

/* 3. Pop Button / Alert */
.usage-page-light .payment-alert-bar {
    margin-top: 40px;
    background: #FF4500;
    /* High Saturation Orange/Red */
    background: linear-gradient(135deg, #FF4500, #FF6347);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    padding: 18px 40px;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 8px 20px rgba(255, 69, 0, 0.3);
    /* Colored Shadow */
    display: inline-flex;
    /* Center if container allows, or flex */
    width: 100%;
    /* Full width or auto? Usually full width in card look nice */
    justify-content: center;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.usage-page-light .payment-alert-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(255, 69, 0, 0.4);
}

.usage-page-light .payment-alert-bar i {
    margin-right: 12px;
}


/* FORCE REVERT Footer to Dark Theme for Usage Page (Override Light Theme) */
body.usage-page-light footer.safety-footer {
    background: #000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

body.usage-page-light .footer-title {
    color: #fff !important;
}

body.usage-page-light .copyright {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.usage-page-light .social-icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

body.usage-page-light .social-icon:hover {
    color: var(--accent) !important;
}


/* --- Refined Section Navigation Bar (Light Theme) --- */

.usage-page-light .sticky-nav-wrapper {
    background: #F8F9FA;
    /* Light Gray Background */
    border-bottom: 1px solid #E9ECEF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.usage-page-light .section-tabs {
    background: transparent;
    /* Wrapper handles bg */
    border-bottom: none;
    /* Removed border from inner container */
    padding: 15px 0;
    /* Vertical Padding */
    justify-content: center;
    /* Center align */
    gap: 20px;
    /* Spacing between items */
}

.usage-page-light .tab-link {
    color: #333333;
    /* Dark Gray Text */
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    /* Remove underline */
    padding: 12px 24px;
    border-radius: 30px;
    /* Pill shape for hover */
    transition: all 0.3s ease;
    border-bottom: none !important;
    /* Remove old active underline style if present */
}

/* Hover Effect */
.usage-page-light .tab-link:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.05);
    /* Slight darken on hover */
    transform: translateY(-1px);
}

/* Active State (Scroll Spy) */
.usage-page-light .tab-link.active {
    color: #FFFFFF;
    /* White Text */
    background: #006400;
    /* Brand Color Background */
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 100, 0, 0.2);
}


/* --- Static Minimal Section Menu (Refined) --- */

/* Remove Sticky Behavior & Backgrounds */
.usage-page-light .sticky-nav-wrapper {
    position: relative !important;
    /* Not sticky */
    top: auto;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-top: 20px;
    margin-bottom: 20px;
}

.usage-page-light .section-tabs {
    background: transparent !important;
    border-bottom: none !important;
    padding: 10px 0;
    gap: 25px;
    /* Spacious but reduced */
}

/* Text Links */
.usage-page-light .tab-link {
    color: #000000 !important;
    /* Black */
    font-size: 1.15rem;
    font-weight: 700;
    /* Bold */
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 5px;
    /* Minimal padding */
    border-radius: 0;
    transition: color 0.3s ease;
}

/* Hover State */
.usage-page-light .tab-link:hover {
    color: #FF4500 !important;
    /* Orange Highlight */
    background: transparent !important;
    transform: none;
    /* No movement */
}

/* Active State */
.usage-page-light .tab-link.active {
    color: #FF4500 !important;
    /* Orange Highlight */
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Fix mobile alignment if needed */
@media (max-width: 768px) {
    .usage-page-light .section-tabs {
        gap: 10px;
        flex-wrap: wrap;
    }
}


/* --- Refined Hero Section Height (Grand Look) --- */

.page-title-section {
    height: 50vh !important;
    /* Increase from 33vh to 50vh */
    min-height: 500px !important;
    /* Ensure Grandeur even on small screens */
    padding-top: 100px !important;
    /* More breathing room */
    padding-bottom: 100px !important;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .page-title-section {
        height: 40vh !important;
        min-height: 350px !important;
    }
}


/* --- Enhanced Fee Table Card (3D Lift) --- */

.usage-page-light .fee-container.glass-card {
    background: #FFFFFF;
    /* Ensure White */
    border: none;
    /* Remove flat border for shadow focus, or keep subtle */
    /* Stronger, layered shadow for depth */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0;
    /* Container padding handled by inner content usually, but clean edge is nice */
    overflow: hidden;
}

.usage-page-light .fee-container:hover {
    transform: translateY(-5px);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure Tab Header stands out against the white card */
.usage-page-light .fee-tabs {
    background: #F8F9FA;
    /* Light header bg */
    border-bottom: 1px solid #E5E7EB;
}

/* Ensure Table Text is crisp */
.usage-page-light .usage-table th {
    color: #111827;
    /* Near Black */
    background: #FFFFFF;
    /* White headers inside the card */
    border-bottom: 2px solid #E5E7EB;
}


/* --- Refined Fee Tabs & Table (Specific Request) --- */

/* 1. Active Tab: Green Background + White Text */
.usage-page-light .fee-tabs {
    background: transparent;
    border-bottom: 2px solid #E9ECEF;
    gap: 10px;
    /* Closer for button feel */
    padding: 10px;
}

.usage-page-light .fee-tab-btn {
    border-radius: 8px;
    /* Rounded corners */
    padding: 15px 30px;
}

.usage-page-light .fee-tab-btn.active {
    background: #006400 !important;
    /* Brand Green */
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 100, 0, 0.2);
}

.usage-page-light .fee-tab-btn.active::after {
    display: none;
    /* Remove underline */
}

/* 2. Emphasized Group Notice */
.group-info-header {
    background: #F0FDF4;
    /* Very light green bg */
    border: 1px solid #DCFCE7;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.group-info-header h3 {
    color: #166534;
    /* Darker Green Title */
    margin-bottom: 5px;
}

.group-info-header p {
    color: #15803D;
    /* Green Text */
    font-weight: 600;
    font-size: 1.05rem;
}

/* 3. Table First Column Highlight */
.usage-page-light .usage-table td:first-child {
    background-color: #F9FAFB;
    /* Very light gray/white mix */
    font-weight: 700;
    color: #111;
    border-right: 1px solid #F3F4F6;
    /* Subtle vertical divider */
}


/* --- Restructured Fee Tabs (Independent Buttons) --- */

.usage-page-light .fee-tabs-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.usage-page-light .fee-tabs {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    gap: 8px !important;
    display: flex;
}

.usage-page-light .fee-tab-btn {
    border-radius: 50px !important;
    /* Pill shape */
    padding: 12px 40px !important;
    background: #FFFFFF !important;
    /* White background by default */
    border: 1px solid #E5E7EB !important;
    /* Subtle border */
    color: #555 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease;
}

.usage-page-light .fee-tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    color: #006400 !important;
}

.usage-page-light .fee-tab-btn.active {
    background: #006400 !important;
    /* Brand Green */
    color: #FFFFFF !important;
    border-color: #006400 !important;
    box-shadow: 0 4px 12px rgba(0, 100, 0, 0.3) !important;
}

/* Ensure container has no top padding/margin issues now that tabs are gone */
.usage-page-light .fee-container {
    margin-top: 0;
}


/* --- Final Fee Section Design Fixes --- */

/* 1. Shadow Clipping Fix & Alignment */
/* Ensure the section allows shadow to breathe */
.usage-page-light #section-fees {
    overflow: visible;
}

.usage-page-light .fee-container.glass-card {
    margin: 40px auto;
    /* Add margin to prevent shadow clipping */
    max-width: 900px;
    width: 90%;
    /* Ensure responsiveness */
    overflow: visible;
    /* Don't clip own shadow if specific stacking */
}

/* 2. Tab Design: Rounded Rectangle (Center, Outline/Filled) */
.usage-page-light .fee-tabs-wrapper {
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.usage-page-light .fee-tab-btn {
    border-radius: 12px !important;
    /* Rounded Rectangle, not Pill */
    padding: 15px 40px !important;
    background: #FFFFFF !important;
    border: 2px solid #E5E7EB !important;
    /* Visible border for inactive */
    color: #555 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    /* Flat inactive */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.usage-page-light .fee-tab-btn:hover {
    border-color: #006400 !important;
    color: #006400 !important;
    background: #F0FDF4 !important;
}

.usage-page-light .fee-tab-btn.active {
    background: #006400 !important;
    /* Fill Green */
    border-color: #006400 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(0, 100, 0, 0.3) !important;
}

/* 3. Alert Box Design: Rounded Rectangle, Orange, Center */
.usage-page-light .payment-alert-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    /* Not full width, looks more like a box */
    margin: 40px auto 20px;
    /* Center horizontally with margin auto */
    background: #FF6B00 !important;
    /* Uniform Orange */
    background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
    border-radius: 12px !important;
    /* Rounded Rectangle */

    color: #FFFFFF;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

/* 4. Center Alignment Enforced */
.usage-page-light .fee-content {
    text-align: center;
    /* Centers inline-block elements inside if any */
}

.usage-page-light .usage-table {
    margin: 0 auto;
    /* Center the table itself if it ignores width */
}


/* --- Final Border & Spacing Refinements --- */

/* 1. Table Borders (Grid Style) */
.usage-page-light .usage-table th,
.usage-page-light .usage-table td {
    border: 1px solid #E5E7EB !important;
    /* Visible Grid */
}

/* Remove previously set border-bottom only styles if they conflict, 
   but the above !important handles it for now. 
   Ideally we'd refactor, but appending is safer for preserving existing context. */

/* 2. Alert Box Spacing */
.usage-page-light .payment-alert-bar {
    margin-top: 30px !important;
    /* Precise 30px spacing */
    margin-bottom: 0 !important;
    width: auto !important;
    /* Let text define width or keep fixed */
    display: inline-block !important;
    /* Center with text-align: center from parent */
    padding: 15px 40px !important;
}

/* Ensure Parent Centers the Inline-Block Alert */
.usage-page-light .fee-content {
    text-align: center;
}


/* --- Final Refined Layout & Table Styles (Clean & Spacious) --- */

/* 1. Table Style: Clean Horizontal Lines */
.usage-page-light .usage-table {
    border-collapse: collapse;
}

.usage-page-light .usage-table th,
.usage-page-light .usage-table td {
    border: none !important;
    /* Remove all borders first */
    border-bottom: 1px solid #EEEEEE !important;
    /* Thin light horizontal line */
    padding: 25px 30px !important;
    /* Spacious padding */
    text-align: center;
    /* Center text standard */
}

/* Header Row: Light Gray BG + Bold */
.usage-page-light .usage-table thead tr {
    background-color: #F8F9FA !important;
}

.usage-page-light .usage-table th {
    color: #111 !important;
    font-weight: 800 !important;
    /* Bold */
    border-bottom: 2px solid #EEEEEE !important;
    /* Slightly distinct header line */
}

/* 2. Alert Box: Outside, Matching Width, Centered */
.usage-page-light .payment-alert-bar {
    width: 100% !important;
    /* Match container width or max-width controls it */
    max-width: 900px;
    /* Match fee-container max-width */
    margin: 30px auto 0 !important;
    /* Center horizontally below card */
    box-sizing: border-box;
    /* Include padding in width */
    background: #FF6B00 !important;
    background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
    border-radius: 16px !important;
    /* Rounded */
    /* Remove previous inline-block/width overrides if needed, but important helps */
    display: flex !important;
    justify-content: center;
}

/* Fix Fee Container Bottom Margin to not push Alert too far if needed */
.usage-page-light .fee-container.glass-card {
    margin-bottom: 0 !important;
    /* Remove bottom margin so alert sits 30px below via its own margin */
}


/* --- Fix Tab Button Text Wrap --- */
.usage-page-light .fee-tab-btn {
    white-space: nowrap !important;
    /* Force single line */
    min-width: 200px;
    /* Ensure enough width for longer text */
}


/* --- Final Spacing Polish --- */

/* 1. Ensure Top Shadow Visibility */
/* Add margin to the card itself to push it away from the tabs, giving space for the shadow */
.usage-page-light .fee-container.glass-card {
    margin-top: 50px !important;
    /* Provide ample room for the top shadow */
    margin-bottom: 0 !important;
    /* Keep bottom tight for the alert */
}

/* 2. Tighten Alert Box Spacing */
.usage-page-light .payment-alert-bar {
    margin-top: 10px !important;
    /* Close gap to 10px */
}


/* --- Reduce Gap Between Table and Alert (Re-applying) --- */
.usage-page-light .payment-alert-bar {
    margin-top: 10px !important;
    /* Keep a tiny breathing room or 0 if strictly attached */
    /* User said 'drastically reduce' to feel 'attached'. 
       Let's try 10px first as 0 might look like a glitch without a border connector. 
       Actually user said 'attached feeling', let's go with 0 or 5px. 
       Let's stick to the user's specific previous instruction of 'drastically reduce'.
       I will set it to 0 as I intended before cancellation. */
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    /* To make them look like one unit, maybe remove top radius? 
       No, user just said 'close'. Let's just do margin-top: 0. */
}


/* --- Final Alert Button Polish (Separate but Close) --- */
.usage-page-light .payment-alert-bar {
    margin-top: 8px !important;
    /* Tiny gap to show separation */
    border-radius: 16px !important;
    /* Restore full rounded corners */
    width: 95% !important;
    /* Slightly narrower than card to look like a button */
    max-width: 860px;
    /* Adjust based on card max-width (900px) */
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4) !important;
    /* Strong shadow */
}


/* --- User Request: Set Alert Gap to 100px --- */
.usage-page-light .payment-alert-bar {
    margin-top: 100px !important;
}


/* --- Align All Sections to Fee Section Width --- */

/* Apply max-width and centering to the inner containers of all usage sections */
.usage-page-light .info-card-grid,
.usage-page-light .location-wrapper,
.usage-page-light .shuttle-container {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 90%;
    /* Ensure responsiveness */
}

/* Ensure Directions and Shuttle content specifically aligns */
.usage-page-light .location-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center children if they are not full width */
}

/* Map placeholder inside Directions */
.usage-page-light .map-placeholder {
    width: 100% !important;
    border-radius: 16px;
    overflow: hidden;
}


/* --- User Request: Adjust Alert Gap to 50px --- */
.usage-page-light .payment-alert-bar {
    margin-top: 50px !important;
}


/* --- Consolidated Final Alert Box Style --- */
.usage-page-light .payment-alert-bar {
    margin-top: 50px !important;
    /* Enforce 50px gap */
    border-radius: 16px !important;
    /* Ensure button shape */
    width: 95% !important;
    /* Button width */
    max-width: 900px !important;
    display: flex !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #FF6B00, #FF8C00) !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3) !important;
}


/* --- User Request: Tighten Alert Gap (Stick to Table) --- */
.usage-page-light .fee-container.glass-card {
    margin-bottom: 0 !important;
    /* Ensure no bottom push */
}

.usage-page-light .payment-alert-bar {
    margin-top: -10px !important;
    /* Negative margin to pull it up close */
    z-index: 1;
    /* Ensure it doesn't get hidden behind if stacking context issues arise, though usually fine */
    position: relative;
}


/* --- Extra Assurance for Tight Gap --- */
.usage-page-light .payment-alert-bar {
    margin-top: -10px !important;
}


/* --- Operating Hours Tips Layout --- */

.usage-page-light .hours-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

.usage-page-light .hours-intro-text {
    margin-bottom: 40px;
}

.usage-page-light .highlight-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 15px;
}

.usage-page-light .warning-text {
    color: #666;
    line-height: 1.6;
    font-size: 1rem;
    background: #FFF9E6;
    /* Very subtle yellow bg for warning context */
    display: inline-block;
    padding: 15px 30px;
    border-radius: 50px;
}

/* Tips Grid */
.usage-page-light .tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.usage-page-light .tip-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft fee-table-like shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.usage-page-light .tip-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.usage-page-light .tip-card .icon-box {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #006400;
    /* Brand Green */
    width: 60px;
    height: 60px;
    background: #F0FDF4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usage-page-light .tip-card p {
    color: #444;
    font-size: 1rem;
    line-height: 1.5;
    word-break: keep-all;
    /* Prevent awkward breaks in Korean */
}

.usage-page-light .tip-card strong {
    color: #111;
    font-weight: 700;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .usage-page-light .tips-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .usage-page-light .highlight-title {
        font-size: 1.5rem;
    }
}


/* --- Refined Operating Hours Intro (Text Left + Image Right) --- */

.usage-page-light .hours-intro-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
    /* Ensure left alignment */
}

/* Override previous centered/bg styles for warning text */
.usage-page-light .hours-intro-text {
    flex: 1;
    /* Take available text space */
    margin-bottom: 0 !important;
    /* Remove bottom margin from container */
}

.usage-page-light .warning-text {
    background: none !important;
    /* Remove background */
    padding: 0 !important;
    /* Remove padding */
    border-radius: 0 !important;
    display: block !important;
    /* Block level */
    text-align: left !important;
    margin-top: 15px;
    color: #555;
}

/* Image on the right */
.usage-page-light .hours-intro-image {
    flex: 0 0 40%;
    /* Approx 40% width */
    max-width: 350px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.usage-page-light .hours-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .usage-page-light .hours-intro-row {
        flex-direction: column-reverse;
        /* Text on top or bottom? User usually wants text first, but let's see. 
                                         Actually, commonly image top on mobile or text top? 
                                         Row is [Text] [Image]. Column would be [Text] / [Image]. 
                                         Let's keep text top. */
        flex-direction: column;
        text-align: center;
        /* Center on mobile usually looks better */
    }

    .usage-page-light .warning-text {
        text-align: center !important;
    }

    .usage-page-light .hours-intro-image {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }
}


/* --- Tips Mini Row (Horizontal inside Text Col) --- */
.usage-page-light .tips-mini-row {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.usage-page-light .tip-item {
    flex: 1;
    background: #F8F9FA;
    padding: 15px 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.4;
    border: 1px solid #EEE;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.usage-page-light .tip-item strong {
    color: #006400;
    /* Green accent */
    font-weight: 700;
}

/* Adjust Row Alignment */
.usage-page-light .hours-intro-row {
    align-items: flex-start !important;
    /* Align top so text block grows down */
}

/* Mobile Stack for Mini Tips */
@media (max-width: 480px) {
    .usage-page-light .tips-mini-row {
        flex-direction: column;
    }
}


/* --- Fix: Apply Flex Layout to Wrapper for Side-by-Side --- */
.usage-page-light .hours-content-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    /* Top align */
    gap: 40px !important;
    text-align: left !important;
    /* Force left align for children */
}

/* Ensure Text Column takes space */
.usage-page-light .hours-intro-text {
    flex: 1 !important;
    text-align: left !important;
}

/* Ensure Image Column takes space */
.usage-page-light .hours-intro-image {
    flex: 0 0 40% !important;
    /* Fixed width for visual balance */
    max-width: 400px !important;
    margin-top: 0 !important;
    align-self: flex-start !important;
}

/* Mobile: Stack them */
@media (max-width: 768px) {
    .usage-page-light .hours-content-wrapper {
        flex-direction: column !important;
    }

    .usage-page-light .hours-intro-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
    }
}


/* --- Tip Icons Styling --- */
.usage-page-light .tip-icon {
    font-size: 1.5rem;
    color: #28a745;
    /* Green accent */
    margin-bottom: 10px;
    display: block;
    /* Ensure it sits on its own line */
}

/* Ensure tip item has enough padding for icon */
.usage-page-light .tip-item {
    padding-top: 20px !important;
}


/* --- Tips Title Styling --- */
.usage-page-light .tips-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 30px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.usage-page-light .tips-title::before {
    content: '';
    display: block;
    width: 4px;
    height: 18px;
    background: #006400;
    /* Green accent bar */
    border-radius: 2px;
}


/* --- Image Overlay for Operating Hours --- */
.usage-page-light .hours-intro-image {
    position: relative;
    /* Context for absolute overlay */
    height: 100%;
    /* Stretch to fill if needed */
    min-height: 400px;
    /* Make it longer as requested */
    display: flex;
    flex-direction: column;
}

.usage-page-light .hours-intro-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* Cover the taller area */
}

.usage-page-light .image-overlay-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    /* Gradient fade */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.usage-page-light .overlay-label {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 5px;
    color: #FFD700;
    /* Gold accent for visibility */
}

.usage-page-light .overlay-time {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}


/* --- User Request: Increase Image Height (500-600px) --- */
.usage-page-light .hours-intro-image {
    min-height: 550px !important;
    /* Set to 550px for a tall, refreshing look */
}


/* --- Fix: Stretch Alignment & Center Crop --- */
.usage-page-light .hours-content-wrapper {
    align-items: stretch !important;
    /* Make both columns same height */
}

.usage-page-light .hours-intro-image {
    height: auto !important;
    /* Let it stretch */
    /* Keep min-height 550px from before if needed, or removing it allows it to match text height? 
       User said 'Previously make it long', now 'Match height'. 
       Stretch ensures they are equal. If left is short, it will be short. 
       But user likely wants it TALL. 
       Let's KEEP min-height to ensure it stays tall (550px) and forces left to match. */
    min-height: 550px !important;
}

.usage-page-light .hours-intro-image img {
    object-position: center center !important;
    /* Ensure center is not cut off */
    height: 100% !important;
}


/* --- Increase Tips Title Margin --- */
.usage-page-light .tips-title {
    margin-top: 50px !important;
    /* Increased from 30px to 50px as requested */
}


/* --- User Request: Set Image Height to 500px & Maintain Fill --- */
.usage-page-light .hours-intro-image {
    min-height: 500px !important;
    /* Adjusted to specific 500px request */
}

.usage-page-light .hours-intro-image img {
    object-fit: cover !important;
    object-position: center center !important;
    /* Explicitly ensure center focus */
}


/* --- Consolidated Final Image Fill & Position (User Confirmed) --- */

.usage-page-light .hours-intro-image {
    position: relative !important;
    min-height: 500px !important;
    /* Ensure minimum height */
    height: 100% !important;
    /* Stretch to parent if needed */
    display: flex !important;
    overflow: hidden !important;
    border-radius: 16px !important;
}

.usage-page-light .hours-intro-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Fills entire box */
    object-position: center center !important;
    /* Focus on center */
    display: block !important;
}


/* --- Start Fresh: Image Box & Image Fill (Override All Previous) --- */
.usage-page-light .hours-intro-image {
    flex: 1 !important;
    /* Allow it to take available space */
    width: auto !important;
    /* Reset fixed width */
    max-width: none !important;
    /* Remove any width cap */
    min-height: 500px !important;
    height: auto !important;
    /* Let flex stretch handle height */
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.usage-page-light .hours-intro-image img {
    position: absolute !important;
    /* Force out of flow to cover */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Key: Cut off edges to fill */
    object-position: center center !important;
    z-index: 0 !important;
}

.usage-page-light .image-overlay-info {
    z-index: 2 !important;
    /* Ensure text sits on top */
    width: 100% !important;
}

/* Ensure Parent Flex works */
.usage-page-light .hours-content-wrapper {
    display: flex !important;
    align-items: stretch !important;
    /* Force equal height */
    gap: 30px !important;
}

/* Adjust Text Column to share space */
.usage-page-light .hours-intro-text {
    flex: 1 !important;
    min-width: 300px !important;
    /* Prevent text squashing */
}

/* Mobile Reset */
@media (max-width: 768px) {
    .usage-page-light .hours-content-wrapper {
        flex-direction: column-reverse !important;
        /* 이미지가 위(DOM 순서 역순), 텍스트가 아래 */
        height: auto !important;
        gap: 20px !important;
    }

    .usage-page-light .hours-intro-image {
        min-height: 220px !important;
        width: 100% !important;
        flex: none !important;
        border-radius: 16px !important;
    }

    .usage-page-light .hours-intro-image img {
        position: absolute !important;
        height: 100% !important;
    }

    .usage-page-light .hours-intro-text {
        text-align: left !important;
        min-width: unset !important;
        flex: none !important;
        width: 100% !important;
    }

    .usage-page-light .tips-mini-row {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }

    .usage-page-light .tip-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    .usage-page-light .tip-icon {
        font-size: 1.3rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .usage-page-light .tips-title {
        margin-top: 20px !important;
    }

    .usage-page-light .overlay-time {
        font-size: 1.6rem !important;
    }

    .usage-page-light .warning-text {
        text-align: left !important;
        font-size: 0.88rem !important;
    }

    .usage-page-light .highlight-title {
        font-size: 1.15rem !important;
    }
}


/* --- Move Payment Alert Inside Card --- */
.usage-page-light .payment-alert-bar {
    margin-top: 30px !important;
    /* Spacing from table */
    margin-bottom: 0 !important;
    /* Bottom of card */
    width: 100% !important;
    max-width: none !important;
    /* Full width of container */
    border-radius: 12px;
}


/* --- Refine Payment Alert Inside Card --- */
.usage-page-light .payment-alert-bar {
    margin: 30px 40px 40px 40px !important;
    /* Top, Right, Bottom, Left */
    width: auto !important;
    /* Let margin control width */
    max-width: none !important;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow inside */
    position: static !important;
    /* Reset any relative/absolute positioning */
}

/* Mobile Adjustment */
@media (max-width: 480px) {
    .usage-page-light .payment-alert-bar {
        margin: 20px 20px 30px 20px !important;
    }
}


/* --- Increase Payment Alert Bottom Margin --- */
.usage-page-light .payment-alert-bar {
    margin-bottom: 0px !important;
    /* Increased from 40px to 70px for more bottom spacing */
}


/* --- User Request: Remove Menu Underlines Completely --- */
.usage-page-light .tab-link,
.usage-page-light .tab-link:hover,
.usage-page-light .tab-link:active,
/* In case of click */
.usage-page-light .tab-link:focus,
.usage-page-light .tab-link:visited,
.usage-page-light .tab-link.active {
    text-decoration: none !important;
    border-bottom: none !important;
    /* Ensure no border underline either */
    box-shadow: none !important;
    /* Ensure no shadow underline */
}


/* --- Fix: Remove Active Underline (Pseudo-element) --- */
.usage-page-light .tab-link::after,
.usage-page-light .tab-link.active::after {
    content: none !important;
    /* Remove the pseudo-element underline */
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
}


/* --- Strict Menu Color Control (User Request) --- */
.usage-page-light .tab-link {
    color: #000000 !important;
    /* Always Black by default */
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    /* Only animate color */
}

/* Hover & Active: Point Color Only */
.usage-page-light .tab-link:hover,
.usage-page-light .tab-link.active {
    color: #FF4500 !important;
    /* Orange Point Color */
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    transform: none !important;
    /* No movement */
    box-shadow: none !important;
    /* No shadow */
    font-weight: 700 !important;
    /* Keep bold for emphasis */
}


/* --- Directions Section Redesign (2-Column) --- */

.usage-page-light .location-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left: Map Column */
.usage-page-light .location-map-col {
    flex: 0 0 45%;
    height: 500px;
    /* Fixed taller height for map */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft Shadow */
    position: sticky;
    top: 100px;
    /* Sticky map on scroll */
}

/* Right: Info Column */
.usage-page-light .location-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Guide Items */
.usage-page-light .guide-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-page-light .guide-item h3 i {
    color: #006400;
    /* Green Icon */
}

.usage-page-light .sub-text {
    font-size: 0.95rem;
    color: #666;
    font-weight: 500;
}

/* Step Process (Horizontal Flow) */
.usage-page-light .step-process {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F8F9FA;
    padding: 20px;
    border-radius: 12px;
    flex-wrap: wrap;
    /* Wrap on small screens */
}

.usage-page-light .step {
    font-weight: 600;
    color: #333;
    font-size: 0.95rem;
}

.usage-page-light .step-arrow {
    color: #ADB5BD;
    font-size: 0.8rem;
}

/* Highlight Text */
.usage-page-light .guide-note {
    margin-top: 10px;
    font-weight: 700;
    font-size: 1rem;
}

.usage-page-light .highlight-green {
    color: #006400;
}

/* Address Emphasis Box */
.usage-page-light .address-emphasis-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #FFFFFF;
    border: 2px solid #E9ECEF;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.usage-page-light .address-label {
    background: #333;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.usage-page-light .address-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    flex: 1;
}

.usage-page-light .copy-btn {
    background: #F1F3F5;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 600;
    color: #555;
    transition: all 0.2s;
}

.usage-page-light .copy-btn:hover {
    background: #E9ECEF;
    color: #111;
}

/* Parking Warning */
.usage-page-light .parking-warning {
    color: #D32F2F;
    /* Red Warning */
    background: rgba(211, 47, 47, 0.05);
    padding: 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.usage-page-light .parking-warning i {
    color: #D32F2F;
    margin-top: 3px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .usage-page-light .location-wrapper {
        flex-direction: column;
    }

    .usage-page-light .location-map-col {
        width: 100%;
        height: 300px;
        /* Shorter on mobile */
        position: static;
        /* No stickiness on mobile */
    }

    .usage-page-light .step-process {
        flex-direction: column;
        /* Stack steps vertically on very small screens? or text wrapping? */
        align-items: flex-start;
    }

    .usage-page-light .step-arrow {
        transform: rotate(90deg);
        /* Point down */
        margin: 5px 0;
    }

    .usage-page-light .address-emphasis-box {
        padding: 15px 10px;
        gap: 8px;
    }

    .usage-page-light .address-text {
        font-size: 0.95rem;
        white-space: nowrap;
        word-break: keep-all;
    }

    .usage-page-light .copy-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .usage-page-light .guide-note.highlight-green {
        text-align: center;
    }
}


/* --- Nearby Parking Button --- */
.usage-page-light .parking-btn {
    display: inline-block;
    width: 100%;
    padding: 15px;
    background: #555;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
    text-align: center;
}

.usage-page-light .parking-btn:hover {
    background: #333;
}


/* --- Fix: Equal Height for Map & Directions --- */

.usage-page-light .location-wrapper {
    align-items: stretch !important;
    /* Force equal height */
}

.usage-page-light .location-map-col {
    height: auto !important;
    /* Remove fixed height */
    min-height: 100% !important;
    /* Allow stretch */
    position: relative !important;
    /* Remove sticky */
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure map placeholder/content fills the column */
.usage-page-light .map-placeholder {
    flex: 1 !important;
    /* Fill available space */
    height: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    /* Minimum visual height if text is short */
}


/* --- Directions Refinement (User Request) --- */

/* 1. Layout & Alignment (Equal Height & Spacing) */
.usage-page-light .location-wrapper {
    align-items: stretch !important;
    /* Force equal height */
}

.usage-page-light .location-info-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    /* Distribute space evenly */
    gap: 0 !important;
    /* Use justify-content for spacing instead of fixed gap */
    padding: 10px 0 !important;
    /* Slight padding to align visually */
}

.usage-page-light .guide-item {
    margin-bottom: 30px;
    /* Minimum margin */
}

.usage-page-light .guide-item:last-child {
    margin-bottom: 0;
}

/* 2. Map Styling (Round & Shadow like Fee Table) */
.usage-page-light .location-map-col {
    border-radius: 20px !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    /* Deep Shadow */
    background: #fff;
    /* Ensure white bg */
    border: none !important;
    height: auto !important;
    /* Stretch */
    display: flex !important;
}

.usage-page-light .map-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;
    /* Ensure minimal map size */
    background: #f0f0f0;
    /* Gray placeholder bg */
    border-radius: 20px !important;
}

/* 3. Steps List (Bullet Points) */
.usage-page-light .guide-steps-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #F8F9FA;
    padding: 20px !important;
    border-radius: 12px;
}

.usage-page-light .guide-steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

.usage-page-light .guide-steps-list li:last-child {
    margin-bottom: 0;
}

.usage-page-light .guide-steps-list li i {
    color: #006400;
    /* Green bullet */
    font-size: 0.6rem;
    margin-top: 8px;
    /* Visual center align */
}

/* 4. Car Guide Grouping */
.usage-page-light .address-emphasis-box {
    margin-bottom: 0 !important;
    /* Attach to button below */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border: 1px solid #E9ECEF !important;
}

.usage-page-light .parking-btn {
    margin-top: 0 !important;
    /* Eliminate gap */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 18px !important;
    /* Taller touch target */
}

.usage-page-light .parking-warning {
    margin-top: 20px !important;
    /* Spacing after button */
}


/* --- Harmonizing Directions Layout with Operating Hours --- */

/* 1. Wrapper: Match Gap and Flex */
.usage-page-light .location-wrapper {
    gap: 30px !important;
    /* Match Operating Hours (30px) */
    align-items: stretch !important;
}

/* 2. Map Column: Equal Width (50%) */
.usage-page-light .location-map-col {
    flex: 1 !important;
    /* Changed from 45% -> 1 to match Image logic */
    min-width: 300px !important;
    order: 1 !important;
    /* Explicitly Left */
}

/* 3. Text Column: Equal Width (50%) */
.usage-page-light .location-info-col {
    flex: 1 !important;
    min-width: 300px !important;
    order: 2 !important;
    /* Explicitly Right */
    justify-content: center !important;
    /* Center content vertically if map is taller, or spread? */
    /* Operating Hours has spread, but let's stick to 'space-between' from previous step */
}

/* 4. Map Placeholder: Styling Match (Radius, Shadow) */
.usage-page-light .map-placeholder {
    border-radius: 16px !important;
    /* Match Usage Hours Image Radius */
}

.usage-page-light .location-map-col {
    border-radius: 16px !important;
    /* Match Usage Hours Image Radius */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    /* Match Usage Hours Image Shadow (Step 596) */
    /* Note: Step 978 added deep shadow. User might prefer that. 
       But 'Like Operating Hours' implies matching that style. 
       The deep shadow (20px) is nicer. Keeping it strong but ensuring radius matches. */
}


/* --- Shuttle Bus Section Redesign (User Request) --- */

.usage-page-light .shuttle-container {
    text-align: center !important;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 50px 30px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
    /* Matching Fee/Map Shadow */
    max-width: 800px;
    /* Optimal width for centered content */
    margin: 0 auto;
    /* Center the box itself */
}

/* Header Info */
.usage-page-light .shuttle-header h3 {
    font-size: 1.6rem;
    color: #111;
    margin-bottom: 20px;
    font-weight: 700;
}

.usage-page-light .highlight-orange {
    color: #FF4500;
    /* Point Color */
    font-weight: 800;
    /* Extra Bold */
}

/* Operation Time Box */
.usage-page-light .operation-time-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #F8F9FA;
    padding: 12px 30px;
    border-radius: 50px;
    /* Pill shape */
    border: 1px solid #E9ECEF;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.usage-page-light .operation-time-box i {
    color: #555;
}

/* Details List */
.usage-page-light .shuttle-details-list {
    list-style: none;
    /* Custom bullets */
    padding: 0;
    margin: 40px auto 0;
    max-width: 600px;
    /* Limit width to keep lines readable */
    text-align: center;
    /* Ensure text is centered */
}

.usage-page-light .shuttle-details-list li {
    margin-bottom: 15px;
    color: #444;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
}

/* Custom Bullet (Centered) */
.usage-page-light .shuttle-details-list li::before {
    content: '?';
    color: #ADB5BD;
    margin-right: 8px;
    font-size: 1.2rem;
    vertical-align: middle;
}

/* Meal Time Warning */
.usage-page-light .meal-time-warning {
    color: #D32F2F !important;
    /* Red Warning Color */
    font-weight: 600;
    background: rgba(211, 47, 47, 0.05);
    /* Slight tint for emphasis */
    padding: 15px;
    border-radius: 12px;
    margin-top: 20px;
    display: inline-block;
    /* Wrap text tightly */
    width: 100%;
}

.usage-page-light .meal-time-warning::before {
    display: none;
    /* No bullet for the warning box, looks cleaner? Or keep it? User asked for list. Let's keep it or maybe remove if box. */
    /* Let's keep it consistent, or remove if it's a box. A box usually doesn't need a bullet. */
}


/* --- Shuttle Bus Refinement (Width & Layout) --- */

.usage-page-light .shuttle-container {
    max-width: 900px !important;
    /* Match other sections */
    width: 90% !important;
    padding: 0 !important;
    /* Remove padding to let image fill top */
    overflow: hidden !important;
    /* Clip image corners */
}

/* Route Map Image (Placeholder) */
.usage-page-light .shuttle-route-map {
    width: 100%;
    height: 300px;
    /* Adjust height as needed */
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.usage-page-light .map-placeholder-shuttle {
    text-align: center;
    color: #888;
}

.usage-page-light .map-placeholder-shuttle i {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
}

/* Content Wrapper */
.usage-page-light .shuttle-content-text {
    padding: 50px 30px;
    /* Padding for text area only */
}


/* --- Shuttle Bus 2-Column Layout --- */

.usage-page-light .shuttle-content-text.two-col-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertically center align */
    gap: 50px;
    text-align: left;
    /* Reset text align */
}

/* Left Column: Key Info */
.usage-page-light .shuttle-col-left {
    flex: 0 0 40%;
    /* Approx 40% width */
}

.usage-page-light .shuttle-col-left h3 {
    font-size: 1.8rem;
    /* Large font */
    line-height: 1.3;
    margin-bottom: 20px;
    color: #111;
    font-weight: 700;
}

.usage-page-light .shuttle-col-left .highlight-orange {
    font-size: 2rem;
    /* Even larger for emphasis */
    display: block;
    /* New line */
    margin-top: 5px;
}

.usage-page-light .shuttle-col-left .operation-time-box {
    display: inline-flex;
    /* Keep pill shape */
    padding: 10px 25px;
    font-size: 1rem;
}

/* Right Column: Details */
.usage-page-light .shuttle-col-right {
    flex: 1;
    /* Take remaining space */
    border-left: 1px solid #eee;
    /* Optional divider */
    padding-left: 40px;
}

.usage-page-light .shuttle-col-right .shuttle-details-list {
    margin: 0;
    /* Reset margin */
    text-align: left;
    /* Left align text */
    max-width: none;
}

.usage-page-light .shuttle-col-right li {
    font-size: 0.9rem;
    /* Smaller font as requested */
    color: #555;
    margin-bottom: 12px;
}

.usage-page-light .shuttle-col-right li.warning-text {
    color: #D32F2F;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .usage-page-light .shuttle-content-text.two-col-layout {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .usage-page-light .shuttle-col-right {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #eee;
        padding-top: 30px;
        width: 100%;
    }

    .usage-page-light .shuttle-col-right .shuttle-details-list {
        text-align: left;
        /* Keep list left aligned even on mobile? or center? User asked for list, usually left is better for reading. */
        display: inline-block;
        /* To center the block but keep text left */
    }
}


/* --- Section Menu Refinement (Black Default, Orange Hover Only) --- */
.usage-page-light .tab-link {
    color: #000000 !important;
    font-weight: 700 !important;
    /* Maintain Bold */
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* No shadow */
    transition: color 0.3s ease !important;
    opacity: 1 !important;
    /* Ensure full visibility */
}

/* Hover: Orange */
.usage-page-light .tab-link:hover {
    color: #FF4500 !important;
}

/* Active: Stay Black (Override previous active rules) */
.usage-page-light .tab-link.active {
    color: #000000 !important;
    /* Keep it black */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Ensure no pseudo-elements (underlines/dots) */
.usage-page-light .tab-link::after,
.usage-page-light .tab-link.active::after,
.usage-page-light .tab-link::before,
.usage-page-light .tab-link.active::before {
    display: none !important;
    content: none !important;
}


/* --- Section Menu Refinement (Active = Orange) --- */

/* Hover & Active: Point Color Only */
.usage-page-light .tab-link:hover,
.usage-page-light .tab-link.active {
    color: #FF4500 !important;
    /* Orange Point Color */
    font-weight: 700 !important;
}

/* Ensure no background/border on active */
.usage-page-light .tab-link.active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}


/* --- Payment Alert Spacing Adjustment (User Request) --- */

.usage-page-light .payment-alert-bar {
    margin-top: 10px !important;
    /* Decrease Top Margin (Previously 30px) */
    margin-bottom: 100px !important;
    /* Increase Bottom Margin (Previously 70px) */
}


/* User requested 200px margin */
.usage-page-light .payment-alert-bar {
    margin-bottom: 0px !important;
}

/* Header Logo Text */
.header-logo-text {
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    margin-left: 15px;
    font-family: 'Outfit', sans-serif;
    transition: opacity 0.3s ease;
}

.header-logo-text:hover {
    opacity: 0.8;
}

/* Updated Safety Section Styles provided by USER */
.safety-split-container {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.safety-visual {
    flex: 0.8;
    /* Reduced width */
    height: auto;
}

.safety-info {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.safety-grid {
    display: block;
    /* Removed grid for single combined card */
}

.safety-combined-card {
    padding: 50px !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.safety-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.safety-header .card-icon {
    font-size: 2rem;
    margin-bottom: 0;
    color: var(--accent);
}

.safety-header h3 {
    font-size: 1.8rem;
    margin: 0;
}

.safety-slogan {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 20px;
    border-left: 4px solid var(--accent);
    padding-left: 15px;
}

.safety-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.8;
}

.specs-horizontal-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
}

.spec-h-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.spec-icon {
    font-size: 1.5rem;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.spec-text {
    display: flex;
    flex-direction: column;
}

.spec-text .spec-label {
    font-size: 0.85rem;
    opacity: 0.6;
}

.spec-text .spec-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}

@media (max-width: 900px) {
    .safety-split-container {
        flex-direction: column;
    }

    .specs-horizontal-list {
        flex-direction: row;
        gap: 15px;
    }
}

/* Compact Safety Section Styles */
.safety-combined-card {
    padding: 30px !important;
    /* Reduced from 50px */
}

.safety-header {
    margin-bottom: 10px !important;
}

.safety-slogan {
    margin-bottom: 15px !important;
    font-size: 1rem !important;
}

.safety-desc {
    margin-bottom: 25px !important;
    /* Reduced from 40px */
}

.specs-horizontal-list {
    padding: 15px !important;
    /* Reduced from 25px */
    gap: 10px !important;
}

.spec-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
}


/* Strict Height Matching for Safety Section */
.safety-visual {
    height: 100% !important;
    /* Force container to match flex parent height */
    min-height: 0 !important;
    /* Allow shrinking if needed */
}

.safety-image {
    height: 100% !important;
    /* Force image to fill container strictly */
    max-height: none !important;
    /* Remove any max-height limits */
    min-height: 100% !important;
    object-position: center !important;
}

/* Compact Facility Guide Styles - Updated for new composition */
.facility-guide {
    padding: 25px !important;
}

.facility-guide .facility-guide-title {
    margin-bottom: 20px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--white);
}

.floor-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.floor-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 16px !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    text-align: left !important;
}

.floor-item:active {
    transform: scale(0.98);
}

.floor-num-badge {
    width: 44px;
    height: 44px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.floor-num-badge span {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.1rem;
}

.floor-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floor-info strong {
    font-size: 1.05rem !important;
    color: var(--white);
    margin: 0 !important;
}

.floor-info p {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 !important;
}

.floor-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    margin-left: auto;
}


/* Force Safety Section bottom alignment */
.safety-split-container {
    align-items: stretch;
    /* Ensure both columns are equal height */
    justify-content: stretch;
}

.safety-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute children top/bottom */
    gap: 20px;
    height: 100%;
}

.safety-combined-card,
.facility-guide {
    /* No flex-grow here to let them be natural height, OR we can let image dictate height */
    /* The requirement: 'Match left image height to the bottom of the facility guide' so essentially full height match */
    width: 100%;
}

/* Ensure left image fills the entire available height defined by the right column */
.safety-visual {
    height: auto !important;
    min-height: 100% !important;
    display: flex;
}

.safety-image {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    /* Remove constraints to match right column */
}


/* Circular Icon Style for Specs provided by USER */
.spec-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    /* Circle shape */
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1.5rem !important;
    color: var(--accent) !important;
    margin-right: 15px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Ensure spec items align horizontally */
.spec-h-item {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    /* Clean background */
}


/* Specs Point Color provided by USER */
.point-color {
    color: var(--accent) !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    /* Slightly larger for emphasis */
}

/* Revert icon circle styles or ensure text is centered without icon */
.spec-h-item {
    justify-content: center !important;
    text-align: center !important;
}

.spec-text {
    align-items: center !important;
}


/* Payment Alert Button Style provided by USER */
.payment-alert-bar {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.payment-alert-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5253);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(238, 82, 83, 0.4);
    cursor: default;
    /* Information button, not interactive */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payment-alert-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(238, 82, 83, 0.6);
}

.payment-alert-btn i {
    font-size: 1.2rem;
}

.payment-alert-btn strong {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* Revert Payment Alert Bar Style per USER request */
.payment-alert-bar {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 15px 20px !important;
    background: rgba(235, 77, 75, 0.1) !important;
    border: 1px solid rgba(235, 77, 75, 0.3) !important;
    border-radius: 8px !important;
    color: #eb4d4b !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.95rem !important;
}

.payment-alert-bar i {
    font-size: 1.1rem !important;
}

.payment-alert-bar strong {
    font-weight: 700 !important;
    text-decoration: underline !important;
}


/* Refined Payment Alert Bar Style (Text Only) */
.payment-alert-bar {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 20px auto 0 !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #495057 !important;
    font-size: 1rem !important;
}

.payment-alert-bar strong {
    color: #e03131 !important;
    /* Red highlight */
    font-weight: 700 !important;
    text-decoration: underline !important;
}


/* Strict alignment for Payment Alert Bar */
.payment-alert-bar {
    width: 100% !important;
    /* Force full width of parent container */
    max-width: none !important;
    /* Remove any max-width limits */
    margin: 10px 0 0 !important;
    /* Minimal top margin (5px-10px) */
    padding: 15px !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    text-align: center !important;
    color: #495057 !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    /* Include padding/border in width calculation */
}

/* Ensure parent container allows full width children */
.fee-content {
    width: 100%;
}


/* Refined Payment Alert Bar Style */
.payment-alert-bar {
    width: 100% !important;
    margin-top: 15px !important;
    padding: 15px 20px !important;
    background: #f8f9fa !important;
    /* Ultra light grey */
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    /* Separate rounded corners */
    text-align: center !important;
    color: #495057 !important;
    font-size: 1rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
}

.payment-alert-bar strong {
    color: #e03131 !important;
    /* Red highlight */
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* Independent Component Styling for Payment Alert */
.payment-alert-bar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 30px !important;
    /* Increased separation */
    padding: 20px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    /* distinct rounded corners */
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    /* independent shadow */
    position: relative !important;
    z-index: 1 !important;
}

.payment-alert-bar span {
    font-size: 1rem !important;
    color: #495057 !important;
    font-weight: 500 !important;
    letter-spacing: -0.5px !important;
}

.payment-alert-bar strong {
    color: #e03131 !important;
    font-weight: 800 !important;
}


/* Strict Max-Width Alignment */
.payment-alert-bar {
    width: 100% !important;
    max-width: 900px !important;
    /* Match Usage Table Max-Width */
    margin: 30px auto 0 !important;
    /* Centered visually with margin-top */
    padding: 20px !important;
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 12px !important;
    text-align: center !important;
    color: #495057 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    position: relative !important;
    z-index: 10 !important;
    /* Ensure visible */
    box-sizing: border-box !important;
}

/* Ensure no inner padding disrupts the alignment */
.payment-alert-bar span {
    display: block;
}


/* Text Color Update for Payment Alert */
.payment-alert-bar {
    color: #ffffff !important;
    /* White text */
}

.payment-alert-bar span {
    color: #ffffff !important;
}

.payment-alert-bar strong {
    color: #ffffff !important;
    /* Keep strong text white as well, or redefine if needed (user just said 'text color white') */
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
}

/* Ensure background provides contrast if text is white - 
User previously asked for 'very light background' (#f8f9fa). White text on light bg is invisible.
I should probably update background to a darker color or accent color to make white text visible, 
OR user might mean specifically the text is white on a dark theme? 
But the previous request was 'very light background'.
If I change text to white, I MUST change background to dark/accent to be visible.
I will assume they want a dark/accent box now, or the 'light background' request is superseded by 'white text'.
I'll set background to a dark grey or the accent color for visibility.
Let's go with a sleek dark grey/black to match the 'independent component' feel on the likely white page background.
*/
.payment-alert-bar {
    background-color: #333333 !important;
    /* Dark background for white text */
    border: none !important;
    /* Remove light border */
}


/* Strict Width Match for Payment Alert Bar */
.payment-alert-bar {
    width: 100% !important;
    max-width: 100% !important;
    /* Remove any previous max-width constraint */
    margin: 30px 0 0 !important;
    /* Remove auto margins if we want full width of parent */
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* Ensure Parent Container allows full width */
.section-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Stretch children including alert bar */
    width: 100%;
}


/* Strict Table Width Match for Payment Alert Bar */
.payment-alert-bar {
    width: 100% !important;
    max-width: 900px !important;
    /* Match Usage Table Max-Width exactly */
    margin: 30px auto 0 !important;
    /* Center the bar */
    padding: 20px !important;
    box-sizing: border-box !important;
}


/* Full Width Alignment for Payment Alert Bar */
.payment-alert-bar {
    width: 100% !important;
    /* Force full width of container */
    max-width: none !important;
    /* Remove constraints */
    margin: 30px 0 0 !important;
    /* No centering needed if full width */
    padding: 20px !important;
    box-sizing: border-box !important;
}


/* Refined Payment Alert Bar Style (Integrated into Card) */
.payment-alert-bar {
    width: 100% !important;
    /* Force full width of container */
    max-width: none !important;
    /* Remove constraints */
    margin: 20px 0 0 !important;
    /* Top margin 20px as requested */
    padding: 20px !important;
    background: #f8f9fa !important;
    /* Ultra light grey */
    border-top: 1px solid #dee2e6 !important;
    text-align: center !important;
    color: #495057 !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    /* Square corners to fit bottom of card */
}

/* Ensure no bottom radius on the card pushes the alert up */
.fee-container.glass-card {
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Ensure Parent Container allows full width children */
.fee-content {
    flex-grow: 1;
    /* Let content grow */
}

/* Override dark background set previously */
.payment-alert-bar {
    background-color: #333333 !important;
    /* Keep dark theme or revert to light? User didn't specify color change again, just position. Let's stick to the dark theme as they seemed happy with it? No, they asked for 'very light background' in step 567, then asked for white TEXT in 614 which implies dark bg. I'll stick to dark bg for now. */
    color: white !important;
}


/* Reduce Bottom Spacing for Usage Fees per USER Request */
.usage-content-wrapper {
    padding-bottom: 50px !important;
    /* Reduced from 150px */
}

#section-fees.usage-section {
    padding-bottom: 30px !important;
    /* Reduced from 80px */
    margin-bottom: 30px !important;
    /* Reduced from 80px */
    border-bottom: none !important;
    /* Optional: remove separator if tight spacing desired */
}

/* Ensure no extra margin from inner container */
.usage-page-light .fee-container.glass-card {
    margin-bottom: 0 !important;
}


/* Reduce fee-container bottom padding to 30px per USER request */
.usage-page-light .fee-container.glass-card {
    padding-bottom: 30px !important;
    /* The user might see a large gap if the alert bar has margin-bottom or if container has large default padding. 
       Setting this explicitly controls it. */
}

/* Stack Tips Vertically per USER Request */
.usage-page-light .tips-mini-row {
    display: flex !important;
    flex-direction: column !important;
    /* Stack vertically */
    gap: 15px !important;
}

/* Ensure items take full width or align properly in column */
.usage-page-light .tips-mini-row .tip-item {
    width: 100% !important;
    flex: 1 1 auto !important;
    /* Allow growing but respect content */
    display: flex !important;
    /* Flex internal content */
    align-items: center !important;
    /* Align icon and text horizontally */
    text-align: left !important;
    /* Left align text */
    padding: 15px !important;
    /* Adjust padding for row style */
}

/* Adjust internal layout of tip item for horizontal row style */
.usage-page-light .tips-mini-row .tip-item i {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
    /* Remove bottom margin if switching to row */
    margin-right: 15px !important;
    /* Add right margin to icon */
}

.usage-page-light .tips-mini-row .tip-item p {
    margin: 0 !important;
    font-size: 0.95rem !important;
}


/* Directions 2-Column Layout Adjustment provided by USER */
.usage-page-light .location-wrapper {
    display: flex !important;
    flex-direction: row !important;
    /* Force 2 columns side-by-side */
    align-items: stretch !important;
    /* Stretch heights to match */
    gap: 40px !important;
}

.usage-page-light .location-map-col {
    flex: 1 1 50% !important;
    /* Flexible width */
    height: auto !important;
    /* Inherit height */
    display: flex !important;
    flex-direction: column !important;
}

.usage-page-light .location-map-col .map-placeholder,
.usage-page-light .location-map-col iframe,
.usage-page-light .location-map-col img {
    width: 100% !important;
    height: 100% !important;
    /* Fill the column height completely */
    min-height: 450px !important;
    /* Ensure minimal visibility */
    object-fit: cover !important;
    border-radius: 12px !important;
}

.usage-page-light .location-info-col {
    flex: 1 1 50% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Vertically center content if map is taller */
}

/* Mobile Responsive Override */
@media (max-width: 768px) {
    .usage-page-light .location-wrapper {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .usage-page-light .location-map-col .location-map-image,
    .usage-page-light .location-map-col img {
        margin-bottom: 0 !important;
    }

    .usage-page-light .location-map-col .map-placeholder {
        min-height: 300px !important;
    }

    /* 모바일: 지도 이미지 min-height 제거, 자연스러운 높이 */
    .usage-page-light .location-map-col,
    .usage-page-light .location-map-col .location-map-image,
    .usage-page-light .location-map-col img {
        min-height: 0 !important;
        height: auto !important;
    }

    /* 모바일: 오시는길 섹션 상하 패딩 축소 */
    .usage-page-light #section-location {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* 모바일: info-col 상단 여백 제거 */
    .usage-page-light .location-info-col {
        margin-top: -20px !important;
        padding-top: 0 !important;
    }

    .usage-page-light .location-info-col .guide-item:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .usage-page-light .location-info-col .guide-item:first-child h3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}


/* Ensure Map GIF fills container properly */
.location-map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}


/* Improve Map Image Quality per USER Request */
.usage-page-light .location-map-col .location-map-image,
.usage-page-light .location-map-col img {
    object-fit: contain !important;
    /* Prevent cropping/zooming */
    background: #f8f9fa;
    /* Optional: light background for empty space */
}


/* Shuttle Map Image Styling */
.shuttle-map-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px 12px 0 0;
    /* Rounded top corners if it touches top */
    display: block;
}

.shuttle-route-map {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}


/* Location Map Image Update: Crop Bottom (Text), Show Top, Match Height */
.usage-page-light .location-map-col .location-map-image {
    object-fit: cover !important;
    /* Fill container, crop excess */
    object-position: top center !important;
    /* Align to top, cropping bottom */
    height: 100% !important;
    /* Force match parent height */
}


/* Refined Location Map Styling per USER Request */
.usage-page-light .location-map-col {
    background: transparent !important;
    box-shadow: none !important;
    /* Remove shadow */
    padding: 0 !important;
    /* Remove padding */
    margin-top: 5px !important;
    /* Adjust slightly to align visually with text baseline if needed, user said 'align lines' */
}

.usage-page-light .location-map-col .location-map-image {
    background: transparent !important;
    /* Remove image background */
    box-shadow: none !important;
    object-position: top !important;
    /* Ensure top alignment */
    /* Ensure no unexpected margin on image */
    margin: 0 !important;
}

/* Ensure Right Content Aligns Top */
.usage-page-light .location-info-col .guide-item:first-child h3 {
    margin-top: 0 !important;
    /* Remove top margin from first item to align flush top with map */
}


/* Update Location Map Aspect Ratio (User Request: 16:9 or Square, No Height Match) */
.usage-page-light .location-wrapper {
    align-items: flex-start !important;
    /* Remove stretch */
}

.usage-page-light .location-map-col {
    height: auto !important;
    /* Allow natural height */
    flex-basis: 40% !important;
    /* Adjust width share slightly if needed, or keep 50% */
}

.usage-page-light .location-map-col .location-map-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    /* Square aspect ratio */
    object-fit: contain !important;
    /* Ensure full map visible */
    object-position: top center !important;
    border-radius: 12px !important;
}


/* --- Parking Modal Styles --- */
.parking-modal-content {
    max-width: 900px !important;
    /* Wider for table */
    width: 95% !important;
    padding: 30px !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-table-container {
    width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll on mobile */
    margin-top: 20px;
}

.parking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: #333;
    min-width: 600px;
    /* Force minimum width to prevent squishing */
}

.parking-table th,
.parking-table td {
    padding: 15px;
    border-bottom: 1px solid #cccccc;
    /* Changed to darker grey */
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
    font-size: 15px;
    letter-spacing: -0.5px;

}

.parking-table th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: #006400;
    /* Dark Green accent */
    border-top: 2px solid #006400;
    white-space: nowrap;
}

.parking-table tr:hover {
    background-color: #fcfcfc;
}

/* Close Button Style if distinct from existing modal-close-btn */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.close-modal:hover {
    color: #e03131;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .parking-modal-content {
        padding: 20px !important;
    }

    .parking-table th,
    .parking-table td {
        padding: 10px;
        font-size: 0.85rem;
    }
}


/* Ensure Modal is on top */
.modal-overlay {
    z-index: 10000 !important;
}


/* Force Center Alignment for Contents Page Tabs */
.usage-page-light .section-tabs {
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
}


/* Strict Centering for Section Tabs (User Request) */
.usage-page-light .sticky-nav-wrapper {
    text-align: center !important;
    width: 100% !important;
}

.usage-page-light .section-tabs {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-wrap: wrap !important;
    /* Ensure wrapping if screen is narrow, maintaining center */
}


/* Unified Sticky Nav Spacing for Usage and Contents Pages */
.usage-page-light .section-tabs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 0 !important;
    /* Generous Top/Bottom padding like Usage Guide */
    gap: 30px !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

.usage-page-light .tab-link {
    padding: 10px 20px !important;
    /* Clickable area padding */
    white-space: nowrap !important;
}


/* Shuttle Map Height Increase (User Request) */
.shuttle-route-map {
    height: 650px !important;
    /* Set directly to >600px */
    min-height: 650px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.shuttle-map-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.02) !important;
    /* Keep map fully visible but crop border slightly */
}


/* Add left padding to Shuttle Left Column (User Request) */
.usage-page-light .shuttle-col-left {
    padding-left: 30px !important;
}

/* Adjust for mobile if stacked */
@media (max-width: 768px) {
    .usage-page-light .shuttle-col-left {
        padding-left: 0 !important;
        /* Reset on mobile if needed, or keep small */
        margin-bottom: 20px;
        text-align: center;
        /* Usually centered on mobile */
    }

    .shuttle-route-map {
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }

    .shuttle-map-image {
        height: auto !important;
    }
}


/* Fix broken bullet points in Shuttle Details List (User Request) */
.usage-page-light .shuttle-details-list li::before {
    content: '' !important;
    /* Remove broken char */
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #333 !important;
    /* Dark dot or accent */
    border-radius: 50% !important;
    /* Circle */
    margin-right: 10px !important;
    vertical-align: middle !important;
    transform: translateY(-2px);
    /* Vertical adjustment */
}


/* =============================================
   User Request: Light Gray Background for Sections 2 & 4
   ============================================= */
.usage-page-light #section-hours,
.usage-page-light #section-shuttle {
    background-color: #f8f9fa !important;
    width: 100%;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* =============================================
   NEW Operation Bar Design (Glassmorphism & 3-Column)
   ============================================= */
.operation-bar-new {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    height: auto;
    min-height: 120px;
    z-index: 999;

    /* Flex Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Styling */
    padding: 20px 40px;
    border-radius: 30px;
    background: rgba(20, 20, 20, 0.3);
    /* More transparent */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

    /* Transitions */
    transition: all 0.3s ease;
    cursor: default;
}

/* Hover Effect (Slight Lift) */
.operation-bar-new:hover {
    transform: translateX(-50%) translateY(-5px);
    background: rgba(20, 20, 20, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Sections Common */
.op-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Divider Vertical */
.op-divider-v {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 0 20px;
}

/* ================== Left: Weather ================== */
.op-weather {
    align-items: flex-start;
    min-width: 180px;
}

.op-label {
    font-size: 1.1rem;
    /* Increased size for date */
    font-weight: 600;
    /* Bolder */
    color: rgba(255, 255, 255, 0.9);
    /* Brighter */
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.weather-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather-icon-lg {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
}

.weather-temp-lg {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}

.weather-detail-small {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
    font-weight: 300;
}

/* ================== Center: Operation Info ================== */
.op-info-center {
    flex: 2;
    /* Take more space */
    flex-direction: row;
    /* Horizontal layout for items */
    justify-content: space-around;
    /* Distribute evenly */
    align-items: center;
    gap: 20px;
}

.info-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.info-label {
    font-size: 0.8rem;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.info-value {
    font-size: 1.7rem;
    /* Increased size (~27px) */
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
}

.info-value.highlight {
    color: var(--accent);
    /* Yellow/Gold */
}

/* ================== Right: Notice ================== */
.op-notice-right {
    flex: 1.5;
    align-items: flex-start;
    padding-left: 20px;
}

.notice-main {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 6px;
    line-height: 1.4;
    text-align: left;
}

.notice-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    text-align: left;
}


/* ================== Responsive ================== */

/* Tablet & Smaller Desktop */
@media (max-width: 1024px) {
    .operation-bar-new {
        width: 95%;
        padding: 15px 25px;
    }

    .op-info-center {
        gap: 15px;
    }

    .weather-temp-lg {
        font-size: 1.8rem;
    }

    .weather-icon-lg {
        font-size: 1.8rem;
    }

    .info-value {
        font-size: 1rem;
    }

    .notice-main {
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .operation-bar-new {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        bottom: 20px;
        border-radius: 24px;
        padding: 20px;
        gap: 15px;
        background: rgba(13, 27, 42, 0.85);
        /* Darker on mobile for readability */
    }

    .op-divider-v {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
        margin: 5px 0;
    }

    .op-weather {
        align-items: center;
        width: 100%;
    }

    .op-info-center {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
    }

    .op-notice-right {
        align-items: center;
        padding-left: 0;
        text-align: center;
    }

    .notice-main,
    .notice-sub {
        text-align: center;
    }
}

/* =============================================
   Scroll Spy Navigator (Cable Car Line)
   ============================================= */
.scroll-spy-nav {
    display: none;
    /* User requested new design, hiding old one */
    position: fixed;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    height: 60vh;
    width: 40px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through, enable on children */
}

/* The Vertical Line */
.spy-line-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 0;
}

/* The Moving Cable Car Indicator */
.spy-car-indicator {
    position: absolute;
    left: 50%;
    top: 0;
    /* JS will update this (0% to 100%) */
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: var(--white);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
    transition: top 0.5s ease-out;
    /* Smoother scrolling */
    z-index: 10;
    pointer-events: none;
}

/* Dots Container - Sits on top of line */
.spy-dots-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    z-index: 5;
    pointer-events: auto;
    /* Enable clicks */
}

/* Individual Dot */
.spy-dot {
    position: relative;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin: 0 auto;
    /* Center horizontally */
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Hover State */
.spy-dot:hover {
    background: var(--white);
    transform: scale(1.4);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Active State */
.spy-dot.active {
    background: var(--accent);
    transform: scale(1.5);
    box-shadow: 0 0 15px var(--accent);
}

/* Label Tooltip (Optional, showing on hover) */
.spy-dot::after {
    content: attr(data-label);
    position: absolute;
    right: 25px;
    /* Left of the dot */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.spy-dot:hover::after {
    opacity: 1;
    visibility: visible;
    right: 30px;
    /* Slight slide in */
}



/* =============================================
   Scroll Spy Navigator (New Design)
   ============================================= */
/* 내비게이션 컨테이너 */
.section-nav {
    position: fixed;
    right: 40px;
    /* 화면 오른쪽 여백 */
    top: 50%;
    transform: translateY(-50%);
    height: 60vh;
    /* 전체 높이의 60% 사용 (Adjusted to vh for consistency) */
    width: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* 1. 회색 배경 라인 (케이블) */
.nav-line-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    /* 연한 회색 */
    border-radius: 2px;
    z-index: 0;
}

/* 2. 색상이 차오르는 라인 (진행바) */
.nav-progress-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0%;
    /* JS로 제어됨 */
    background: #ff6b00;
    /* ★ 포인트 컬러 (오렌지) */
    border-radius: 2px;
    z-index: 1;
    transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 부드러운 움직임 */
}

/* 3. 움직이는 케이블카 (마커) */
.nav-marker {
    position: absolute;
    top: 0%;
    /* JS로 제어됨 */
    left: 50%;
    transform: translate(-50%, -50%);
    /* 중앙 정렬 */
    z-index: 3;
    transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* 부드러운 움직임 */
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-marker-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.nav-altitude-text {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 1;
    /* Always visible or toggle based on active? User said "show next to icon" */
    transition: opacity 0.3s;
    pointer-events: none;
}

/* 4. 점 (정거장) 컨테이너 */
.nav-dots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 점들을 위아래 균등 배치 */
    align-items: center;
    z-index: 2;
    pointer-events: none;
    /* 선 클릭 방지 */
}

/* 개별 점 스타일 */
.nav-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    /* 기본 흰색 점 */
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    pointer-events: auto;
    /* Enable clicks */
    transition: all 0.3s ease;
    position: relative;
    opacity: 0.5;
    /* 기본은 흐리게 */
    display: block;
    /* Ensure anchor behaves like block for size */
}

/* 활성화된 점 (스크롤 도달 시) */
.nav-dot.active {
    background: #ff6b00;
    /* ★ 포인트 컬러 */
    border-color: #fff;
    transform: scale(1.4);
    /* 커짐 */
    opacity: 1;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
}

/* 툴팁 (글자) 숨김 처리 */
.tooltip {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    visibility: hidden;
    /* Prevent text selection/hover when hidden */
}

/* 마우스 올리면 글자 나옴 */
.nav-dot:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

/* =============================================
   Sidebar Menu (New Implementation)
   ============================================= */
/* =============================================
   Sidebar Menu (New Implementation)
   ============================================= */
.sidebar-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    background: rgba(20, 20, 20, 0.95);
    /* Dark background */
    backdrop-filter: blur(20px);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.1);

    /* Hide Scrollbar */
    overflow-y: auto;
    -ms-overflow-style: none;
    /* IE, Edge */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar-menu::-webkit-scrollbar {
    display: none;
}

.sidebar-menu.active {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    /* Prevent header from shrinking */
}

.sidebar-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 2px;
}

.close-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.close-btn:hover {
    transform: rotate(90deg);
    color: var(--accent);
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;

    /* Spacing Adjustments */
    margin-top: 10px;
    padding-bottom: 20px;
}

.menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px;
    /* Reduced padding (tightened) */
    color: var(--white);
    font-size: 1.1rem;
    transition: background 0.3s;
}

.menu-category-link {
    text-decoration: none;
    color: inherit;
    /* Inherit white/accent */
    flex: 1;
    display: block;
    height: 100%;
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
}

.arrow-wrapper {
    padding-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.arrow-icon {
    font-size: 0.8rem;
    transition: transform 0.3s;
    font-style: normal;
}

/* --- 사이드바 세부 메뉴 (수정판) --- */

/* 1. 세부 메뉴 컨테이너 (숨김 상태) */
/* --- 사이드바 세부메뉴 강제 노출 스타일 --- */

/* 1. 세부 메뉴 박스 강제 설정 */
.submenu {
    background-color: rgba(0, 0, 0, 0.5) !important;
    /* 배경: 반투명 검정 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    /* 애니메이션 관련 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    opacity: 0;
    /* 닫혔을 땐 투명하게 */
}

/* 2. 열렸을 때 (.open 클래스가 붙으면) */
.menu-item.open .submenu {
    max-height: 1000px !important;
    /* ★ 높이를 강제로 확 늘림 */
    opacity: 1 !important;
    /* ★ 불투명하게 (보이게) */
    padding: 10px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: block !important;
    /* 혹시 display:none 되어있을까봐 */
}

/* 3. ★ 핵심: 글자 색상 강제 지정 */
.submenu li a {
    display: block !important;
    color: #cccccc !important;
    /* ★ Light Gray */
    font-size: 0.95rem !important;
    /* Reduced font size */
    padding: 8px 0 8px 40px !important;
    /* Reduced padding */
    text-decoration: none !important;
    position: relative;
    z-index: 9999;
    /* 제일 위로 올림 */
    line-height: 1.2;
}

/* 4. 마우스 올렸을 때 */
.submenu li a:hover {
    color: #ffc107 !important;
    /* 오렌지색 */
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sidebar Footer Social Icons (Updated Official Styles) */
.sidebar-footer .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 10px 0;
    /* Add padding for breathing room */
}

.sidebar-footer .social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #333;
    /* Default fallback */
    color: #fff !important;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.sidebar-footer .social-icon:hover {
    transform: scale(1.1);
}

/* Official Brand Colors */
.sidebar-footer .social-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.sidebar-footer .social-icon.facebook {
    background: #1877F2;
}

.sidebar-footer .social-icon.naver {
    background: #03C75A;
    /* Naver Green */
    font-family: sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    /* 'N' logo style */
    padding-top: 4px;
    /* Visual center */
}

.sidebar-footer .social-icon.youtube {
    background: #FF0000;
}


.status-highlight {
    font-size: 2.5rem !important;
    /* Significantly larger */
    font-weight: 800 !important;
    color: var(--accent) !important;
    /* Point Color */
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
}

/* --- 관광명소 (Landmark) 섹션 스타일 --- */

.landmark-section {
    padding: 80px 0;
    /* background-color: #f9f9f9; Removed background */
}

.inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.landmark-content {
    display: flex;
    gap: 20px;
    /* 지도와 사진 사이 간격 */
    margin-top: 40px;
    height: 500px;
    /* 전체 높이 고정 (조절 가능) */
}

/* [왼쪽] 지도 스타일 */
.map-area {
    flex: 1;
    /* 왼쪽 1비율 */
    background-color: #eee;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* 그림자 효과 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: #888;
    background: #e0e0e0;
}

/* [오른쪽] 사진 영역 스타일 */
.photo-area {
    flex: 1;
    /* 오른쪽 1비율 (지도와 1:1) */
    display: flex;
    flex-direction: column;
    /* 위아래 배치 */
    gap: 20px;
    /* 사진 사이 간격 */
}

/* 개별 사진 카드 */
.photo-card {
    flex: 1;
    /* 높이 균등 분배 */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.photo-card:hover {
    transform: translateY(-5px);
    /* 호버 시 살짝 떠오름 */
}

/* 이미지 꽉 채우기 */
.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 비율 유지하며 꽉 채움 */
    transition: transform 0.5s ease;
}

.photo-card:hover img {
    transform: scale(1.05);
    /* 호버 시 이미지 확대 */
}

/* ★ 텍스트 오버레이 (사진 위에 글씨) */
.text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    /* 상단 여백을 줘서 그라데이션 자연스럽게 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    /* 검정 그라데이션 */
    color: white;
    text-align: left;
}

.text-overlay h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #ffc107;
}

.text-overlay p {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Landmark Section Title Matches Global */
.landmark-section .inner-container {
    text-align: center;
}

.landmark-section .act-label {
    /* Matches global .act-label if properly used */
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.landmark-section h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--white);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3);
}

.landmark-section .section-desc {
    font-size: 1.2rem;
    color: var(--white);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .landmark-content {
        flex-direction: column;
        height: auto;
        /* 높이 자동 조절 */
    }

    .map-area,
    .photo-area {
        height: 300px;
        /* 모바일에서 높이 지정 */
    }
}

/* --- 관광명소 리뉴얼 스타일 (투명 배경 버전) --- */

/* ★ 핵심: 배경색 제거, 투명 유지 */
.landmark-section {
    padding: 100px 0;
    background-color: transparent;
    /* 투명 배경 */
    color: #fff;
    /* 글자색 흰색으로 변경 */
}

/* override inner-container width if needed */
.landmark-section .inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    /* Align Top */
    text-align: left;
    /* Reset text align */
}

/* [LEFT] 지도 영역 (이미지 변경 버전) */
.left-map-area {
    flex: 2.5;
    display: flex;
    justify-content: center;
    /* Added padding-top to push map down slightly */
    padding-top: 100px;
}

.map-graphic {
    width: 100%;
    position: relative;
    /* Remove white box style */
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 20px;
    overflow: hidden;
}

.map-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Add shadow to image itself */
}

/* 지도 핀 */
.map-pin {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.4);
    cursor: pointer;
    z-index: 10;
}

.map-pin span {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    /* 핀 이름은 어두운 배경 */
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 600;
}

/* [RIGHT] 콘텐츠 영역 스타일 */
.right-content-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 헤더 & 탭 (글자색 흰색 위주로) */
.content-header .sub-title {
    display: block;
    font-size: 1.1rem;
    color: var(--white);
    /* Removed transparency */
    margin-bottom: 5px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.content-header .main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    /* 완전 흰색 */
    margin-top: 50px;
    letter-spacing: -1px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 0, 0, 0.3);
    /* 가독성 위한 그림자 */
}

.location-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    /* 밑줄도 흰색으로 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

.location-tabs li {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.6);
    /* 비활성: 투명 흰색 */
    cursor: pointer;
    font-weight: 600;
    padding-bottom: 15px;
    position: relative;
    transition: 0.3s;
}

.location-tabs li.active {
    color: #fff;
    /* 활성: 완전 흰색 */
}

.location-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    /* 활성 밑줄: 흰색 */
}

/* --- 관광명소 카드 리스트 (수정: 그리드 & 세로형) --- */

/* 1. 리스트 레이아웃: 가로 스크롤 대신 '바둑판 배열'로 변경 */
.card-list {
    display: grid;
    /* 플렉스(flex)에서 그리드(grid)로 변경 */
    grid-template-columns: repeat(3, 1fr);
    /* 한 줄에 3개씩 똑같은 크기로 */
    gap: 20px;
    /* 카드 사이 간격 */
    width: 100%;
    /* 부모 영역 꽉 채우기 */
    padding-bottom: 0;
    /* 불필요한 패딩 제거 */
    overflow: visible;
    /* 스크롤 제거 */
}

/* 개별 카드 스타일 (풀 이미지 카드) */
.tour-card {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    /* Aspect ratio for 3:4 */
    cursor: pointer;
    position: relative;
    /* For absolute positioning of children */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    background: #000;
    /* Fallback */
}

.tour-card:hover {
    transform: translateY(-10px);
}

/* 2. 이미지 박스: 세로로 길쭉하게 변경 */
.card-img-box {
    position: relative;
    width: 100%;
    /* 기존 4/3 (가로형) -> 3/4 (세로형)으로 변경 */
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 15px;
}

/* 이미지는 꽉 차게 유지 */
.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.tour-card:hover .card-img-box img {
    transform: scale(1.1);
}

/* 뱃지 스타일 */
.card-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ffc107;
    color: #000;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
    /* Ensure above image */
}

/* 카드 텍스트 영역 (이미지 위 오버레이) */
.card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    /* Gradient for readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    z-index: 1;
    text-align: left;
}

.card-text h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #fff;
    /* White text */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-text p {
    font-size: 0.95rem;
    color: var(--white);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 5px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3);
}

/* 하단 컨트롤 (흰색 버전) */
.slider-controls {
    display: flex;
    justify-content: center;
    /* Align to center */
    align-items: center;
    margin-top: 20px;
    gap: 20px;
    /* Space between buttons */
    padding-right: 0;
    /* Reset right margin */
}

/* Reusing previous design for buttons */
.slider-controls button {
    background: rgba(255, 255, 255, 0.2);
    /* 반투명 흰색 버튼 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-controls button:hover {
    background: #fff;
    /* 호버 시 완전 흰색 */
    color: #000;
    /* 호버 시 아이콘 검은색 */
    border-color: #fff;
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
    .landmark-section .inner-container {
        flex-direction: column;
        gap: 40px;
    }

    .left-map-area,
    .right-content-area {
        flex: auto;
        width: 100%;
    }
}

/* 모바일에서는 한 줄에 1개씩 보이게 (반응형) */
@media (max-width: 768px) {
    .card-list {
        grid-template-columns: repeat(1, 1fr);
        /* 모바일은 1단 */
    }
}

/* =============================================
   Safety Section Adjustments (User Request)
   ============================================= */

/* 1. Left Align Safety Header & Description */
.safety-combined-card,
.safety-combined-card .safety-header,
.safety-combined-card .safety-slogan,
.safety-combined-card .safety-desc {
    text-align: left !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
}

.safety-combined-card .safety-desc {
    font-size: 0.95rem !important;
    /* Slightly smaller font size */
    color: var(--white) !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3);
}

/* Remove Box Styling for Safety Card */
.safety-combined-card,
.safety-combined-card.glass-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Maintain padding-top/bottom if layout needs it, or reset all padding if margins handle spacing */
}

/* Override center alignment if inherited */
.safety-combined-card .safety-header {
    display: flex;
    flex-direction: column;
}

/* Add vertical bar before Safety System Proof title */
.safety-combined-card .safety-header h3 {
    position: relative;
    padding-left: 15px;
    /* Space for the bar */
    margin-bottom: 5px;
}

.safety-combined-card .safety-header h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    /* Center vertically relative to text */
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    /* Or fixed height like 20px */
    background-color: var(--accent);
    /* Yellow/Gold */
    border-radius: 2px;
}

/* 2. Specs Horizontal Box Design */
.specs-horizontal-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    /* Lighter transparent box (Grayish) */
    border-radius: 20px;
    /* Round Box */
    padding: 25px 20px;
    margin-top: 30px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.spec-h-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Divider Line */
.spec-h-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.spec-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.spec-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.spec-value {
    font-size: 1.3rem;
    /* Reasonable size */
    font-weight: 700;
    color: #fff;
}

.point-color {
    color: #FFD700;
}

/* Remove bar from slogan if it exists */
.safety-combined-card .safety-slogan,
.safety-combined-card .safety-slogan p {
    position: relative;
    padding-left: 0 !important;
    border: none !important;
}

.safety-combined-card .safety-slogan::before,
.safety-combined-card .safety-slogan p::before {
    display: none !important;
    content: none !important;
}

/* --- Operation Status Bar (Renewal) --- */

.status-bar-container {
    /* ★ 핵심: sticky 대신 fixed 사용 */
    position: fixed;
    bottom: 0;
    /* 닫혔을 때는 바닥에 붙음 */
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% - 40px));
    /* 기본적으로 닫힌 상태를 위한 Y축 이동 */
    width: 95%;
    /* 모바일에서 꽉 차게 */
    max-width: 1200px;
    /* PC에서는 너무 커지지 않게 */
    z-index: 9999;
    /* 무조건 맨 위에 보이게 */
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), bottom 0.3s;
}

.status-bar-container.expanded {
    transform: translateX(-50%) translateY(0);
    bottom: 30px;
    /* 열렸을 때 화면 맨 아래에서 30px 띄움 */
}

/* Handle Button (Global for PC & Mobile) */
.status-bar-handle {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 5px;
}

.status-toggle-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.status-toggle-text i {
    font-size: 0.8rem;
}

.status-bar-handle:hover .status-toggle-text {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

.status-bar {
    background: rgba(0, 0, 0, 0.3);
    /* 투명도를 더 높여서(0.3) 배경이 더 잘 보이게 조정 */
    backdrop-filter: blur(15px);
    /* 블러 효과 */
    border-radius: 50px;
    /* 둥글게 */
    padding: 15px 40px;
    /* 내부 여백 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* 그림자 */

    /* 가로 배치 유지 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Operating Hours Line Breaking in Status Bar */
.status-bar .big-value .time-part,
.status-bar .big-value .time-sep {
    display: inline;
}

/* PC screen reduction (769px to 1100px) triggers 3-line layout */
@media (min-width: 769px) and (max-width: 1100px) {
    .status-bar .big-value {
        line-height: 1.2;
    }

    .status-bar .big-value .time-part,
    .status-bar .big-value .time-sep {
        display: block;
        width: 100%;
        text-align: center;
    }

    .status-bar .big-value .time-sep {
        margin: -5px 0;
        /* Tighten the gap for the ~ symbol */
        font-size: 0.8em;
        opacity: 0.7;
    }
}

/* Individual Item Box (Quartered) */
.info-item {
    flex: 1;
    /* Distribute width evenly */
    display: flex;
    flex-direction: column;
    /* Vertical content */
    align-items: center;
    /* Horizontal center */
    justify-content: center;
    /* Vertical center */
    text-align: center;
    padding: 0 10px;
}

/* Divider Style */
.divider {
    width: 1px;
    height: 40px;
    /* Divider height */
    background: rgba(255, 255, 255, 0.2);
}

/* Font Styling */
.small-label {
    font-size: 1rem;
    color: var(--white);
    margin-bottom: 8px;
    font-weight: 500;
    font-family: var(--font-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.date {
    letter-spacing: 0;
}

.big-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    font-family: var(--font-display);
}

.small-desc {
    font-size: 0.8rem;
    color: var(--white);
    margin-top: 5px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

/* Weather Group */
.weather-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.weather-icon {
    font-size: 1.8rem;
}

.temp {
    font-size: 1.8rem;
    font-weight: 800;
}

/* Status Text (Highlight) */
.status-text {
    font-size: 2rem;
    /* Largest */
    font-weight: 900;
    margin-bottom: 5px;
}

.status-text.active {
    color: #ffc107;
    /* Operating - Yellow */
    text-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
    /* Glow effect */
}

.status-text.inactive {
    color: #ff4757;
    /* Not Operating - Red */
}

/* Mobile Responsive (2x2 Grid with Center Alignment) */
@media (max-width: 768px) {
    .status-bar-container {
        /* Bottom sheet style */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: translateY(calc(100% - 40px)) !important;
        /* Hide mostly, show just 40px of top handle */
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(15px);
        border-radius: 20px 20px 0 0 !important;
        /* Top rounded, bottom flat */
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
        /* Adapt to mobile safe area, no huge gap */
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        z-index: 9999;
        cursor: grab;
    }

    .status-bar-container.expanded {
        transform: translateY(0) !important;
    }

    .status-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 0;
        padding: 5px 10px;
        /* Reset background for status-bar itself, handled by container now */
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        justify-items: center;
        align-items: center;
        width: 100%;
    }

    /* Reduce font sizes for mobile; force single line for operating hours */
    .status-bar .big-value {
        font-size: 1.4rem;
        white-space: nowrap;
        letter-spacing: -0.5px;
        text-align: center;
        line-height: 1.3;
    }

    .status-bar .status-text {
        font-size: 1.6rem;
    }

    .status-bar .small-label {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .status-bar .weather-icon,
    .status-bar .temp {
        font-size: 1.4rem;
    }

    .status-bar .small-desc {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    .divider {
        display: none;
    }

    .info-item {
        padding: 10px 5px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Horizontally center all children */
        justify-content: center;
        /* Vertically center all children */
        text-align: center;
        /* Center any inline text */
    }

    /* Override inline blocks to ensure center alignment */
    .status-bar .info-item>* {
        margin-left: 0;
        margin-right: 0;
    }

    /* Add thin borders inside the grid (cross shape) */
    .status-bar>.info-item:nth-child(1),
    .status-bar>.info-item:nth-child(5) {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .status-bar>.info-item:nth-child(1),
    .status-bar>.info-item:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }


}

/* =============================================
   Landmark Full Layout (New - Slider)
   ============================================= */
.landmark-full-container {
    width: 100vw;
    max-width: 100%;
    margin: 0;
    margin-left: calc(-50vw + 50%);
    height: 100vh;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    box-shadow: none;
    border: none;
}

.landmark-hero-item {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Stacked */
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.landmark-hero-item.active {
    opacity: 1;
    z-index: 1;
}

.landmark-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 7s linear;
    /* Continuous slow zoom effect */
    transform: scale(1);
}

.landmark-hero-item.active .landmark-hero-img {
    transform: scale(1.1);
    /* Zoom in while active */
}

.test-overlay-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 0 50px 50px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease 0.3s;
    /* Delay text appearance */
}

.landmark-hero-item.active .test-overlay-left {
    opacity: 1;
    transform: translateY(0);
}

.test-overlay-left h3 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 15px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
}

.test-overlay-left p {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    max-width: 700px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .landmark-full-container {
        height: 100vh;
        width: 100%;
        border-radius: 0;
    }

    .test-overlay-left {
        padding: 0 25px 30px;
    }
}

/* --- 관광명소 풀스크린 레이아웃 --- */
.landmark-fullscreen {
    position: relative;
    width: 100vw !important;
    height: 100vh;
    min-height: 700px;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: center;
}

/* 배경 이미지 및 어두운 오버레이 */
.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.8s ease-in-out;
    z-index: 1;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 2;
}

/* 콘텐츠 영역 (좌/우 배치) */
.fullscreen-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 100px;
}

/* [LEFT] 정보 텍스트 */
.landmark-info {
    max-width: 600px;
}

.lm-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    word-break: keep-all;
}

.lm-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 50px;
    word-break: keep-all;
}

/* 좌측 하단 스펙 영역 */
.lm-specs {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 15px;
}

.lm-specs strong {
    color: #fff;
    font-weight: 700;
    margin-left: 5px;
}

.lm-specs .divider {
    color: rgba(255, 255, 255, 0.3);
}

/* [RIGHT] 네비게이션 메뉴 */
.landmark-nav {
    text-align: right;
}

/* [RIGHT] 네비게이션 메뉴 영역 */
.landmark-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 1. 위아래 3줄로 확실하게 배치 */
    gap: 40px;
    /* 3줄 사이의 위아래 간격을 넓게 주어 시원하게 */
}

/* 개별 메뉴 버튼 (글씨 한 줄 배치) */
.landmark-nav .menu-btn {
    cursor: pointer;
    position: relative;
    padding-right: 60px;
    /* 오른쪽 하얀 선이 들어갈 공간 */
    opacity: 0.5;
    /* 기본은 반투명 */
    transition: all 0.3s ease;

    /* ★ 핵심: 제목과 설명을 가로 한 줄로 묶기 */
    display: flex;
    align-items: center;
    /* 수직 중앙 정렬 */
    justify-content: flex-end;
    /* 오른쪽 끝으로 밀기 */
    gap: 15px;
    /* 제목과 설명 사이의 간격 */
    white-space: nowrap;
    /* 절대 줄바꿈이 일어나지 않게 강제 */

    /* Reset Global .menu-btn styles (remove box) */
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    flex-direction: row;
    /* Ensure row direction for landmark items */
}

.landmark-nav .menu-btn:hover {
    opacity: 0.8;
}

/* 제목 텍스트 */
.landmark-nav .menu-btn .nav-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

/* 서브 설명 텍스트 (완전 숨김) */
.landmark-nav .menu-btn .nav-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 400;
    display: none !important;
}

/* 오른쪽 라인 (기본적으로 투명하거나 얇음, 활성화시 굵게/길게) */
.landmark-nav .menu-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    /* 기본 길이 */
    height: 1px;
    /* 얇은 선 */
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

/* ★ 메뉴가 활성화(클릭) 되었을 때 */
.landmark-nav .menu-btn.active {
    opacity: 1;
    /* 글씨 밝게 */
}

/* 오른쪽 활성화 바(활성화시 길어지고 굵어짐) */
.landmark-nav .menu-btn.active::after {
    width: 40px;
    /* 더 길게 */
    height: 3px;
    /* 조금 더 굵게 */
    background-color: #fff;
    bottom: auto;
    /* Reset inherited style */
    left: auto;
    /* Reset inherited style */
}

/* =============================================
   Grid Alignment Fix (통합 그리드 정렬)
   ============================================= */

/* 모든 섹션의 내부 콘텐츠 박스를 이 규격으로 강제 통일합니다. */
.inner-container,
.act-content,
.safety-container {
    max-width: 1400px !important;
    /* 전체 가로폭 통일 */
    margin: 0 auto !important;
    /* 중앙 정렬 */
    padding: 0 50px !important;
    /* 좌우 여백 통일 (디자인에 따라 20px~80px 조절 가능) */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 안전섹션 그리드 비율 조정 */
#act-safety .safety-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* 1:1 비율로 정확히 나눔 */
    gap: 80px !important;
    /* 중앙 간격 고정 */
    text-align: left !important;
}

/* 히스토리 섹션 그리드 비율 조정 */
.history-intro-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: 'text image' !important;
    gap: 80px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.history-intro-grid .history-text-box {
    grid-area: text !important;
}

.history-intro-grid .history-image {
    grid-area: image !important;
    order: unset !important;
}

/* 모바일 대응 (반응형 여백) */
@media (max-width: 768px) {

    .inner-container,
    .safety-container {
        padding: 0 20px !important;
        /* 모바일에서는 여백을 줄임 */
    }

    .act-content {
        padding: 40px 20px !important;
        /* 위아래 여백 추가 및 좌우 여백 적용 */
    }
}

/* =========================================
   Google Translate Widget Hidden Utilities
   ========================================= */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.skiptranslate.goog-te-banner-frame,
body>.skiptranslate,
#google_translate_element,
div[id^="goog-"],
div[class^="VIpgJd-"] {
    display: none !important;
}

body {
    top: 0px !important;
    position: static !important;
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important;
}

font {
    background-color: transparent !important;
}

/* =============================================
   Mobile Optimization (Added via AI)
   ============================================= */
@media (max-width: 768px) {



    /* 1. Header & Global Nav */
    .header-gnb {
        display: none !important;
    }

    .header-left .header-logo {
        height: 35px;
    }

    .main-header {
        padding: 10px 15px;
    }

    .lang-selector .lang-btn {
        font-size: 0.8rem;
        padding: 5px 8px;
    }

    /* 2. Act 1: Main Visual & Typography */
    #main-message,
    .main-message {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
        line-height: 1.3 !important;
    }

    .main-message-sub {
        font-size: 1rem !important;
        margin-top: 15px !important;
    }

    /* 3. Act 2: Landmarks */
    .fullscreen-container {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px !important;
        padding-bottom: 60px !important;
        margin-top: 35px !important;
    }

    .landmark-info {
        max-width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .lm-desc {
        text-align: center;
        width: 100%;
        margin: 0 auto;
    }

    .lm-desc p,
    .lm-desc span {
        text-align: center;
        width: 100%;
    }

    .lm-specs {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        padding-top: 30px;
    }

    .lm-specs .divider {
        display: none !important;
    }



    .landmark-nav {
        width: 100% !important;
        text-align: center !important;
    }

    .landmark-nav ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        overflow-x: hidden !important;
        gap: 8px !important;
        padding-bottom: 0 !important;
    }

    .landmark-nav .menu-btn {
        padding: 5px 8px !important;
        width: auto !important;
        flex-shrink: 1 !important;
    }

    .landmark-nav .menu-btn .nav-title {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    .landmark-nav .menu-btn::after {
        display: none !important;
    }

    /* 4. Act 3: Instagram */
    .instagram-grid {
        display: flex !important;
        width: max-content !important;
        gap: 15px !important;
        padding: 20px 15px 20px 0 !important;
        flex-wrap: nowrap !important;
    }

    .insta-item {
        flex: 0 0 75vw !important;
        height: 75vw !important;
        max-width: 350px !important;
        max-height: 350px !important;
    }

    /* 5. Act 4: History Timeline */
    .history-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .history-text-box h2 {
        font-size: 1.8rem !important;
    }

    .timeline-horizontal-wrapper {
        padding: 20px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .timeline-h-items {
        width: max-content !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }

    .timeline-h-item {
        width: 200px !important;
    }

    /* 6. Act 5: Safety & Specs */
    .safety-split-container,
    #act-safety .safety-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .safety-pc-header {
        display: none !important;
    }

    .safety-mobile-header {
        display: block !important;
        text-align: center;
        margin-bottom: 30px;
    }

    .safety-mobile-title-main {
        margin-top: 10px !important;
        font-size: 1.875rem !important;
        font-weight: 700 !important;
        margin-bottom: 12px !important;
        letter-spacing: -0.025em !important;
        color: #fff !important;
    }

    .safety-mobile-desc-main {
        font-size: 15px !important;
        color: #cbd5e1 !important;
        line-height: 1.6 !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        word-break: keep-all !important;
        text-align: center !important;
        opacity: 0.8;
    }

    .safety-pc-card-content {
        display: none !important;
    }

    .safety-mobile-card-content {
        display: block !important;
        padding-bottom: 25px;
    }

    .safety-mobile-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
    }

    .safety-gold-bar-vertical {
        width: 2.5px;
        height: 28px;
        background: #ffd700;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
        border-radius: 9999px;
        opacity: 0.9;
    }

    .safety-mobile-card-title {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        letter-spacing: -0.025em !important;
        color: #fff !important;
        margin: 0 !important;
    }

    .safety-mobile-card-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .safety-mobile-card-slogan {
        font-size: 17px !important;
        font-weight: 500 !important;
        color: #fff !important;
        line-height: 1.4 !important;
        letter-spacing: -0.025em !important;
        margin: 0 !important;
    }

    .safety-mobile-card-desc {
        font-size: 15px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        line-height: 1.85 !important;
        word-break: keep-all !important;
        font-weight: 300 !important;
        margin: 0 !important;
    }

    .safety-visual {
        width: 100% !important;
    }

    .safety-info {
        width: 100% !important;
    }

    .specs-horizontal-list {
        flex-direction: row !important;
        gap: 15px !important;
        justify-content: space-around !important;
        text-align: center !important;
        padding: 15px 5px !important;
    }

    .spec-h-item {
        justify-content: center !important;
        padding: 0 !important;
    }

    .spec-text {
        align-items: center !important;
    }

    .spec-label {
        font-size: 0.75rem !important;
    }

    .spec-value {
        font-size: 0.95rem !important;
    }

    .spec-h-item::after {
        display: none !important;
    }

    .facility-guide .floor-item {
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        padding: 10px 12px !important;
        gap: 10px !important;
    }

    .facility-guide .floor-info strong {
        font-size: 0.95rem !important;
        letter-spacing: -0.02em !important;
    }

    .facility-guide .floor-info p {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
    }

    .facility-guide .floor-num-badge {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }

    .facility-guide .floor-num-badge span {
        font-size: 0.8rem !important;
    }

    .floor-arrow {
        font-size: 0.7rem !important;
    }


    /* 7. Footer */
    .safety-footer {
        flex-direction: column !important;
        text-align: center !important;
        gap: 20px !important;
        padding: 30px 20px !important;
    }

    .footer-left {
        width: 100% !important;
    }

    .footer-right {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }

    /* 8. Operation Modal */
    .modal-content {
        width: 90% !important;
        padding: 20px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .operation-table th,
    .operation-table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    .operation-table th {
        background: rgba(255, 255, 255, 0.1) !important;
        padding: 8px 10px !important;
    }

    .operation-table td {
        padding: 10px 10px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

}

/* =============================================
   ACT 4: Mobile History Section Renewal
   ============================================= */
.history-mobile-wrapper {
    display: none;
}

.history-pc-wrapper {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .history-pc-wrapper {
        display: none !important;
    }

    .history-mobile-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #act-history {
        background: linear-gradient(180deg, #2a221b 0%, #1c1917 100%) !important;
        padding: 0 !important;
        padding-bottom: 20px !important;
        /* Bring next section closer to cards */
        padding-top: 80px !important;
    }
}

.history-mobile-hero {
    padding: 1rem 1.5rem 0;
}

.history-mobile-hero-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.history-mobile-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-mobile-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28, 25, 23, 0.8), transparent, transparent);
}

.history-mobile-text {
    padding: 2rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    isolation: isolate;
    /* 텍스트 렌더링을 주변 요소와 분리 */
}

.history-mobile-text-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-mobile-title {
    font-family: var(--font-display);
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #ffffff !important;
    opacity: 1 !important;
    isolation: isolate;
    text-align: center !important;
}

.history-mobile-subtitle {
    font-family: var(--font-primary);
    color: #EAB308 !important;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
    opacity: 1 !important;
    isolation: isolate;
    text-align: center !important;
}

.history-mobile-desc,
.history-mobile-desc p {
    font-family: var(--font-primary);
    display: block;
    margin-bottom: 1.5rem;
    color: #ffffff !important;
    line-height: 1.7;
    font-weight: 400;
    font-size: 1rem;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.history-mobile-timeline-section {
    padding: 1rem 0 2rem;
}

.history-mobile-timeline-header {
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
}

.history-mobile-timeline-line {
    height: 1px;
    width: 3rem;
    background: rgba(234, 179, 8, 0.6);
    margin-bottom: 1rem;
}

.history-mobile-timeline-subtitle {
    font-size: 0.85rem;
    /* Slightly larger */
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #ffffff !important;
    /* Solid bright white */
    font-weight: 800;
    /* Max bold */
    opacity: 1 !important;
    /* Force opacity */
}

.history-mobile-timeline-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 0 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    /* Allow native horizontal swipe */
    cursor: grab;
    /* Mouse drag indicator */
}

.history-mobile-timeline-scroll:active {
    cursor: grabbing;
}

.history-mobile-timeline-scroll::-webkit-scrollbar {
    display: none;
}

.history-mobile-timeline-card {
    flex-shrink: 0;
    width: 250px;
    scroll-snap-align: center;
    background: rgba(41, 37, 36, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.5rem 1.5rem;
    /* Reduced top/bottom padding */
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    /* Slightly reduced gap */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    min-height: 180px;
    /* Reduced min-height from 260px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    justify-content: center;
    /* Center content vertically */
}

.history-mobile-card-year {
    font-size: 2rem;
    /* Reduced to ~80% of 3rem */
    font-family: var(--font-display);
    color: #ffd700;
    /* Fully opaque golden hue */
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    /* Stronger opaque glow */
}

.history-mobile-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    /* Ensure text container takes full width for truncation */
}

.history-mobile-card-title {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    /* Reduced from 1.1rem */
    font-weight: 800;
    /* Max bold */
    color: #ffffff;
    /* Fully opaque white */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    /* Keep on one line naturally */
}

.history-mobile-card-desc {
    font-family: var(--font-primary);
    color: #ffffff;
    /* Make description fully opaque white */
    font-size: 0.75rem;
    /* Slightly larger for legibility */
    line-height: 1.5;
    font-weight: 500;
    /* Thicker than original */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   MOBILE OVERRIDES: SECTION NAVIGATION (Added at end for priority)
   ============================================================ */
@media (max-width: 768px) {
    .section-nav {
        display: flex !important;
        right: 15px !important;
        height: 50vh !important;
        width: 15px !important;
        z-index: 9999 !important;
    }

    .nav-marker {
        flex-direction: column !important;
        z-index: 20 !important;
        /* Ensure it stays on top of dots */
    }

    .nav-marker-logo {
        height: 30px !important;
    }

    .nav-altitude-text {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        margin-top: -1px !important;
        padding: 2px 6px !important;
        font-size: 9.5px !important;
        background: rgba(0, 0, 0, 0.7) !important;
        opacity: 0 !important;
        /* Hidden by default on mobile */
        visibility: hidden !important;
        transition: opacity 0.3s ease-in-out !important;
    }

    .nav-altitude-text.moving {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-dot {
        width: 8px !important;
        height: 8px !important;
        opacity: 1 !important;
    }

    /* Hide tooltips on mobile as there's no hover */
    .tooltip {
        display: none !important;
    }

    /* Increase touch target for dots */
    .nav-dot::before {
        content: '';
        position: absolute;
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
        z-index: 10;
    }
}

/* --- Mobile Optimization (Common Media Queries) --- */
@media (max-width: 768px) {

    /* General Usage Sections */
    .usage-content-wrapper {
        padding: 10px 10px 60px !important;
    }

    .usage-section {
        padding-top: 20px !important;
        margin-bottom: 40px !important;
        padding-bottom: 40px !important;
    }

    .section-header {
        margin-bottom: 30px !important;
    }

    .section-header h2 {
        font-size: 1.8rem !important;
    }

    .section-subtitle {
        font-size: 0.8rem !important;
    }

    /* Sticky Tabs Nav */
    .section-tabs {
        gap: 15px !important;
        padding: 15px 0 !important;
        justify-content: flex-start !important;
    }

    .tab-link {
        font-size: 0.9rem !important;
        padding: 5px 0 !important;
    }

    /* Usage.html Specific: Fee Tables */
    .fee-container.glass-card {
        padding: 20px 15px !important;
    }

    .usage-page-light .fee-tabs-wrapper {
        width: 100% !important;
        padding: 0 5px !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    .fee-tabs {
        flex-direction: row !important;
        width: 100% !important;
        gap: 5px !important;
        padding: 0 !important;
    }

    .fee-tab-btn {
        padding: 12px 5px !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
        flex: 1 !important;
        white-space: normal !important;
        word-break: keep-all !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .fee-content {
        padding: 0 !important;
    }

    .payment-alert-bar {
        padding: 15px 0 !important;
        font-size: 0.9rem !important;
        white-space: nowrap !important;
    }

    /* Usage.html Specific: Hours Grid */
    .info-card-grid {
        grid-template-columns: 1fr !important;
    }

    /* Usage.html Specific: Shuttle Text Layout */
    .shuttle-content-text {
        padding: 30px 20px !important;
    }

    .shuttle-col-left h3 {
        font-size: 1.5rem !important;
    }

    .shuttle-col-left .highlight-orange {
        font-size: 1.8rem !important;
    }

    .operation-time-box {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }

    .shuttle-col-right {
        padding-top: 20px !important;
    }

    .shuttle-details-list li {
        font-size: 0.85rem !important;
    }
}



/* --- CSR Refined Card Style (Desktop) --- */
.csr-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.csr-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.csr-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.csr-card-header {
    height: 180px;
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.csr-card-header-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.csr-card:hover .csr-card-header-bg {
    transform: scale(1.03);
}

.csr-card-body {
    padding: 24px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-grow: 1;
}

.csr-card-title {
    color: #212529;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.csr-card-subtitle {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #868e96;
    margin-bottom: 12px;
    line-height: 1.4;
}

.csr-card-divider {
    width: 100%;
    height: 1px;
    background: #dee2e6;
    border: none;
    margin: 0 0 16px;
}

.csr-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #495057;
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: left;
    width: 100%;
}

.csr-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.csr-card-list li span {
    flex-shrink: 0;
    color: #adb5bd;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* --- Mobile Optimization (CSR Page specific) --- */
@media (max-width: 1200px) {
    .csr-grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .csr-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
        padding: 0 15px;
    }

    .csr-card {
        border-radius: 20px !important;
    }

    .csr-card-header {
        height: 250px !important;
    }

    .csr-card-body {
        padding: 24px 20px 32px !important;
    }

    .csr-card-title {
        font-size: 1.25rem !important;
    }

    .csr-card-subtitle {
        font-size: 0.88rem !important;
        margin-bottom: 16px !important;
        line-height: 1.4;
    }

    .csr-card-divider {
        margin-bottom: 16px !important;
    }

    .csr-card-list {
        font-size: 0.82rem !important;
        gap: 8px !important;
    }

    .csr-card-list li span {
        font-size: 0.88rem !important;
    }
}



/* --- Additional Mobile Optimization: Single Line Navigation Tabs --- */
@media (max-width: 768px) {
    .usage-page-light .section-tabs {
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        justify-content: space-between !important;
        gap: 5px !important;
        padding: 10px 5px !important;
        width: 100% !important;
    }

    .usage-page-light .tab-link {
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        font-size: 0.8rem !important;
        padding: 5px 0 !important;
        text-align: center !important;
        flex: 1 !important;
        /* Distribute evenly */
    }
}

/* --- Mobile Only Util --- */
.mo-only {
    display: none;
}

@media (max-width: 768px) {
    .mo-only {
        display: block;
        width: 100% !important;

    }
}

@media (max-width: 768px) {
    .mo-only {
        display: block;
    }

    /* Mobile Fee Transition Design */
    .desktop-only {
        display: none !important;
    }

    .usage-page-light .fee-container.glass-card {
        background: none !important;
        border: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 0 24px 0 !important;
        margin-bottom: 100px;
        /* Space for fixed button */
    }

    .segmented-control {
        display: flex;
        background: #f1f5f9;
        padding: 3px;
        border-radius: 16px;
        margin-bottom: 10px;
    }

    .segmented-item {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: transparent;
        color: #64748b;
    }

    .segmented-item.active {
        background: #fff;
        color: #0f172a;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    }

    .fee-list-mobile {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .fee-item-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .fee-item-mobile:last-child {
        border-bottom: none;
    }

    .fee-item-info {
        text-align: left;
    }

    .fee-item-info h4 {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
        letter-spacing: -0.02em;
    }

    .fee-item-info p {
        font-size: 0.9rem;
        color: #94a3b8;
        margin-top: 1px;
        font-weight: 400;
    }

    .fee-item-price {
        font-size: 1.2rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.03em;
    }

    .fee-notice-mobile {
        margin-top: 20px;
        padding: 16px;
        background: #f8fafc;
        border-radius: 16px;
        display: flex;
        gap: 12px;
        text-align: left;
    }

    .fee-notice-mobile .material-symbols-outlined {
        color: var(--primary);
        font-size: 20px;
        margin-top: 2px;
    }

    .fee-notice-content p {
        font-size: 13px;
        color: #475569;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .fee-notice-content p:last-child {
        margin-bottom: 0;
    }

    .fee-notice-content b {
        color: #1e293b;
    }

    /* Fixed Bottom Payment Bar */
    .payment-sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding: 20px 20px 40px;
        z-index: 1000;
    }

    .payment-sticky-btn {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        background: #0f172a;
        color: #fff;
        border: none;
        border-radius: 16px;
        padding: 16px;
        font-weight: 700;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }
}

@media (min-width: 769px) {

    .mo-only,
    .mobile-only {
        display: none !important;
    }
}


/* ========================
   MOBILE HOURS SECTION LAYOUT OVERRIDE
   이미지 위 / 텍스트 아래
   ======================== */
@media (max-width: 768px) {
    .usage-page-light .hours-content-wrapper {
        flex-direction: column-reverse !important;
        height: auto !important;
        gap: 20px !important;
    }

    .usage-page-light .hours-intro-image {
        min-height: 220px !important;
        width: 100% !important;
        flex: none !important;
        border-radius: 16px !important;
    }

    .usage-page-light .hours-intro-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .usage-page-light .hours-intro-text {
        text-align: left !important;
        min-width: unset !important;
        flex: none !important;
        width: 100% !important;
    }

    .usage-page-light .highlight-title {
        font-size: 1.15rem !important;
    }

    .usage-page-light .warning-text {
        text-align: left !important;
        font-size: 0.88rem !important;
    }

    .usage-page-light .tips-title {
        margin-top: 20px !important;
    }

    .usage-page-light .tips-mini-row {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }

    .usage-page-light .tip-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
        padding: 12px 16px !important;
    }

    .usage-page-light .tip-icon {
        font-size: 1.3rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .usage-page-light .overlay-time {
        font-size: 1.6rem !important;
    }

    /* 오시는길 h3 부제목 모바일 줄바꿈 */
    .location-sub-text {
        display: block !important;
        margin-top: 2px;
    }
}


/* ============================================================
   Floor Lightbox (Facility Guide Image Popup)
   ============================================================ */

/* floor-item: 클릭 가능 커서 + 호버 강조 */
.floor-item {
    cursor: pointer !important;
}

.floor-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
    transform: translateX(4px) !important;
}

.floor-item .floor-arrow {
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.floor-item:hover .floor-arrow {
    color: var(--accent) !important;
    transform: scale(1.2) !important;
}

/* Scrim Overlay */
.floor-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.floor-lightbox-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Container */
.floor-lightbox-modal {
    position: relative;
    background: rgba(18, 18, 28, 0.97);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floor-lightbox-overlay.is-open .floor-lightbox-modal {
    transform: translateY(0) scale(1);
}

/* Header */
.floor-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.floor-lightbox-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.floor-lightbox-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.floor-lightbox-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.floor-lightbox-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Close Button */
.floor-lightbox-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
}

.floor-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: rotate(90deg);
}

/* Image Wrap (Zoom-capable container) */
.floor-lightbox-image-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
}

/* Placeholder */
.floor-lightbox-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    text-align: center;
    user-select: none;
}

.floor-lightbox-placeholder i {
    font-size: 3.5rem;
    color: rgba(255, 215, 0, 0.25);
}

.floor-lightbox-placeholder span {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.floor-lightbox-placeholder p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.28);
    margin: 0;
}

/* Actual image (used when real floor plan is provided) */
.floor-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.25s ease;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.floor-lightbox-img:active {
    cursor: grabbing;
}

/* Zoom Controls */
.floor-lightbox-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
}

.floor-lightbox-zoom-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.floor-lightbox-zoom-btn:hover {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
    transform: scale(1.05);
}

.floor-lightbox-zoom-btn:active {
    transform: scale(0.95);
}

.floor-lightbox-zoom-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    min-width: 44px;
    text-align: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .floor-lightbox-overlay {
        padding: 12px;
        align-items: center;
    }

    .floor-lightbox-modal {
        max-width: 100%;
        max-height: 85vh;
        border-radius: 20px;
    }

    .floor-lightbox-image-wrap {
        min-height: 220px;
    }

    .floor-lightbox-placeholder {
        padding: 30px 20px;
    }

    .floor-lightbox-placeholder i {
        font-size: 2.8rem;
    }

    .floor-lightbox-header {
        padding: 14px 16px;
    }

    .floor-lightbox-zoom-controls {
        padding: 10px 16px;
    }
}

/* --- CSR Page Sticky Nav & Major Activities --- */

.sticky-nav-wrapper {
    position: sticky;
    top: 100px;
    /* Align below main-header */
    z-index: 90;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0;
    margin-bottom: 40px;
}

.sticky-nav-wrapper .tab-link {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 16px;
    border-radius: 99px;
    transition: all 0.3s ease;
}

.sticky-nav-wrapper .tab-link:hover {
    color: #006400;
    background: rgba(0, 100, 0, 0.05);
}

.sticky-nav-wrapper .tab-link.active {
    color: #fff;
    background: #006400;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#section-csr,
#csr-main-activities {
    scroll-margin-top: 160px;
    /* Header(~100px) + StickyNav(~50px) + buffer */
}

#csr-main-activities .section-subtitle {
    display: inline-block;
    color: #006400;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .sticky-nav-wrapper {
        top: 60px;
        gap: 10px;
        padding: 10px 0;
    }

    .sticky-nav-wrapper .tab-link {
        font-size: 0.85rem;
        padding: 6px 0;
    }
}

/* --- CSR Major Activity Card Styles (Extracted from Tailwind) --- */
.activity-card {
    flex: 1;
    min-width: 0;
    max-width: calc((100% - (var(--social-columns, 3) - 1) * 24px) / var(--social-columns, 3));
    background-color: #ffffff;
    border-radius: 1rem;
    /* rounded-2xl */
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* shadow-sm */
    transition: all 0.3s duration-300;
    border: 1px solid #f1f5f9;
    /* border-slate-100 */
    display: flex;
    flex-direction: column;
}

.dark .activity-card {
    background-color: #1e293b;
    /* dark:bg-slate-800 */
    border-color: #334155;
    /* dark:border-slate-700 */
}

.activity-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* hover:shadow-xl */
}

.activity-card .img-wrapper {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.activity-card .activity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.activity-card:hover .activity-img {
    transform: scale(1.05);
    /* group-hover:scale-105 */
}

.activity-card .card-content {
    padding: 1.5rem;
    /* p-6 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.activity-card .card-title {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 0.75rem;
    /* mb-3 */
    line-height: 1.625;
    /* leading-snug */
    white-space: normal !important;
    transition: color 0.3s;
}

.activity-card:hover .card-title {
    color: var(--primary);
    /* group-hover:text-primary */
}

.activity-card .meta-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
    font-size: 0.875rem;
    /* text-sm */
    color: #64748b;
    /* text-slate-500 */
    margin-top: auto;
}

.dark .activity-card .meta-info {
    color: #94a3b8;
    /* dark:text-slate-400 */
}

.activity-card .meta-icon {
    font-size: 1rem;
    /* text-base */
}

.activity-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .activity-row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        gap: 20px !important;
    }

    .activity-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .activity-card .card-content {
        padding: 1.25rem 1rem !important;
        /* Reduced padding */
    }

    .activity-card .card-title {
        margin-bottom: 0.5rem !important;
    }

    .activity-card .meta-info {
        margin-top: 0.5rem !important;
    }
}

/* --- CSR Pagination Styles --- */
.pagination-wrapper {
    margin-top: 2rem;
    /* mt-8 */
    display: flex;
    justify-content: center;
}

.pagination-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    /* gap-2 */
}

.pagination-btn {
    width: 2.5rem;
    /* w-10 */
    height: 2.5rem;
    /* h-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    /* rounded-lg */
    border: 1px solid #e2e8f0;
    /* border-slate-200 */
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.dark .pagination-btn {
    border-color: #334155;
    /* dark:border-slate-700 */
}

.pagination-btn:hover {
    background-color: #f1f5f9;
    /* hover:bg-slate-100 */
}

.dark .pagination-btn:hover {
    background-color: #1e293b;
    /* dark:hover:bg-slate-800 */
}

.pagination-btn.active {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    font-weight: 700;
}

.pagination-ellipsis {
    padding: 0 0.5rem;
    /* px-2 */
    color: #94a3b8;
    /* text-slate-400 */
}

.pagination-icon {
    font-size: 1.125rem;
    /* text-lg */
}

/* =============================================
   Parking Modal Mobile Accordion Cards
   ============================================= */

.parking-card-list {
    display: none;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

.parking-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* shadow-sm */
    border: 1px solid #f1f5f9;
    /* border-slate-100 */
    overflow: hidden;
    transition: all 0.3s ease;
    line-height: 1.6;
    letter-spacing: -0.02em;
    text-align: left;
}

.dark .parking-card {
    background-color: #0f172a;
    /* dark:bg-slate-900 */
    border-color: #1e293b;
    /* dark:border-slate-800 */
}

/* Active State (Green Theme) */
.parking-card.active {
    border: 2px solid #2ecc71;
    /* border-primary 초록색 */
}

.parking-card-header {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.2s;
}

.parking-card-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.dark .parking-card-header:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.parking-card.active .parking-card-header {
    border-bottom: 1px solid #f1f5f9;
}

.dark .parking-card.active .parking-card-header {
    border-bottom-color: #1e293b;
}

.parking-card-title-group {
    flex: 1;
}

.parking-card-title {
    font-weight: 700;
    color: #0f172a;
    /* text-slate-900 */
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.dark .parking-card-title {
    color: #f1f5f9;
    /* dark:text-slate-100 */
}

.parking-card-price {
    font-size: 0.75rem;
    color: #64748b;
    /* text-slate-500 */
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.parking-card-icon {
    color: #94a3b8;
    /* text-slate-400 */
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.parking-card.active .parking-card-icon {
    color: #2ecc71;
    /* text-primary 초록색 */
    /* Wait, the HTML changes the textContent to 'expand_less', so we don't need rotate */
}

.parking-card-body {
    max-height: 0;
    overflow: hidden;
    background-color: #ffffff;
    padding: 0 1rem;
    opacity: 0;

}

.parking-card.active .parking-card-body {
    max-height: 500px;
    /* enough to show content */
    padding: 1rem;
    opacity: 1;
}

.parking-card-info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.parking-card-info-row:last-child {
    margin-bottom: 0;
}

.text-primary-green {
    color: #2ecc71;
    /* text-primary 초록색 */
    font-size: 0.875rem;
    /* text-sm */
    margin-top: 0.125rem;
    /* mt-0.5 */
}

.parking-card-info-text {
    font-size: 0.875rem;
    /* text-sm */
}

.parking-card-info-label {
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.1rem;
}

.dark .parking-card-info-label {
    color: #cbd5e1;
}

.parking-card-info-desc {
    color: #475569;
    /* text-slate-600 */
}

.dark .parking-card-info-desc {
    color: #94a3b8;
    /* dark:text-slate-400 */
}

/* PC Version vs Mobile Version Toggling */
@media (max-width: 768px) {
    .parking-table-pc {
        display: none !important;
    }

    .parking-card-list {
        display: flex;
    }
}

/* --- Fluid Scaling for Directions Info (User Request) --- */
.usage-page-light .location-info-col {
    gap: clamp(20px, 4vw, 40px) !important;
}

.usage-page-light .guide-item {
    margin-bottom: clamp(15px, 3vw, 30px) !important;
}

.usage-page-light .guide-item h3 {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem) !important;
    margin-bottom: clamp(10px, 1.5vw, 15px) !important;
    gap: clamp(8px, 1vw, 10px) !important;
}

.usage-page-light .sub-text {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
}

.usage-page-light .guide-steps-list {
    padding: clamp(15px, 2.5vw, 20px) !important;
    border-radius: clamp(8px, 1.5vw, 12px) !important;
}

.usage-page-light .guide-steps-list li {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    margin-bottom: clamp(8px, 1.5vw, 12px) !important;
    gap: clamp(8px, 1.2vw, 10px) !important;
}

.usage-page-light .guide-steps-list li i {
    font-size: clamp(0.5rem, 0.8vw, 0.6rem) !important;
    margin-top: clamp(6px, 1vw, 8px) !important;
}

.usage-page-light .guide-note {
    margin-top: clamp(8px, 1.5vw, 10px) !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
}

.usage-page-light .address-emphasis-box {
    padding: clamp(15px, 2.5vw, 20px) !important;
    gap: clamp(10px, 1.5vw, 15px) !important;
    border-radius: clamp(8px, 1.5vw, 12px) !important;
}

.usage-page-light .address-label {
    font-size: clamp(0.7rem, 1vw, 0.8rem) !important;
    padding: clamp(3px, 0.5vw, 4px) clamp(6px, 1vw, 8px) !important;
}

.usage-page-light .address-text {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
}

.usage-page-light .copy-btn {
    font-size: clamp(0.75rem, 1.1vw, 0.85rem) !important;
    padding: clamp(6px, 1vw, 8px) clamp(12px, 2vw, 16px) !important;
    border-radius: clamp(4px, 0.8vw, 6px) !important;
}

.usage-page-light .parking-btn {
    padding: clamp(12px, 2vw, 18px) !important;
    font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
    border-radius: clamp(6px, 1vw, 8px) !important;
}

.usage-page-light .parking-warning {
    padding: clamp(12px, 2vw, 15px) !important;
    font-size: clamp(0.8rem, 1.2vw, 0.9rem) !important;
    border-radius: clamp(6px, 1vw, 8px) !important;
    gap: clamp(8px, 1.2vw, 10px) !important;
    margin-top: clamp(15px, 2.5vw, 20px) !important;
}

/* --- Fix for Mobile Width Constraint on Location Grid --- */
@media (max-width: 768px) {
    .usage-page-light .location-wrapper {
        align-items: stretch !important;
    }

    .usage-page-light .location-map-col,
    .usage-page-light .location-info-col {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}