*{margin:0;padding:0;box-sizing:border-box}
:root{
  --orange:#e85d3a;--orange-light:#f4a261;--orange-bg:rgba(232,93,58,0.05);
  --navy:#1d2d3f;--navy-light:#37465f;
  --text-dark:#1a1a1a;--text-body:#2d2d2d;--text-zh:#222;--text-en:#3a3a3a;--text-sub:#555;
  --warm-white:#fafaf8;--warm-bg:#f5f3ef;--warm-gray:#e8e4dd;
  --teal:#008080;
}
body{font-family:'Inter','Noto Sans TC',sans-serif;background:var(--warm-white);color:var(--text-dark);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.8}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade{opacity:0;animation:fadeUp .55s ease forwards}
.d1{animation-delay:.08s}.d2{animation-delay:.14s}.d3{animation-delay:.2s}.d4{animation-delay:.26s}

/* NAV */
.ta-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:100}
.ta-nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 40px;min-height:68px}
.ta-logo{max-width:170px;width:100%}
.ta-nav-links{display:flex;align-items:center}
.ta-nav-item{padding:10px 18px;text-decoration:none;font-size:11px;letter-spacing:2.5px;font-weight:600;color:#666;transition:color .3s}
.ta-nav-item:hover,.ta-nav-item.active{color:var(--orange)}

/* HERO BANNER */
.hero-banner{width:100%;height:360px;background:url('/guide/images/guide-leaflet-hero.jpg') center/cover no-repeat;position:relative;display:flex;align-items:flex-end}
.hero-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(29,45,63,.88) 0%,rgba(29,45,63,.35) 55%,transparent 100%)}
.hero-banner-content{position:relative;z-index:2;max-width:1100px;margin:0 auto;width:100%;padding:0 40px 44px;color:#fff}
.hero-banner-content h1{font-family:'Noto Sans TC',sans-serif;font-size:34px;font-weight:900;line-height:1.3;letter-spacing:.5px;margin-bottom:6px}
.hero-banner-content .en-title{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;color:var(--orange-light);letter-spacing:-.3px;margin-bottom:10px}
.hero-banner-content .hero-desc{font-family:'Noto Sans TC',sans-serif;font-size:14px;color:rgba(255,255,255,.78);max-width:520px;line-height:1.7}

/* BREADCRUMB */
.breadcrumb{max-width:1100px;margin:0 auto;padding:14px 40px 0;font-size:13px;color:#999}
.breadcrumb a{color:#888;text-decoration:none}.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{margin:0 6px;color:#ccc}

/* SECTION HEADERS */
.sec-header{margin-bottom:32px}
.sec-title-zh{font-family:'Noto Sans TC',sans-serif;font-size:26px;font-weight:900;color:var(--text-dark);margin-bottom:3px;letter-spacing:.5px}
.sec-title-en{font-family:'DM Serif Display',serif;font-size:18px;font-weight:400;color:var(--orange);letter-spacing:-.3px}

.content-sec{max-width:1100px;margin:0 auto;padding:40px 40px 44px}
.divider{width:50px;height:1px;background:var(--warm-gray);margin:0 auto}

/* ===== 7-STEP TABLE ===== */
.steps-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
.steps-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;border:1px solid #e2e0db;background:#fff}
.steps-table thead th{
  background:var(--navy);color:#fff;
  font-family:'Noto Sans TC','Inter',sans-serif;
  font-size:13px;font-weight:700;padding:14px 18px;text-align:left;
  letter-spacing:.5px;white-space:nowrap;
}
.steps-table thead th:first-child{width:54px;text-align:center}
.steps-table thead th:nth-child(2){min-width:160px}
.steps-table thead th:nth-child(3){min-width:300px}
.steps-table thead th:nth-child(4){min-width:220px}
.steps-table tbody tr{transition:background .15s}
.steps-table tbody tr:hover{background:var(--orange-bg)}
.steps-table tbody td{
  padding:16px 18px;border-bottom:1px solid #f0eeea;
  vertical-align:top;font-size:14px;line-height:1.75;
}
.steps-table tbody tr:last-child td{border-bottom:none}
.step-num-cell{
  text-align:center;font-family:'DM Serif Display',serif;
  font-size:20px;color:var(--orange);font-weight:400;
}
.step-name-zh{font-family:'Noto Sans TC',sans-serif;font-size:15px;font-weight:700;color:var(--text-dark);display:block;margin-bottom:2px}
.step-name-en{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--orange);display:block}
.step-desc-zh{font-family:'Noto Sans TC',sans-serif;font-size:14px;font-weight:500;color:var(--text-zh);display:block;margin-bottom:4px}
.step-desc-en{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--text-sub);display:block}
.step-tip{
  font-family:'Noto Sans TC','Inter',sans-serif;font-size:13px;
  color:var(--text-body);line-height:1.8;
}
.step-tip li{margin-bottom:2px;padding-left:4px}
.step-tip li::marker{color:var(--orange)}

/* ===== FOLDING METHODS ===== */
.fold-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fold-card{
  background:#fff;border:1px solid #eee;border-radius:14px;
  padding:24px 16px 20px;text-align:center;transition:all .25s;
}
.fold-card:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 8px 24px rgba(232,93,58,.06)}
.fold-svg{margin:0 auto 14px;display:block}
.fold-name{font-family:'Noto Sans TC',sans-serif;font-size:16px;font-weight:700;color:var(--text-dark);margin-bottom:2px}
.fold-name-en{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--orange);margin-bottom:6px}
.fold-pages{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:#fff;background:var(--navy);padding:2px 10px;border-radius:10px;display:inline-block;margin-bottom:8px}
.fold-use{font-family:'Noto Sans TC',sans-serif;font-size:13px;color:var(--text-sub);line-height:1.6}

/* ===== FOLDING TIPS ===== */
.fold-tips-box{
  background:var(--warm-bg);border-left:4px solid var(--orange);
  border-radius:0 12px 12px 0;padding:24px 28px;margin-top:28px;
}
.fold-tips-title{font-family:'Noto Sans TC',sans-serif;font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.fold-tips-list{list-style:none;padding:0}
.fold-tips-list li{
  font-family:'Noto Sans TC','Inter',sans-serif;font-size:14px;font-weight:500;
  color:var(--text-body);line-height:2;padding-left:20px;position:relative;
}
.fold-tips-list li::before{content:'';position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:50%;border:2px solid var(--orange)}
.fold-tips-list li .en{font-family:'Inter',sans-serif;font-size:13px;color:var(--text-sub);display:block}

/* ===== SIZE TABLE ===== */
.size-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;border:1px solid #e2e0db;background:#fff}
.size-table th{background:var(--navy);color:#fff;font-family:'Noto Sans TC','Inter',sans-serif;font-size:13px;font-weight:600;padding:12px 16px;text-align:left}
.size-table td{padding:12px 16px;font-family:'Noto Sans TC','Inter',sans-serif;font-size:14px;font-weight:500;color:var(--text-body);border-bottom:1px solid #f0eeea}
.size-table tr:last-child td{border-bottom:none}
.size-table tr:hover td{background:var(--orange-bg)}
.td-sub{font-family:'Inter',sans-serif;font-size:12px;color:#888;display:block;margin-top:1px}
.td-tag{font-size:11px;font-weight:700;color:var(--orange);background:var(--orange-bg);padding:2px 8px;border-radius:6px;display:inline-block}

/* ===== PAPER TABLE ===== */
.paper-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;border:1px solid #e2e0db;background:#fff}
.paper-table th{background:var(--navy);color:#fff;font-family:'Noto Sans TC','Inter',sans-serif;font-size:13px;font-weight:600;padding:12px 16px;text-align:left}
.paper-table td{padding:12px 16px;font-family:'Noto Sans TC','Inter',sans-serif;font-size:14px;font-weight:500;color:var(--text-body);border-bottom:1px solid #f0eeea}
.paper-table tr:last-child td{border-bottom:none}
.paper-table tr:hover td{background:var(--orange-bg)}

/* ===== DESIGN PRINCIPLES ===== */
.principles-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.principle-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:24px 14px;text-align:center;transition:all .2s}
.principle-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.principle-icon{font-size:26px;margin-bottom:8px;display:block}
.principle-zh{font-family:'Noto Sans TC',sans-serif;font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:2px}
.principle-en{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;color:var(--text-sub)}

/* ===== CTA ===== */
.cta-banner{max-width:1100px;margin:0 auto;padding:0 40px 44px}
.cta-inner{background:linear-gradient(135deg,var(--navy) 0%,#3a5070 100%);border-radius:16px;padding:48px;text-align:center;color:#fff}
.cta-zh{font-family:'Noto Sans TC',sans-serif;font-size:22px;font-weight:900;margin-bottom:4px}
.cta-en{font-family:'DM Serif Display',serif;font-size:18px;color:var(--orange-light);margin-bottom:8px}
.cta-desc{font-family:'Noto Sans TC','Inter',sans-serif;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:24px;max-width:440px;margin-left:auto;margin-right:auto;line-height:1.7}
.cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cta-btn{font-family:'Noto Sans TC','Inter',sans-serif;font-size:15px;font-weight:700;padding:14px 32px;border-radius:8px;text-decoration:none;transition:all .2s}
.cta-btn--primary{background:var(--orange);color:#fff}.cta-btn--primary:hover{background:#d04e2e}
.cta-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.cta-btn--ghost:hover{border-color:#fff}

/* ===== FAQ ===== */
.faq-inner{border-top:1px solid #e8e8e8}
details.faq-item{border-bottom:1px solid #eee}
details.faq-item summary{padding:16px 0;font-family:'Noto Sans TC','Inter',sans-serif;font-size:15px;font-weight:700;color:var(--text-dark);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color .2s;list-style:none}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:11px;color:#ccc;transition:transform .3s;flex-shrink:0;margin-left:12px}
details.faq-item[open] summary{color:var(--orange)}
details.faq-item[open] summary::after{transform:rotate(180deg);color:var(--orange)}
details.faq-item summary:hover{color:var(--orange)}
.faq-answer{padding-bottom:16px}
.faq-azh{font-family:'Noto Sans TC',sans-serif;font-size:14px;font-weight:500;color:var(--text-body);line-height:1.8;margin-bottom:6px}
.faq-aen{font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--text-sub);line-height:1.75}
.ta-disclaimer{font-size:12px;color:#999;margin-top:18px;line-height:1.6;border-top:1px dashed #e0e0e0;padding-top:12px}
.ta-disclaimer em{font-style:normal;color:#aaa}

/* ===== FOOTER ===== */
.ta-footer{background:var(--navy);color:#fff;padding:44px 40px 24px;margin-top:44px}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
.footer-brand{font-family:'DM Serif Display',serif;font-size:17px;margin-bottom:8px}
.footer-desc{font-family:'Noto Sans TC','Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.5);line-height:1.7;max-width:260px}
.footer-title{font-family:'Noto Sans TC',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;margin-bottom:10px;color:rgba(255,255,255,.85)}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:6px}
.footer-links a{font-family:'Noto Sans TC','Inter',sans-serif;font-size:12px;color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--orange-light)}
.footer-bottom{max-width:1100px;margin:16px auto 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.3);text-align:center}

/* ===== LINE ILLUSTRATION ===== */
.line-illus{max-width:1100px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:14px}
.line-illus .line{flex:1;height:1px;background:var(--warm-gray)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .ta-nav{padding:0 20px;min-height:58px}
  .ta-logo{max-width:130px}
  .ta-nav-links{display:none}
  .hero-banner{height:200px}
  .hero-banner-content{padding:0 20px 28px}
  .hero-banner-content h1{font-size:24px}
  .hero-banner-content .en-title{font-size:16px}
  .breadcrumb{padding:10px 20px 0;font-size:12px}
  .content-sec{padding:28px 20px 32px}
  .sec-title-zh{font-size:22px}
  .fold-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .fold-card{padding:18px 12px 16px}
  .principles-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .cta-banner{padding:0 20px 32px}
  .cta-inner{padding:32px 20px}
  .cta-zh{font-size:19px}
  .ta-footer{padding:32px 20px 20px}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .line-illus{padding:0 20px}
  .steps-table thead th{font-size:12px;padding:10px 12px}
  .steps-table tbody td{padding:12px;font-size:13px}
  .fold-tips-box{padding:18px 20px}
}
@media(max-width:480px){
  .hero-banner{height:240px}
  .hero-banner-content h1{font-size:21px}
  .fold-grid{grid-template-columns:1fr 1fr}
  .principles-row{grid-template-columns:1fr 1fr}
}
/* Mobile hero — portrait banner */
@media (max-width:576px){
  .hero-banner{background-image:url('/guide/images/TeamA-GuideHeroBanner-Leaflet-800x.jpg')!important;height:auto!important;aspect-ratio:2/3;min-height:480px;background-position:center top;background-size:cover}
  .hero-banner-content{padding:0 20px 24px}
  .hero-banner-content h1{font-size:24px}
}