style archive.html.lyrics.html

archive.html

@@ -73,58 +73,75 @@
             </p>
         </section>
 
-        <div id="new" class="archive-block">
+        <section id="new" class="archive-block">
             <h2 class="section-title">啟動新篇章</h2>
             <p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
-            <p><a href="lyrics.html">聽見歌詞細節</a></p>
+            <p><a href="lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
-        </div>
+            <table class="archive-discography">
-
-        <div id="classic" class="archive-block">
-            <h2 class="section-title">輝煌全盛期</h2>
-            <p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
-            <p><a href="classic.html">打開輝煌全盛期整理</a></p>
-        </div>
-
-        <section id="albums">
-            <h2 class="section-title">歷年作品 (精選)</h2>
-            <table>
                 <thead>
                     <tr>
-                        <th>年份</th>
+                        <th scope="col">封面</th>
-                        <th>專輯/作品</th>
+                        <th scope="col">年份</th>
-                        <th>主打歌</th>
+                        <th scope="col">專輯／作品</th>
+                        <th scope="col">主打歌</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr>
-                        <td>1997</td>
+                        <td class="album-cover-cell">
-                        <td>學園別曲</td>
+                            <img src="./img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
-                        <td>學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</td>
+                        </td>
-                    </tr>
-                    <tr>
-                        <td>1998</td>
-                        <td>Road Fighter</td>
-                        <td>Road Fighter / Couple</td>
-                    </tr>
-                    <tr>
-                        <td>1999</td>
-                        <td>Com'Back</td>
-                        <td>Com'Back</td>
-                    </tr>
-                    <tr>
                         <td>2016</td>
                         <td><a href="lyrics.html">數位單曲</a></td>
                         <td><a href="lyrics.html">Three Words (三個詞)</a></td>
                     </tr>
                     <tr>
+                        <td class="album-cover-cell">
+                            <img src="./img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
+                        </td>
                         <td>2017</td>
-                        <td>ANOTHER LIGHT</td>
+                        <td><a href="concert.html#stage-now">ANOTHER LIGHT</a></td>
-                        <td>Something Special / Smile</td>
+                        <td><a href="concert.html#stage-now">Something Special / Smile</a></td>
                     </tr>
                     <tr>
+                        <td class="album-cover-cell">
+                            <img src="./img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
+                        </td>
                         <td>2020</td>
-                        <td>ALL FOR YOU</td>
+                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
-                        <td>ALL FOR YOU</td>
+                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+        <section id="classic" class="archive-block">
+            <h2 class="section-title">輝煌全盛期</h2>
+            <p>主打的記憶點、b-side 的伏筆、舞步與應援口號——想一次收進收藏庫，往這張整理頁走。</p>
+            <p><a href="classic.html#classic-albums">打開輝煌全盛期整理</a></p>
+            <table class="archive-discography">
+                <thead>
+                    <tr>
+                        <th scope="col">年份</th>
+                        <th scope="col">專輯／作品</th>
+                        <th scope="col">主打歌</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>1997</td>
+                        <td><a href="classic.html#classic-albums">學園別曲</a></td>
+                        <td><a href="classic.html#classic-albums">學園別曲 / 男兒之路 (Pom Saeng Pom Sa)</a></td>
+                    </tr>
+                    <tr>
+                        <td>1998</td>
+                        <td><a href="classic.html#classic-albums">Road Fighter</a></td>
+                        <td><a href="classic.html#classic-albums">Road Fighter / Couple</a></td>
+                    </tr>
+                    <tr>
+                        <td>1999</td>
+                        <td><a href="classic.html#classic-albums">Com'Back</a></td>
+                        <td><a href="classic.html#classic-albums">Com'Back</a></td>
                     </tr>
                 </tbody>
             </table>

index.css

@@ -90,8 +90,40 @@
     padding-bottom: 0;
 }
 
