/* 1. LAYOUT STRUCTURE (Restored) */
    .notebook-container {
      max-width: 1100px;
      margin: 40px auto;
      display: flex;
      flex-direction: column;
    }

    .main-workspace {
      display: flex;
      background: #fff9f0; /* Paper color */
      border: 2px solid #8b4513;
      min-height: 80vh;
      box-shadow: 10px 10px 20px rgba(0,0,0,0.1);
      border-radius: 0 0 5px 5px;
    }

    /* 2. TOP TABS (Restored) */
    .tabs-level-1 {
      display: flex;
      gap: 5px;
      padding-left: 30px;
    }

    .tab-l1 {
      background: #d2b48c;
      border: 1px solid #8b4513;
      border-bottom: none;
      padding: 10px 20px;
      border-radius: 8px 8px 0 0;
      cursor: pointer;
      font-family: 'EB Garamond', serif;
      transition: 0.3s;
    }

    .tab-l1.active {
      background: #fff9f0;
      padding-top: 15px;
      margin-top: -5px;
      border-bottom: 2px solid #fff9f0; /* Merges into the paper */
      font-weight: bold;
    }

    /* 3. SIDEBAR (Restored) */
    .nav-level-2 {
      width: 200px;
      border-right: 1px dashed #8b4513;
      padding: 20px;
      display: flex;
      flex-direction: column;
      position: sticky;
      top: 0;
    }

    .toc-list { list-style: none; padding: 0; }
    .toc-list li { margin: 10px 0; }
    .toc-list a { text-decoration: none; color: #5d4037; font-size: 0.95em; }
    .toc-list a:hover { color: #8b4513; text-decoration: underline; }

    /* 4. CONTENT AREA (Restored) */
    .content-scroll {
      flex-grow: 1;
      padding: 40px;
      height: 80vh;
      overflow-y: auto;
      line-height: 1.6;
    }

    /* 5. POLISH & ANIMATIONS */
    .tab-content, .side-content {
      animation: fadeIn 0.4s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .toc-title {
      font-weight: bold;
      color: #8b4513;
      border-bottom: 1px solid #d2b48c;
      margin-bottom: 15px;
      padding-bottom: 5px;
    }

    .nav-btn {
      background: none;
      border: 1px solid #d2b48c;
      color: #8b4513;
      padding: 5px;
      margin-top: 5px;
      cursor: pointer;
    }
/* 1. Alignment System (The Colon Fix) */
    .info-row {
      display: flex;
      margin-bottom: 8px;
      align-items: flex-start;
    }
    .info-label {
      min-width: 120px; /* Adjust this to make all colons line up */
      font-weight: bold;
      color: #8b4513;
    }
    .info-content {
      flex: 1;
    }

    /* 2. Inline List for Links */
    .inline-list {
      display: inline-flex;
      gap: 15px;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    /* 3. Indented Content */
    .indented-desc {
      text-indent: 2em;
      margin-top: 5px;
      color: #5d4037;
    }

    /* Polish */
    .tab-content, .side-content { animation: fadeIn 0.4s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    .toc-title { font-weight: bold; color: #8b4513; border-bottom: 1px solid #d2b48c; margin-bottom: 15px; padding-bottom: 5px; }
    
.char-link {
    color: #8b4513; /* 棕色，配合你的紙張風格 */
    text-decoration: none;
    border-bottom: 1px dashed #d2b48c;
    transition: 0.3s;
}

.char-link:hover {
    background: #ecdaba; /* 滑鼠移上去有淡淡的高亮 */
}
    .nav-btn { background: none; border: 1px solid #d2b48c; color: #8b4513; padding: 5px; margin-top: 5px; cursor: pointer; }
    hr { border: 0; border-top: 1px solid #d2b48c; margin: 20px 0; }