:root{
    --bg:#F7F6F2; --bg-alt:#F1F1EE; --bg-deep:#EDECE7;
    --ink:#222222; --ink-2:#4a4a4a; --ink-3:#9A9A95;
    --line:#E3E2DD;
    --sage:#A8C5B0; --sage-deep:#7FA589; --sage-tint:#EEF3EF;
    --serif:"Noto Serif TC", serif;
    --sans:"Noto Sans TC", sans-serif;
    --mono:"JetBrains Mono", monospace;
    --display:"Cormorant Garamond","Noto Serif TC",serif;
    --maxw:1200px;
    --readw:720px;
    --pad:clamp(20px, 5vw, 48px);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.7;
  }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
  .read{ max-width:var(--readw); margin-inline:auto; }

  .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.22em;
    text-transform:uppercase; color:var(--ink-3); font-weight:400;
  }

  /* ===== NAV ===== */
  .nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
  .brand{ display:flex; align-items:baseline; gap:14px; text-decoration:none; }
  .brand-en{ font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.04em; color:var(--ink); }
  .brand-zh{
    font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.34em;
    color:var(--ink-3); padding-left:14px; border-left:1px solid var(--line);
  }
  .btn-book{
    font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.16em;
    color:var(--ink); text-decoration:none; border:1px solid var(--ink);
    border-radius:999px; padding:11px 26px; background:transparent; cursor:pointer;
    transition:background .35s ease, color .35s ease;
  }
  .btn-book:hover{ background:var(--ink); color:var(--bg); }
  .btn-home{ font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.16em; color:var(--ink); text-decoration:none; border:1px solid var(--ink); border-radius:999px; padding:11px 26px; transition:background .35s ease, color .35s ease; display:inline-flex; align-items:center; white-space:nowrap; }
  @media(max-width:600px){ .btn-home{ font-size:11px; letter-spacing:.06em; padding:6px 10px; } .btn-book{ font-size:11px; letter-spacing:.06em; padding:6px 10px; } }
  .btn-home:hover{ background:var(--ink); color:var(--bg); }

  /* ===== ARTICLE HEADER ===== */
  .article-head{ padding-top:clamp(40px,6vw,72px); }

  .back-link{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:12px; letter-spacing:.12em;
    color:var(--ink-3); text-decoration:none;
    transition:color .25s ease;
  }
  .back-link .arr{ transition:transform .3s ease; }
  .back-link:hover{ color:var(--ink); }
  .back-link:hover .arr{ transform:translateX(-5px); }

  .article-cat{
    display:inline-block; margin-top:30px;
    font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--sage-deep);
    border:1px solid var(--sage); background:var(--sage-tint);
    padding:6px 14px; border-radius:999px;
  }

  .article-title{
    font-family:var(--serif); font-weight:600; color:var(--ink);
    font-size:clamp(30px,4.6vw,52px); line-height:1.28; letter-spacing:.01em;
    margin-top:24px; text-wrap:pretty;
  }

  .article-meta{
    display:flex; align-items:center; flex-wrap:wrap; gap:18px;
    margin-top:28px; padding-bottom:0;
    font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--ink-3);
  }
  .article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
  .article-meta .author{ color:var(--ink-2); }

  .cover{
    position:relative; margin-top:44px;
    border-radius:2px; overflow:hidden;
    aspect-ratio:16/8;
    background:var(--bg-deep);
  }
  .cover .ph{
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(45deg, rgba(127,165,137,.14) 0 1px, transparent 1px 18px),
      linear-gradient(150deg, var(--sage-tint) 0%, var(--bg-deep) 100%);
    display:flex; align-items:center; justify-content:center;
  }
  .ph-label{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    color:var(--sage-deep); text-transform:uppercase;
    background:rgba(247,246,242,.7); padding:5px 11px; border-radius:2px;
  }
  .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  /* ===== ARTICLE BODY ===== */
  .article-body{ margin-top:clamp(48px,7vw,80px); }
  .article-body > * + *{ margin-top:28px; }

  .article-body .article-visual{
    display:block; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  }

  .article-body h2{
    font-family:var(--serif); font-weight:600; color:var(--ink);
    font-size:clamp(24px,3vw,30px); line-height:1.4; letter-spacing:.01em;
    margin-top:60px; padding-top:8px;
  }
  .article-body h3{
    font-family:var(--serif); font-weight:600; color:var(--ink);
    font-size:clamp(19px,2.2vw,22px); line-height:1.5;
    margin-top:44px;
  }
  .article-body p{
    color:var(--ink-2); font-size:17px; font-weight:300; line-height:1.95;
    text-wrap:pretty;
  }
  .article-body a{ color:var(--sage-deep); text-decoration:underline; text-underline-offset:3px; }

  .article-body ul{
    list-style:none; padding:0;
    display:flex; flex-direction:column; gap:13px;
  }
  .article-body ul li{
    position:relative; padding-left:26px;
    color:var(--ink-2); font-size:17px; font-weight:300; line-height:1.8;
  }
  .article-body ul li::before{
    content:""; position:absolute; left:2px; top:13px;
    width:7px; height:7px; border-radius:50%;
    background:var(--sage-deep);
  }

  .article-body blockquote{
    border-left:2px solid var(--sage-deep);
    padding:6px 0 6px 28px; margin-block:40px;
    font-family:var(--serif); font-weight:500; font-style:normal;
    font-size:clamp(20px,2.4vw,25px); line-height:1.6; color:var(--ink);
    text-wrap:pretty;
  }

  .article-body hr{
    border:none; height:1px; background:var(--line);
    margin-block:56px;
  }

  /* ===== 表格 ===== */
  .table-wrap{ overflow-x:auto; margin-block:36px; -webkit-overflow-scrolling:touch; }
  .tbl{ width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
  .tbl caption{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-3); text-align:left; padding-bottom:14px;
  }
  .tbl th, .tbl td{
    text-align:left; padding:14px 16px; border-bottom:1px solid var(--line);
    font-weight:300; color:var(--ink-2); line-height:1.6;
  }
  .tbl thead th{
    font-family:var(--sans); font-weight:500; color:var(--ink);
    font-size:13.5px; letter-spacing:.04em;
    border-bottom:1.5px solid var(--sage-deep); background:var(--sage-tint);
  }
  .tbl tbody tr:hover{ background:var(--bg-alt); }
  .tbl td:first-child, .tbl th:first-child{ font-weight:400; color:var(--ink); }

  /* ===== 提醒卡 ===== */
  .note{
    background:var(--sage-tint); border:1px solid var(--sage);
    border-radius:4px; padding:22px 26px; margin-block:36px;
  }
  .note p{ font-size:15.5px; color:var(--ink-2); line-height:1.85; }
  .note .note-label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--sage-deep); display:block; margin-bottom:10px;
  }

  /* ===== FAQ ===== */
  .faq{ margin-top:16px; }
  .faq details{ border-bottom:1px solid var(--line); padding-block:20px; }
  .faq summary{
    font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink);
    cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px;
    line-height:1.5;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary .q-mark{ color:var(--sage-deep); font-family:var(--mono); font-size:20px; transition:transform .3s ease; flex-shrink:0; }
  .faq details[open] summary .q-mark{ transform:rotate(45deg); }
  .faq details p{ color:var(--ink-2); font-size:16px; font-weight:300; line-height:1.9; margin-top:16px; }

  /* ===== 延伸閱讀 ===== */
  .related{ margin-top:clamp(70px,9vw,110px); border-top:1px solid var(--line); padding-top:54px; }
  .related-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; }
  .related-head h2{ font-family:var(--serif); font-weight:500; font-size:24px; letter-spacing:.04em; }

  .related-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(20px,2.4vw,34px);
  }
  .rcard{ display:flex; flex-direction:column; text-decoration:none; color:inherit;
    transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .rcard-media{ position:relative; overflow:hidden; border-radius:2px; background:var(--bg-deep); aspect-ratio:4/3; }
  .rcard-media img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .rcard:hover .rcard-media img{ transform:scale(1.06); }
  .rcard .ph{
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(45deg, rgba(127,165,137,.14) 0 1px, transparent 1px 16px),
      linear-gradient(150deg, var(--sage-tint) 0%, var(--bg-deep) 100%);
    display:flex; align-items:center; justify-content:center;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .rcard-cat{
    position:absolute; top:12px; right:12px; z-index:2;
    font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink); background:rgba(247,246,242,.92); padding:6px 11px;
    border-radius:999px; border:1px solid var(--line);
  }
  .rcard:hover{ transform:translateY(-8px); }
  .rcard:hover .ph{ transform:scale(1.06); }
  .rcard-body{ padding-top:18px; display:flex; flex-direction:column; gap:9px; }
  .rcard-date{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-3); }
  .rcard-title{
    font-family:var(--serif); font-weight:600; color:var(--ink);
    font-size:18px; line-height:1.45; text-wrap:pretty; transition:color .25s ease;
  }
  .rcard:hover .rcard-title{ color:var(--sage-deep); }

  /* ===== 底部 CTA ===== */
  .cta{
    position:relative; margin-top:clamp(70px,9vw,110px);
    border-radius:2px; overflow:hidden;
    background:var(--bg-deep);
  }
  .cta-media{
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(135deg, rgba(127,165,137,.16) 0 2px, transparent 2px 22px),
      linear-gradient(160deg, #cdd6cc 0%, #aeb9ad 48%, #8f9c8d 100%);
  }
  .cta-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,32,28,.34) 0%, rgba(20,24,20,.62) 100%); }
  .cta-inner{
    position:relative; z-index:2; text-align:center;
    padding:clamp(56px,8vw,96px) clamp(28px,6vw,64px);
  }
  .cta-kicker{ font-family:var(--display); font-style:italic; font-size:clamp(20px,2.4vw,26px); color:var(--sage); margin-bottom:18px; }
  .cta-text{
    font-family:var(--serif); font-weight:500; color:#fff;
    font-size:clamp(20px,2.6vw,28px); line-height:1.65; letter-spacing:.01em;
    max-width:640px; margin-inline:auto; text-wrap:pretty;
  }
  .btn-cta{
    display:inline-block; margin-top:36px;
    font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.16em;
    color:var(--ink); background:var(--bg); text-decoration:none;
    border-radius:999px; padding:14px 38px;
    transition:transform .3s ease, background .3s ease;
  }
  .btn-cta:hover{ transform:translateY(-3px); background:#fff; }

  /* ===== FOOTER ===== */
  .footer{ border-top:1px solid var(--line); background:var(--bg-alt); margin-top:clamp(70px,9vw,110px); }
  .footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-block:42px; }
  .footer .brand-en{ font-size:17px; }
  .footer-copy{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--ink-3); }

  /* ===== RWD ===== */
  @media (max-width:780px){
    .related-grid{ grid-template-columns:1fr; gap:42px; }
  }
  @media (max-width:600px){
    .nav-inner{ height:64px; }
    .brand-zh{ display:none; }
    .cover{ aspect-ratio:4/3; }
    .article-body p, .article-body ul li{ font-size:16px; }
  }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

  /* 語言切換 */
  .lang-switch{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; margin-right:4px; }
  .lang-switch .lang-link{ color:var(--ink-3); text-decoration:none; transition:color .2s ease; padding:2px 1px; }
  .lang-switch .lang-link:hover{ color:var(--ink); }
  .lang-switch .lang-active{ color:var(--sage-deep); font-weight:500; }
  .lang-switch .lang-sep{ color:var(--line); }
  @media(max-width:600px){ .lang-switch{ font-size:11px; gap:5px; } }
  /* ---------- Header / Floating CTA / Footer（逐字複製自新版首頁 index.html） ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border-bottom:1px solid #E3E1DC;
  }
  @font-face{
    font-family:'LINE Seed TW'; font-weight:300 400; font-style:normal; font-display:swap;
    src:url('../assets/fonts/LINESeedTW_Rg.woff2') format('woff2');
  }
  @font-face{
    font-family:'LINE Seed TW'; font-weight:500 700; font-style:normal; font-display:swap;
    src:url('../assets/fonts/LINESeedTW_Bd.woff2') format('woff2');
  }
  @font-face{
    font-family:'花園明朝A'; font-weight:400 700; font-style:normal; font-display:swap;
    src:url('../assets/fonts/HanaMinA.woff2') format('woff2');
  }
  header .wrap, footer .wrap{max-width:1080px; padding-left:32px; padding-right:32px;}
  header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:20px; padding-bottom:20px;
  }
  .logo{font-family:'花園明朝A',serif; font-size:18px; letter-spacing:.05em;}
  .logo small{display:block; font-family:'LINE Seed TW',sans-serif; font-size:11px; color:#8B8985; letter-spacing:.15em; margin-top:2px;}
  .brand-logo{height:68px; width:auto; display:block;}
  .brand-logo.footer-logo{height:74px;}

  .float-cta{
    position:fixed; right:24px; bottom:24px; z-index:150;
    height:56px; padding:0 26px; border-radius:999px; border:none;
    background:#59633E; display:flex; align-items:center; gap:10px;
    box-shadow:0 8px 24px rgba(20,22,14,.28); cursor:pointer;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .float-cta span{
    font-family:'花園明朝A',serif; font-size:15px; letter-spacing:.04em; color:#FFFFFF; white-space:nowrap;
  }
  .float-cta:hover{background:#3F4830; transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,22,14,.34);}
  @media (max-width:540px){
    .float-cta{height:48px; padding:0 22px; right:16px; bottom:16px;}
    .float-cta span{font-size:13px;}
  }
  .nav-links{display:flex; align-items:center; gap:26px;}
  .lang-toggle{display:flex; align-items:center; gap:6px; font-size:13px; color:#8B8985; font-family:'LINE Seed TW', sans-serif;}
  .lang-toggle a{color:#8B8985; text-decoration:none; transition:color .2s ease;}
  .lang-toggle a.active{color:#3F4830; font-weight:500;}
  .lang-toggle a:hover{color:#59633E;}
  .lang-toggle span{color:#E3E1DC;}
  .nav-link{font-size:14px; color:#8B8985; letter-spacing:.02em; text-decoration:none; transition:color .2s ease; font-family:'LINE Seed TW', sans-serif;}
  .nav-link:hover{color:#59633E;}

  footer{border-top:1px solid #E3E1DC; padding:36px 0;}
  footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  footer .logo small{margin-top:4px;}
  footer .meta{font-size:12px; color:#8B8985; display:flex; gap:18px; font-family:'LINE Seed TW', sans-serif;}
  footer .meta-links{display:inline-flex; gap:18px;}
  footer .meta-links a{color:#8B8985; text-decoration:none;}

  @media (max-width: 540px){
    footer .wrap{flex-direction:row; align-items:center; justify-content:flex-start; gap:28px;}
    footer .logo{flex-shrink:0;}
    footer .meta{flex-direction:column; align-items:flex-start; gap:6px;}
    .brand-logo.footer-logo{height:56px;}
    header .wrap{padding-top:14px; padding-bottom:14px;}
    .brand-logo{height:50px;}
    .nav-links{gap:10px;}
    .lang-toggle{gap:3px; font-size:10.5px;}
    .nav-link{font-size:12px;}
  }