feat:新增照片

concert.css

@@ -133,7 +133,10 @@ body {
 /* 第一層：演唱會卡片外殼 */
 .con-1,
 .con-2,
-.con-3 {
+.con-3,
+.con-4 {
+    display: flex;
+    flex-direction: column;
     background-color: #fff;
     border-radius: 16px;
     padding: 50px 100px;
@@ -145,6 +148,12 @@ body {
     overflow: hidden;
 }
 
+img {
+    width: 50%;
+    margin: 0 auto;
+    align-items: center;
+}
+
 /* 右上角緞帶：改用獨立 div 或確保不被裁切 */
 [data-tour]::after {
     content: attr(data-tour);

concert.html

@@ -25,7 +25,7 @@
         <!-- 演唱會 con-$ -->
         <div class="con-1" data-tour="YELLOW NOTE">
             <span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp; YELLOW NOTE</span>
-
+            <img src="img/concert/2016.jpg" alt="">
             <!-- 地點 con-$-$ -->
             <div class="con-1-1 attended" data-date1="09.10">
                 <span class="location"> 首爾 | 首爾奧林匹克體操競技場</span>
@@ -153,6 +153,8 @@
         <!-- 演唱會 02 -->
         <div class="con-2" data-tour="20TH ANNIV.">
             <span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
+            <img src="img/concert/2017.jpg" alt="">
+
             <div class="con-2-1">
                 <span class="location">首爾：高尺天空巨蛋</span>
                 <input type="checkbox" id="expand-con-2-1" class="expand-trigger">
@@ -333,6 +335,7 @@
         <!-- 演唱會 03 -->
         <div class="con-3" data-tour="NOW・HERE・AGAIN.">
             <span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
+            <img src="img/concert/2018.jpg" alt="">
             <div class="con-3-1 attended" data-date1="10.13" data-date2="10.14">
                 <span class="location">首爾：首爾奧林匹克體操競技場</span>
                 <input type="checkbox" id="expand-con-3-1" class="expand-trigger">
@@ -366,7 +369,34 @@
                 <label for="expand-con-3-1" class="expand-btn"></label>
             </div>
         </div>
+        <!-- 演唱會 04 -->
+        <!-- 新增：疫情取消場次卡片 -->
+        <div class="con-4" data-tour="ACCESS">
+            <span class="title">2020&nbsp;&nbsp;|&nbsp;&nbsp;CONCERT [ACCESS]</span>
 
+            <!-- 緞帶保留，但內容可以稍微修改或保持原樣以示原本的規劃 -->
+            <img src="img/concert/2020.jpg" alt="">
+
+            <div class="con-4-1 con-access-denied" data-date1="03.06" data-date2="03.07" data-date3="03.08">
+                <span class="location">首爾：慶熙大學和平殿堂</span>
+                <!-- 取消 `attended` class，這會讓左邊變成灰線 -->
+
+                <!-- 核心：用 JS 或 CSS 讓這裡變成空白，或顯示特定文字 -->
+                <div class="track-list canceled-tracks">
+                    <div class="track-item canceled-msg">
+                        <span>很遺憾，因應新型冠狀病毒 (COVID-19) 疫情，本場次演唱會已取消。</span>
+                    </div>
+                    <div class="track-item canceled-msg">
+                        <span>相關退票手續請參閱官方公告。</span>
+                    </div>
+                    <div class="track-item canceled-msg">
+                        <span>期待在更安全的時間與大家重逢。</span>
+                    </div>
+                </div>
+
+                <!-- 移除展開按鈕，因為沒有曲目可展開 -->
+            </div>
+        </div>
     </div>
     </div>