/* ==========================================================================
   🎨 1. 全局變數與基礎樣式定義 (Variables & Reset)
   ========================================================================== */
:root {
    --inn-bg: #f9fafb;          
    --inn-card: #FFFFFF;        
    --inn-text: #2C2A29;        
    --inn-muted: #8A8782;       
    --inn-accent: #C5A880;      
    --inn-border: #E8E3DB;      
    --radius-round: 30px;       
    --radius-card: 24px;
   --ink:       #1a1916;
  --ink2:      #5c5a54;
  --ink3:      #9a9890;
  --surface:   #ffffff;
  --bg:        #f9fafb;
  --bg2:       #f6f7f8;
  --accent:    #2a1f4e;
  --accent2:   #6b5fd4;
  --accent3:   #9b8fe8;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.14);
  --serif:     'Noto Serif TC', serif,Georgia, sans-serif;
  --sans:      'Noto Sans TC', sans-serif;
  --r-md:      10px;
  --r-lg:      16px;
  --r-xl:      20px;
  --r-pill:    999px;
}
a { color: inherit; text-decoration: none; }
* { 
    box-sizing: border-box; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}

body {
    font-family: 'Plus Jakarta Sans', 'Noto Serif TC', serif;
    background-color: var(--inn-bg);
    color: var(--inn-text);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ════════════════════════════════
   NAV
════════════════════════════════ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border2);
  padding: 0 40px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent2);
  animation: pulse-dot 2s ease-in-out infinite;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-size: 13px;
  color: var(--ink2);
  letter-spacing: 0.03em;
  transition: color 0.15s;
}

.nav-links a:hover { color: var(--ink); }

.nav-cta {
  background: var(--accent);
  color: #fff !important;
  padding: 8px 22px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s, transform 0.1s;
  display: inline-block;
}

.nav-cta:hover { background: #1a1338; transform: scale(1.02); }

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 60px 24px 48px;
  }

  .hero-visual { order: -1; max-width: 360px; margin: 0 auto; }

  .feat-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; gap: 8px; }

  nav { padding: 0 24px; }

  .nav-links a:not(.nav-cta) { display: none; }
}
/* ==========================================================================
   👤 2. Header 與作者資訊大區塊 (Profile & Controls)
   ========================================================================== */
header {
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    flex-wrap: wrap;
    gap: 32px;
}
@media screen and (min-width: 769px) {

header {
    max-width: 1300px;
    margin: 0 auto;
    padding: 120px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    flex-wrap: wrap;
    gap: 32px;
}
}
.author-profile {
    display: flex;
    align-items: flex-start;
    gap: 24px; 
    flex: 1;
    min-width: 320px;
}

.author-avatar, .author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.author-avatar {
    box-shadow: 0 8px 20px rgba(44, 42, 41, 0.12);
    flex-shrink: 0;
}

