/* postapp2026notice.html — page-specific styles */
  /* 頂部導覽列 / period-bubble / 手機背景：共用樣式已移至 styles.css */

  .notes-panel {
    background:#fff; 
    border-radius:36px;
    padding:44px 64px 56px;
    margin-bottom: 32px;
    box-shadow: 0 12px 40px rgba(125,78,124,.10);
    position: relative;
  }
  .notes-list { padding-left:0; list-style:none; counter-reset:nl; }
  /* First two rows clear the period bubble at top-right */
  .notes-list > li[data-num="1"], .notes-list > li[data-num="2"] { padding-right: 150px; }
  .notes-list > li {
    counter-increment:nl;
    position:relative;
    padding-left:64px;
    font-size:15px;
    line-height:1.85;
    color: #000;
    margin-bottom: 14px;
  }
  .notes-list > li::before {
    content: "（" counter(nl, cjk-decimal) "）";
    position:absolute; left:0; top:0;
    font-family: "Noto Sans TC", var(--font-sans);
    color: var(--ink-text);
    font-weight: 500;
    width: 56px;
    text-align: right;
  }
  /* CJK decimal numbers don't exist as standard; fallback to (1)(2) using
     content with counter-style override per item via data attr */
  .notes-list > li[data-num="1"]::before { content: "（一）"; }
  .notes-list > li[data-num="2"]::before { content: "（二）"; }
  .notes-list > li[data-num="3"]::before { content: "（三）"; }
  .notes-list > li[data-num="4"]::before { content: "（四）"; }
  .notes-list > li[data-num="5"]::before { content: "（五）"; }
  .notes-list > li[data-num="6"]::before { content: "（六）"; }
  .notes-list > li[data-num="7"]::before { content: "（七）"; }
  .notes-list > li[data-num="8"]::before { content: "（八）"; }
  .notes-list > li[data-num="9"]::before { content: "（九）"; }
  .notes-list > li[data-num="10"]::before { content: "（十）"; }

  .notes-list ol.sub {
    counter-reset: sub; list-style: none; padding-left: 12px; margin: 8px 0;
  }
  .notes-list ol.sub > li {
    counter-increment: sub;
    position: relative; padding-left: 24px;
    margin-bottom: 4px;
  }
  .notes-list ol.sub > li::before {
    content: counter(sub) ".";
    position: absolute; left: 0; top: 0;
    color: var(--ink-text); font-weight: 500;
  }
  .footer-howhow {
    position: absolute;
    right: 0; bottom: 0;
    width: 620px;
    pointer-events: none;
    z-index: 5;
  }
  .footer-howhow img { width: 100%; height: auto; display: block; }
  /* Reserve right-side space for HOWHOW beside the last list items */
  .notes-list > li[data-num="10"] { padding-right: 560px; min-height: 380px; }

  /* ============================================================
     Mobile (≤ 1024px) RWD
     ============================================================ */
  @media (max-width: 1024px) {
    /* 手機頂部列 / 背景 / period-bubble：共用樣式已移至 styles.css */
    .page { display: block; padding: 12px 16px 0; position: relative; }

    .notes-panel {
      border-radius: 24px;
      padding: 22px 18px 0;
      margin: 16px 0 32px;
      box-shadow: 0 8px 24px rgba(125,78,124,.08);
      position: relative;
      overflow: hidden;
    }

    /* Numbered list: tighten + clear the period bubble on first rows */
    .notes-list > li {
      padding-left: 38px;
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 12px;
      word-break: break-word; overflow-wrap: anywhere;
    }
    .notes-list > li[data-num="1"], .notes-list > li[data-num="2"] { padding-right: 0px; }
    .notes-list > li[data-num="1"] { margin-top: 33px; }
    .notes-list > li::before { width: auto; white-space: nowrap; text-align: left; }
    .notes-list ol.sub > li { font-size: 13px; }

    .schedule-table {
      width: 100% !important;
      font-size: 13px;
      table-layout: fixed;
    }
    .schedule-table th, .schedule-table td {
      padding: 8px 4px;
      font-size: 13px;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    /* HOWHOW: smaller, right-aligned, sits below the list, doesn't push text */
    .notes-list > li[data-num="10"] { padding-right: 18px !important; min-height: 0 !important; }
    .footer-howhow {
      position: relative !important;
      right: auto; bottom: auto;
      width: 300px; max-width: 80%;
      margin: -50px -8px 0px auto;
      display: block;
    }
    .footer-howhow img { width: 100%; height: auto; display: block; }
  }