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

  .rules-panel {
    background: #fff;
    border-radius: 36px;
    padding: 40px 56px 56px;
    position: relative;
    margin-bottom: 32px;
    box-shadow: 0 12px 40px rgba(125,78,124,.10);
  }
  .rules-panel h2 {
    display: inline-block;
    color: #fff;
    border-radius: 999px;
    padding: 8px 28px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .04em;
    margin: 4px 0 14px;
  }
  .rules-panel h2.purple { background: var(--purple-700); }
  .rules-panel h2.magenta { background: var(--magenta-600); }
  .rules-panel .object-line {
    font-size: 18px; font-weight: 700; color: var(--ink-ink);
    padding-left: 8px; margin-bottom: 8px;
  }
  .lead { font-size: 18px; font-weight: 700; color: var(--ink-ink); margin: 6px 0 14px; padding-left: 8px;}
  .tier-callout {
    margin: 18px 0;
  }
  .tier-callout .tier-head {
    display: flex; align-items: flex-end; gap: 12px; margin-bottom: 10px;
  }
  .tier-callout .tier-head .tier-title {
    height: 48px; width: auto; display: block;
  }
  .tier-callout .tier-head .pre { font-size: 28px; font-weight: 900; color: var(--ink-text); }
  .tier-callout .tier-head .circle {
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--magenta-600); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 24px;
  }
  .tier-callout .tier-head .how-word { font-size: 32px; font-weight: 900; color: var(--magenta-600); }
  .tier-callout .tier-head .how-word .stroke { -webkit-text-stroke: 2px var(--magenta-600); color: transparent; }
  .tier-callout .tier-head .limit { margin-left: 0; font-size: 18px; font-weight: 900; color: #C45D9F; line-height: 1; padding-bottom: 4px; }
  .tier-callout ul { padding-left: 0; list-style: none; }
  .tier-callout ul li {
    padding-left: 22px; position: relative;
    font-size: 18px; font-weight: 700; line-height: 1.75;
    color: var(--ink-ink);
    margin-bottom: 4px;
  }
  .tier-callout ul li::before {
    content: ""; position: absolute;
    left: 4px; top: 10px;
    width: 7px; height: 7px;
    background: #7D4E7C; border-radius: 999px;
  }

  /* Prize table */
  .prize-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 70%;
    margin: 16px auto 8px;
    border: 2px solid #1a2e2e;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .prize-table th, .prize-table td {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    color: #1a2e2e;
    text-align: center;
    border-right: 1.5px solid #1a2e2e;
    border-bottom: 1.5px solid rgba(26,46,46,0.5);
  }
  .prize-table th:last-child, .prize-table td:last-child { border-right: none; }
  .prize-table tbody tr:last-child td { border-bottom: none; }
  .prize-table thead th {
    background: #fff;
    border-bottom: 2px solid #1a2e2e;
  }
  .prize-table tbody td {
    background: #faeaf1;
  }
  .prize-table tbody td:nth-child(1) { width: 16%; }
  .prize-table tbody td:nth-child(3) { width: 16%; }

  /* Schedule mini table */
  .schedule-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;        /* auto → 100%，填滿內容欄 */
    margin: 16px 0 0;   /* auto 置中 → 靠左對齊 */
    border: 1.5px solid #1a2e2e;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .schedule-table th, .schedule-table td {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    color: #1a2e2e;
    text-align: center;
    border-right: 1.5px solid #1a2e2e;
    border-bottom: 1.5px solid #1a2e2e;
    white-space: nowrap;
  }
  .schedule-table th:last-child, .schedule-table td:last-child { border-right: none; }
  .schedule-table tbody tr:last-child td { border-bottom: none; }
  .schedule-table thead th {
    background: var(--magenta-600);
    color: #fff;
    font-size: 17px;
  }

  /* Numbered with magenta circle bullets */
  .num-list { padding-left: 0; list-style: none; counter-reset: nl; margin: 0; }
  .num-list li {
    counter-increment: nl;
    position: relative;
    padding: 0 0 6px 36px !important;
    font-size: 18px; font-weight: 700;
    color: var(--ink-ink);
    line-height: 1.75;
  }
  .num-list li::before {
    content: ""; position: absolute;
    left: 4px !important; top: 4px !important;
    width: 26px !important; height: 26px !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 0 !important;
  }
  .num-list li:nth-child(1)::before { background-image: url("../img/num-1-magenta.png") !important; }
  .num-list li:nth-child(2)::before { background-image: url("../img/num-2-magenta.png") !important; }
  .num-list li:nth-child(3)::before { background-image: url("../img/num-3-magenta.png") !important; }

  /* Bullet utility */
  .bul { 
    padding-left: 0; 
    list-style: none; 
  }
  .bul li {
    padding-left: 18px; position: relative;
    font-size: 18px; font-weight: 700;
    line-height: 1.75; color: var(--ink-ink);
    margin-bottom: 4px;
  }
  .bul li::before {
    content: ""; position: absolute;
    left: 0; top: 10px;
    width: 8px; height: 8px;
    background-color: #7D4E7C; border-radius: 999px;
  }

  .green-ribbon-inline {
    display: inline-block;
    background: #2e8b3f; color: #fff;
    font-weight: 900; font-size: 14px;
    padding: 3px 12px; border-radius: 6px;
    margin-left: 10px;
  }

  .object-line {
    font-size: 15px; font-weight: 700; color: var(--ink-ink);
    padding-left: 8px; margin-bottom: 8px;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px;
  }
  .object-line .obj-text { flex: 0 0 auto; }
  .helpers {
    display: inline-flex; gap: 18px;
    margin-left: auto;
    margin-right: 120px;
    margin-top: -50px;
    vertical-align: middle;
    position: relative; z-index: 30;
    pointer-events: auto;
  }
  .helpers .helper-btn {
    background: none; border: none; padding: 0;
    cursor: pointer;
    display: inline-flex; align-items: center;
    transition: transform .15s ease;
  }
  .helpers .helper-btn:hover { transform: translateY(-2px); }
  .helpers .helper-btn img {
    height: 56px; width: auto; display: block;
  }

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

    .rules-panel {
      border-radius: 24px;
      padding: 22px 18px 0;
      margin: 16px 0 32px;
      box-shadow: 0 8px 24px rgba(125,78,124,.08);
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .rules-panel h2 {
      display: inline-block;
      padding: 6px 22px;
      font-size: 15px;
      margin: 14px 0 10px;
      width: auto;
      max-width: max-content;
    }
    .rules-panel h2:first-of-type { margin-top: 0; }

    /* Move helpers (設備綁定 / 升級郵政會員) to TOP of panel via flex order */
    .object-line {
      display: contents;
    }
    .object-line .obj-text {
      display: block;
      font-size: 14px; padding-left: 0;
      margin-bottom: 14px;
      order: 0;
    }
    /* Helpers stack vertically on mobile so they don't overlap the period bubble */
    .object-line .helpers {
      order: -1;
      margin: 0 0 16px 0;
      gap: 10px;
      display: flex; flex-direction: column; flex-wrap: nowrap;
      align-items: flex-start;
      width: 100%;
    }
    .helpers .helper-btn img { height: 38px; }

    .lead {
      font-size: 14px; padding-left: 0;
      margin: 4px 0 12px;
    }

    .tier-callout { margin: 14px 0; }
    .tier-callout .tier-head { gap: 8px; flex-wrap: wrap; }
    .tier-callout .tier-head .tier-title { height: 30px; }
    .tier-callout .tier-head .limit { font-size: 13px; padding-bottom: 2px; }
    .tier-callout ul li { font-size: 14px; padding-left: 18px; word-break: break-word; overflow-wrap: anywhere; }
    .tier-callout ul li::before { width: 6px; height: 6px; top: 9px; left: 2px; }

    .num-list li {
      font-size: 14px !important;
      padding-left: 30px !important;
      word-break: break-word; overflow-wrap: anywhere;
    }
    .num-list li::before {
      width: 22px !important; height: 22px !important;
      top: 2px !important;
    }

    .bul li { font-size: 14px; padding-left: 14px; line-height: 1.65; word-break: break-word; overflow-wrap: anywhere; }
    .bul li::before { width: 6px; height: 6px; top: 9px; }

    .prize-table, .schedule-table {
      width: 100% !important;
      font-size: 14px;
      table-layout: fixed;
    }
    /* Prize table: narrow tier name col, wide prize col, narrow count col */
    .prize-table colgroup, .prize-table col { display: none; }
    .prize-table th:nth-child(1), .prize-table td:nth-child(1) { width: 18%; }
    .prize-table th:nth-child(2), .prize-table td:nth-child(2) { width: 64%; }
    .prize-table th:nth-child(3), .prize-table td:nth-child(3) { width: 18%; }
    .prize-table th, .prize-table td,
    .schedule-table th, .schedule-table td {
      padding: 8px 6px;
      font-size: 13px;
      line-height: 1.5;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .schedule-table th { font-size: 13px; }

    /* HOWHOW: larger, right-aligned, doesn't push text */
    .last-section { max-width: 100% !important; padding-bottom: 0 !important; }
    .last-section .howyun-block { padding-right: 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.howhow-fig { width: 100%; height: auto; display: block; }
  }

  /* HOWHOW absolutely positioned inside rules-panel, bottom-aligned to its bottom-right */
  .footer-howhow {
    position: absolute;
    right: 0; bottom: 0;
    width: 620px;
    pointer-events: none;
    z-index: 5;
  }
  .footer-howhow img.howhow-fig {
    width: 100%; height: auto; display: block;
  }
  /* Reserve right-side space for HOWHOW on the bottom sections */
  .last-section { max-width: calc(100% - 340px); padding-bottom: 40px; }
  .last-section .howyun-block { padding-right: 220px; }