.author-info-block { display: flex; flex-direction: column; gap: 10px; }
.profile-name-row { display: flex; align-items: baseline; gap: 12px; }
.profile-main-name { font-size: 1.5rem; font-weight: 600; letter-spacing: 0.5px; color: var(--inn-text); }
.profile-sub-name { font-size: 0.88rem; color: var(--inn-muted); }
.profile-stats-row { display: flex; gap: 20px; flex-wrap: wrap; }
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.stat-label { color: var(--inn-muted); }
.stat-value { font-weight: 600; color: var(--inn-text); font-family: 'Plus Jakarta Sans', sans-serif; }
.profile-tags-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tag-label { font-size: 0.8rem; color: var(--inn-muted); }
.info-tag { background: #EAE5DC; color: var(--inn-text); font-size: 0.78rem; padding: 3px 12px; border-radius: 12px; font-weight: 500; }

.controls-wrapper { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.control-label { font-size: 0.75rem; color: var(--inn-muted); font-weight: 600; letter-spacing: 1px; margin-right: 8px; }
.control-row { display: flex; align-items: center; gap: 10px; }
.toggle-group { display: flex; background: #EAE5DC; padding: 4px; border-radius: var(--radius-round); }

.btn {
    background: transparent; border: none; color: var(--inn-muted); padding: 8px 18px; 
    font-size: 0.82rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-round); white-space: nowrap;
}
.btn.active, .btn-reset:hover { background: var(--inn-card); color: var(--inn-text); box-shadow: 0 4px 15px rgba(0,0,0,0.06); }
.inn-select { background: #EAE5DC; border: none; outline: none; padding: 8px 16px; font-family: inherit; font-size: 0.82rem; font-weight: 500; color: var(--inn-text); border-radius: var(--radius-round); cursor: pointer; }
.inn-select:hover { background: #E4DEC3; }
.btn-reset { background: var(--inn-text); color: #fff; border: none; padding: 8px 18px; font-size: 0.82rem; font-weight: 500; cursor: pointer; border-radius: var(--radius-round); }

/* ==========================================================================
   🧭 3. 時間軸結構與軸線佈局 (Timeline Containers & Axis Lines)
   ========================================================================== */
   
.timeline-wrapper {
    position: relative;
    max-width: 1300px;
    margin: 0 auto; border: 1px solid #e8e4df; border-radius: .5em;
}

.timeline-container {
    padding: 40px 20px;
    position: relative;
    width: 100%;
}

/* ➡️ 橫向滾動容器：本身只負責左右滾動溢出 */
.timeline-container.mode-horizontal {
    display: block;
    overflow-x: auto;
    scroll-behavior: smooth;
}

/* 🚀 核心內補：強制內層總寬度隨卡片無限延伸，讓線條永不斷裂 */
.mode-horizontal .timeline-inner {
    display: flex;
    gap: 60px;
    /*padding-top: 100px;*/
    padding-top: 50px;
    padding-bottom: 60px;
    width: max-content; 
    position: relative;
}

/* 🧭 橫向金屬軸線：現在完美錨定在實體內層上面！ */
.mode-horizontal .timeline-inner::before {
    content: '' !important; 
    position: absolute !important; 
    height: 3px !important; 
    top: 142px !important;  /* 對齊核心小圓點的高度 */
    left: 0 !important; 
    right: 0 !important; 
    background: linear-gradient(to right, rgba(197, 168, 128, 0.1) 0%, var(--inn-accent) 15%, var(--inn-accent) 85%, rgba(197, 168, 128, 0.1) 100%) !important;
    z-index: 1 !important; 
    opacity: 0.8 !important;
}

/* ⬇️ 縱向條列佈局 */
.timeline-container.mode-vertical .timeline-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-left: 80px;
    position: relative;
    width: 100%;
}

/* 縱向模式金屬軸線 */
.timeline-container.mode-vertical .timeline-inner::before {
    content: '' !important; 
    position: absolute !important; 
    width: 3px !important;
    top: 0 !important; 
    bottom: 0 !important; 
    left: 40px !important; 
    background: linear-gradient(to bottom, rgba(197, 168, 128, 0.2) 0%, var(--inn-accent) 10%, var(--inn-accent) 90%, rgba(197, 168, 128, 0) 100%) !important;
    z-index: 1 !important; 
    opacity: 0.6 !important;
}

/* ==========================================================================
   ✨ 4. 核心記憶點節點與記憶泡泡 (Nodes & Memory Bubbles)
   ========================================================================== */
.timeline-node {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.node-dot {
    position: absolute; 
    width: 14px !important; 
    height: 14px !important; 
    background: var(--inn-card) !important; 
    border: 2px solid var(--inn-accent) !important;
    border-radius: 50%; 
    z-index: 3;
    box-shadow: 0 0 0 4px var(--inn-bg), 0 0 12px rgba(197, 168, 128, 0.4) !important;
}

.mode-horizontal .node-dot { top: -45px; left: 30px; }
.mode-vertical .node-dot { left: -45px; top: 30px; }

.node-date {
    font-size: 0.85rem; font-weight: 600; color: var(--inn-accent); margin-bottom: 12px;
    background: rgba(197, 168, 128, 0.12); padding: 4px 14px; border-radius: var(--radius-round); display: inline-block;
}

.memory-bubble {
    background: var(--inn-card); border: 1px solid var(--inn-border); border-radius: var(--radius-card);
    padding: 24px; width: 280px; cursor: pointer; box-shadow: 0 8px 24px rgba(44, 42, 41, 0.03); position: relative;
}

/* 記憶泡泡引導小尖角 */
.memory-bubble::after {
    content: ''; position: absolute; width: 0; height: 0; border-style: solid;
}

@media screen and (min-width: 769px) {
  

    .mode-horizontal .memory-bubble::after {
        top: -10px; left: 24px; border-width: 0 10px 10px 10px; border-color: transparent transparent var(--inn-card) transparent;
    }
    .mode-horizontal .memory-bubble::before {
        content: ''; position: absolute; top: -11px; left: 24px; width: 0; height: 0;
        border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent var(--inn-border) transparent; z-index: -1;
    }
}

.mode-vertical .memory-bubble::after {
    top: 26px !important; left: -10px !important; border-width: 10px 10px 10px 0 !important; border-color: transparent var(--inn-card) transparent transparent !important;
}
.mode-vertical .memory-bubble::before {
    content: ''; position: absolute; top: 25px !important; left: -11px !important; width: 0; height: 0;
    border-style: solid; border-width: 10px 10px 10px 0 !important; border-color: transparent var(--inn-border) transparent transparent !important; z-index: -1;
}

/* Hover 共鳴聯動 */
.memory-bubble:hover { transform: translateY(-5px); border-color: var(--inn-accent); box-shadow: 0 12px 30px rgba(197, 168, 128, 0.2); }
.mode-horizontal .memory-bubble:hover::before { border-color: transparent transparent var(--inn-accent) transparent; }
.mode-vertical .memory-bubble:hover::before { border-color: transparent var(--inn-accent) transparent transparent; }

.timeline-node:hover .node-dot { background: var(--inn-accent) !important; box-shadow: 0 0 0 6px var(--inn-card), 0 0 20px var(--inn-accent) !important; transform: scale(1.3); }
.timeline-node:hover .node-date { background: var(--inn-accent) !important; color: var(--inn-card) !important; box-shadow: 0 4px 12px rgba(197, 168, 128, 0.3); }

.memory-bubble.is-multiple { box-shadow: 0 6px 0 -1px #fff, 0 6px 0 var(--inn-border), 0 12px 0 -2px #fff, 0 12px 0 var(--inn-border), 0 16px 30px rgba(44, 42, 41, 0.05); }
.bubble-title { font-size: 1.05rem; margin: 0 0 8px 0; font-weight: 600; line-height: 1.4; }
.bubble-snippet { font-size: 0.85rem; color: var(--inn-muted); margin: 0 0 15px 0; line-height: 1.5; }

.bubble-media-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; border-top: 1px dashed var(--inn-border); padding-top: 12px; }
.thumb-round { width: 50px; height: 50px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--inn-card); box-shadow: 0 4px 10px rgba(44, 42, 41, 0.08); }
.thumb-audio-icon { width: 60px; height: 60px; border-radius: 50%; background: #EFECE6; border: 2px solid var(--inn-card); box-shadow: 0 4px 10px rgba(44, 42, 41, 0.08); display: flex; align-items: center; justify-content: center; color: var(--inn-accent); }
.badge-count { position: absolute; top: -10px; right: -10px; background: var(--inn-text); color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: var(--radius-round); font-weight: 600; }

/* ==========================================================================
   🎁 5. 展開摘要側邊彈出層 (Desktop Drawer Layout)
   ========================================================================== */
.preview-drawer {
    position: fixed; top: 0; right: -460px; width: 440px; height: 100%;
    background: var(--inn-card); box-shadow: -10px 0 40px rgba(0,0,0,0.08);
    z-index: 100; padding: 40px 30px; display: flex; flex-direction: column;
    border-top-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card);
    visibility: hidden;
}
.preview-drawer.open { right: 0; visibility: visible; }
.drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 42, 41, 0.3); backdrop-filter: blur(4px); z-index: 99; opacity: 0; pointer-events: none; }
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--inn-border); padding-bottom: 15px; }
.close-btn { background: #F0EDE6; border: none; font-size: 1.2rem; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.drawer-content { flex: 1; overflow-y: auto; }
.summary-item { border-bottom: 1px solid var(--inn-border); padding: 25px 0; display: flex; flex-direction: column; gap: 12px; }
.summary-item:last-child { border: none; }
.summary-time { font-size: 0.78rem; color: var(--inn-accent); font-weight: 600; }
.summary-title { font-size: 1.1rem; margin: 0; font-weight: 600; line-height: 1.4; }
.summary-text { font-size: 0.88rem; color: var(--inn-muted); margin: 0; line-height: 1.6; text-align: justify; }
.read-more-btn { background: var(--inn-text); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius-round); font-size: 0.82rem; cursor: pointer; align-self: flex-start; font-weight: 500; text-decoration: none; margin-top: 5px; }