-#archive .archive-block {
+/* archive.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
-    margin: 1.75rem 0;
+section.archive-block p {
+    color: #4a4a4a;
+    line-height: 1.7;
+    margin: 0 0 0.75rem;
+}
+
+section.archive-block p:last-child {
+    margin-bottom: 0;
+}
+
+/* archive.html：精選作品表（含封面欄） */
+.archive-discography {
+    width: 100%;
+    margin-top: 1.25rem;
+}
+
+.archive-discography .album-cover-cell {
+    width: 96px;
+    vertical-align: middle;
+    text-align: center;
+    padding: 10px 8px;
+}
+
+.archive-discography .album-cover-cell img {
+    width: 76px;
+    height: 76px;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 204, 0, 0.28);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    display: block;
+    margin: 0 auto;
+    background: #fff;
 }
 
 .landing-intro {

index.html

@@ -67,14 +67,6 @@
     <canvas id="particles"></canvas>
 
     <div class="container">
-        <section id="mission">
-            <h2 class="section-title">成立的初衷</h2>
-            <div class="intro-text">
-                <p class="intro-text">
-                    這裡先端出舞台上與綜藝裡最刺眼、也最誠實的魅力，接住每一次「怎麼又帥又好笑」的心跳；你越往深處挖，越容易聽懂那場 <span class="highlight">仍在續寫的傳奇</span>。
-                </p>
-            </div>
-        </section>
 
         <section id="start">
             <h2 class="section-title">好奇的開端</h2>
@@ -84,13 +76,45 @@
                 </p>
                 <p class="core-description">
                     水晶男孩（SECHSKIES）的魔力在於：即便錯過他們第一次站上大型舞台的年代，依然會被他們 <span class="highlight">熱血、真誠且專業</span>
-                    的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
+                    的魅力所感動。這裡不僅是資訊站，更是由熱愛凝聚的空間。從台上的職人氣場，到台下像家人吵架又像互相撐腰的 <span
+                        class="highlight">反差</span>，把「現在入坑」變成一種完全被允許的日常。
                 </p>
                 <p class="call-to-action">
                     經典不是博物館的玻璃櫃，而是每次重播都讓人想跟著跳的節奏。加入我們，一起把手上的應援色舉高一點。
                 </p>
             </div>
         </section>
+        <section id="mission" class="mission-section">
+            <h2 class="section-title">成立的初衷</h2>
+            <div class="mission-layout">
+                <div class="mission-content">
+                    <p>
+                        本站是以 <span class="highlight">SECHSKIES 水晶男孩</span> 為核心的數位推廣部，旨在透過 <span class="highlight">專業的視覺策展</span> 宣傳成員魅力與 <span class="highlight">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="highlight">靈感主軸</span>，延伸至 <span class="highlight">網頁開發、視覺設計與內容企劃</span> 等多重領域，將對偶像的喜愛轉化為 <span class="highlight">實質的專業養分</span>。在這裡，你不只能探索他們的 <span class="highlight">傳奇軌跡</span>，更能見證追星如何激發 <span class="highlight">創作潛能</span>。
+                    </p>
+
+                    <div class="logo-concept">
+                        <h3>LOGO 設計理念</h3>
+                        <p>
+                            <span class="highlight">「晶」</span>字發想來自<span class="highlight">六角形的水晶</span>，為了強調水晶男孩<span class="highlight">初心為六人</span>。上半部形似<span class="highlight">數字 6</span>，搭配演唱會必備的<span class="highlight">手燈圖案</span>，代表粉絲和水晶<span class="highlight">密不可分的關係</span>。色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從一片漆黑瞬間發亮，映入眼簾的是一片<span class="highlight">黃色海洋</span>。以此片段為契機，設計成<span class="highlight">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
+                        </p>
+                    </div>
+                </div>
+
+                <div class="mission-visual">
+                    <div class="logo-wrapper">
+                        <img src="./img/logo.png" alt="SECHSKIES Logo Concept">
+                        <span class="caption">
+                            <span class="arrow-icon" aria-hidden="true">↓</span>
+                            設計語彙：六角、黃海與初心
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="quote-box">
+                「我們要用這座<span class="highlight">藝廊般的網站</span>證明：追星的孩子不僅不會變壞，更會因為那份<span class="highlight">守護的熱情</span>，讓現在的自己變得比追星前的自己還要厲害。」
+            </div>
+        </section>
 
         <section id="timeline" class="story-archive">
             <h2 class="section-title">跨時空軌跡</h2>
@@ -127,7 +151,7 @@
             </div>
         </section>
 
-        <section id="story">
+        <section id="story" class="story-archive">
             <h2 class="section-title">傳奇的轉折</h2>
             <div class="subtitle-wrap">
                 <span class="sub-title">PLOT TWIST</span>
@@ -137,26 +161,28 @@
                 <a href="chronicle.html">開啟完整紀實篇章</a>
             </p>
 
-            <article id="special" class="story-node">
+            <div class="merged-storyline">
+                <article id="special" class="story-node" data-era="六六歌">
                     <h3>六六歌實錄</h3>
                     <p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
                     <p><a href="chronicle.html#ssg2">對照這一段幕後敘事</a></p>
                 </article>
-            <article id="negotiate" class="story-node">
+                <article id="negotiate" class="story-node" data-era="交涉">
                     <h3>命運的交涉</h3>
                     <p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
                     <p><a href="chronicle.html#negotiate">讀交涉與對話肌理</a></p>
                 </article>
-            <article id="complete" class="story-node">
+                <article id="complete" class="story-node" data-era="歸位">
                     <h3>拼圖的歸位</h3>
                     <p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
                     <p><a href="chronicle.html#gather">從「召集」段開始補這條線</a></p>
                 </article>
-            <article id="past" class="story-node">
+                <article id="past" class="story-node" data-era="最初">
                     <h3>巔峰與雨天</h3>
                     <p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
                     <p><a href="chronicle.html#sechskies-profile">讀這條脈絡的起點</a></p>
                 </article>
+            </div>
         </section>
     </div>
 

lyrics.css

@@ -1,73 +1,155 @@
-:root {
+/* 歌詞頁：載入於 style.css 之後，並以 .lyrics-page 提高權重，避免被全站 table / body 洗版 */
-    /* 定義一個基礎大小，這就是你的「倍率開關」 */
+
-    font-size: 26px;
+body.lyrics-page {
-}
+    --lyrics-bg: #2a2a2a;
+    --lyrics-paper: #faf6e8;
+    --lyrics-accent: #f5dfa8;
+    --lyrics-muted: #c9c2a8;
 
-.nanum-pen-script-regular {
     font-family: "Nanum Pen Script", cursive;
     font-weight: 400;
     font-style: normal;
+    background-color: var(--lyrics-bg) !important;
+    color: #fff !important;
+    margin: 0 !important;
+    padding: clamp(1rem, 4vw, 2.5rem) !important;
+    min-height: 100dvh;
+    line-height: 1.55;
+    overflow-x: hidden;
+    font-size: clamp(18px, 2.8vw, 26px);
 }
 
-body {
+body.lyrics-page h1 {
-    margin: 10%;
+    color: var(--lyrics-accent);
-    background-color: #333333;
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
-    color: #ffffff;
+    text-align: center;
+    margin: 0 0 1.25rem;
+    letter-spacing: 0.02em;
 }
 
-h1 {
+body.lyrics-page .lyrics-layout {
-    color: #FAEAB1;
+    max-width: 1100px;
-    font-size: 2.5rem;
+    margin: 0 auto;
-    /* 想要這區特別大一點就設 2.5 */
 }
 
-.main-left {
+body.lyrics-page .lyrics-main-table {
-    width: 50%;
+    width: 100%;
+    max-width: 1100px;
+    margin: 0 auto;
+    border-collapse: separate;
+    border-spacing: clamp(0.75rem, 2.5vw, 1.75rem);
+    background: transparent !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+}
+
+body.lyrics-page .lyrics-main-table > tbody > tr > td {
+    padding: 0.35rem 0.5rem !important;
+    border: none !important;
+    border-bottom: none !important;
+    text-align: left !important;
+    color: inherit !important;
+    vertical-align: top !important;
+    background: transparent !important;
+}
+
+body.lyrics-page .main-left {
+    width: 48%;
+    max-width: 480px;
     vertical-align: top;
-    gap: 1rem;
-    /* padding-right: 40px; */
 }
 
-.songInfo {
+body.lyrics-page .main-left iframe {
-    color: #FAEAB1;
+    display: block;
+    width: 100%;
+    border: 0;
+    border-radius: 10px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
+}
+
+body.lyrics-page .songInfo {
+    color: var(--lyrics-accent);
     display: grid;
     grid-template-columns: max-content 1fr;
-    gap: -10px;
+    gap: 0.4rem 0.75rem;
-    align-items: center;
+    align-items: baseline;
-    gap: 0.5rem;
+    font-size: 1rem;
-    /* 原本的 8px 大約是 0.5rem */
+    margin-top: 1rem;
-    font-size: 1.2rem;
-    /* 想要這區特別大一點就設 1.2 */
 }
 
-/* .songInfo dd{
+body.lyrics-page .songInfo dt {
-    margin: 5px 0;
+    font-weight: 700;
-} */
+    color: var(--lyrics-muted);
-p {
+}
+
+body.lyrics-page .songInfo dd {
+    margin: 0;
+}
+
+body.lyrics-page .lyrics-main-table p {
     color: #fff;
-    line-height: 1.5;
+    line-height: 1.55;
-    gap: 0.5rem;
+    font-size: clamp(1rem, 2.2vw, 1.35rem);
-    /* 原本的 8px 大約是 0.5rem */
+    margin: 0;
-    font-size: 1.5rem;
+    max-width: 52ch;
-    /* 想要這區特別大一點就設 1.2 */
-    margin: auto;
 }
 
-table {
+body.lyrics-page a {
-    border-spacing: 40px;
+    color: #b8e6ff;
-    /* 左右間距 20px，上下 0 */
+    text-decoration: underline;
-    border-collapse: separate;
+    text-underline-offset: 0.15em;
-    /* 必須是 separate，spacing 才會生效 */
 }
 
-/* width: 100%; */
+body.lyrics-page a:hover {
-/* border:#fff solid 1px; */
+    color: #fff;
-a {
-    color: #FFF;
-    text-decoration: none;
 }
 
-.contact i {
+body.lyrics-page .contact {
-    font-size: 0.6em;
+    color: var(--lyrics-paper);
-    margin-right: 0.3rem;
+    font-size: 0.95rem;
+    line-height: 1.65;
+    max-width: 42ch;
+}
+
+body.lyrics-page .contact h3 {
+    color: var(--lyrics-accent);
+    font-size: 1.15rem;
+    margin: 0.35rem 0 0.5rem;
+    font-family: "Nanum Pen Script", cursive;
+}
+
+body.lyrics-page .contact img {
+    max-height: 36px;
+    width: auto;
+    display: block;
+    margin-bottom: 0.35rem;
+}
+
+body.lyrics-page .contact i {
+    font-size: 0.75em;
+    margin-right: 0.35rem;
+    color: var(--lyrics-accent);
+}
+
+@media (max-width: 820px) {
+    body.lyrics-page .lyrics-main-table,
+    body.lyrics-page .lyrics-main-table tbody,
+    body.lyrics-page .lyrics-main-table tr,
+    body.lyrics-page .lyrics-main-table td {
+        display: block;
+        width: 100% !important;
+    }
+
+    body.lyrics-page .lyrics-main-table {
+        border-spacing: 0;
+    }
+
+    body.lyrics-page .main-left {
+        max-width: none;
+        margin-bottom: 1.5rem;
+    }
+
+    body.lyrics-page .lyrics-main-table > tbody > tr > td + td {
+        margin-top: 0.5rem;
+    }
 }

lyrics.html

@@ -1,107 +1,30 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>세 단어 (THREE WORDS) — SECHSKIES</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="lyrics.css">
     <link rel="stylesheet" href="style.css">
-    <style>
+    <link rel="stylesheet" href="lyrics.css">
-        :root {
-            /* 定義一個基礎大小，這就是你的「倍率開關」 */
-            font-size: 26px;
-        }
-
-        .nanum-pen-script-regular {
-            font-family: "Nanum Pen Script", cursive;
-            font-weight: 400;
-            font-style: normal;
-        }
-
-        body {
-            margin: 10%;
-            background-color: #333333;
-            color: #ffffff;
-        }
-
-        h1 {
-            color: #FAEAB1;
-            font-size: 2.5rem;
-            /* 想要這區特別大一點就設 2.5 */
-        }
-
-        .main-left {
-            width: 50%;
-            vertical-align: top;
-            gap: 1rem;
-            /* padding-right: 40px; */
-        }
-
-        .songInfo {
-            color: #FAEAB1;
-            display: grid;
-            grid-template-columns: max-content 1fr;
-            gap: -10px;
-            align-items: center;
-            gap: 0.5rem;
-            /* 原本的 8px 大約是 0.5rem */
-            font-size: 1.2rem;
-            /* 想要這區特別大一點就設 1.2 */
-        }
-
-        /* .songInfo dd{
-            margin: 5px 0;
-        } */
-        p {
-            color: #fff;
-            line-height: 1.5;
-            gap: 0.5rem;
-            /* 原本的 8px 大約是 0.5rem */
-            font-size: 1.5rem;
-            /* 想要這區特別大一點就設 1.2 */
-            margin: auto;
-        }
-
-        table {
-            border-spacing: 40px;
-            /* 左右間距 20px，上下 0 */
-            border-collapse: separate;
-            /* 必須是 separate，spacing 才會生效 */
-        }
-
-        table,
-        td {
-            /* width: 100%; */
-            /* border:#fff solid 1px; */
-        }
-
-        a {
-            color: #FFF;
-            text-decoration: none;
-        }
-
-        .contact i {
-            font-size: 0.6em;
-            margin-right: 0.3rem;
-        }
-    </style>
     <link rel="stylesheet" href="tablet.css">
 </head>
 
-<body class="nanum-pen-script-regular">
+<body class="lyrics-page">
+    <div class="lyrics-layout">
         <h1>세 단어 (THREE WORDS)</h1>
-    <table>
+        <table class="lyrics-main-table">
             <tr>
-            <td <div class="main-left">
+                <td class="main-left">
-                <iframe width="100%" style="aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/m7Zt_p9S-yg"
+                    <iframe width="560" height="315" style="aspect-ratio: 16 / 9; max-width: 100%; height: auto; min-height: 200px;"
-                    title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" frameborder="0"
+                        src="https://www.youtube.com/embed/m7Zt_p9S-yg"
+                        title="SECHSKIES - ‘세 단어 (THREE WORDS)’ M/V" allowfullscreen
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+                        referrerpolicy="strict-origin-when-cross-origin"></iframe>
                     <dl class="songInfo">
                         <dt>Artist</dt>
                         <dd>SECHSKIES</dd>
@@ -112,7 +35,6 @@
                         <dt>Genre</dt>
                         <dd>K-Pop</dd>
                     </dl>
-                </div>
                 </td>
                 <td>
                     <p>다신 볼 수 없을 것만 같던<br>
@@ -169,25 +91,30 @@
                 </td>
             </tr>
             <tr>
-            <td><iframe
+                <td colspan="2">
+                    <iframe
                         src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3163.2574996244366!2d126.9052587762962!3d37.54899662513289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c992bb3f6a887%3A0x6058954f87325221!2sYG%20Entertainment!5e0!3m2!1szh-TW!2stw!4v1776239000614!5m2!1szh-TW!2stw"
-                    width="100%" style="aspect-ratio: 16 / 9; border:0;" allowfullscreen="" loading="lazy"
+                        width="100%" style="aspect-ratio: 16 / 9; max-width: 720px; border: 0; border-radius: 10px; display: block; margin: 1.5rem auto 0;"
-                    referrerpolicy="no-referrer-when-downgrade"></iframe></td>
+                        allowfullscreen loading="lazy"
-            <td>
+                        referrerpolicy="no-referrer-when-downgrade"></iframe>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
                     <div class="contact">
-                    <img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="">
+                        <img src="https://ygfamily.com/home/assets/images/f_logo.svg" alt="YG Entertainment logo">
                         <h3>YG Entertainment</h3>
-                    <i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea <br>
+                        <p>
+                            <i class="fa-solid fa-map-location-dot"></i> Huiujeong-ro 1-gil, Mapo-gu, Seoul, South Korea<br>
                             <i class="fas fa-globe"></i> <a href="https://www.ygfamily.com/"
-                        target="_blank">https://www.ygfamily.com/</a><br>
+                                target="_blank" rel="noopener noreferrer">https://www.ygfamily.com/</a><br>
                             <i class="fas fa-phone"></i> +82231421104
+                        </p>
                     </div>
                 </td>
             </tr>
         </table>
-
+    </div>
-
-
 </body>
 
 </html>

style.css

@@ -383,6 +383,116 @@ section {
 
 }
 
+/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
+.mission-section > .section-title {
+    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
+}
+
+.mission-section .mission-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 7fr) minmax(200px, 3fr);
+    gap: clamp(1.5rem, 4vw, 3rem);
+    align-items: start;
+}
+
+.mission-content > p,
+.mission-content .logo-concept p {
+    color: #4a4a4a;
+    font-size: 1rem;
+    line-height: 1.6;
+    text-align: left;
+    margin: 0 0 1rem;
+}
+
+.mission-content .logo-concept {
+    margin-top: 1.75rem;
+    padding-top: 0;
+}
+
+.mission-content .logo-concept h3 {
+    font-size: 1.08rem;
+    letter-spacing: 0.18em;
+    color: var(--primary);
+    margin: 0 0 0.85rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    padding: 0.65rem 0;
+    border-top: 2px solid rgba(255, 204, 0, 0.5);
+    border-bottom: 2px solid rgba(255, 204, 0, 0.5);
+}
+
+/* 金句：獨立於雙欄之下，全區塊寬度內致中 */
+.mission-section > .quote-box {
+    width: 100%;
+    max-width: 44rem;
+    margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
+    padding: 1rem 1.25rem;
+    background: linear-gradient(135deg, var(--surface-soft) 0%, #fff7da 100%);
+    border-left: 4px solid var(--primary);
+    border-radius: 10px;
+    color: #55420a;
+    font-size: 1.02rem;
+    font-weight: 600;
+    line-height: 1.65;
+    text-align: center;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+}
+
+.mission-visual {
+    align-self: start;
+}
+
+.mission-visual .logo-wrapper {
+    position: sticky;
+    top: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.mission-visual .logo-wrapper img {
+    width: 100%;
+    max-width: min(320px, 100%);
+    height: auto;
+    display: block;
+    object-fit: contain;
+}
+
+.mission-visual .caption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2rem;
+    margin-top: 0.65rem;
+    font-size: 0.78rem;
+    line-height: 1.45;
+    color: #6a6a6a;
+    max-width: 14rem;
+}
+
+.mission-visual .arrow-icon {
+    font-size: 0.95rem;
+    line-height: 1;
+    color: var(--primary);
+    font-style: normal;
+}
+
+@media (max-width: 900px) {
+    .mission-section .mission-layout {
+        grid-template-columns: 1fr;
+        gap: 1.75rem;
+    }
+
+    .mission-visual .logo-wrapper {
+        position: static;
+    }
+
+    .mission-visual .logo-wrapper img {
+        max-width: 260px;
+    }
+}
+
 /* 作品列表表格 */
 table {
     width: 100%;
@@ -440,8 +550,9 @@ a {
 
 .story-node {
     position: relative;
-    width: calc(50% - 34px);
+    width: 100%;
-    margin-bottom: 28px;
+    max-width: 42rem;
+    margin: 0 0 28px;
     padding: 16px 18px;
     background: linear-gradient(135deg, var(--surface-soft) 0%, #fff 100%);
     border: 1px solid rgba(255, 204, 0, 0.18);
@@ -449,8 +560,21 @@ a {
     box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
 }
 
-/* 備註：改回 Font Awesome 鑽石圖示，並加上 border-box 讓圓圈節點中心準確對齊主軸 */
+/* 時間軸節點：僅在 merged-storyline 內顯示鑽石與年代章 */
-.story-node::before {
+.story-node::before,
+.story-node::after {
+    content: none;
+    display: none;
+}
+
+.merged-storyline .story-node {
+    width: calc(50% - 34px);
+    max-width: none;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.merged-storyline .story-node::before {
     content: "\f3a5";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
@@ -465,13 +589,10 @@ a {
     border-radius: 50%;
     background: #fffdf5;
     color: #e0b400;
-    /* border: 2px solid var(--primary);
-    box-shadow: 0 0 0 4px var(--surface), 0 4px 10px rgba(0, 0, 0, 0.14); */
     z-index: 2;
 }
 
-/* 備註：時間標籤改成 concert 的日期章語言，並把字級放大到原本兩倍以上 */
+.merged-storyline .story-node::after {
-.story-node::after {
     content: attr(data-era);
     position: absolute;
     top: -14px;
@@ -485,6 +606,7 @@ a {
     border: 2px solid #fff;
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.16);
     z-index: 3;
+    display: block;
 }
 
 /* 備註：改用奇偶自動分邊，新增中間節點時不需要手動加 class */
@@ -539,22 +661,18 @@ a {
         transform: none;
     }
 
-    .story-node {
+    .merged-storyline .story-node {
         width: calc(100% - 44px);
-        margin-left: 44px;
-    }
-
-    .story-node {
         margin-right: 0;
         margin-left: 44px;
     }
 
-    .story-node::before {
+    .merged-storyline .story-node::before {
         left: -39px;
         right: auto;
     }
 
-    .story-node::after {
+    .merged-storyline .story-node::after {
         left: 14px;
         right: auto;
         transform: rotate(-8deg);

tablet.css

@@ -180,36 +180,34 @@
         max-width: 100%;
     }
 
-    /* 歌詞頁 body class（tablet.css 需載於該頁 inline style 之後才可蓋過行內 :root） */
+    /* 歌詞頁 */
-    body.nanum-pen-script-regular {
+    body.lyrics-page {
         margin: clamp(24px, 5vw, 56px) !important;
         box-sizing: border-box;
         overflow-x: hidden;
     }
 
-    html:has(body.nanum-pen-script-regular) {
+    html:has(body.lyrics-page) {
         font-size: 118.75% !important;
     }
 
-    body.nanum-pen-script-regular table {
+    body.lyrics-page .lyrics-main-table {
         border-spacing: clamp(12px, 3vw, 24px) !important;
         max-width: 100%;
-        display: block;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
     }
 
-    body.nanum-pen-script-regular .main-left {
+    body.lyrics-page .main-left {
         width: 100% !important;
         display: block;
         box-sizing: border-box;
     }
 
-    body.nanum-pen-script-regular p {
+    body.lyrics-page .lyrics-main-table p {
         font-size: 1.2rem !important;
+        max-width: none;
     }
 
-    body.nanum-pen-script-regular h1 {
+    body.lyrics-page h1 {
         font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
     }
 }