/* ────────────────────────────────────────────────────────────────────────────
   服務條款與隱私權政策的樣式。原本內嵌在 Views/Shared/_Legal.cshtml 裡。

   跟 editor.css 各自一份、不共用：兩邊只是**顏色變數**碰巧相同，版面規則完全不同。合成一份
   的話，法律頁要載入 1700 行裡用不到的 1600 行，而且改編輯器的版面會變成有可能弄壞法律頁。
   ──────────────────────────────────────────────────────────────────────────── */

  :root{
    --bg:#0d1a1b; --bg2:#122325; --panel:#16292b; --panel2:#1a3032;
    --line:#23403f; --line-soft:#1b3234;
    --txt:#e4efec; --dim:#a8bfbb; --dimmer:#7f9b98;
    --t1:#e0ae5a; --t2:#57b6a4; --warn:#d97a72;
    --display:"Gloock",Georgia,serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--txt);
    font-family:var(--sans); font-size:15px;
    /* 中文條文要更大的行距：1.6 在編輯器裡夠用，整頁純文字不夠。 */
    line-height:1.95;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--t2)}
  a:hover{color:var(--t1)}

  header{
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,var(--bg2),var(--bg));
  }
  header .inner{
    max-width:820px; margin:0 auto; padding:16px 24px;
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  header .brand{
    font-family:var(--display); font-weight:400; font-size:20px;
    color:var(--txt); text-decoration:none; line-height:1;
  }
  header .brand em{font-style:normal;color:var(--t1)}
  header nav{margin-left:auto;display:flex;gap:16px;font-size:13px}

  main{max-width:820px;margin:0 auto;padding:36px 24px 72px}

  h1{
    font-family:var(--display); font-weight:400; font-size:32px;
    margin:0 0 6px; line-height:1.3;
  }
  .updated{
    color:var(--dimmer); font-size:13px; margin:0 0 8px;
    letter-spacing:.04em;
  }
  /* 目錄。條文有十幾節，水沒有它就只能一直捲。 */
  .toc{
    margin:26px 0 34px; padding:16px 20px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
  }
  .toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px}
  .toc li{margin:2px 0;break-inside:avoid}
  .toc a{text-decoration:none}
  .toc a:hover{text-decoration:underline}
  @media (max-width:620px){ .toc ol{columns:1} }

  /*
    說明頁上那一排音符符號（`Views/Shared/_NoteIcons.cshtml`，跟編輯器工具列同一份）。

    尺寸刻意跟工具列上那顆**一模一樣的 14×18**：這一排的用途就是「你在工具列看到的是
    這個」，畫大一點好看，但那樣就對不起來了。

    `flex-wrap` 讓它在窄畫面上自己折行 —— 十三顆排一行在手機上一定爆版。
  */
  .noteicons{
    display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end;
    margin:16px 0; padding:14px 16px;
    background:var(--panel); border:1px solid var(--line); border-radius:8px;
  }
  .noteicons span{display:flex; flex-direction:column; align-items:center; gap:4px}
  .noteicons svg{width:14px; height:18px; color:var(--txt)}
  .noteicons i{font-style:normal; font-family:var(--mono,ui-monospace,monospace);
               font-size:11px; color:var(--dim)}

  h2{
    font-size:19px; font-weight:700; margin:38px 0 10px;
    padding-top:14px; border-top:1px solid var(--line-soft);
    /* 從目錄跳過來時，標題不要被貼在視窗最上緣 */
    scroll-margin-top:16px;
  }
  h3{font-size:16px;font-weight:500;color:var(--t2);margin:24px 0 8px}
  p{margin:12px 0}
  ul,ol{margin:12px 0;padding-left:1.6em}
  li{margin:6px 0}
  strong{color:#fff}
  code{
    font-family:ui-monospace,Consolas,monospace; font-size:.9em;
    background:var(--panel2); padding:1px 5px; border-radius:3px;
  }
  /* 鍵盤按鍵。它必須跟 code 長得不一樣 —— 一整張快捷鍵表裡如果 `Ctrl+Z` 跟 `t120` 同一個
     樣式，掃的時候分不出哪個是鍵盤哪個是 MML。 */
  kbd{
    font-family:ui-monospace,Consolas,monospace; font-size:.82em;
    background:var(--panel2); color:var(--txt);
    border:1px solid var(--line); border-bottom-width:2px; border-radius:3px;
    padding:1px 5px; white-space:nowrap;
  }

  /* 說明頁的 MML 範例。範例是要拿去複製的，所以 white-space:pre 不能省；窄畫面自己橫捲 ——
     MML 換錯行看起來就是另一段譜。 */
  pre{
    margin:16px 0; padding:12px 16px;
    background:var(--panel); border:1px solid var(--line); border-radius:4px;
    overflow-x:auto; line-height:1.7;
  }
  pre code{background:none;padding:0;font-size:13px}

  /* 條文裡「請特別注意」那幾段：原文用粗體強調，而粗體在整頁中文裡看不出來。 */
  .note{
    margin:16px 0; padding:12px 16px;
    background:var(--panel); border-left:3px solid var(--t1); border-radius:0 4px 4px 0;
  }
  .note.warn{border-left-color:var(--warn)}
  .note p:first-child{margin-top:0}
  .note p:last-child{margin-bottom:0}

  /* 法條依據，附在節標題底下 */
  .basis{color:var(--dimmer);font-size:13px;margin:-4px 0 12px}

  table{
    width:100%; border-collapse:collapse; margin:16px 0; font-size:14px;
    /* 表格在窄畫面會擠戈成一團，讓它自己捲 */
    display:block; overflow-x:auto; white-space:normal;
  }
  th,td{
    border:1px solid var(--line); padding:8px 12px;
    text-align:left; vertical-align:top; line-height:1.7;
  }
  th{background:var(--panel);font-weight:500;color:var(--dim);white-space:nowrap}

  footer{
    max-width:820px; margin:0 auto; padding:22px 24px 48px;
    border-top:1px solid var(--line); color:var(--dimmer); font-size:13px;
  }
  footer .row{display:flex;gap:18px;flex-wrap:wrap}
  footer .row .spacer{flex:1}