/* =========================
   Global tokens & resets
========================= */
:root{
    /* Colors */
    --bg:#F8F5F2;            /* 柔米白 */
    --bg-2:#FFFFFF;          /* 純白 */
    --text:#d36073;          /* 主字色（品牌粉） */
    --ink:#333132;           /* 內文深灰 */
    --muted:#7A6F6A;         /* 可可灰 */
    --accent:#b57696a8;      /* 玫瑰棕（半透明） */
    --accent-2:#D7C6BA;      /* 淡玫灰 */
    --line:#E9E2DC;          /* 細線柔灰（原 #472405 會太深） */
    --success:#2E7D32;
    --error:#B00020;
  
    /* Effects */
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --shadow2:0 14px 36px rgba(0,0,0,.12);
  
    /* Radii */
    --radius:18px;
    --radius-lg:24px;
  
    /* Gallery cards */
    --card:220px;
    --gap:14px;
  }
  
  *{ box-sizing:border-box }
  html,body{ height:100% }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Noto Sans TC', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans CJK TC", sans-serif;
    line-height:1.6;
  
  }
  
  body::before{
    content:""; position:fixed; inset:0; z-index:-1;
    background: rgba(255, 255, 255, 0.75);
  }
  
  h1,h2,h3,h4{
    font-family:'Noto Serif TC', serif; line-height:1.3; margin:0 0 .5rem;
  }
  h1{ font-size:clamp(28px,4.5vw,56px) }
  h2{ font-size:clamp(22px,3vw,36px) }
  h3{ font-size:clamp(18px,2.2vw,24px) }
  p{ margin:.5rem 0 1rem }
  a{ color:inherit; text-decoration:none }
  .container{ width:min(1120px,92%); margin-inline:auto }
  .brand { display:inline-flex; align-items:center; line-height:1; }
  .brand img { height:70px; width:auto; display:block; }
  
  /* =========================
     Buttons & Chips
  ========================= */
  .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.8rem 1.2rem; border-radius:999px; font-weight:600; letter-spacing:.02em;
    cursor:pointer; transition:.25s ease; border:1px solid transparent;
  }
  .btn-primary{
    background:var(--text); color:#fff; border:none;
    padding:12px 20px; border-radius:999px; font-weight:700; letter-spacing:.6px;
    box-shadow:var(--shadow); transition:transform .15s, box-shadow .2s, background .2s;
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow2) }
  .btn-primary:active{ transform:translateY(0) }
  
  .btn-ghost{
    background:rgba(255,255,255,.55);
    border:1px solid var(--text); color:var(--text);
  }
  .btn-ghost:hover{ transform:translateY(-1px) }
  
  .tag{
    display:inline-block; font-size:.75rem; padding:.25rem .6rem;
    border-radius:999px; background:#cea0b8d0; color:#f6f6f6; margin-right:.4rem;
  }
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.35rem .7rem; border-radius:999px; border:1px solid var(--text);
    font-size:.8rem; color:var(--text);
  }
  
  /* =========================
     Header / Nav
  ========================= */
  .skip{ position:absolute; left:-9999px }
  .skip:focus{
    left:1rem; top:1rem; background:#fff; padding:.6rem .9rem; border-radius:8px; z-index:9999;
  }
  header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(180%) blur(10px);
    background:color-mix(in oklab, var(--bg) 70%, white 30%);
    border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
  }
  header,
  .nav,
  .nav-actions {
    position: relative;
    z-index: 1001;
  }
  
  /* 保險：避免有透明元素蓋住 header（若有的話） */
  header .overlay,
  .nav .overlay {
    pointer-events: none;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.8rem 0;
  }
  .brand{ font-family:'Noto Serif TC', serif; font-weight:700; letter-spacing:.06em; }
  .nav a{ opacity:.9 } .nav a:hover{ opacity:1 }
  .nav-links{ display:flex; gap:1.2rem; align-items:center; color:#B17844; }
  .nav-actions{ display:flex; gap:.6rem; align-items:center; }
  
  /* 桌／平／手機 RWD */
  @media (min-width:1024px){ .nav-actions{ justify-content:flex-end; gap:.7rem } }
  @media (min-width:641px) and (max-width:1023px){
    .nav-actions{ gap:.5rem } .nav-actions .btn{ padding:.5rem .7rem }
  }
  @media (max-width:640px){
    .nav-actions{ gap:.35rem; justify-content:flex-end; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
    .nav-actions::-webkit-scrollbar{ display:none }
    .nav-actions .btn{ border-radius:12px; padding:.45rem .6rem; font-size:.92rem }
    .nav-actions .label{ display:none } .nav-actions .icon{ width:22px; height:22px }
    .nav-actions .chip{ padding:.32rem .6rem; font-size:.9rem; text-align:center }
  }
  @media (max-width:420px){ .nav-actions .chip{ display:none } }
  
  /* 桌機下拉選單 */
  .nav-item{ position:relative }
  .nav-item .submenu{
    position:absolute; top:100%; left:0; min-width:160px;
    background:#fff; border:1px solid #eee; padding:.6rem 0; border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,.08); display:none;
  }
  .nav-item:hover .submenu{ display:block }
  .submenu a{
    display:block; padding:.4rem .9rem; font-size:.95rem; color:#333; white-space:nowrap;
  }
  .submenu a:hover{ background:#fac5c5bb }
  
  /* 漢堡按鈕（合併為一份） */
  .hamburger{
    display:none; position:relative; width:40px; height:40px; z-index:70;
    border-radius:999px; border:1px solid var(--line);
    background:color-mix(in oklab, var(--bg-2) 80%, white 20%);
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    justify-content:center; align-items:center; cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .hamburger:hover{ box-shadow:var(--shadow) }
  .hamburger:active{ transform:scale(.98) }
  .hamburger span{
    position:absolute; left:50%; width:18px; height:2px; border-radius:2px;
    background:#B58E76; transform:translateX(-50%); transition:.25s cubic-bezier(.2,.7,.2,1);
  }
  .hamburger span:nth-child(1){ top:14px }
  .hamburger span:nth-child(2){ top:19px }
  .hamburger span:nth-child(3){ top:24px }
  .hamburger.open span:nth-child(1){ top:19px; transform:translateX(-50%) rotate(45deg) }
  .hamburger.open span:nth-child(2){ opacity:0 }
  .hamburger.open span:nth-child(3){ top:19px; transform:translateX(-50%) rotate(-45deg) }
  @media (max-width:880px){ .nav-links{ display:none } .hamburger{ display:flex } }
  /* ===== Drawer 疊放層級修正（確保可點到關閉鈕） ===== */
  header{ z-index: 1001; }                 /* 保持原設定 */
  .overlay{ z-index: 1990 !important; }    /* 背景遮罩在 header 之上 */
  .drawer{ z-index: 2000 !important; }     /* 抽屜 > 遮罩 > header */
  /* Drawer（合併為一份） */
  .drawer{
    position:fixed; inset:0 0 0 auto; width:min(78%,340px);
    background:var(--bg-2); border-top-left-radius:20px; border-bottom-left-radius:20px; overflow:hidden;
    box-shadow:var(--shadow); transform:translateX(100%); transition:.35s cubic-bezier(.2,.7,.2,1);
    z-index:60; display:flex; flex-direction:column; color:#D1B26E;
  }
  .drawer.open{ transform:translateX(0) }
  .drawer .hd{
    display:flex; justify-content:space-between; align-items:center;
    padding:1rem 1.2rem; border-bottom:1px solid var(--line);
    backdrop-filter:saturate(160%) blur(6px);
    background:color-mix(in oklab, var(--bg) 85%, white 15%);
  }
  .drawer a{ padding:1rem 1.2rem; border-bottom:1px dashed var(--line) }
  .drawer details{ margin:.4rem 0 }
  .drawer details summary{ padding:.6rem 0; cursor:pointer }
  .drawer details a{ display:block; padding:.3rem 1rem; font-size:.95rem }
  
  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:.3s; z-index:55;
  }
  .overlay.show{ opacity:1; pointer-events:auto }
  
  
  
  
  
  
  
  
  /* =========================
     Lightbox
  ========================= */
  .lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.85); z-index:100 }
  .lightbox.show{ display:grid }
  .lightbox .frame{ position:relative; width:min(92vw,500px); max-height:96vh; display:grid; grid-template-rows:auto 1fr auto; gap:10px }
  .lightbox img{ width:100%; height:auto; object-fit:contain; border-radius:10px }
  .lightbox .close,.lightbox .prev,.lightbox .next{
    position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.25); color:#fff; padding:.6rem .8rem; border-radius:999px; cursor:pointer;
  }
  .lightbox .close{ top:-44px; right:-4px; transform:none }
  .lightbox .prev{ left:-4px } .lightbox .next{ right:-4px }
  #lightbox figcaption{ margin-top:.6rem; text-align:center; color:#f1f1f1; font-size:.95rem; line-height:1.4 }
  
  
  
  /* =========================
     Journal / Lookbook / Footer
  ========================= */
  .lookbook{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
  .lb-card{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
  .lb-media{ position:relative; aspect-ratio:16/9 } .lb-media video{ position:absolute; inset:0; width:180%; height:100%; object-fit:cover }
  .lb-body{ padding:1rem }
  .journal{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
  .post{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
  .post .cover{ aspect-ratio:16/9; background:url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(4).jpg') center/cover }
  .post1 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(22).jpg') center/cover }
  .post2 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-cute/pregnant%20(37).jpg') center/cover }
  .post .bd{ padding:1rem }
  @media (max-width:980px){ .testi{ grid-template-columns:1fr } .lookbook{ grid-template-columns:1fr } .journal{ grid-template-columns:1fr } }
  
  footer{ background: color-mix(in oklab, var(--bg) 70%, white 10%) }
  footer .footer-grid{
    display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px; min-height:80px; justify-content:space-around;
  }
  footer .footer-brand{ display:inline-flex; align-items:center; line-height:1 }
  footer .footer-brand img{ height:70px; width:auto; display:block }
  @media (max-width:640px){ footer .footer-brand img{ height:40px } }
  footer .footer-text{ display:flex; flex-direction:column; justify-content:center; text-align:center; color:#B17844 }
  footer .footer-text p{ margin:.25rem 0; line-height:1.8 }
  
  /* =========================
     Contact（區域變數作用域化）
  ========================= */
  #contact{
    --brand:#8a5a5a; --ink:#343434; --muted:#6b6b6b; --line:#e9e6e6; --card:#fff; --bg:#faf9f9;
    --radius:16px; --shadow:0 10px 26px rgba(0,0,0,.08); --shadow2:0 14px 36px rgba(0,0,0,.12);
  
    padding:56px 0; background:var(--bg);
  }
  #contact .container{ max-width:1080px; margin:0 auto; padding:0 16px }
  .contact-head h2{ margin:0 0 .5rem; font-weight:800; letter-spacing:.5px; color:var(--ink); text-align:center }
  .contact-head .lead{ color:var(--muted); line-height:1.8; max-width:760px; margin:auto; text-align:center }
  
  .contact-grid{ display:grid; gap:22px; margin-top:20px; grid-template-columns:1fr }
  @media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1.2fr; gap:28px } }
  
  .contact-aside,.contact-form{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 20px; box-shadow:var(--shadow);
  }
  .contact-aside h3{ margin:.2rem 0 .6rem; color:var(--ink) }
  .feature-list{ margin:0; padding-left:1.1rem } .feature-list li{ margin:.4rem 0; color:var(--ink); line-height:1.7 }
  .feature-list strong{ color:var(--brand); font-weight:700 }
  
  .contact-info{ margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--line); color:var(--muted) }
  .contact-info a{ color:var(--brand) }
  
  .form-row{ margin-bottom:14px }
  .form-row.two-col{ display:grid; grid-template-columns:1fr; gap:12px }
  @media (min-width:720px){ .form-row.two-col{ grid-template-columns:1fr 1fr } }
  
  label,legend{ display:block; color:var(--ink); font-weight:600; margin-bottom:6px }
  input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea{
    width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
    outline:none; transition: box-shadow .2s, border-color .2s; font-size:16px;
  }
  input:focus, select:focus, textarea:focus{ border-color:rgba(138,90,90,.5); box-shadow:0 0 0 4px rgba(138,90,90,.12) }
  textarea{ resize:vertical }
  
  .checks{ display:grid; grid-template-columns:1fr; gap:.4rem }
  @media (min-width:540px){ .checks{ grid-template-columns:1fr 1fr } }
  .checks label{ font-weight:500; color:var(--ink) } .checks input{ margin-right:.4rem }
  
  .form-row.agree{ display:flex; justify-content:center; text-align:center; padding-top:4px }
  .form-row.agree label{
    display:inline-flex; align-items:center; gap:.5rem; margin:0; color:var(--muted); line-height:1.6; max-width:56ch;
    font-weight:500;
  }
  .form-row.agree input[type="checkbox"]{ width:1.05rem; height:1.05rem; accent-color:var(--brand); margin:0 }
  .tiny{ font-size:.88rem; color:var(--muted); margin-top:.6rem; text-align:center }
  
  /* =========================
     Stores（區域變數作用域化）
  ========================= */
  #stores{
    --brand:#8a5a5a; --ink:#333; --muted:#666; --line:#eee; --card-bg:#fff;
    --shadow:0 8px 24px rgba(0,0,0,.08); --shadow-hover:0 12px 28px rgba(0,0,0,.12);
    --radius:14px;
  }
  #stores h2{ font-weight:700; letter-spacing:.5px }
  #stores p{ color:var(--muted) }
  
  .store-list{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:.8rem }
  @media (min-width:640px){ .store-list{ grid-template-columns:repeat(2,1fr); gap:18px } }
  @media (min-width:1024px){ .store-list{ grid-template-columns:repeat(3,1fr); gap:20px } }
  
  .store{
    background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 18px; box-shadow:var(--shadow);
    transition:transform .25s, box-shadow .25s, border-color .25s;
  }
  .store:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color: rgba(138,90,90,.35) }
  .store h4{
    position:relative; margin:0 0 .4rem; padding-left:.75rem; font-weight:700; color:var(--ink); letter-spacing:.3px;
  }
  .store h4::before{
    content:""; position:absolute; left:0; top:.2rem; width:4px; height:1.1em; border-radius:2px;
    background:linear-gradient(180deg, var(--brand), #b37a7a);
  }
  .store p{ margin:.3rem 0; color:var(--ink); line-height:1.65 }
  .store a{ color:var(--brand); text-underline-offset:2px } .store a:hover{ text-decoration:underline }
  .store .note{ color:var(--muted); font-size:.95rem }
  .region-banner{ margin:1rem 0 .6rem; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow) }
  .region-banner img{ width:100%; display:block; transform:scale(1.01) }
  .contact-info{ margin-top:1.2rem; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#faf9f9; box-shadow:var(--shadow) }
  .contact-info a{ color:var(--brand) }
  
  
  
  
  /* Size Finder Modal */
      .modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.3s;}
      .modal.show{opacity:1; pointer-events:auto}
      .modal-card{width:min(720px,92%); background:var(--bg-2); border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
      .modal-card .hd{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--line)}
      .modal-card .bd{padding:1rem 1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
      .modal-card label{font-size:.9rem; color:var(--muted)}
      .modal-card input, .modal-card select{width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line)}
      .modal-card .ft{display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--line)}
      .size-result{background:#F4F7F5; border:1px dashed #C9D8CE; padding:.8rem 1rem; border-radius:12px}
      @media (max-width: 760px){
        .modal-card{
          width:100%;
          max-width:none;
          max-height:calc(89dvh - env(safe-area-inset-bottom));
          border-radius:16px 16px 0 0;
          border-left:none; border-right:none;      /* 靠邊更像原生抽屜 */
          transform:translateY(12px);
          transition:transform .28s ease, opacity .25s ease;
        }
        .modal.show .modal-card{transform:translateY(0)}
      
    }
  
  
  
  /* 手機：關掉 hover、標題置中顯示 */
  @media (hover:none){
    /* 不要縮放、不要 hover 提示條 */
    .gallery figure { cursor:auto; }
    .gallery figure:hover img { transform:none !important; }
    .gallery figure::after { display:none !important; }
  
    /* 關鍵：保持 translate(-50%,-50%)，讓中心點對齊 */
    .gallery figure::before{
      opacity: 1 !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
  
      /* 手機排版優化 */
      width: auto;
      max-width: 82%;
      padding: .5rem .75rem;
      text-align: center;
      line-height: 1.45;
      white-space: normal;
      word-break: break-word;
      pointer-events: none;
    }
  }
  /* TOP按鈕 */
  :root{
    --rose: #B27777;   /* 乾燥玫瑰 */
    --pearl:#FAF7F4;   /* 珍珠米白 */
    --fog:  #ECE8E4;   /* 霧灰 */
    --shadow-soft: 0 10px 25px rgba(0,0,0,.08);
  }
  
  /* 無障礙隱藏文字 */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  
  .back-to-top{
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 999;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 9999px;
    background-color: var(--rose);
    /* 輕微描邊讓色塊更乾淨 */
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: var(--shadow-soft);
    color: #fff;
    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease, background-color .22s ease, filter .22s ease;
    opacity: 0; pointer-events: none; transform: translateY(8px);
  }
  .back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
  .back-to-top:hover{ transform: translateY(-1px); filter: brightness(0.97); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
  /* 支援 color-mix 的瀏覽器再微調色溫；不支援則用上面的 filter */
  @supports (background-color: color-mix(in srgb, red 50%, white 50%)){
    .back-to-top:hover{ background-color: color-mix(in srgb, var(--rose) 92%, black 8%); filter:none; }
  }
  .back-to-top:focus-visible{ outline: 2px solid color-mix(in srgb, var(--rose) 35%, white 65%); outline-offset: 2px; }
  .back-to-top svg{ width: 22px; height: 22px; }
  
  @media (min-width: 768px){
    .back-to-top{
      width: 48px; height: 48px;
      right: max(24px, env(safe-area-inset-right));
      bottom: max(28px, env(safe-area-inset-bottom));
    }
    .back-to-top svg{ width: 24px; height: 24px; }
  }
  
  
   /* 文章樣式 */
  :root{
        --rose:#B27777;    /* 乾燥玫瑰 */
        --pearl:#FAF7F4;   /* 珍珠米白 */
        --fog:#ECE8E4;     /* 霧灰 */
        --ink:#2e2e2e;
        --muted:#6b6b6b;
        --maxw: 980px;
      }
     
      .hero .wrap{padding:28px 0 22px;}
      h1,h2,h3{font-family:"Noto Serif TC","Noto Sans TC",serif; letter-spacing:.02em;}
      h1{margin:0; font-size:clamp(26px,4.6vw,40px)}
      .lead{color:#444; margin:.6rem 0 0}
      main{display:grid; grid-template-columns:1fr; gap:24px; margin:24px 0 56px;}
      @media (min-width: 1024px){ main{grid-template-columns:240px 1fr; gap:32px;} }
  
      /* TOC 側欄 */
      .toc{position:sticky; top:74px; align-self:start; padding:14px; border:1px solid var(--fog); border-radius:14px; background:#fff}
      .toc h3{margin:0 0 10px; font-size:15px}
      .toc a{display:block; padding:6px 8px; border-radius:8px; color:var(--muted); text-decoration:none; font-size:14px}
      .toc a.active{background:var(--pearl); color:#000}
  
      /* 文章本體 */
      article{min-width:0;}
      section{scroll-margin-top:90px; margin:0 0 26px;}
      h2{font-size:clamp(20px,3.4vw,28px); margin:0 0 10px}
      p{margin:.3rem 0 .9rem}
      .note{background:var(--pearl); border-left:4px solid var(--rose); padding:12px 14px; border-radius:8px; color:#494949}
      ul{padding-left:1.2rem; margin:.3rem 0 1rem}
      .muted{color:var(--muted); font-size:14px}
  
      /* 圖片與版面 */
      figure{margin:12px 0; border:1px solid var(--fog); border-radius:14px; overflow:hidden; background:#fff}
      .img-full img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#fff}
      .img-grid-2{display:grid; gap:10px; grid-template-columns:1fr; }
      .img-grid-2 img{width:100%; display:block; aspect-ratio:3/4; object-fit:cover; background:#fff}
      @media (min-width: 720px){ .img-grid-2{grid-template-columns:1fr 1fr;} }
      figcaption{padding:8px 12px; font-size:13px; color:#444}
      .caption-badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:var(--pearl); border:1px solid var(--fog); margin-right:6px}
  
      /* Lightbox */
      .lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.62); opacity:0; pointer-events:none; transition:.2s}
      .lightbox.show{opacity:1; pointer-events:auto}
      .lightbox img{max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); background:#fff}
  
      /* 區塊分隔（輕） */
      .divider{height:1px; background:var(--fog); margin:20px 0}
  
  
      :root{
      --rose:#B74B4B;   /* 標題重點紅（可換成你的品牌紅/乾燥玫瑰） */
      --ink:#2f2f2f;
      --muted:#7a7a7a;
      --fog:#EEE9E5;
      --pearl:#FAF7F4;
      --maxw: 1100px;
      --sidebar: 260px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; color:var(--ink); background:#fff;
      font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
      line-height:1.9;
    }
    .wrap{max-width:var(--maxw); margin:auto; padding:0 16px}
    header{border-bottom:1px solid var(--fog); background:#fff}
    
    
  
    /* 版面：左側專欄 + 右側文章 */
    .layout{display:grid; gap:24px; grid-template-columns:1fr; padding:26px 0 60px}
    @media (min-width: 980px){
      .layout{grid-template-columns:var(--sidebar) 1fr; align-items:start}
    }
  
    /* 左側專欄（像範例圖） */
    .sidebar{
      position:sticky; top:70px; align-self:start;
      border-radius:12px; background:#fff;
    }
    .side-head{
      font-family:"Noto Serif TC","Noto Sans TC",serif;
      color:var(--rose); font-size:26px; letter-spacing:.04em;
      margin:0 0 6px;
      padding:4px 2px;
      border-bottom:3px solid var(--rose);
      width:max-content;
    }
    .topics{margin-top:10px; border:1px solid #f1eeeb; border-radius:12px; overflow:hidden}
    .topic{
      display:flex; align-items:center; gap:10px;
      padding:12px 14px; text-decoration:none; color:#444; background:#fff;
      border-bottom:1px solid #f4f1ee;
    }
    .topic:last-child{border-bottom:0}
    .topic .plus{
      width:14px; height:14px; display:inline-grid; place-items:center; color:#888; font-weight:600;
    }
    .topic span.label{flex:1}
    .topic:hover{background:#fcfbfa}
    .topic.active{background:#fff; color:#000}
    .topic.active .label{font-weight:700}
    .topic small{display:block; color:var(--muted); font-size:12px}
  
    /* 手機：側欄變折疊 */
    .side-toggle{display:none; margin:0 0 8px}
    @media (max-width: 979px){
      .sidebar{position:relative; top:0}
      .side-toggle{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--fog); border-radius:10px}
      .topics{display:none}            /* 預設收合 */
      .topics.show{display:block}      /* 點擊展開 */
    }
  
    /* 文章（文字為主） */
    article{min-width:0}
    .title{margin:6px 0 8px; font-size:clamp(26px,4.2vw,38px); font-family:"Noto Serif TC","Noto Sans TC",serif}
    .meta{color:var(--muted); font-size:14px; margin-bottom:18px}
    article p{margin:.6rem 0 1.2rem; font-size:18px}
    article h2{font-size:clamp(20px,3.4vw,26px); margin:2rem 0 .6rem}
    article h3{font-size:20px; margin:1.2rem 0 .4rem}
    article ul{padding-left:1.2rem; margin:.2rem 0 1rem}
    .note{background:var(--pearl); border-left:4px solid var(--rose); padding:12px 14px; border-radius:8px; color:#494949}
  
    /* 圖片（可選） */
    figure{margin:16px 0; border:1px solid var(--fog); border-radius:12px; overflow:hidden; background:#fff}
    .img-full img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#fff}
    .img-half{
    display:grid; gap:10px;
    grid-template-columns:1fr;        /* 手機一欄 */
  }
  @media (min-width:720px){
    .img-half{ grid-template-columns:1fr; }  /* 桌機兩欄 */
  }
    /* 改成正方形縮圖 */
  .img-half img{
    width:100%;
    aspect-ratio:1/1;   /* 1:1 正方形 */
    object-fit:cover;   /* 保持填滿，必要時會裁切 */
    display:block;
    background:#fff;
  }
    figcaption{padding:8px 12px; font-size:13px; color:#555}
  
    /* 分隔線 */
    hr{border:0; height:1px; background:var(--fog); margin:28px 0}
  
    /* ===== 版面與文章 RWD（重寫版） ===== */
  
  /* 容器 */
  .wrap{max-width:var(--maxw); margin:auto; padding:0 16px}
  
  /* 版面：左側專欄 + 右側文章 */
  .layout{
    display:grid; gap:24px;
    grid-template-columns:1fr;     /* 手機：單欄 */
    padding:26px 0 60px;
  }
  @media (min-width: 980px){
    .layout{
      grid-template-columns: var(--sidebar) 1fr;  /* 桌機：專欄 + 文章 */
      align-items:start;
    }
  }
  
  /* 左側專欄 */
  .sidebar{
    position:sticky; top:70px; align-self:start;
    border-radius:12px; background:#fff;
  }
  .side-head{
    font-family:"Noto Serif TC","Noto Sans TC",serif;
    color:var(--rose); font-size:26px; letter-spacing:.04em;
    margin:0 0 6px; padding:4px 2px;
    border-bottom:3px solid var(--rose);
    width:max-content;
  }
  .topics{margin-top:10px; border:1px solid #f1eeeb; border-radius:12px; overflow:hidden}
  .topic{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; color:#444; background:#fff;
    border-bottom:1px solid #f4f1ee; text-decoration:none;
  }
  .topic:last-child{border-bottom:0}
  .topic .plus{width:14px; height:14px; display:grid; place-items:center; color:#888; font-weight:600}
  .topic .label{flex:1}
  .topic:hover{background:#fcfbfa}
  .topic.active{color:#000}
  .topic.active .label{font-weight:700}
  .topic small{display:block; color:var(--muted); font-size:12px}
  
  /* 手機：側欄改折疊 */
  .side-toggle{display:none; margin:0 0 8px}
  @media (max-width: 979px){
    .sidebar{position:relative; top:0}
    .side-toggle{display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--fog); border-radius:10px}
    .topics{display:none}
    .topics.show{display:block}
  }
  
  /* 文章（閱讀寬度與排版） */
  article{
    min-width:0;
    --read:72ch;            /* 限制每行字數，易讀 */
    max-width:var(--read);
  }
  .title{
    margin:6px 0 8px;
    font-size:clamp(26px,4.2vw,38px);
    font-family:"Noto Serif TC","Noto Sans TC",serif;
  }
  .meta{color:var(--muted); font-size:14px; margin-bottom:18px}
  article p{margin:.6rem 0 1.2rem; font-size:18px}
  article h2{font-size:clamp(20px,3.4vw,26px); margin:2rem 0 .6rem}
  article h3{font-size:20px; margin:1.2rem 0 .4rem}
  article ul{padding-left:1.2rem; margin:.2rem 0 1rem}
  .note{background:var(--pearl); border-left:4px solid var(--rose); padding:12px 14px; border-radius:8px; color:#494949}
  
  /* 文字在不同裝置的微調 */
  @media (max-width: 599px){
    body{line-height:1.95}
    article p{font-size:16px}
    article h2{font-size:22px}
    article h3{font-size:18px}
  }
  @media (min-width: 1200px){
    article{--read:78ch}
  }
  
  /* 圖片（可選） */
  figure{
    margin:16px 0; border:1px solid var(--fog);
    border-radius:12px; overflow:hidden; background:#fff;
  }
  figcaption{padding:8px 12px; font-size:13px; color:#555}
  
  /* 全寬橫圖 */
  .img-full img{
    width:100%; display:block;
    aspect-ratio:16/9; object-fit:cover; background:#fff;
  }
  
  /* 兩圖區（正方形縮圖） */
  .img-half{
    display:grid; gap:10px;
    grid-template-columns:1fr;           /* 手機：一欄 */
  }
  
  /* === 閱讀間距優化（字距＋行距＋段落距） === */
  
  /* 可微調的全站變數 */
  :root{
    --leading-body: 1.95;     /* 內文行距（桌機） */
    --leading-body-sm: 2.05;  /* 內文行距（手機） */
    --tracking-body: 0.088em; /* 內文字距 */
    --tracking-serif: 0.01em; /* 標題字距 */
    --para-gap: 1.15rem;      /* 段落間距 */
  }
  
  /* 內文行距與字距 */
  body{
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
  }
  
  /* 文章主體：段落與標題的上下距離 */
  article p{
    margin: .75rem 0 var(--para-gap);      /* 段落之間更鬆 */
    letter-spacing: var(--tracking-body);
  }
  article p + p{ margin-top: .2rem; }       /* 連續段落微拉開 */
  article ul{ margin: .4rem 0 1.1rem; }
  article li{ margin: .3rem 0 .35rem; }     /* 清單項目拉距 */
  
  /* 標題的字距與行高 */
  article h2{
    margin: 2.2rem 0 .85rem;
    letter-spacing: var(--tracking-serif);
    line-height: 1.45;
  }
  article h3{
    margin: 1.4rem 0 .6rem;
    letter-spacing: var(--tracking-serif);
    line-height: 1.5;
  }
  
  /* 專欄側欄的字距與內距 */
  .side-head{
    letter-spacing: .04em;                  /* 保留你原本的風格 */
  }
  .topic{
    padding: 14px 16px;                     /* 每列再鬆一點 */
    line-height: 1.6;
  }
  .topic .label{ letter-spacing: .02em; }
  
  /* 圖說也加一點呼吸感 */
  figcaption{ line-height: 1.6; letter-spacing: .006em; }
  
  /* 手機：再放鬆一點行距與段落距 */
  @media (max-width: 599px){
    body{ line-height: var(--leading-body-sm); }
    article p{ font-size: 16.5px; margin: .8rem 0 1.2rem; }
    article h2{ margin: 2rem 0 .9rem; }
    article h3{ margin: 1.2rem 0 .7rem; }
  }