style: 演唱會搜尋橫列

assets/js/map.js

@@ -173,7 +173,7 @@
 
         group.appendChild(toggle);
         group.appendChild(body);
-        itineraryList.insertBefore(group, detailPanel);
+        itineraryList.appendChild(group);
         dayGroups.set(dayLabel, { group, toggle, body });
         return dayGroups.get(dayLabel);
     }

concert/concert.html

@@ -18,17 +18,17 @@
             gap: 0 !important;
         }
 
-        body.concert-page #stage-now > .con-1,
+        body.concert-page #stage-now>.con-1,
-        body.concert-page #stage-now > .con-2,
+        body.concert-page #stage-now>.con-2,
-        body.concert-page #stage-now > .con-3,
+        body.concert-page #stage-now>.con-3,
-        body.concert-page #stage-now > .con-4 {
+        body.concert-page #stage-now>.con-4 {
             width: 100%;
             max-width: 100%;
             box-sizing: border-box;
             flex: 0 0 auto;
         }
 
-        body.concert-page #stage-now > .con-4:last-child {
+        body.concert-page #stage-now>.con-4:last-child {
             margin-bottom: 0;
         }
 
@@ -39,6 +39,73 @@
         body.concert-page .con-4[data-tour="ACCESS"]::after {
             z-index: 5;
         }
+
+        /* 巡迴搜尋：樣式對齊 .search-input；第一列 input+btn，第二列白字結果 */
+        .concert-search-box {
+            width: 100%;
+            max-width: 920px;
+            padding: 0 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 14px;
+        }
+
+        .concert-search-row {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .concert-search-row .search-input {
+            flex: 1 1 200px;
+            width: auto;
+            max-width: 320px;
+            margin: 0;
+        }
+
+        .concert-search-row .search-input:focus {
+            width: auto;
+            max-width: 340px;
+            transform: translateY(-2px);
+        }
+
+        .concert-search-btn {
+            flex: 0 0 auto;
+            padding: 12px 22px;
+            border: 2px solid #ffcc00;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: 700;
+            background-color: #ffcc00;
+            color: #2f2f2f;
+            cursor: pointer;
+            outline: none;
+            transition: all 0.3s ease;
+            white-space: nowrap;
+        }
+
+        .concert-search-btn:hover {
+            border-color: #e6b800;
+            box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25);
+        }
+
+        .concert-search-btn:focus {
+            box-shadow: 0 0 10px rgba(255, 204, 0, 0.35);
+        }
+
+        #concert-search-result {
+            display: block;
+            width: 100%;
+            margin: 0;
+            text-align: center;
+            font-size: 0.95rem;
+            line-height: 1.6;
+            color: #fff;
+        }
     </style>
 </head>
 
@@ -55,7 +122,16 @@
     <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
     <canvas id="particles"></canvas>
     <div class="search-section">
-        <input type="text" class="search-input" placeholder="搜尋曲目或場次...">
+        <div class="concert-search-box">
+            <div class="concert-search-row">
+                <input type="text" class="search-input" id="concert-query"
+                    placeholder="搜尋曲目或場次…">
+                <input type="text" class="search-input" id="concert-member"
+                    placeholder="成員或段落（可空白）…">
+                <button type="button" class="concert-search-btn" id="concert-search-btn">查這場巡迴</button>
+            </div>
+            <span id="concert-search-result">輸入後按「查這場巡迴」，會顯示比對結果。</span>
+        </div>
     </div>
     <div class="concert-container">
 

yellow-note/map.html

@@ -8,6 +8,20 @@
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link rel="stylesheet" href="../assets/css/tablet.css">
+    <style>
+        /* display:grid / flex 會蓋掉 HTML hidden，預設只顯示單張地圖 */
+        body.map-page .map-embed-all[hidden],
+        body.map-page .map-embed-single[hidden],
+        body.map-page .map-links-dual[hidden],
+        body.map-page #open-map-link[hidden] {
+            display: none !important;
+        }
+
+        body.map-page .detail-panel {
+            margin-top: 0;
+            margin-bottom: 8px;
+        }
+    </style>
 </head>
 
 <body class="map-page">
@@ -78,7 +92,21 @@
 
     <section class="itinerary-list">
         <!-- 備註：每張卡的 data-* 是「細節面板的資料來源」。
-         你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新下方介紹。 -->
+         你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新上方介紹。 -->
+        <article class="detail-panel" id="detail-panel" aria-live="polite">
+            <div class="detail-photo">
+                <img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
+            </div>
+            <div class="detail-content">
+                <span id="detail-date" class="date">Day 1</span>
+                <h3 id="detail-title">臺灣桃園國際機場</h3>
+                <p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
+                <blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
+                <div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
+                <a id="detail-link" class="detail-link" target="_blank"
+                    href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
+            </div>
+        </article>
         <article class="polaroid-card active" data-member="eun" data-date="殷志源 Day 1" data-title="仁川國際機場"
             data-desc="殷空少搭飛機去台灣高雄 Day 1 起點，從仁川出發。"
             data-quote="高雄，我們來了。" data-tag="#殷志源 #Day1 #出發"
@@ -482,21 +510,6 @@
                 <div class="tag">#高高父子遊台灣 #Day3</div>
             </div>
         </article>
-
-        <article class="detail-panel" id="detail-panel" aria-live="polite">
-            <div class="detail-photo">
-                <img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
-            </div>
-            <div class="detail-content">
-                <span id="detail-date" class="date">Day 1</span>
-                <h3 id="detail-title">臺灣桃園國際機場</h3>
-                <p id="detail-desc">高高父子遊台灣 Day 1 首站，從桃園機場正式開啟三天行程。</p>
-                <blockquote id="detail-quote">「旅程從落地那一刻就開始了。」</blockquote>
-                <div id="detail-tag" class="tag">#高高父子遊台灣 #Day1 #機場</div>
-                <a id="detail-link" class="detail-link" target="_blank"
-                    href="https://maps.google.com/?q=臺灣桃園國際機場">查看此地點</a>
-            </div>
-        </article>
     </section>
 </main>
 <footer>