/* ==========================================================================
   📱 6. 中螢幕與手機版 RWD 核心優化
   ========================================================================== */
@media screen and (max-width: 900px) {
    header { flex-direction: column; align-items: flex-start; }
    .controls-wrapper { width: 100%; align-items: flex-start; }
    .control-row { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
    
.memory-bubble {
    background: var(--inn-card); border: 1px solid var(--inn-border); border-radius: var(--radius-card);
    padding: 15px; width: 230px; cursor: pointer; box-shadow: 0 8px 24px rgba(44, 42, 41, 0.03); position: relative;
}

 
    /* 手機版將橫向配置重塑為乾淨縱向 */
    .timeline-container.mode-horizontal .timeline-inner {
        display: flex; flex-direction: column; gap: 40px; width: 100% !important; padding-left: 70px; padding-top: 0; padding-bottom: 0;
    }
    .timeline-container.mode-horizontal .timeline-inner::before { display: none !important; }
    
    /* 轉用手機版專用直立式不中斷金屬線 */
    .timeline-container.mode-horizontal::before {
        content: '' !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 40px !important; right: auto !important; width: 3px !important; height: 100% !important;
        background: linear-gradient(to bottom, rgba(197, 168, 128, 0.2) 0%, var(--inn-accent) 10%, var(--inn-accent) 90%, rgba(197, 168, 128, 0) 100%) !important; z-index: 1 !important; display: block !important;
    }
    
    .mode-horizontal .node-dot { left: -45px; top: 30px; }
    .timeline-container.mode-horizontal .memory-bubble::after {
        top: 26px !important; left: -10px !important; border-width: 10px 10px 10px 0 !important; border-color: transparent var(--inn-card) transparent transparent !important;
    }
    .timeline-container.mode-horizontal .memory-bubble::before {
        content: ''; position: absolute; top: 25px !important; left: -11px !important; width: 0; height: 0;
        border-style: solid; border-width: 10px 10px 10px 0 !important; border-color: transparent var(--inn-border) transparent transparent !important; z-index: -1;
    }

    /* 手機極速微懸浮卡片 Drawer 展開樣式 */
    .drawer-overlay { transition: opacity 0.1s linear !important; }
    .preview-drawer {
        position: fixed !important; top: auto !important; right: auto !important;
        width: 92% !important; max-width: 420px; bottom: 5% !important; left: 50% !important;
        transition: transform 0.12s linear, opacity 0.12s linear, visibility 0.12s linear !important; 
        transform: translate(-50%, 20px) !important; opacity: 0 !important; visibility: hidden !important;
        border-radius: 14px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
        height: auto !important; max-height: 72vh !important;
    }
    .preview-drawer.open { opacity: 1 !important; visibility: visible !important; transform: translate(-50%, 0) !important; }
}