BabyTravel/index.html at main · royeLin/BabyTravel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12天奧捷深度｜實戰時刻表版 (更新版)</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2c3e50;
            --secondary: #34495e;
            --accent: #e67e22;
            --bg: #f8f9fa;
            --card-bg: #ffffff;
            --text: #333;

            /* Section Colors */
            --flight: #2980b9;
            --prague: #e67e22;
            --ck: #d35400;
            --vienna: #c0392b;
            --salzburg: #27ae60;
            --nature: #16a085;
            --summer: #f1c40f;

            /* Status Colors */
            --sun: #f39c12;
            --temp: #3498db;
            --food: #d35400;
            --book-btn: #e74c3c;
            --verified: #27ae60;
            --confirmed: #d4ac0d;
            --closed-warn: #c0392b;
        }

        * { box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; padding: 0; background: var(--bg); color: var(--text); padding-bottom: 80px; }

        /* Header */
        header { background: linear-gradient(135deg, #11998e, #38ef7d); color: white; padding: 25px 20px; text-align: center; border-radius: 0 0 20px 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 50; }
        h1 { margin: 0; font-size: 1.4rem; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
        p.subtitle { margin: 8px 0 0; opacity: 0.95; font-size: 0.9rem; font-weight: 500; }

        /* Container */
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }

        /* Tabs */
        .tabs { display: flex; justify-content: space-around; background: white; padding: 10px 0; position: fixed; bottom: 0; width: 100%; max-width: 600px; left: 50%; transform: translateX(-50%); box-shadow: 0 -2px 15px rgba(0,0,0,0.08); z-index: 100; border-radius: 15px 15px 0 0; }
        .tab-btn { border: none; background: none; font-size: 0.7rem; color: #95a5a6; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 20%; transition: color 0.2s; }
        .tab-btn.active { color: var(--accent); }
        .tab-btn i { font-size: 1.2rem; }

        /* Sections */
        .section { display: none; animation: fadeIn 0.4s ease; }
        .section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Cards */
        .card { background: white; border-radius: 12px; padding: 18px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 5px solid #bdc3c7; }
        .card.flight { border-left-color: var(--flight); background: #eaf2f8; }
        .card.prague { border-left-color: var(--prague); }
        .card.ck { border-left-color: var(--ck); background: #fff8f0; }
        .card.salzburg { border-left-color: var(--salzburg); background: #f0fcf4; }
        .card.vienna { border-left-color: var(--vienna); }
        .card.urgent { border-left-color: #c0392b; background: #fff5f5; }
        .card.info-card { border-left-color: #3498db; }
        .card.hotel-card { padding: 0; border-left: none; overflow: hidden; }

        .day-header { font-weight: bold; color: #555; display: block; margin-bottom: 4px; font-size: 0.9rem; text-transform: uppercase; }
        .weather-row { display: flex; gap: 12px; font-size: 0.75rem; margin-bottom: 12px; font-weight: 600; background: #f8f9fa; padding: 4px 8px; border-radius: 4px; width: fit-content; }
        .sun-info { color: var(--sun); }
        .temp-info { color: var(--temp); }

        h3 { margin: 0 0 10px; color: var(--primary); font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }

        /* Schedule List */
        .schedule { list-style: none; padding: 0; margin: 0; border-left: 2px solid #eee; margin-left: 5px; }
        .item { display: flex; margin-bottom: 15px; padding-left: 15px; position: relative; }
        .item:last-child { margin-bottom: 0; }
        .item::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #bdc3c7; border: 2px solid white; box-shadow: 0 0 0 1px #eee; }
        .time { width: 45px; font-weight: bold; color: var(--accent); font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; }
        .act { font-size: 0.95rem; line-height: 1.4; color: #333; width: 100%; }
        .sub { display: block; font-size: 0.85rem; color: #666; margin-top: 4px; }
        .verified-badge { font-size: 0.7rem; color: var(--verified); background: #e8f8f5; padding: 2px 6px; border-radius: 4px; margin-left: 5px; font-weight: bold; }

        /* Links */
        .map-icon { color: #3498db; margin-left: 5px; text-decoration: none; font-size: 0.9rem; transition: transform 0.2s; display: inline-block; cursor: pointer; }
        .map-icon:hover { transform: scale(1.2); color: #e74c3c; }
        .book-link { color: #d35400; text-decoration: underline; font-weight: bold; font-size: 0.85rem; margin-left: 5px; cursor: pointer; }

        /* Hotel Styles */
        .hotel-header { background: #f1f2f6; padding: 12px 15px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; align-items: center; }
        .hotel-city { font-weight: bold; color: var(--primary); }
        .hotel-dates { font-size: 0.8rem; background: white; padding: 2px 8px; border-radius: 10px; border: 1px solid #ccc; color: #555; font-weight: bold;}
        .hotel-item { padding: 15px; border-bottom: 1px dashed #eee; position: relative; }
        .hotel-tag { position: absolute; top: 15px; right: 15px; font-size: 0.7rem; font-weight: bold; padding: 2px 6px; border-radius: 4px; }
        .tag-confirmed { background: var(--confirmed); color: white; border: 1px solid #b7950b; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .hotel-title { font-weight: bold; display: block; margin-bottom: 5px; color: #333; }
        .hotel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 0.8rem; color: #666; margin-bottom: 8px; }
        .price-est { color: #e74c3c; font-weight: bold; }

        /* Meal Box */
        .meal-box { background: #fff8e1; border: 1px solid #ffe0b2; border-radius: 6px; padding: 8px; margin-top: 5px; font-size: 0.85rem; display: flex; align-items: flex-start; gap: 8px; }
        .meal-box.warning { background: #fff5f5; border-color: #fadbd8; }
        .meal-icon { color: var(--food); margin-top: 2px; }
        .meal-box.warning .meal-icon { color: #c0392b; }

        /* Booking Checklist Styles */
        .booking-list { list-style: none; padding: 0; margin: 0; }
        .booking-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; }
        .booking-item:last-child { border-bottom: none; }
        .b-date { font-weight: bold; color: var(--primary); font-size: 0.85rem; width: 45px; flex-shrink: 0; }
        .b-info { flex-grow: 1; padding: 0 10px; }
        .b-name { font-weight: 600; display: block; font-size: 0.9rem; color: #333; }
        .b-time { font-size: 0.8rem; color: #666; }
        .b-btn { background: var(--book-btn); color: white; text-decoration: none; font-size: 0.75rem; padding: 6px 12px; border-radius: 20px; font-weight: bold; white-space: nowrap; transition: background 0.2s; display: inline-block; }
        .b-btn:hover { background: #c0392b; }
        .b-tip { display: block; font-size: 0.75rem; color: #e67e22; margin-top: 2px; }

        /* Map SVG */
        .map-line-dash { stroke-dasharray: 6, 4; animation: dash 20s linear infinite; }
        @keyframes dash { to { stroke-dashoffset: -100; } }


        .daily-map-card { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 15px; margin-top: 15px; text-align: center; }
        .dm-header { font-weight: bold; color: #2c3e50; font-size: 0.95rem; margin-bottom: 10px; text-align: left; border-left: 3px solid var(--primary); padding-left: 8px; }
        .dm-label { font-size: 10px; font-weight: 600; fill: #555; text-anchor: middle; }
        .dm-sub { font-size: 8px; fill: #999; text-anchor: middle; }

        /* Interactive UI Styles */
        .progress-container { background: white; padding: 15px 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 2px solid var(--verified); }
        .progress-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; color: var(--primary); font-size: 1.1rem; }
        .progress-bar-bg { background: #e0e0e0; height: 12px; border-radius: 6px; overflow: hidden; }
        .progress-bar-fill { background: linear-gradient(90deg, #38ef7d, #11998e); height: 100%; width: 0%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
        .check-wrapper { margin-right: 15px; display: flex; align-items: center; }
        .check-wrapper input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--verified); }
        .booking-item.done .b-name { text-decoration: line-through; color: #bdc3c7; }
        .booking-item.done .b-time, .booking-item.done .b-tip { text-decoration: line-through; color: #bdc3c7; }

        /* AI Chat Widget Styles */
        .ai-chat-btn { position: fixed; bottom: 85px; right: 20px; background: linear-gradient(135deg, #11998e, #38ef7d); color: white; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; z-index: 1000; transition: transform 0.3s, box-shadow 0.3s; display: flex; align-items: center; justify-content: center; }
        .ai-chat-btn:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
        .ai-chat-window { position: fixed; bottom: 150px; right: 20px; width: 340px; max-width: calc(100vw - 40px); background: white; border-radius: 16px; box-shadow: 0 5px 30px rgba(0,0,0,0.2); z-index: 1000; display: none; flex-direction: column; overflow: hidden; border: 1px solid #e0e0e0; transition: all 0.3s; }
        .ai-chat-window.active { display: flex; animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .ai-chat-header { background: linear-gradient(135deg, #11998e, #38ef7d); color: white; padding: 14px 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; }
        .ai-chat-close { background: none; border: none; color: white; cursor: pointer; font-size: 1.3rem; opacity: 0.8; transition: opacity 0.2s; }
        .ai-chat-close:hover { opacity: 1; }
        .ai-chat-messages { padding: 15px; height: 350px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: #f8f9fa; }
        .ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; word-wrap: break-word; position: relative; }
        .ai-msg.user { background: #11998e; color: white; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow: 0 2px 5px rgba(17,153,142,0.2); }
        .ai-msg.bot { background: white; color: #333; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
        .ai-msg.bot strong { color: #11998e; }
        .ai-chat-input-area { display: flex; padding: 12px; background: white; border-top: 1px solid #eee; gap: 10px; align-items: center; }
        .ai-chat-input { flex-grow: 1; border: 1px solid #ddd; border-radius: 20px; padding: 10px 15px; outline: none; font-size: 0.95rem; transition: border-color 0.2s; background: #f8f9fa; }
        .ai-chat-input:focus { border-color: #11998e; background: white; }
        .ai-chat-send { background: #11998e; border: none; color: white; font-size: 1rem; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; }
        .ai-chat-send:hover { background: #0c7c72; }
        .ai-chat-send:disabled { background: #ccc; cursor: not-allowed; }
        .typing-indicator { display: none; align-self: flex-start; background: white; padding: 12px 16px; border-radius: 14px; border-bottom-left-radius: 4px; border: 1px solid #e0e0e0; margin-top: 2px;}
        .typing-indicator span { display: inline-block; width: 6px; height: 6px; background: #999; border-radius: 50%; margin: 0 2px; animation: bounce 1.4s infinite ease-in-out both; }
        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
    </style>
</head>
<body>

<header>
    <h1>12天奧捷｜薩爾斯堡音樂季+CK過夜</h1>
    <p class="subtitle">Salzburg (2晚)・CK (1晚)・Prague (5晚)・Vienna (3晚)</p>
</header>

<div class="container">

    <!-- TAB 1: ITINERARY (行程) -->
    <div id="itinerary" class="section active">
        <div class="card flight">
            <span class="day-header">航班資訊 (EVA Air)</span>
            <div class="act">去程：7/15 23:45 TPE ➔ 7/16 07:15 VIE</div>
            <div class="act">回程：7/27 12:30 VIE ➔ 7/28 06:30 TPE</div>
        </div>

        <div class="card salzburg">
            <span class="day-header">Day 1: 7/16 (四) 薩爾斯堡與溫特斯堡纜車</span>
            <div class="weather-row"><span class="temp-info"><i class="fas fa-temperature-high"></i> 24°C/13°C</span><span class="sun-info"><i class="fas fa-sun"></i> 05:25/21:03</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">07:15</span><span class="act">抵達維也納機場 (VIE)。</span></li>
                <li class="item"><span class="time">09:02</span><span class="act">搭乘 ÖBB 火車直達薩爾斯堡。 <span class="verified-badge">已購票</span><span class="sub">從機場站出發，車程約 3 小時。</span></span></li>
                <li class="item"><span class="time">12:30</span><span class="act">抵達薩爾斯堡車站，前往飯店 Check-in。<span class="sub">於車站內「Tourist Info」購買(或領取) 24小時薩爾斯堡卡。<a href="https://www.salzburg.info/zh/hotels-offers/salzburg-card" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 官網資訊</a></span></span></li>
                <li class="item"><span class="time">13:30</span><span class="act">前往溫特斯堡 (Untersberg)。<span class="sub">搭乘 25 號公車，終點站「Untersbergbahn」，車程約30-40分。</span></span></li>
                <li class="item"><span class="time">14:30</span><span class="act">溫特斯堡纜車。<span class="sub">持卡直接掃碼進入，山頂氣溫低建議帶薄外套，停留約 1.5 - 2 小時。<br><strong style="color:var(--nature);">*7月營業時間：08:30 - 17:30 (每日營業)</strong> <a href="https://www.untersbergbahn.at/en" target="_blank" class="book-link" style="color:#c0392b;"><i class="fas fa-cloud-sun-rain"></i> 查詢即時天氣與營運狀態</a></span></span></li>
                <li class="item"><span class="time">16:30</span><span class="act">搭乘 25 號公車下山前往海布倫宮。<span class="sub">在「Hellbrunn」站下車，車程約 10-15 分鐘。</span></span></li>
                <li class="item"><span class="time">17:00</span><span class="act">海布倫宮 (Hellbrunn Palace) 與惡作劇噴泉。<span class="sub">憑薩爾斯堡卡換票入內，小心被水噴濕！<br><strong style="color:var(--nature);">*7月營業時間：09:30 - 19:00 (最後入場18:00，每日營業)</strong></span></span></li>
                <li class="item"><span class="time">19:00</span><span class="act">搭乘 25 號公車前往米拉貝爾宮。<span class="sub"><i class="fas fa-bus"></i> <strong>交通資訊：</strong>從「Hellbrunn」站搭乘 Bus 25 直達「Mirabellplatz」站，車程約 25 分鐘。下車後步行 3-5 分鐘即可抵達大理石廳。<br><span style="color:#c0392b; font-weight:bold;">(注意：兩地相距5.5公里，步行需1小時以上，請務必搭公車！)</span></span></span></li>
                <li class="item"><span class="time">19:30</span><div class="meal-box warning"><i class="fas fa-exclamation-circle meal-icon"></i><div><strong>晚餐：周邊快餐或輕食 (切勿安排正式餐廳)</strong><br>抵達米拉貝爾宮周邊後，因 20:00 要入座聽音樂會，時間極度緊湊！建議在附近買個 Bosna 熱狗堡或 Kebap 捲餅速戰速決，或等音樂會後再吃宵夜。</div></div></li>
                <li class="item"><span class="time">20:00</span><span class="act"><i class="fas fa-music" style="color:#d35400;"></i> <strong>米拉貝爾宮音樂會 (Palace Concert)</strong>。<span class="sub">地點：大理石廳 (Marble Hall)。務必提前 15-20 分鐘抵達換票入座。</span></span></li>
            </ul>
        </div>

        <div class="card salzburg">
            <span class="day-header">Day 2: 7/17 (五) 國王湖深度慢遊</span>
            <div class="weather-row"><span class="temp-info"><i class="fas fa-temperature-high"></i> 24°C/13°C</span><span class="sun-info"><i class="fas fa-sun"></i> 05:25/21:03</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">07:10</span><span class="act">搭乘 <strong>Bus 840</strong> 前往貝希特斯加登。<a href="https://www.albus.at" target="_blank" class="map-icon" title="查詢公車時刻"><i class="fas fa-bus"></i></a><span class="sub"><i class="fas fa-clock"></i> 車程約 1 小時。從薩爾斯堡火車站「Bus Stop J」上車，向司機買「Bayern-Ticket / RVO 一日票」。<br><span style="color:#c0392b; font-weight:bold;">⚠ 7/17 是週五（平日），首班車約 06:35 出發</span></span></span></li>
                <li class="item"><span class="time">08:15</span><span class="act">抵達貝希特斯加登，轉乘 <strong>Bus 841/842</strong> 前往國王湖碼頭。<a href="https://maps.google.com/?q=Königssee+Parkplatz" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><span class="sub"><i class="fas fa-clock"></i> 轉乘車程約 10-15 分鐘，下車後步行 5-10 分鐘抵達碼頭售票處。</span></span></li>
                <li class="item"><span class="time">09:00</span><span class="act"><i class="fas fa-ship" style="color:#2980b9;"></i> <strong>搭乘電動船 → 直達 Salet 站（上湖）</strong> <span class="verified-badge">已購票</span><a href="https://www.seenschifffahrt.de/en/koenigssee" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 遊船官網</a><span class="sub"><i class="fas fa-clock"></i> 全程約 <strong>55-60 分鐘</strong>（碼頭 → St. Bartholomä 約 35 分鐘 + St. Bartholomä → Salet 約 20 分鐘）。<br><span style="color: #d35400;"><i class="fas fa-lightbulb"></i> <strong>實戰建議：</strong>去程建議坐在船的<strong>「右側」（偏右後方）</strong>，途經紅蔥頭教堂時拍攝視野最佳！去程先不下船，直接坐到底站 Salet。</span></span></span></li>
                <li class="item"><span class="time">10:00</span><span class="act"><i class="fas fa-mountain" style="color:#16a085;"></i> 抵達 <strong>Salet 碼頭</strong>，前往上湖 (Obersee)。<a href="https://maps.google.com/?q=Obersee+Berchtesgaden" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><span class="sub">下船後步行約 5 分鐘即可看到上湖入口，湖水翠綠如鏡。先到旁邊的<strong>牛奶小屋 (Saletalm)</strong> 打卡！</span></span></li>
                <li class="item"><span class="time">10:15</span><span class="act"><i class="fas fa-glass-whiskey" style="color:#27ae60;"></i> <strong>牛奶小屋 (Saletalm)</strong> — 喝一杯新鮮高山牛奶！<a href="https://maps.google.com/?q=Saletalm+K%C3%B6nigssee" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><span class="sub">就在 Salet 碼頭旁的小木屋，販售鮮牛奶、奶酪與簡單點心。<br><strong style="color:var(--nature);">*約 5 月中 ~ 10 月中營業，視天氣而定</strong></span></span></li>
                <li class="item"><span class="time">10:30</span><span class="act"><i class="fas fa-hiking" style="color:#8e44ad;"></i> 沿上湖步道健行前往<strong>釣魚小屋 (Fischunkelalm)</strong>。<a href="https://maps.google.com/?q=Fischunkelalm" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><span class="sub"><i class="fas fa-clock"></i> 單程約 <strong>45-60 分鐘</strong>，步道沿上湖湖畔延伸，約 3 公里，偶有岩石窄路但有欄杆。<br><strong style="color:#d35400;">⚡ 穿好走的運動鞋/登山鞋，不適合推嬰兒車。</strong><br>沿途可眺望德國最高瀑布 <strong>Röthbachfall（470m）</strong>，從釣魚小屋再走 30 分鐘可達瀑布腳下。</span></span></li>
                <li class="item"><span class="time">11:30</span><span class="act"><i class="fas fa-home" style="color:#d35400;"></i> 抵達<strong>釣魚小屋 (Fischunkelalm)</strong>！<a href="https://www.nationalpark-berchtesgaden.bayern.de" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 國家公園官網</a><span class="sub">一座位於上湖盡頭的傳統阿爾卑斯牧場小屋，背景是壯闊的山壁與瀑布。<br>可在此稍作休息、拍照，享受寧靜的高山湖畔氛圍。<br><strong style="color:var(--nature);">*小屋約 5 月中 ~ 10 月中有供應簡單飲品與點心</strong></span></span></li>
                <li class="item"><span class="time">12:15</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 原路返回 Salet 碼頭。<span class="sub"><i class="fas fa-clock"></i> 回程步行約 <strong>45-60 分鐘</strong>。邊走邊拍照，悠閒慢行。</span></span></li>
                <li class="item"><span class="time">13:15</span><span class="act"><i class="fas fa-ship" style="color:#2980b9;"></i> <strong>從 Salet 搭船返程，在 St. Bartholomä 下船。</strong><span class="sub"><i class="fas fa-clock"></i> 船程約 <strong>15-20 分鐘</strong>。注意留意 Salet 回程船班時間（旺季約 30 分鐘一班）。</span></span></li>
                <li class="item"><span class="time">13:30</span><span class="act"><i class="fas fa-church" style="color:#c0392b;"></i> <strong>紅蔥頭教堂 — 聖巴爾多祿茂教堂 (St. Bartholomä)</strong><a href="https://www.st-bartholomae.de" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 官網</a><a href="https://maps.google.com/?q=St.+Bartholom%C3%A4+K%C3%B6nigssee" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><span class="sub">因獨特的紅色洋蔥圓頂得名，17 世紀巴洛克教堂，背景是雄偉的 Watzmann 東壁。<br>教堂免費參觀，內部精美但不大，約 15-20 分鐘。</span></span></li>
                <li class="item"><span class="time">14:00</span><div class="meal-box"><i class="fas fa-fish meal-icon"></i><div><strong>🐟 午餐：吃鱒魚！</strong><br><strong>① 漁夫餐廳 Fischerei St. Bartholomä</strong> — 國王湖唯一合法捕魚家族經營的煙燻鱒魚小屋，必吃煙燻鱒魚 (Forelle) + 麵包，簡單純粹！<a href="https://fischervomkoenigssee.de" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 漁夫官網</a><br><strong>② Gaststätte St. Bartholomä</strong> — 前王室狩獵小屋改建的餐廳，有啤酒花園可看湖景，提供完整巴伐利亞料理+烤鱒魚。<a href="https://www.st-bartholomae.de" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 餐廳官網</a></div></div></li>
                <li class="item"><span class="time">15:00</span><span class="act"><i class="fas fa-ship" style="color:#2980b9;"></i> <strong>從 St. Bartholomä 搭船返回國王湖碼頭。</strong><span class="sub"><i class="fas fa-clock"></i> 船程約 <strong>35-40 分鐘</strong>。回程坐船「左側」欣賞湖景。<br><strong style="color:#c0392b;">⚠ 注意：末班船約 17:10-17:40 從 Salet 出發，務必提前確認！</strong><br><a href="https://www.seenschifffahrt.de/en/koenigssee" target="_blank" class="book-link" style="color:#c0392b;"><i class="fas fa-clock"></i> 查詢最新船班時刻</a></span></span></li>
                <li class="item"><span class="time">15:40</span><span class="act">抵達國王湖碼頭，步行至公車站。<span class="sub">碼頭到公車站步行約 5-10 分鐘。</span></span></li>
                <li class="item"><span class="time">16:00</span><span class="act"><i class="fas fa-bus" style="color:#2980b9;"></i> 搭乘 <strong>Bus 841/842</strong> 回貝希特斯加登，再轉 <strong>Bus 840</strong> 返回薩爾斯堡。<a href="https://www.albus.at" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 查詢回程公車</a><span class="sub"><i class="fas fa-clock"></i> 回程全程約 <strong>1 小時 15 分鐘</strong>（841 約 15 分鐘 + 轉乘 + 840 約 1 小時）。</span></span></li>
                <li class="item"><span class="time">17:30</span><span class="act">抵達薩爾斯堡火車站，回飯店稍作休息。</span></li>
                <li class="item"><span class="time">19:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Sternbräu</strong> <a href="https://maps.google.com/?q=Sternbrau+Salzburg" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <a href="https://www.sternbrau.com" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 官網</a><br>薩爾斯堡最古老的傳統啤酒餐廳，推薦炸豬排 (Schnitzel) 與啤酒花園。</div></div></li>
            </ul>
        </div>

        <div class="card salzburg">
            <span class="day-header">Day 3: 7/18 (六) 薩爾茲堡音樂節 🎶 ➔ CK小鎮</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> Salzburger Festspiele 音樂節</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">08:00</span><span class="act"><i class="fas fa-shopping-basket" style="color:#9b59b6;"></i> <strong>節慶開幕式：老城區星期六 (Altstadtsamstag)</strong><span class="sub">📍 <strong>大學廣場綠色市集 (Grünmarkt, Universitätsplatz)</strong><br>週六限定市集，逛新鮮蔬果、花卉與在地小吃攤販，感受道地周末氣氛，免費參加。<br><i class="fas fa-clock"></i> 08:00 — 09:00（約 1 小時）</span></span></li>
                <li class="item"><span class="time">09:00</span><span class="act">舊城區漫步：莫札特出生地與蓋特萊德街。<span class="sub"><i class="fas fa-walking"></i> 從大學廣場步行約 5 分鐘。逛舊城區經典地標與鐵藝招牌街，為音樂節暖身，憑薩爾斯堡卡可免費進入莫札特出生地。約 45 分鐘。</span></span></li>
                <li class="item"><span class="time">09:45</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 步行前往米拉貝爾宮。<span class="sub"><i class="fas fa-clock"></i> 步行約 15 分鐘，經史塔特橋 (Staatsbrücke) 跨越薩爾察河抵達新城區。</span></span></li>
                <li class="item"><span class="time">10:00</span><span class="act"><i class="fas fa-envelope" style="color:#9b59b6;"></i> <strong>節慶開幕式：收藏家專區・特別郵局</strong><span class="sub">📍 <strong>米拉貝爾宮入口 (大理石樓梯 Marmortreppe)</strong><br>限定紀念郵票與音樂節周邊小物，順道欣賞大理石樓梯與宮殿花園景致，免費參加。<br><i class="fas fa-clock"></i> 10:00 — 10:30（約 30 分鐘）</span></span></li>
                <li class="item"><span class="time">10:30</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 步行前往聖彼得學院教堂，準備第一場音樂會。<span class="sub"><i class="fas fa-clock"></i> 步行約 15-20 分鐘，原路跨橋返回舊城區，經莫札特廣場、主教座堂廣場後抵達。<strong style="color:#c0392b;">⚠ 時間較緊湊，建議加快腳步。</strong></span></span></li>
                <li class="item"><span class="time">11:00</span><span class="act"><i class="fas fa-music" style="color:#d35400;"></i> <strong>音樂會①：赫爾穆特·福克斯與彼得·佩因斯廷格爾</strong> <span class="verified-badge">已搶到免費票</span><a href="https://www.salzburgerfestspiele.at/karten/kalender?season=147" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 音樂節時刻表</a><span class="sub">📍 <strong>聖彼得學院教堂 (Stiftskirche St. Peter)</strong><br>節目：節日音響頻譜 (Festival Sound Spectrum)<br><i class="fas fa-clock"></i> 11:00 — 12:00（約 1 小時）</span></span></li>
                <li class="item"><span class="time">12:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：快速輕食</strong><br>兩場音樂會間隔僅 1 小時，建議在舊城區附近買 Bosna 熱狗堡或麵包簡單解決，邊走邊吃前往下一場地。</div></div></li>
                <li class="item"><span class="time">12:40</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 步行前往薩爾斯堡大學大禮堂。<span class="sub"><i class="fas fa-clock"></i> 步行約 5 分鐘，經主教座堂廣場穿過拱門抵達大學廣場 (Universitätsplatz)。提前入座。</span></span></li>
                <li class="item"><span class="time">13:00</span><span class="act"><i class="fas fa-music" style="color:#d35400;"></i> <strong>音樂會②：舊金山州立劇院兒童合唱團與舞蹈小提琴手樂隊</strong> <span class="verified-badge">已搶到免費票</span><a href="https://www.salzburgerfestspiele.at/karten/kalender?season=147" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 音樂節時刻表</a><span class="sub">📍 <strong>薩爾斯堡大學 — 大禮堂 (Große Aula)</strong><br><i class="fas fa-clock"></i> 13:00 — 14:00（約 1 小時）</span></span></li>
                <li class="item"><span class="time">14:00</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 步行前往莫札特基金會大廳。<span class="sub"><i class="fas fa-clock"></i> 步行約 15-20 分鐘：由大學廣場經馬卡特橋 (Makartsteg) 跨越薩爾察河，途經莫札特故居 (Mozart Wohnhaus) 所在的馬卡特廣場 (Makartplatz)，沿施瓦茨街 (Schwarzstraße) 河岸步道可眺望對岸城堡景色，若時間充裕可順道走訪鄰近的米拉貝爾花園。提前入座。</span></span></li>
                <li class="item"><span class="time">15:00</span><span class="act"><i class="fas fa-music" style="color:#c0392b;"></i> <strong>🎉 節慶開幕式 + 音樂會③</strong> <span class="verified-badge">已搶到免費票</span><a href="https://www.salzburgerfestspiele.at/karten/kalender?season=147" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 音樂節時刻表</a><span class="sub">📍 <strong>莫札特基金會 — 大廳 (Stiftung Mozarteum — Großer Saal)</strong><br>節目：維也納青年愛樂樂團 · 博·斯科夫胡斯 (Bo Skovhus) · 邁克爾·萊斯基 (Michael Lesky)<br><i class="fas fa-clock"></i> 15:00 — 16:15（約 1 小時 15 分鐘）<br><strong style="color:#c0392b;">⭐ 薩爾茲堡音樂節開幕重頭戲！</strong></span></span></li>
                <li class="item"><span class="time">16:15</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 步行返回飯店 <strong>Vier Jahreszeiten Salzburg</strong> (Hubert-Sattler-Gasse 12) 拿行李。<span class="sub"><i class="fas fa-clock"></i> 從莫札特基金會沿施瓦茨街走到米拉貝爾廣場，再接 Rainerstraße，步行約 10-15 分鐘抵達飯店。<strong style="color:#c0392b;">⚠ 時間緊湊，建議加快腳步。</strong></span></span></li>
                <li class="item"><span class="time">16:35</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 拿好行李，步行前往火車總站 Lastenstraße 出口集合。<span class="sub"><i class="fas fa-clock"></i> 沿 Rainerstraße 步行約 10-15 分鐘抵達薩爾斯堡火車總站，進站後依指標走地下通道到東側（Schallmoos 側）<strong>Lastenstraße 出口</strong>（與主要西側 Südtiroler Platz 出口相對），即為 CK Shuttle 上車處，於 Lastenstraße 1 前候車。</span></span></li>
                <li class="item"><span class="time">17:00</span><span class="act"><i class="fas fa-shuttle-van" style="color:#2980b9;"></i> 搭乘 CK Shuttle 前往 CK。 <span class="verified-badge">已預約</span><span class="sub">📍 上車：<strong>薩爾斯堡火車總站 (Hauptbahnhof)</strong> — Lastenstraße 出口，Lastenstraße 1<br>📍 下車：<strong>Pension Landauer</strong>，Rooseveltova 32<br>訂票單號：20260718407563・2 人・費用 1980 CZK（已付清，現場付 0 元）</span></span></li>
                <li class="item"><span class="time">20:15</span><span class="act">抵達 CK 小鎮，入住飯店 Pension Landauer。</span></li>
                <li class="item"><span class="time">20:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Papa's Living Restaurant</strong> <a href="https://maps.google.com/?q=Papa's+Living+Restaurant+Cesky+Krumlov" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a></div></div></li>
            </ul>
        </div>

        <div class="card ck">
            <span class="day-header">Day 4: 7/19 (日) CK 晨間時光 ➔ 布拉格</span>
            <ul class="schedule">
                <li class="item"><span class="time">09:00</span><span class="act"><i class="fas fa-water" style="color:#16a085;"></i> <strong>Malecek 泛舟：皮斯卡爾納 → 克魯姆洛夫</strong><span class="sub">📍 報到：<strong>Kaplická 27</strong>（飯店步行約 3-5 分鐘）<br>業者開車接駁到上游皮斯卡爾納起點，順流划回市區，全程約 3-4 小時（含接駁）。<br>雙人獨木舟 770-860 CZK，訂金線上刷卡，尾款現場付現金。</span></span></li>
                <li class="item"><span class="time">13:00</span><span class="act"><i class="fas fa-walking" style="color:#8e44ad;"></i> 划回 Malecek 據點，還裝備、換裝。<span class="sub"><i class="fas fa-clock"></i> 換裝後步行約 5-10 分鐘，經舊城主廣場前往餐廳。</span></span></li>
                <li class="item"><span class="time">13:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：Krčma v Šatlavské</strong> <a href="https://maps.google.com/?q=Krcma+v+Satlavske+Cesky+Krumlov" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span class="verified-badge">已訂位</span><br>著名的地窖炭烤豬腳。</div></div></li>
                <li class="item"><span class="time">14:30</span><span class="act">斗篷橋與城堡花園漫步 ＋ <strong>登彩繪塔 (Castle Tower)</strong>。<span class="sub">同屬城堡建築群，離餐廳與飯店都很近（Rooseveltova 街緊鄰城堡山腳），順遊城堡花園、斗篷橋，再登彩繪塔飽覽全城視野。</span></span></li>
                <li class="item"><span class="time">17:00</span><span class="act"><i class="fas fa-bus" style="color:#2980b9;"></i> 搭乘 RegioJet 巴士前往布拉格。 <span class="verified-badge">已購票</span><span class="sub">📍 上車：<strong>Český Krumlov, AN</strong>，月台 <strong>7</strong>，車廂/座位 <strong>7, 8</strong><br><i class="fas fa-clock"></i> 17:00 發車，車程約 2 小時 45 分鐘</span></span></li>
                <li class="item"><span class="time">19:45</span><span class="act">抵達布拉格 (Na Knížecí)。<span class="sub"><i class="fas fa-ticket-alt"></i> <strong>購買布拉格 72 小時交通票：</strong>Na Knížecí 緊鄰 <strong>Anděl 地鐵站</strong>，站內有 PID 自動售票機（人工櫃檯僅平日開放，週日 19:45 已關閉，但自動售票機不受此限，可用現金/信用卡購買）。買好後記得先在機器/月台驗票機<strong>打印啟用時間</strong>再上車，效期為打印起算 72 小時。</span></span></li>
                <li class="item"><span class="time">20:00</span><span class="act"><i class="fas fa-subway" style="color:#2980b9;"></i> 前往飯店 <strong>Hotel Golden Crown</strong> (Vladislavova 26, Prague 1)。<span class="sub"><i class="fas fa-clock"></i> 在 <strong>Anděl</strong> 站搭乘地鐵 <strong>B 線</strong>（黃線，往 Černý Most 方向），2 站到 <strong>Národní třída</strong> 站下車，車程約 5 分鐘；出站後步行約 5-7 分鐘即可抵達飯店。</span></span></li>
            </ul>
        </div>

        <div class="card prague">
            <span class="day-header">Day 5: 7/20 (一) 布拉格舊城與猶太區</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> 布拉格 72 小時交通票使用中 (第 1 天)</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">08:30</span><span class="act">啟用 72 小時交通票，前往舊城區。<span class="sub">搭地鐵到 Staroměstská 站，步行 5 分鐘到橋頭。</span></span></li>
                <li class="item"><span class="time">09:00</span><span class="act">查理大橋 (Karlův most) <a href="https://maps.google.com/?q=Charles+Bridge+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">早上人少拍照最佳，慢走與拍照約 30-40 分鐘。</span></span></li>
                <li class="item"><span class="time">09:45</span><span class="act">舊城廣場 & 天文鐘 (Orloj) <a href="https://maps.google.com/?q=Old+Town+Square+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">從橋步行 10 分鐘。整點有天文鐘報時表演。</span></span></li>
                <li class="item"><span class="time">10:30</span><span class="act">猶太區 (Josefov) <a href="https://maps.google.com/?q=Josefov+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚶 從舊城廣場步行 5 分鐘。<br>聯票 600 CZK/人，含西班牙會堂、舊猶太墓園、平卡斯會堂等。慢逛約 2-2.5 小時。</span></span></li>
                <li class="item"><span class="time">12:30</span><span class="act">火藥塔與市民會館 <a href="https://maps.google.com/?q=Powder+Tower+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚶 從猶太區步行約 10 分鐘，或搭地鐵 B 線至 Náměstí Republiky 站。<br>火藥塔登頂 150 CZK，俯瞰舊城區。市民會館外觀免費欣賞。</span></span></li>
                <li class="item"><span class="time">13:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：Café Imperial</strong> <span class="verified-badge">已訂位</span> <a href="https://maps.google.com/?q=Cafe+Imperial+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>🚶 從火藥塔步行 5 分鐘。<br>布拉格最美咖啡廳之一，必點帝國蛋糕 (Imperial Torte)。</div></div></li>
                <li class="item"><span class="time">15:00</span><span class="act">舊城區自由漫步。<span class="sub">可逛哈維爾市集 (Havelská) 或提恩教堂周邊巷弄。</span></span></li>
                <li class="item"><span class="time">16:30</span><div class="meal-box"><i class="fas fa-coffee meal-icon"></i><div><strong>下午茶：Café Slavia</strong> <a href="https://maps.google.com/?q=Cafe+Slavia+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>🚶 從舊城區步行 10 分鐘，或搭電車至 Národní divadlo 站。<br>河畔老牌咖啡廳，可看國家劇院與河景，或回飯店休息。</div></div></li>
                <li class="item"><span class="time">19:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Lokál Dlouhááá</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Lokál+Dlouhááá+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>捷克人最愛去的國民啤酒館！東西道地、氣氛熱鬧，而且價格非常親民。必點 Pilsner 啤酒配炸起司或燉牛肉！<br><span style="font-size:0.8rem; color:#666;">📍 Dlouhá 33, Prague 1</span></div></div></li>
            </ul>
        </div>

        <div class="card prague">
            <span class="day-header">Day 6: 7/21 (二) 城堡區與小城區</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> 布拉格 72 小時交通票使用中 (第 2 天)</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">08:30</span><span class="act">搭乘 Tram 22 前往城堡區。<span class="sub">🚃 在 Pražský hrad 站下車。<br><strong style="color:#d35400;"><i class="fas fa-lightbulb"></i> 免排隊攻略：</strong>搭電車從「北側」進入，完全避開正門 (Hradčanské náměstí) 恐怖的安檢長龍與爬坡！</span></span></li>
                <li class="item"><span class="time">09:00</span><span class="act">布拉格城堡 (Circuit B) <a href="https://maps.google.com/?q=Prague+Castle" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span><span class="sub">含聖維特大教堂、舊皇宮、聖喬治教堂、黃金巷。<br><strong style="color:#c0392b;">🎫 務必提早官網買票 (450 CZK) 直接刷 QR Code</strong>，省去現場排售票亭。慢逛約 2.5-3 小時。</span></span></li>
                <li class="item"><span class="time">12:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：Kuchyň</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Kuchyn+Prague+Castle" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>城堡旁景觀餐廳，可看布拉格全景。現場選菜秤重計價。</div></div></li>
                <li class="item"><span class="time">13:30</span><span class="act">聖尼古拉教堂 (小城區) <a href="https://maps.google.com/?q=St.+Nicholas+Church+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚶 從城堡沿階梯 (Zámecké schody) 往下走約 10 分鐘至小城廣場。<br>巴洛克式圓頂教堂，門票 100 CZK。</span></span></li>
                <li class="item"><span class="time">14:30</span><span class="act">佩特任山纜車 (Petřín) <a href="https://maps.google.com/?q=Petrin+Funicular+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚶 從小城廣場步行 10 分鐘至 Újezd 纜車站搭乘。<br>72 小時交通票可免費搭乘！山頂有觀景塔與鏡子迷宮 (各 150 CZK)。</span></span></li>
                <li class="item"><span class="time">16:00</span><span class="act">斯特拉霍夫修道院 <a href="https://maps.google.com/?q=Strahov+Monastery" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚶 沿佩特任山步道往下走約 15 分鐘。<br>可參觀世界最美圖書館之一 (門票 150 CZK)。</span></span></li>
                <li class="item"><span class="time">17:00</span><div class="meal-box"><i class="fas fa-beer meal-icon"></i><div><strong>傍晚小酌：Strahov Monastic Brewery</strong> <a href="https://maps.google.com/?q=Strahov+Monastic+Brewery+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>修道院旁的釀酒廠，喝杯新鮮的 St. Norbert 精釀啤酒。喝完後可搭 Tram 22 輕鬆下山回市區。</div></div></li>
                <li class="item"><span class="time">19:15</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Pork's Vodičkova</strong> <span class="verified-badge">已訂位</span><br>🚃 從修道院搭 Tram 22 到 Národní třída 站 (約 20 分鐘)。<br>💡 <strong>這家餐廳就在你們飯店旁邊 (步行 3 分鐘)！</strong> 可以先回飯店放東西休息一下再走過去吃晚餐。<br>捷克豬肉盛宴！必點烤豬腳 (Vepřové koleno) 搭配 Pilsner Urquell 生啤。<br><span style="font-size:0.8rem; color:#666;">📍 Vodičkova 17, Prague 1</span></div></div></li>
            </ul>
        </div>

        <div class="card prague">
            <span class="day-header">Day 7: 7/22 (三) 卡爾斯特因城堡 (Karlštejn) 一日遊</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> 布拉格 72 小時交通票使用中 (第 3 天)</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">08:15</span><span class="act">出發前往 Praha hl.n. (布拉格中央車站)。<span class="sub">搭乘地鐵前往車站。</span></span></li>
                <li class="item"><span class="time">08:45</span><span class="act">搭乘火車前往 Karlštejn。<span class="sub">車程約 40-45 分鐘。單程火車票約 65 CZK/人。</span></span></li>
                <li class="item"><span class="time">09:30</span><span class="act">抵達 Karlštejn 車站，步行上山。<span class="sub">步行約 25-40 分鐘上坡到城堡，沿途可逛小店。</span></span></li>
                <li class="item"><span class="time">10:10</span><span class="act">Karlštejn Tour 1 開始 <a href="https://maps.google.com/?q=Karlstejn+Castle" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">基本導覽 (皇帝查理四世居所)，約 55 分鐘。</span></span></li>
                <li class="item"><span class="time">11:05</span><span class="act">Karlštejn Tour 2 開始 <span style="color:#c0392b; font-size:0.8rem; font-weight:bold;">需預約</span>。<span class="sub">豪華導覽 (聖十字禮拜堂)，約 100 分鐘。</span></span></li>
                <li class="item"><span class="time">13:15</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：U Adama</strong> <a href="https://maps.google.com/?q=Restaurant+U+Adama+Karlstejn" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>山腳下的捷克傳統餐廳，補充體力。</div></div></li>
                <li class="item"><span class="time">14:30</span><span class="act">步行回車站，準備搭火車回布拉格。<span class="sub">下坡步行約 20 分鐘。</span></span></li>
                <li class="item"><span class="time">15:30</span><span class="act">抵達布拉格，市區自由時間。<span class="sub">可至瓦茨拉夫廣場逛街，或回飯店休息。</span></span></li>
                <li class="item"><span class="time">19:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Las Adelitas</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Las+Adelitas+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>人氣墨西哥料理，換換口味。</div></div></li>
            </ul>
        </div>

        <div class="card prague">
            <span class="day-header">Day 8: 7/23 (四) 高堡區與萊特納公園夕陽</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-exclamation-triangle"></i> 72 小時交通票已過期，需另購單程票</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">09:30</span><span class="act">高堡區 (Vyšehrad) <a href="https://maps.google.com/?q=Vyšehrad+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">免費進入</span>。<span class="sub">🚇 搭地鐵 C 線至 Vyšehrad 站，出站步行 5 分鐘。<br>重點：聖彼得聖保羅教堂、名人墓園、城牆全景。</span></span></li>
                <li class="item"><span class="time">11:30</span><span class="act">伏爾塔瓦河畔散步。<span class="sub">🚶 從高堡步行下坡約 15-20 分鐘抵達河岸。<br>途經跳舞房子 (Dancing House) 拍照。</span></span></li>
                <li class="item"><span class="time">12:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：Café Savoy</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Cafe+Savoy+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>🚶 沿河岸散步直達。<br>小城區河畔名店，新文藝復興天花板極美。推薦 Eggs Benedict。</div></div></li>
                <li class="item"><span class="time">14:00</span><span class="act">舊城區最後採買。<span class="sub">🚶 從 Café Savoy 跨越軍團橋 (Most Legií) 步行約 10-15 分鐘回到舊城區。<br>購買伴手禮：Botanicus 手工皂、Manufaktura 玩具或保養品。</span></span></li>
                <li class="item"><span class="time">17:30</span><span class="act">萊特納公園 (Letná Park) 看夕陽 <a href="https://maps.google.com/?q=Letna+Park+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a>。<span class="sub">🚃 搭乘 Tram 15 或 17 至 Čechův most 站，再步行上坡約 10 分鐘。<br>布拉格最美夕陽觀景點，可俯瞰伏爾塔瓦河上的所有橋樑。</span></span></li>
                <li class="item"><span class="time">18:00</span><div class="meal-box"><i class="fas fa-beer meal-icon"></i><div><strong>傍晚：Letná Beer Garden</strong> <a href="https://maps.google.com/?q=Letna+Beer+Garden+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>在公園內的露天啤酒花園，點杯啤酒配絕美夕陽。</div></div></li>
                <li class="item"><span class="time">19:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>最後的晚餐：U Kroka</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=U+Kroka+Prague" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>隱藏版高分神店！遠離一級觀光戰區，價格實在、口味精緻的家族餐廳，燉牛肉極品！<br><span style="font-size:0.8rem; color:#666;">📍 Vratislavova 12/28, Prague 2</span></div></div></li>
            </ul>
        </div>

        <div class="card vienna">
            <span class="day-header">DAY 9 (7/24 五) — 抵達日</span>
            <ul class="schedule">
                <li class="item"><span class="time">09:01</span><span class="act">搭乘 <strong>RegioJet RJ 1033</strong> 火車前往維也納。 <span class="verified-badge">已購票</span><span class="sub">從 Prague, MS 出發｜車廂 7 / 座位 3, 34｜1,688 CZK</span></span></li>
                <li class="item"><span class="time">13:18</span><span class="act">抵達 Wien Hbf，前往飯店 Check-in。<span class="sub">比原本早到，下午時間更充裕！</span></span></li>
                <li class="item"><span class="time">16:00</span><span class="act">聖史蒂芬大教堂 <a href="https://maps.google.com/?q=St.+Stephen's+Cathedral+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span style="color:#3498db; font-size:0.8rem; font-weight:bold;">外觀免費</span><span class="sub">🚇 搭地鐵 U1/U3 至 Stephansplatz 站，出站即達。<br>哥德式雙塔，維也納地標。內部免費，塔樓 ~€6 可選擇性加購。</span></span></li>
                <li class="item"><span class="time">17:30</span><span class="act">格拉本大街 + 克恩頓大街散步 <a href="https://maps.google.com/?q=Graben+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#3498db; font-size:0.8rem; font-weight:bold;">免費</span><span class="sub">🚶 從大教堂直接開始逛。<br>市中心最熱鬧的行人徒步區，隨意逛、找咖啡廳坐坐。</span></span></li>
                <li class="item"><span class="time">19:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：Gasthaus Pöschl</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Gasthaus+Pöschl+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>🚶 從大教堂步行 5 分鐘。<br>聖史蒂芬大教堂旁步行 5 分鐘的道地維也納老餐館。必點 Wiener Schnitzel（炸豬排）+ Kaiserschmarrn（皇帝煎餅）！<br><span style="font-size:0.8rem; color:#666;">📍 Weihburggasse 17 ｜週一至週六 12:00-23:00（週日公休）</span></div></div></li>
            </ul>
        </div>

        <div class="card vienna">
            <span class="day-header">DAY 10 (7/25 六) — 熊布朗宮 + 卡爾教堂 + 納許市場 + 國會導覽</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> Sisi Pass 使用日・國會導覽 15:45</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">08:45</span><span class="act">熊布朗宮入場 <a href="https://maps.google.com/?q=Schönbrunn+Palace+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span class="verified-badge">已購票</span><span class="sub">🚇 搭地鐵 U4 至 Schönbrunn 站，步行 5-10 分鐘。<br>Sisi Pass 含 Palace Ticket (全館所有房間)。入場時段 08:45-09:00｜2人 €114 (€57/人)。開門人最少，慢逛約 1.5-2 小時。</span></span></li>
                <li class="item"><span class="time">11:00</span><span class="act">熊布朗宮花園 ➔ 葛羅莉亞觀景台 <a href="https://maps.google.com/?q=Gloriette+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span><span class="sub">🚶 從宮殿主體慢走上去約 20 分鐘。花園免費。<br><strong style="color:#e67e22;">葛羅莉亞建議只在下方拍照留念即可，省 20-30 分鐘</strong>，11:30 前準備離開前往下一站。</span></span></li>
                <li class="item"><span class="time">11:45</span><span class="act">搭乘 U4 → Karlsplatz <span class="sub"><i class="fas fa-clock"></i> 車程約 15 分鐘。</span></span></li>
                <li class="item"><span class="time">12:10</span><span class="act">卡爾教堂：外觀 + 拍照 <a href="https://maps.google.com/?q=St.+Charles+Church+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#e67e22; font-size:0.8rem; font-weight:bold;">可取捨</span><span class="sub">Karlsplatz 站出站即達。內部就不進了，在對面水池邊拍照即可，巴洛克圓頂很壯觀。停留約 12:10-13:00。</span></span></li>
                <li class="item"><span class="time">13:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>納許市場：邊逛邊吃當午餐</strong> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <a href="https://maps.google.com/?q=Naschmarkt+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>✅ 攤位全開、週六最熱鬧時段，小吃攤解決午餐一舉兩得。時段 13:00-14:40。</div></div></li>
                <li class="item"><span class="time">14:40</span><div class="meal-box warning"><i class="fas fa-exclamation-circle meal-icon"></i><div><strong>⚠ 風險提醒：手機設 14:40 鬧鐘</strong><br>週六納許市場人多，邊逛邊吃容易失控超時。安檢排隊時間不可壓縮，錯過國會導覽場次無法補，14:40 準時收攤前往搭車。</div></div></li>
                <li class="item"><span class="time">14:45</span><span class="act">Karlsplatz 搭 Tram 1/71 → Parlament <span class="sub"><i class="fas fa-clock"></i> 約 10 分鐘。</span></span></li>
                <li class="item"><span class="time">15:10</span><span class="act">國會報到、安檢 <span class="sub">提早 30 分鐘抵達，帶好護照 + QR code。</span></span></li>
                <li class="item"><span class="time">15:45</span><span class="act">國會導覽 <a href="https://maps.google.com/?q=Austrian+Parliament+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span class="verified-badge">已預約</span><span class="sub">15:45-16:45，約 1 小時。</span></span></li>
                <li class="item"><span class="time">17:00</span><span class="act">晚餐前自由時間，兩個方向擇一：<span class="sub">17:00 導覽結束反而更從容：<br>📍 <strong>就近</strong> — 走去隔壁市政廳廣場（Rathausplatz），參加正在舉辦的<strong>維也納市政廳廣場影展 (Filmfestival am Rathausplatz)</strong>，17:00 過去攤位剛開始熱絡。<br>📍 <strong>回頭</strong> — 搭 U 線回納許市場周邊餐廳，晚上照常營業。</span></span></li>
                <li class="item"><span class="time">17:05</span><span class="act"><i class="fas fa-film" style="color:#8e44ad;"></i> <strong>市政廳廣場影展 (Filmfestival am Rathausplatz)</strong> <a href="https://filmfestival-rathausplatz.at/en/" target="_blank" class="book-link"><i class="fas fa-external-link-alt"></i> 官網</a><span style="color:#3498db; font-size:0.8rem; font-weight:bold;">免費入場</span><span class="sub">📅 檔期：7/4 – 9/6，每日 11:00–24:00（美食攤位營業至 23:00，電影/音樂節目天黑後開始）。<br>國際美食攤位由維也納知名餐廳合作進駐，現場有 5 座大型遮陽/遮雨棚，免票免預約，來去自由。<br><span style="color:#e67e22;">提醒：7/6-7/12 的夏季美食週 (Sommergenusswochen) 已於 7/25 前結束，當天不適用。</span></span></span></li>
                <li class="item"><span class="time">18:00</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>晚餐：依上方選擇的方向</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span><br>市政廳廣場影展美食攤，或納許市場周邊餐廳：<br>🎬 <strong>Rathausplatz 美食攤</strong> — 國際料理選擇多，邊吃邊看廣場氣氛/天黑後的節目<br>🥘 <strong>Umarfisch</strong> — 超人氣海鮮小店，新鮮生蠔+炸魚<br>🍝 <strong>Neni am Naschmarkt</strong> — 中東風味料理，氣氛輕鬆<br>🍺 <strong>Naschmarkt Deli</strong> — 露天座位配啤酒，享受週六夜晚氛圍</div></div></li>
            </ul>
        </div>

        <div class="card vienna">
            <span class="day-header">DAY 11 (7/26 日) — 藝術 + 霍夫堡 + 金色大廳</span>
            <div class="weather-row"><span class="sun-info"><i class="fas fa-ticket-alt"></i> 上美景宮票 + Sisi Pass</span></div>
            <ul class="schedule">
                <li class="item"><span class="time">09:00</span><span class="act">上美景宮入場 <a href="https://maps.google.com/?q=Upper+Belvedere+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span class="verified-badge">已購票</span><span class="sub">🚃 搭乘 Tram D 至 Schloss Belvedere 站，或步行至 Quartier Belvedere 站。<br>克林姆《吻》、席勒、梵谷等藝術品。€23/人｜09:00 入場。開門進去人最少，室內+花園共抓 2.5 小時慢逛。</span></span></li>
                <li class="item"><span class="time">11:30</span><span class="act">美景宮花園散步 <span style="color:#3498db; font-size:0.8rem; font-weight:bold;">免費</span><span class="sub">🚶 從上美景宮往下穿越巴洛克花園，噴泉、雕像，約 20-30 分鐘，不需買票。</span></span></li>
                <li class="item"><span class="time">12:15</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>午餐：Café Central</strong> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span> <a href="https://maps.google.com/?q=Café+Central+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>🚇 搭地鐵 U3 至 Herrengasse 站出站即達。<br>哥德式拱頂大廳，不用多說最美咖啡廳。午餐+咖啡抓 1.5 小時，建議早點到避免排隊。</div></div></li>
                <li class="item"><span class="time">14:00</span><span class="act">霍夫堡 Sisi 博物館 + 皇家公寓 <a href="https://maps.google.com/?q=Hofburg+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span><span class="sub">🚶 從 Café Central 步行 3-5 分鐘。<br>Sisi Pass 直接刷 QR Code 入場，不用排隊。24 個房間，Sisi 皇后私人禮服、旅行箱、日記等。Audio Guide 含在票價內，記得帶耳機。慢逛 2.5-3 小時。</span></span></li>
                <li class="item"><span class="time">17:00</span><span class="act">結束參觀，步行或搭車回飯店。<span class="sub">🚶 霍夫堡到市中心飯店步行或搭車約 10-20 分鐘。</span></span></li>
                <li class="item"><span class="time">17:15</span><span class="act">回飯店換裝休息。<span class="sub">有將近 1 小時，從容準備。</span></span></li>
                <li class="item"><span class="time">18:45</span><div class="meal-box"><i class="fas fa-coffee meal-icon"></i><div><strong>輕食或咖啡 (金色大廳附近)</strong> <span style="background:#ddd; padding:2px 4px; border-radius:3px; font-size:0.7rem;">餐廳</span><br>🚇 搭地鐵 U1/U4 至 Karlsplatz 站，步行 3 分鐘。<br>Musikvereinplatz 周邊有幾家咖啡廳。或音樂會後再正式吃晚餐。</div></div></li>
                <li class="item"><span class="time">19:30</span><span class="act">入場金色大廳 <a href="https://maps.google.com/?q=Musikverein+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a> <span style="color:#27ae60; font-size:0.8rem; font-weight:bold;">必去</span> <span class="verified-badge">已購票</span><span class="sub">🚶 就在 Karlsplatz 站旁。<br>提前 30 分鐘到，欣賞大廳本身也很值得。<br><strong>站票 (Stehplatz)</strong>｜€15/人</span></span></li>
                <li class="item"><span class="time">20:00</span><span class="act"><i class="fas fa-music" style="color:#d35400;"></i> <strong>音樂會：Die SchlossCapelle</strong><span class="sub">曲目：Mozart & Vivaldi｜小提琴：Fritz Kircher<br>📍 Großer Musikvereinssaal（大廳）</span></span></li>
                <li class="item"><span class="time">21:30</span><div class="meal-box"><i class="fas fa-utensils meal-icon"></i><div><strong>音樂會結束 ➔ 最後晚餐</strong> <a href="https://maps.google.com/?q=Cafe+Schwarzenberg+Vienna" target="_blank" class="map-icon" title="Google Maps"><i class="fas fa-map-marker-alt"></i></a><br>附近 Café Schwarzenberg 或 Gasthaus Pöschl，為維也納之旅畫下句點。</div></div></li>
            </ul>
        </div>

        <div class="card flight">
            <span class="day-header">Day 12: 7/27 (一) 返家</span>
            <ul class="schedule">
                <li class="item"><span class="time">09:00</span><span class="act">整理行李退房。</span></li>
                <li class="item"><span class="time">09:30</span><span class="act">搭乘 Railjet 火車前往機場。</span></li>
                <li class="item"><span class="time">10:00</span><span class="act">維也納機場報到、退稅。</span></li>
                <li class="item"><span class="time">12:30</span><span class="act">搭機返台。</span></li>
            </ul>
        </div>
    </div>

    <!-- TAB 2: BOOKING (預訂) -->
    <div id="booking" class="section">
        <div class="card flight">
            <h3>🚆 交通預訂清單</h3>
            <ul class="booking-list">
                <li class="booking-item done">
                    <div class="b-date">7/16</div>
                    <div class="b-info">
                        <span class="b-name">ÖBB 奧地利國鐵</span>
                        <span class="b-time">VIE 機場 ➔ 薩爾斯堡 (09:02)</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/18</div>
                    <div class="b-info">
                        <span class="b-name">CK Shuttle (接駁車)</span>
                        <span class="b-time">薩爾斯堡火車總站 ➔ CK (17:00)</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已預約</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/19</div>
                    <div class="b-info">
                        <span class="b-name">RegioJet 巴士</span>
                        <span class="b-time">CK, AN總站 (月台7) ➔ Prague, Na Knížecí・17:00-19:45・車廂/座位 7, 8</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/24</div>
                    <div class="b-info">
                        <span class="b-name">RegioJet RJ 1033</span>
                        <span class="b-time">Prague, MS (09:01) ➔ Vienna Hbf (13:18)</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
            </ul>
        </div>

        <div class="card urgent">
            <h3>⚠️ 待辦預訂清單 (尚未預訂)</h3>
            <ul class="booking-list">
                <li class="booking-item">
                    <div class="b-date">7/16</div>
                    <div class="b-info">
                        <span class="b-name">薩爾斯堡卡 (24h)</span>
                        <span class="b-time">涵蓋市區交通、纜車、海布倫宮 (可現場買)</span>
                    </div>
                    <a href="https://www.salzburg.info/zh/hotels-offers/salzburg-card" target="_blank" class="b-btn">前往購票</a>
                </li>
                <li class="booking-item">
                    <div class="b-date">7/19</div>
                    <div class="b-info">
                        <span class="b-name">Malecek 泛舟 (CK)</span>
                        <span class="b-time">皮斯卡爾納 → 克魯姆洛夫｜雙人獨木舟</span>
                    </div>
                    <a href="https://www.malecek.cz/en/one-day-trip-26/" target="_blank" class="b-btn">前往預訂</a>
                </li>
                <li class="booking-item">
                    <div class="b-date">7/21</div>
                    <div class="b-info">
                        <span class="b-name">布拉格城堡 Circuit B</span>
                        <span class="b-time">強烈建議先買，免排隊直接入場</span>
                    </div>
                    <a href="https://www.hrad.cz/en" target="_blank" class="b-btn">前往購票</a>
                </li>
                <li class="booking-item">
                    <div class="b-date">7/22</div>
                    <div class="b-info">
                        <span class="b-name">Karlštejn 城堡 Tour</span>
                        <span class="b-time">可選 Tour 1 或 Tour 2 (Tour 2 需強制預約)</span>
                    </div>
                    <a href="https://www.hrad-karlstejn.cz/en" target="_blank" class="b-btn">前往預訂</a>
                </li>
            </ul>
        </div>

        <div class="card salzburg">
            <h3>✅ 已完成：景點與活動</h3>
            <ul class="booking-list">
                <li class="booking-item done">
                    <div class="b-date">7/16</div>
                    <div class="b-info">
                        <span class="b-name">米拉貝爾宮音樂會</span>
                        <span class="b-time">20:00 大理石廳｜Row 3 / Seat 12</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/17</div>
                    <div class="b-info">
                        <span class="b-name">國王湖電動船</span>
                        <span class="b-time">09:15 船班</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/18</div>
                    <div class="b-info">
                        <span class="b-name">薩爾茲堡音樂節 (3場)</span>
                        <span class="b-time">11:00 / 13:00 / 15:00 免費音樂會</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已索票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/25</div>
                    <div class="b-info">
                        <span class="b-name">Sisi Pass (維也納)</span>
                        <span class="b-time">含熊布朗宮 (08:45 入場)、霍夫堡等</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/26</div>
                    <div class="b-info">
                        <span class="b-name">上美景宮</span>
                        <span class="b-time">09:00 入場</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/26</div>
                    <div class="b-info">
                        <span class="b-name">金色大廳音樂會</span>
                        <span class="b-time">20:00 站票</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已購票</span>
                </li>
            </ul>
        </div>

        <div class="card prague">
            <h3>🍽️ 餐廳訂位清單</h3>
            <ul class="booking-list">
                <li class="booking-item done">
                    <div class="b-date">7/19</div>
                    <div class="b-info">
                        <span class="b-name">Krčma v Šatlavské (CK)</span>
                        <span class="b-time">13:30 午餐｜地窖烤豬腳</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已訂位</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/20</div>
                    <div class="b-info">
                        <span class="b-name">Café Imperial (布拉格)</span>
                        <span class="b-time">13:00 午餐｜2 人</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已訂位</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/21</div>
                    <div class="b-info">
                        <span class="b-name">Pork's Vodičkova (布拉格)</span>
                        <span class="b-time">19:15 晚餐</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已訂位</span>
                </li>
                <li class="booking-item done">
                    <div class="b-date">7/24</div>
                    <div class="b-info">
                        <span class="b-name">Gasthaus Pöschl (維也納)</span>
                        <span class="b-time">19:00 晚餐</span>
                    </div>
                    <span class="b-btn" style="background:#bdc3c7; border:none; box-shadow:none;"><i class="fas fa-check"></i> 已訂位</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- TAB 3: HOTELS (住宿) -->
    <div id="hotels" class="section">
        <div class="card info-card" style="margin-bottom: 20px;">
            <h3>✅ 住宿已全數確認</h3>
        </div>

        <div class="card hotel-card">
            <div class="hotel-header"><span class="hotel-city">🇦🇹 薩爾斯堡 (2晚)</span><span class="hotel-dates">7/16 - 7/18</span></div>
            <div class="hotel-options">
                <div class="hotel-item">
                    <span class="hotel-tag tag-confirmed">已預訂</span>
                    <span class="hotel-title">Vier Jahreszeiten Salzburg</span>
                    <div class="hotel-grid">
                        <span><i class="fas fa-map-marker-alt"></i> 新城區</span>
                        <span class="price-est"><i class="fas fa-train"></i> 距車站不遠</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card hotel-card">
            <div class="hotel-header"><span class="hotel-city">🇨🇿 CK小鎮 (1晚)</span><span class="hotel-dates">7/18 - 7/19</span></div>
            <div class="hotel-options">
                <div class="hotel-item">
                    <span class="hotel-tag tag-confirmed">已預訂</span>
                    <span class="hotel-title">Penzion Landauer</span>
                    <div class="hotel-grid">
                        <span><i class="fas fa-home"></i> 溫馨民宿</span>
                        <span class="price-est"><i class="fas fa-suitcase-rolling"></i> 避開石板路</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card hotel-card">
            <div class="hotel-header"><span class="hotel-city">🇨🇿 布拉格 (5晚)</span><span class="hotel-dates">7/19 - 7/24</span></div>
            <div class="hotel-options">
                <div class="hotel-item">
                    <span class="hotel-tag tag-confirmed">已預訂</span>
                    <span class="hotel-title">Hotel Golden Crown</span>
                    <div class="hotel-grid">
                        <span><i class="fas fa-building"></i> 四星飯店</span>
                        <span class="price-est"><i class="fas fa-subway"></i> 地鐵站旁</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card hotel-card">
            <div class="hotel-header"><span class="hotel-city">🇦🇹 維也納 (3晚)</span><span class="hotel-dates">7/24 - 7/27</span></div>
            <div class="hotel-options">
                <div class="hotel-item">
                    <span class="hotel-tag tag-confirmed">已預訂</span>
                    <span class="hotel-title">Leonardo Hotel Vienna Hauptbahnhof</span>
                    <div class="hotel-grid">
                        <span><i class="fas fa-train"></i> 總站樞紐</span>
                        <span class="price-est"><i class="fas fa-plane"></i> 方便去機場</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- TAB 4: ROUTE (路線圖) -->
    <div id="route" class="section">
        <div class="card">
            <h3 style="color:var(--primary);"><i class="fas fa-map-marked-alt"></i> 奧捷環狀移動路線圖</h3>
            <p style="font-size:0.85rem; color:#666;">您的行程是一個非常順暢的「逆時針環狀線」，不走回頭路！</p>

            <div class="map-container" style="background:#f0f8ff; padding: 20px 10px; border-radius:12px; margin-top:15px; position:relative;">
                <svg viewBox="0 0 320 280" style="width: 100%; height: auto; font-family: sans-serif;">
                    <!-- Path lines -->
                    <path d="M 230 220 C 150 240, 80 230, 60 180" fill="transparent" stroke="#3498db" stroke-width="4" stroke-dasharray="6,4" class="map-line-dash" />
                    <path d="M 60 180 C 40 130, 80 110, 110 130" fill="transparent" stroke="#e67e22" stroke-width="4" stroke-dasharray="6,4" class="map-line-dash" />
                    <path d="M 110 130 C 130 90, 110 60, 100 40" fill="transparent" stroke="#2ecc71" stroke-width="4" stroke-dasharray="6,4" class="map-line-dash" />
                    <path d="M 100 40 C 180 30, 240 80, 230 220" fill="transparent" stroke="#9b59b6" stroke-width="4" stroke-dasharray="6,4" class="map-line-dash" />

                    <!-- Nodes -->
                    <circle cx="230" cy="220" r="8" fill="#c0392b" stroke="#fff" stroke-width="2"/>
                    <text x="245" y="225" font-size="14" font-weight="bold" fill="#2c3e50">維也納 (VIE)</text>

                    <circle cx="60" cy="180" r="8" fill="#2980b9" stroke="#fff" stroke-width="2"/>
                    <text x="5" y="170" font-size="14" font-weight="bold" fill="#2c3e50">薩爾斯堡</text>

                    <circle cx="110" cy="130" r="8" fill="#d35400" stroke="#fff" stroke-width="2"/>
                    <text x="125" y="135" font-size="14" font-weight="bold" fill="#2c3e50">CK 小鎮</text>

                    <circle cx="100" cy="40" r="8" fill="#f39c12" stroke="#fff" stroke-width="2"/>
                    <text x="35" y="35" font-size="14" font-weight="bold" fill="#2c3e50">布拉格</text>

                    <!-- Labels -->
                    <rect x="110" y="200" width="85" height="24" rx="4" fill="#3498db" />
                    <text x="116" y="216" font-size="11" font-weight="bold" fill="#fff">ÖBB火車 (3h)</text>

                    <rect x="15" y="115" width="80" height="24" rx="4" fill="#e67e22" />
                    <text x="21" y="131" font-size="11" font-weight="bold" fill="#fff">Shuttle (3h)</text>

                    <rect x="125" y="65" width="60" height="24" rx="4" fill="#2ecc71" />
                    <text x="131" y="81" font-size="11" font-weight="bold" fill="#fff">巴士 (3h)</text>

                    <rect x="195" y="115" width="80" height="24" rx="4" fill="#9b59b6" />
                    <text x="201" y="131" font-size="11" font-weight="bold" fill="#fff">跨國火車 (4h)</text>
                </svg>
            </div>
                <div class="card">
            <h3 style="color:var(--primary);"><i class="fas fa-route"></i> 每日精華路線圖</h3>
            <p style="font-size:0.85rem; color:#666;">各城市與景點的相對位置與移動順序</p>

            <div class="daily-map-card">
                <div class="dm-header">Day 1: 薩爾斯堡與溫特斯堡纜車 🇦🇹</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 C 100 20, 140 100, 200 60 S 280 100, 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🏨</text>
                    <text x="40" y="80" class="dm-label">抵達飯店</text>

                    <circle cx="120" cy="35" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="40" font-size="16" text-anchor="middle">🚠</text>
                    <text x="120" y="60" class="dm-label">溫特斯堡纜車</text>
                    <text x="120" y="72" class="dm-sub">公車 25</text>
                    <circle cx="200" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="80" font-size="16" text-anchor="middle">💦</text>
                    <text x="200" y="100" class="dm-label">海布倫宮</text>
                    <text x="200" y="112" class="dm-sub">公車 25</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🎶</text>
                    <text x="280" y="80" class="dm-label">米拉貝爾宮</text>
                    <text x="280" y="92" class="dm-sub">宮廷音樂會</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 2: 國王湖深度慢遊 🇩🇪</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 Q 100 100, 160 60 T 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🚌</text>
                    <text x="40" y="80" class="dm-label">薩爾斯堡</text>

                    <circle cx="120" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="80" font-size="16" text-anchor="middle">⛰️</text>
                    <text x="120" y="100" class="dm-label">貝希特斯加登</text>
                    <text x="120" y="112" class="dm-sub">公車 840</text>
                    <circle cx="200" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="60" font-size="16" text-anchor="middle">⛴️</text>
                    <text x="200" y="80" class="dm-label">國王湖碼頭</text>
                    <text x="200" y="92" class="dm-sub">公車 841</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">⛪</text>
                    <text x="280" y="80" class="dm-label">聖巴爾多祿茂</text>
                    <text x="280" y="92" class="dm-sub">搭船 35m</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 3-4: 薩爾茲堡 ➔ CK小鎮 ➔ 布拉格</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 Q 80 20, 160 60 T 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🎶</text>
                    <text x="40" y="80" class="dm-label">音樂節開幕</text>
                    <text x="40" y="92" class="dm-sub">Day 3</text>
                    <circle cx="120" cy="25" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="30" font-size="16" text-anchor="middle">🚐</text>
                    <text x="120" y="50" class="dm-label">CK Shuttle</text>
                    <text x="120" y="62" class="dm-sub">3小時</text>
                    <circle cx="200" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="60" font-size="16" text-anchor="middle">🛶</text>
                    <text x="200" y="80" class="dm-label">伏爾塔瓦河</text>
                    <text x="200" y="92" class="dm-sub">Day 4 泛舟</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🚌</text>
                    <text x="280" y="80" class="dm-label">RegioJet</text>
                    <text x="280" y="92" class="dm-sub">前往布拉格</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 5: 布拉格舊城與猶太區 🇨🇿</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 Q 100 20, 160 60 T 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🕰️</text>
                    <text x="40" y="80" class="dm-label">天文鐘</text>

                    <circle cx="120" cy="25" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="30" font-size="16" text-anchor="middle">✡️</text>
                    <text x="120" y="50" class="dm-label">猶太區</text>
                    <text x="120" y="62" class="dm-sub">🚶 5m</text>
                    <circle cx="200" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="60" font-size="16" text-anchor="middle">🕍</text>
                    <text x="200" y="80" class="dm-label">火藥塔</text>
                    <text x="200" y="92" class="dm-sub">🚶 10m</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">☕</text>
                    <text x="280" y="80" class="dm-label">帝國咖啡廳</text>
                    <text x="280" y="92" class="dm-sub">🚶 5m</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 6: 城堡區與小城區 🇨🇿</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 80 Q 100 20, 160 60 T 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="80" font-size="16" text-anchor="middle">🏰</text>
                    <text x="40" y="100" class="dm-label">布拉格城堡</text>
                    <text x="40" y="112" class="dm-sub">電車上山</text>
                    <circle cx="120" cy="35" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="40" font-size="16" text-anchor="middle">⛪</text>
                    <text x="120" y="60" class="dm-label">聖尼古拉教堂</text>
                    <text x="120" y="72" class="dm-sub">🚶 10m</text>
                    <circle cx="200" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="60" font-size="16" text-anchor="middle">🚠</text>
                    <text x="200" y="80" class="dm-label">佩特任山</text>
                    <text x="200" y="92" class="dm-sub">纜車上山</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🍺</text>
                    <text x="280" y="80" class="dm-label">修道院酒廠</text>
                    <text x="280" y="92" class="dm-sub">🚶 15m</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 7: 卡爾斯特因城堡一日遊 🇨🇿</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 Q 160 100, 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🚉</text>
                    <text x="40" y="80" class="dm-label">布拉格車站</text>

                    <circle cx="120" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="80" font-size="16" text-anchor="middle">🚂</text>
                    <text x="120" y="100" class="dm-label">Karlštejn 站</text>
                    <text x="120" y="112" class="dm-sub">火車 45m</text>
                    <circle cx="200" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="60" font-size="16" text-anchor="middle">🍖</text>
                    <text x="200" y="80" class="dm-label">U Adama</text>
                    <text x="200" y="92" class="dm-sub">山腳午餐</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🏰</text>
                    <text x="280" y="80" class="dm-label">山頂城堡</text>
                    <text x="280" y="92" class="dm-sub">🚶 上坡 30m</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 8: 高堡區與萊特納公園夕陽 🇨🇿</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 C 100 20, 140 100, 200 60 S 280 100, 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">🏰</text>
                    <text x="40" y="80" class="dm-label">高堡區</text>
                    <text x="40" y="92" class="dm-sub">🚇 U線</text>
                    <circle cx="120" cy="35" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="40" font-size="16" text-anchor="middle">🚶</text>
                    <text x="120" y="60" class="dm-label">河畔散步</text>
                    <text x="120" y="72" class="dm-sub">跳舞房子</text>
                    <circle cx="200" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="80" font-size="16" text-anchor="middle">☕</text>
                    <text x="200" y="100" class="dm-label">Café Savoy</text>
                    <text x="200" y="112" class="dm-sub">🚶 15m</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🌅</text>
                    <text x="280" y="80" class="dm-label">萊特納公園</text>
                    <text x="280" y="92" class="dm-sub">Tram 上山</text>
                </svg>
            </div>
            <div class="daily-map-card">
                <div class="dm-header">Day 9-11: 維也納宮殿與音樂 🇦🇹</div>
                <svg viewBox="0 0 320 120" style="width: 100%; height: auto; font-family: sans-serif;">
                    <path d="M 40 60 C 100 20, 140 100, 200 60 S 280 100, 280 60" fill="transparent" stroke="#bdc3c7" stroke-width="2" stroke-dasharray="4,4" class="map-line-dash" />
                    <circle cx="40" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="40" y="60" font-size="16" text-anchor="middle">⛪</text>
                    <text x="40" y="80" class="dm-label">聖史蒂芬教堂</text>
                    <text x="40" y="92" class="dm-sub">Day 9</text>
                    <circle cx="120" cy="35" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="120" y="40" font-size="16" text-anchor="middle">👑</text>
                    <text x="120" y="60" class="dm-label">熊布朗宮</text>
                    <text x="120" y="72" class="dm-sub">Day 10</text>
                    <circle cx="200" cy="75" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="200" y="80" font-size="16" text-anchor="middle">🖼️</text>
                    <text x="200" y="100" class="dm-label">美景宮</text>
                    <text x="200" y="112" class="dm-sub">Day 11</text>
                    <circle cx="280" cy="55" r="16" fill="#fff" stroke="#e0e0e0" stroke-width="1"/>
                    <text x="280" y="60" font-size="16" text-anchor="middle">🎵</text>
                    <text x="280" y="80" class="dm-label">金色大廳</text>
                    <text x="280" y="92" class="dm-sub">Day 11</text>
                </svg>
            </div>
        </div>
    </div>
    </div>
    <!-- TAB 5: SHOPPING (購物) -->
    <div id="shopping" class="section">
        <div class="card info-card" style="background:#fff3e0; border-left:4px solid #e67e22;">
            <h3>🛍️ 必買清單與超市指南</h3>
            <p style="font-size:0.9rem; color:#666;">夏天的歐洲是水果天堂！這裡整理了各地的必逛超市與推薦好物。</p>
        </div>

        <div class="card">
            <h3>🛒 當地好逛超市</h3>
            <ul class="booking-list">
                <li class="booking-item">
                    <div class="b-info">
                        <span class="b-name">🇦🇹 奧地利 (薩爾斯堡、維也納)</span>
                        <span class="b-time">
                            <strong>BILLA / BILLA Plus</strong>：最常見、品質佳，熟食與烘焙部很豐富。<br>
                            <strong>SPAR / INTERSPAR</strong>：選擇多，生鮮水果品質非常好。<br>
                            <strong>Hofer</strong>：平價超市 (奧地利版 ALDI)，買水、基本零食最划算！
                        </span>
                    </div>
                </li>
                <li class="booking-item">
                    <div class="b-info">
                        <span class="b-name">🇨🇿 捷克 (CK小鎮、布拉格)</span>
                        <span class="b-time">
                            <strong>Albert</strong>：捷克最普遍的超市，市區隨處可見。<br>
                            <strong>BILLA</strong>：在捷克也很多。<br>
                            <strong>Tesco / Tesco Express</strong>：在布拉格市區很常見，方便買宵夜。
                        </span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="card">
            <h3>💄 必逛藥妝店 (發泡錠、平價保養品)</h3>
            <ul class="booking-list">
                <li class="booking-item">
                    <div class="b-info">
                        <span class="b-name">dm (Drogerie Markt)</span>
                        <span class="b-time">
                            奧地利與捷克都到處可見的德國連鎖藥妝店。<br>
                            💡 <strong>必買推薦</strong>：自有品牌 <strong>Balea</strong> 的保養膠囊 (一盤7顆超便宜)、維他命發泡錠 (不到1歐元)、Kamill 小甘菊護手霜。
                        </span>
                    </div>
                </li>
                <li class="booking-item">
                    <div class="b-info">
                        <span class="b-name">Rossmann</span>
                        <span class="b-time">
                            在捷克非常多。與 dm 齊名的德國藥妝店。<br>
                            💡 <strong>必買推薦</strong>：自有品牌 <strong>ISANA</strong> 的保養膠囊，價格跟 Balea 一樣有競爭力，很好掃貨！
                        </span>
                    </div>
                </li>
                <li class="booking-item">
                    <div class="b-info">
                        <span class="b-name">BIPA / Müller</span>
                        <span class="b-time">
                            <strong>BIPA</strong>：奧地利特有的粉紅色招牌藥妝店，專攻美妝與香水。<br>
                            <strong>Müller</strong>：大型綜合藥妝/生活百貨，在奧地利比較常見，連巧克力、文具玩具都有賣！
                        </span>
                    </div>
                </li>
            </ul>
            <p style="font-size:0.8rem; color:#d35400; margin-top:10px;"><i class="fas fa-exclamation-triangle"></i> <strong>注意：</strong>台灣海關規定「玻璃安瓶」保養品不可攜帶入境，記得買「塑膠膠囊 (Capsules)」那種才不會被沒收喔！</p>
        </div>

        <div class="card">
            <h3>🍒 必買當季水果 (7月)</h3>
            <ul class="booking-list">
                <li class="booking-item"><div class="b-info"><span class="b-name">櫻桃 (Třešně / Kirschen)</span><span class="b-time">7月大產季！在當地超市買便宜又超甜，洗一洗放在飯店當零食。</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">扁桃 / 水蜜桃 (Broskve / Pfirsiche)</span><span class="b-time">扁扁的水蜜桃 (Flat Peach) 又香又甜，皮薄多汁，看到必買。</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">各式莓果 (覆盆莓、藍莓)</span><span class="b-time">夏天是歐洲莓果季，便宜新鮮，買一盒搭配超市優格吃超棒。</span></div></li>
            </ul>
        </div>

        <div class="card">
            <h3>🍫 必吃零食與飲料</h3>
            <ul class="booking-list">
                <li class="booking-item"><div class="b-info"><span class="b-name">Manner 威化餅 (🇦🇹)</span><span class="b-time">粉紅色包裝，經典榛果口味，奧地利國民零食。</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Almdudler 汽水 (🇦🇹)</span><span class="b-time">奧地利國民飲料，喝起來像沒有酒精的蘋果西打加草本味，超清涼！</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Kolonáda 溫泉餅 (🇨🇿)</span><span class="b-time">吃起來像巨大的法蘭酥，有多種口味，超市就能買到。</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Kofola (🇨🇿)</span><span class="b-time">捷克版可樂！帶有草本和淡淡咖啡香，當地餐廳幾乎都有賣。</span></div></li>
            </ul>
        </div>

        <div class="card">
            <h3>🎁 伴手禮推薦</h3>
            <ul class="booking-list">
                <li class="booking-item"><div class="b-info"><span class="b-name">Fürst 莫札特巧克力 (薩爾斯堡)</span><span class="b-time">「銀色錫箔紙、藍色字」才是唯一的原創手工版！只有在薩爾斯堡的幾家專賣店買得到，吃起來不甜膩，必買！</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Botanicus 菠丹妮 (布拉格)</span><span class="b-time">死海泥香皂、玫瑰護手霜。在捷克買比台灣便宜超多！</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Manufaktura 曼菲蘿 (布拉格)</span><span class="b-time">捷克國民保養品牌，推薦「啤酒花系列」與「紅酒系列」，包裝精美適合送禮。</span></div></li>
                <li class="booking-item"><div class="b-info"><span class="b-name">Julius Meinl 小紅帽咖啡 (維也納)</span><span class="b-time">維也納百年咖啡品牌，市區有旗艦店，超市也買得到他們的咖啡豆/粉。</span></div></li>
            </ul>
        </div>
    </div>

</div>

<!-- BOTTOM TABS -->
<div class="tabs">
    <button class="tab-btn active" onclick="switchTab('itinerary', this)"><i class="fas fa-calendar-alt"></i>行程</button>
    <button class="tab-btn" onclick="switchTab('hotels', this)"><i class="fas fa-bed"></i>住宿</button>
    <button class="tab-btn" onclick="switchTab('booking', this)"><i class="fas fa-check-square"></i>預訂</button>
    <button class="tab-btn" onclick="switchTab('shopping', this)"><i class="fas fa-shopping-bag"></i>購物</button>
    <button class="tab-btn" onclick="switchTab('route', this)"><i class="fas fa-map-marked-alt"></i>路線</button>
</div>

<!-- AI Assistant Widget -->
<button class="ai-chat-btn" onclick="toggleAIChat()" title="呼叫旅遊小幫手">
    <i class="fas fa-sparkles"></i>
</button>

<div class="ai-chat-window" id="aiChatWindow">
    <div class="ai-chat-header">
        <span><i class="fas fa-robot"></i> 專屬奧捷旅遊助手</span>
        <button class="ai-chat-close" onclick="toggleAIChat()"><i class="fas fa-chevron-down"></i></button>
    </div>
    <div class="ai-chat-messages" id="aiChatMessages">
        <div class="ai-msg bot">您好！我是您的專屬 AI 旅遊助手 🎒<br><br>這趟 12 天的奧捷之旅，無論是想找餐廳、問當地天氣、需要捷克語/德語翻譯，或是想了解景點的歷史背景，隨時都可以問我喔！</div>
        <div class="typing-indicator" id="typingIndicator">
            <span></span><span></span><span></span>
        </div>
    </div>
    <div class="ai-chat-input-area">
        <input type="text" class="ai-chat-input" id="aiChatInput" placeholder="想問點什麼呢？..." onkeypress="handleAIChatEnter(event)">
        <button class="ai-chat-send" id="aiChatSend" onclick="sendAIMessage()"><i class="fas fa-paper-plane"></i></button>
    </div>
</div>

<script>
    function switchTab(tabId, btn) {
        document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
        btn.classList.add('active');
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function initInteractiveUI() {
        const bookingItems = document.querySelectorAll('#booking .booking-item');
        if(bookingItems.length === 0) return;

        if(!document.querySelector('.progress-container')) {
            const bookingSection = document.getElementById('booking');
            const progressHTML = `
                <div class="progress-container">
                    <div class="progress-header">
                        <span><i class="fas fa-tasks"></i> 出發前預訂總進度</span>
                        <span id="progress-text">0%</span>
                    </div>
                    <div class="progress-bar-bg">
                        <div id="progress-bar-fill" class="progress-bar-fill"></div>
                    </div>
                </div>
            `;
            bookingSection.insertAdjacentHTML('afterbegin', progressHTML);
        }

        bookingItems.forEach((item, index) => {
            if(!item.querySelector('.check-wrapper')) {
                const isDone = item.classList.contains('done');
                const checkHTML = `<div class="check-wrapper"><input type="checkbox" id="check-${index}" onchange="updateProgress()" ${isDone ? 'checked' : ''}></div>`;
                item.insertAdjacentHTML('afterbegin', checkHTML);