:root {
            --primary-color: #23624b;
            --primary-dark: #173c31;
            --primary-light: #4b8f73;
            --accent-color: #d9793a;
            --accent-hover: #c7652a;
            --bg-color: #f7f3eb;
            --card-bg: #ffffff;
            --route-color: #2f7d59;
            --map-color: #2f6fbb;
            --hotel-bg: #edf6f8;
            --text-main: #263238;
            --text-sub: #61717d;
            --border-color: #ded8cb;
            --radius-lg: 14px;
            --radius-md: 8px;
            --radius-sm: 6px;
            --shadow-sm: 0 2px 8px rgba(39,50,56,0.06);
            --shadow-md: 0 12px 30px rgba(39,50,56,0.10);
            --shadow-hover: 0 16px 36px rgba(35,98,75,0.16);
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            -webkit-text-size-adjust: 100%;
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(247,243,235,0.92) 360px),
                var(--bg-color);
            color: var(--text-main);
            line-height: 1.6;
            padding-bottom: 40px;
            overflow-x: hidden;
            width: 100%;
        }

        /* HEADER & HERO */
        header {
            min-height: clamp(360px, 46vw, 520px);
            color: white;
            padding: 72px 20px 118px;
            text-align: left;
            box-shadow: 0 18px 48px rgba(23,60,49,0.24);
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(12,32,27,0.82) 0%, rgba(20,56,45,0.58) 44%, rgba(217,121,58,0.14) 100%),
                linear-gradient(180deg, rgba(12,32,27,0.10) 0%, rgba(12,32,27,0.74) 100%),
                url("nantou-hero.png") center/cover no-repeat;
        }
        header::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 90px;
            background: linear-gradient(180deg, rgba(247,243,235,0) 0%, var(--bg-color) 82%);
            pointer-events: none;
        }
        header h1,
        header p,
        .hero-chips {
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            z-index: 1;
        }
        header h1 {
            max-width: 1100px;
            font-size: clamp(2rem, 4.4vw, 3.6rem);
            font-weight: 800;
            line-height: 1.08;
            margin-bottom: 16px;
            text-shadow: 0 4px 24px rgba(0,0,0,0.34);
        }
        header h1 span {
            display: inline;
        }
        header h1 span + span::before {
            content: " ";
        }
        header p {
            max-width: 760px;
            font-size: clamp(1rem, 2.4vw, 1.35rem);
            opacity: 0.96;
            margin-bottom: 20px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.28);
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 0 12px;
        }
        .hero-chips {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 12px;
        }
        .chip {
            background: rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 0.86rem;
            font-weight: 700;
            border: 1px solid rgba(255, 255, 255, 0.34);
            box-shadow: 0 8px 22px rgba(0,0,0,0.14);
        }
        /* STICKY NAV TABS */
        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 99;
            background: rgba(255, 255, 255, 0.86);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 10px 28px rgba(39,50,56,0.08);
            padding: 10px 12px;
        }
        .nav-tabs {
            display: flex;
            max-width: 1100px;
            margin: 0 auto;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            justify-content: flex-start;
        }
        .nav-tabs::-webkit-scrollbar {
            display: none;
        }
        @media (min-width: 768px) {
            .nav-tabs {
                justify-content: center;
            }
        }
        .tab-btn {
            background: #f1eadf;
            color: var(--text-sub);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 600;
            white-space: nowrap;
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
            border: 1px solid transparent;
        }
        .tab-btn:hover, .tab-btn.active {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 2px 8px rgba(46,90,68,0.25);
        }

        /* MAIN CONTAINER & RWD LAYOUT */
        .container {
            max-width: 1100px;
            margin: -58px auto 0;
            padding: 0 18px;
        }

        /* PHOTO ALBUM BANNER */
        .album-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, #c7652a 0%, #d9793a 50%, #e6944f 100%);
            color: white;
            text-decoration: none;
            padding: 16px 20px;
            border-radius: var(--radius-lg);
            font-weight: 700;
            font-size: 0.98rem;
            /* Container has margin-top:-58px so its rounded cards peek over the hero photo;
               that same offset would tuck this banner under the sticky nav (z-index:99), so
               cancel it here and let the banner sit clear below the nav instead. */
            margin-top: 58px;
            margin-bottom: 24px;
            box-shadow: 0 8px 22px rgba(199,101,42,0.28);
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .album-banner:hover {
            box-shadow: 0 10px 26px rgba(199,101,42,0.36);
            transform: translateY(-2px);
        }
        .album-banner .album-sub {
            font-weight: 500;
            font-size: 0.8rem;
            opacity: 0.92;
        }
        @media (max-width: 560px) {
            .album-banner {
                flex-direction: column;
                gap: 2px;
                text-align: center;
                padding: 14px 18px;
                margin-top: 0;
            }
        }

        /* FULL TRIP MAP BANNER */
        .map-banner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, #2a5d94 0%, #2f6fbb 50%, #4285F4 100%);
            color: white;
            text-decoration: none;
            padding: 16px 20px;
            border-radius: var(--radius-lg);
            font-weight: 700;
            font-size: 0.98rem;
            margin-bottom: 8px;
            box-shadow: 0 8px 22px rgba(47,111,187,0.28);
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .map-banner:hover {
            box-shadow: 0 10px 26px rgba(47,111,187,0.36);
            transform: translateY(-2px);
        }
        .map-banner .map-sub {
            font-weight: 500;
            font-size: 0.8rem;
            opacity: 0.92;
        }
        .map-hint {
            text-align: center;
            font-size: 0.78rem;
            color: var(--text-sub);
            margin: 0 0 24px;
        }
        @media (max-width: 560px) {
            .map-banner {
                flex-direction: column;
                gap: 2px;
                text-align: center;
                padding: 14px 18px;
            }
        }

        /* TOP INFO GRID (OVERVIEW + NOTICE) */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            margin-bottom: 28px;
        }
        @media (min-width: 768px) {
            .info-grid {
                grid-template-columns: 3fr 2fr;
            }
        }

        .overview-card {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%),
                var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 22px 24px;
            box-shadow: var(--shadow-md);
            border-left: 6px solid var(--primary-color);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .overview-card:hover {
            box-shadow: var(--shadow-md);
        }
        .overview-title {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.05rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .overview-list {
            font-size: 0.9rem;
            color: var(--text-sub);
            list-style: none;
        }
        .overview-list li {
            margin-bottom: 6px;
            display: flex;
            align-items: baseline;
            line-height: 1.5;
        }
        .overview-list li::before {
            content: "•";
            color: var(--accent-color);
            font-weight: bold;
            font-size: 1.2rem;
            display: inline-block;
            width: 14px;
            margin-right: 4px;
            flex-shrink: 0;
        }

        .notice-card {
            background: #fff7ed;
            border: 1px solid #f4d4ad;
            border-left: 6px solid var(--accent-color);
            border-radius: var(--radius-lg);
            padding: 22px 24px;
            box-shadow: var(--shadow-md);
        }
        .notice-title {
            color: #c05621;
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .notice-list {
            font-size: 0.88rem;
            color: #7b341e;
            padding-left: 18px;
            line-height: 1.5;
        }
        .notice-list li {
            margin-bottom: 6px;
        }

        /* DAY CARDS GRID */
        .days-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }
        @media (min-width: 868px) {
            .days-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .day-card {
            background:
                linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,247,241,0.96) 100%),
                var(--card-bg);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-md);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid rgba(222, 216, 203, 0.9);
            scroll-margin-top: 78px;
            position: relative;
            overflow: hidden;
        }
        .day-card::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
        }
        .day-card:nth-child(2)::before {
            background: linear-gradient(90deg, #2f6fbb, #2f7d59);
        }
        .day-card:nth-child(3)::before {
            background: linear-gradient(90deg, #d9793a, #7c4d2b);
        }
        .day-card:nth-child(4)::before {
            background: linear-gradient(90deg, #6f8f4b, #2f6fbb);
        }

        .day-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .day-header {
            font-size: 1.12rem;
            font-weight: 700;
            color: var(--primary-color);
            border-bottom: 1px solid rgba(222,216,203,0.92);
            padding-bottom: 12px;
            margin-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .day-header .date-tag {
            background: #e8f5ef;
            color: #1f5c47;
            border: 1px solid #b8dccb;
            font-size: 0.78rem;
            padding: 3px 10px;
            border-radius: 999px;
            font-weight: 600;
        }

        .btn-route {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            text-align: center;
            background: linear-gradient(135deg, var(--route-color) 0%, #246b4d 100%);
            color: white;
            text-decoration: none;
            padding: 12px 16px;
            border-radius: var(--radius-md);
            font-weight: 700;
            font-size: 0.88rem;
            margin-bottom: 16px;
            box-shadow: 0 8px 18px rgba(47,125,89,0.28);
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .btn-route:hover {
            background: linear-gradient(135deg, #286f50 0%, #1f5a41 100%);
            box-shadow: 0 10px 24px rgba(47,125,89,0.36);
        }
        .btn-route:active {
            transform: scale(0.98);
        }

        /* TIMELINE */
        .timeline {
            flex-grow: 1;
        }
        .timeline-item {
            position: relative;
            padding-left: 28px;
            margin-bottom: 18px;
            border-left: 2px solid #d9d0c1;
        }
        .timeline-item:last-child {
            margin-bottom: 0;
            border-left: 2px solid transparent;
        }
        .timeline-item::before {
            content: "";
            position: absolute;
            left: -7px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-color);
            box-shadow: 0 0 0 4px white, 0 0 0 6px rgba(35,98,75,0.28);
        }
        .time-badge {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 2px;
        }
        .item-title {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            line-height: 1.4;
        }
        .item-desc {
            font-size: 0.88rem;
            color: var(--text-sub);
            margin-top: 4px;
            line-height: 1.5;
        }

        /* BUTTON MAP */
        .btn-map-group {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .btn-map {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background-color: var(--map-color);
            color: white;
            text-decoration: none;
            padding: 7px 12px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 600;
            box-shadow: 0 5px 12px rgba(47,111,187,0.24);
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }
        .btn-map:hover {
            background-color: #3367d6;
            box-shadow: 0 4px 8px rgba(66,133,244,0.35);
        }
        .btn-map:active {
            transform: scale(0.97);
        }

        /* BADGES */
        .badge-verify {
            background-color: #e8f5ef;
            color: #1f5c47;
            border: 1px solid #b8dccb;
            font-size: 0.72rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        .badge-warn {
            background-color: #fffaf0;
            color: #9c4221;
            border: 1px solid #f4d4ad;
            font-size: 0.72rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }

        /* HOTEL BOX */
        .hotel-box {
            background-color: var(--hotel-bg);
            border: 1px solid #c8e2e8;
            padding: 14px 16px;
            border-radius: var(--radius-md);
            margin-top: 14px;
            font-size: 0.88rem;
        }
        .hotel-title {
            font-weight: 700;
            color: #225d72;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .hotel-box div {
            color: #2f6070;
        }
        .hotel-box .btn-map {
            margin-top: 4px;
        }
        @media (max-width: 560px) {
            body {
                line-height: 1.55;
            }
            header {
                min-height: 330px;
                padding: 42px 18px 62px;
                text-align: center;
                background-position: center top;
            }
            header h1 {
                max-width: 18rem;
                font-size: clamp(2rem, 9vw, 2.45rem);
                line-height: 1.18;
                margin-bottom: 14px;
                text-wrap: balance;
            }
            header h1 span {
                display: block;
            }
            header h1 span + span::before {
                content: none;
            }
            header p {
                display: block;
                max-width: 18rem;
                font-size: 1rem;
                line-height: 1.5;
                margin-bottom: 16px;
                text-wrap: balance;
            }
            header p span {
                display: inline;
            }
            .hero-chips {
                justify-content: center;
                gap: 8px;
            }
            .chip {
                max-width: 92%;
                padding: 7px 12px;
                font-size: 0.9rem;
                line-height: 1.35;
                white-space: normal;
                text-align: center;
            }
            .sticky-nav {
                padding: 8px 12px;
            }
            .nav-tabs {
                gap: 10px;
                scroll-padding-inline: 12px;
            }
            .tab-btn {
                padding: 8px 14px;
                font-size: 0.88rem;
            }
            .container {
                margin-top: 16px;
                padding: 0 12px;
            }
            .day-card,
            .overview-card,
            .notice-card {
                padding: 18px;
                border-radius: 12px;
            }
            .overview-title,
            .notice-title {
                align-items: flex-start;
                font-size: 1.08rem;
                line-height: 1.35;
            }
            .overview-list {
                font-size: 0.95rem;
            }
            .overview-list li {
                display: block;
                position: relative;
                padding-left: 18px;
                line-height: 1.65;
            }
            .overview-list li::before {
                position: absolute;
                left: 0;
                top: 0.1em;
                width: auto;
                margin-right: 0;
            }
            .overview-list strong {
                white-space: nowrap;
            }
            .notice-list {
                font-size: 0.92rem;
                line-height: 1.65;
            }
            .day-header {
                align-items: flex-start;
                flex-direction: column;
                font-size: 1rem;
                line-height: 1.4;
            }
            .item-title {
                font-size: 0.96rem;
            }
            .item-desc,
            .hotel-box {
                font-size: 0.9rem;
            }
            .btn-route,
            .btn-map {
                width: 100%;
                justify-content: center;
                line-height: 1.35;
                text-align: center;
            }
        }

        /* FOOTER */
        footer {
            text-align: center;
            padding: 28px 16px 0;
            font-size: 0.85rem;
            color: var(--text-sub);
        }