/* 昊琊創意科技公司｜官網共用樣式
   主色 棕 #8A4B2A ／ 輔色 萊姆黃 #D9D616 ／ 文字黑 #1A1A1A ／ 底色 白・淺灰 #F7F7F4 */
:root{
  --brown:#8A4B2A; --brown-d:#6E3A1F; --lime:#D9D616; --lime-d:#B8B400;
  --ink:#1A1A1A; --muted:#5C5850; --line:#E6E2D8; --bg:#FFFFFF; --soft:#F7F7F4;
  --radius:16px; --shadow:0 10px 30px rgba(26,26,26,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg); line-height:1.75;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- 導覽 ---------- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:18px;min-height:72px;flex-wrap:wrap;padding:8px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:46px;width:auto}
.brand span{font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1.25}
.brand small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.nav nav{display:flex;gap:18px;margin-left:auto;font-size:15px;color:var(--muted);flex-wrap:wrap}
.nav nav a{padding:4px 1px;border-bottom:2px solid transparent;white-space:nowrap}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--brown);border-color:var(--lime)}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-block;background:var(--brown);color:#fff;padding:11px 22px;border-radius:999px;
  font-weight:700;font-size:15px;border:2px solid var(--brown);cursor:pointer;transition:.15s;
}
.btn:hover{background:var(--brown-d);border-color:var(--brown-d)}
.btn.ghost{background:transparent;color:var(--brown)}
.btn.ghost:hover{background:rgba(138,75,42,.06)}
.btn.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn.lime:hover{background:var(--lime-d);border-color:var(--lime-d)}
.btn.sm{padding:8px 16px;font-size:14px}

/* ---------- Hero ---------- */
.hero{
  padding:74px 0 58px;
  background:
    radial-gradient(900px 320px at 12% -10%, rgba(217,214,22,.20), transparent 60%),
    radial-gradient(760px 320px at 88% 0%, rgba(138,75,42,.14), transparent 60%);
}
.hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.32;margin:0 0 16px;letter-spacing:.4px}
.hero h1 em{font-style:normal;color:var(--brown);box-shadow:inset 0 -14px 0 var(--lime)}
.hero p{font-size:17px;color:var(--muted);max-width:660px;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tag{font-size:13px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;color:var(--muted)}

/* ---------- 區塊 ---------- */
section{padding:64px 0;border-top:1px solid var(--line)}
section.soft{background:var(--soft)}
h2{font-size:clamp(21px,2.6vw,30px);margin:0 0 10px;line-height:1.35}
h2 .bar{display:inline-block;width:52px;height:6px;background:var(--lime);vertical-align:middle;margin-right:12px;border-radius:3px}
h3{font-size:19px;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 30px;max-width:760px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;transition:.15s}
.card:hover{box-shadow:var(--shadow);border-color:#dcd6c8}
.card p{margin:0;color:var(--muted);font-size:15px}
.card p+p{margin-top:8px}
.num{
  width:36px;height:36px;border-radius:10px;background:var(--soft);color:var(--brown);
  display:grid;place-items:center;font-weight:800;margin-bottom:12px;
}
.list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.list span{background:var(--soft);border-radius:10px;padding:8px 14px;font-size:14.5px}
.flow{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.step{border-left:4px solid var(--lime);padding:6px 0 6px 16px}
.step b{display:block;font-size:15px}
.step small{color:var(--muted)}
.special{background:linear-gradient(120deg,rgba(138,75,42,.06),rgba(217,214,22,.14))}
.badge{
  display:inline-block;font-size:12.5px;font-weight:700;color:var(--brown);
  border:1px dashed var(--brown);border-radius:999px;padding:4px 12px;background:#fff;
}
.badge.lime{color:#5d5a00;border-color:var(--lime-d)}
.kicker{font-size:13px;letter-spacing:.16em;color:var(--brown);font-weight:700;margin:0 0 8px}

/* ---------- 表單 ---------- */
form.contact{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
input,select,textarea{
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;width:100%;
  background:#fff;color:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lime);border-color:var(--lime)}
.full{grid-column:1/-1}
.note{font-size:13px;color:var(--muted)}

/* ---------- 頁面標頭（內頁） ---------- */
.page-head{padding:52px 0 34px;background:var(--soft);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(24px,3.4vw,36px);margin:0 0 10px}
.page-head p{color:var(--muted);margin:0;max-width:720px}
.prose li{margin:.3em 0}
.related a{margin-right:14px}
table.svc{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
table.svc th,table.svc td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
table.svc th{background:var(--soft);font-size:14px}
table.svc td:first-child{font-weight:700;white-space:nowrap}

/* ---------- 頁尾 ---------- */
footer.site-foot{background:var(--ink);color:#EDEAE2;padding:44px 0 26px;font-size:14.5px}
footer.site-foot .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site-foot h4{margin:0 0 10px;font-size:15px;color:#fff}
footer.site-foot a{color:#C9C4B8}
footer.site-foot a:hover{color:var(--lime)}
footer.site-foot .brandline{display:flex;align-items:center;gap:12px;margin-bottom:10px}
footer.site-foot .brandline img{height:52px;background:#fff;border-radius:10px;padding:5px}
.cr{margin-top:26px;padding-top:16px;border-top:1px solid #33322E;color:#9C978B;font-size:13px}
.cr .credit{color:var(--lime)}

/* ---------- 小六壬工具 ---------- */
.tool-shell{max-width:900px}
.gods{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:18px}
.god{
  border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;background:#fff;
  font-size:14px;color:var(--muted);
}
.god b{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
.god.on{border-color:var(--brown);background:linear-gradient(120deg,rgba(138,75,42,.08),rgba(217,214,22,.16));color:var(--ink)}
.god.on b{color:var(--brown)}
.result{border:2px solid var(--brown);border-radius:18px;padding:24px;margin-top:18px;background:#fff}
.result .name{font-size:34px;font-weight:800;color:var(--brown);margin:0 0 4px;letter-spacing:.06em}
.result .lvl{font-size:15px;font-weight:700;margin:0 0 14px}
.result .lvl.good{color:#1d7a3f}
.result .lvl.mid{color:#a9791a}
.result .lvl.bad{color:#b23c2e}
.palm{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);max-width:420px;margin-top:14px}
.palm div{border:1px dashed var(--line);border-radius:10px;padding:10px;text-align:center;font-size:13px;color:var(--muted)}
.palm div b{display:block;font-size:15px;color:var(--ink)}
.palm div.on{border-style:solid;border-color:var(--brown);background:var(--soft)}
.steps-line{font-size:14.5px;color:var(--muted);margin-top:12px}
.steps-line b{color:var(--ink)}
.credit-box{
  margin-top:20px;border:1px dashed var(--brown);border-radius:12px;padding:14px 16px;
  background:linear-gradient(120deg,rgba(138,75,42,.05),rgba(217,214,22,.10));font-size:14px;
}
.credit-box b{color:var(--brown)}

/* ---------- 工具頁共用元件 ---------- */
.out{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;padding:10px;border-radius:8px;
  border:1px dashed var(--line);background:var(--soft);word-break:break-all;min-height:34px;margin-top:10px;
}
.stats{color:var(--muted);font-size:.85rem;margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px}
.stats b{color:var(--ink);font-variant-numeric:tabular-nums}
.err{color:#c0392b;font-size:.85rem;margin-top:8px}
.label{font-size:.78rem;color:var(--muted);width:100%;margin-top:6px}
label.chk{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem}
.prose h2{font-size:1.05rem;margin:1.5em 0 .4em}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---------- 導覽分類下拉（桌機） ---------- */
.nav-item{position:relative}
.nav-item > a{display:inline-flex;align-items:center;gap:6px}
.caret{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;
}
.submenu{
  position:absolute;top:calc(100% + 8px);left:-14px;min-width:252px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;z-index:60;
}
.nav-item:hover > .submenu,.nav-item:focus-within > .submenu{display:flex}
.submenu a{padding:10px 12px;border-radius:9px;font-size:14.5px;border-bottom:0;white-space:nowrap}
.submenu a:hover{background:var(--soft);color:var(--brown);border-color:transparent}

/* ---------- FAQ／Q&A（SEO 用可見問答） ---------- */
.faq{display:grid;gap:10px;margin-top:18px}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:2px 18px}
.faq details[open]{border-color:#dcd6c8;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;padding:15px 26px 15px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:14px;color:var(--brown);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 15px}
.faq .ans p{margin:0;color:var(--muted);font-size:15.5px}

/* ---------- 湖口玄濟壇資訊卡 ---------- */
.info-list{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:10px}
.info-list li{display:grid;grid-template-columns:100px 1fr;gap:10px;font-size:15px;border-bottom:1px dashed var(--line);padding-bottom:9px}
.info-list li:last-child{border-bottom:0;padding-bottom:0}
.info-list span{color:var(--muted);font-size:13.5px;padding-top:2px}
.info-list b{font-weight:700;word-break:break-word}
.temple-card h3{color:var(--brown);font-size:20px}

/* ---------- 頁尾前的轉換區塊 ---------- */
.cta-band{background:linear-gradient(120deg,rgba(138,75,42,.07),rgba(217,214,22,.14));border-top:1px solid var(--line)}
.cta-band .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:34px;padding-bottom:34px}
.cta-band p{color:var(--muted)}
.cta-band .btnrow{margin-top:0}

/* ---------- 手機版 RWD ---------- */
@keyframes navdrop{from{opacity:.2;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width: 820px){
  /* 沒有 JS 時的退路：沿用原本的堆疊式導覽 */
  html:not(.has-js) .nav{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0}
  html:not(.has-js) .nav nav{margin-left:0;width:100%;gap:14px;font-size:14.5px;flex-wrap:wrap}
  html:not(.has-js) .nav .btn.sm{align-self:flex-start}

  /* 有 JS：手機版收合成手風琴（漢堡選單） */
  html.has-js .nav{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;min-height:62px;padding:6px 16px}
  html.has-js .nav-toggle{
    display:inline-flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);
    border-radius:999px;padding:8px 15px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  }
  html.has-js .nav-toggle .bars{display:block;position:relative;width:16px;height:2px;background:var(--ink);transition:.2s}
  html.has-js .nav-toggle .bars::before,
  html.has-js .nav-toggle .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);transition:.2s}
  html.has-js .nav-toggle .bars::before{top:-5px}
  html.has-js .nav-toggle .bars::after{top:5px}
  html.has-js body.nav-open .nav-toggle{background:rgba(138,75,42,.08)}
  html.has-js body.nav-open .nav-toggle .bars{background:transparent}
  html.has-js body.nav-open .nav-toggle .bars::before{top:0;transform:rotate(45deg)}
  html.has-js body.nav-open .nav-toggle .bars::after{top:0;transform:rotate(-45deg)}
  html.has-js .nav > nav{display:none;flex-direction:column;width:100%;gap:0;margin:8px 0 6px;font-size:15.5px}
  html.has-js body.nav-open .nav > nav{display:flex;animation:navdrop .18s ease-out}
  html.has-js .nav > nav a{width:100%;padding:13px 2px;border-bottom:1px solid var(--line);white-space:normal}
  html.has-js .nav > nav a:last-child{border-bottom:0}
  html.has-js .nav > a.btn.sm{display:none}
  html.has-js .nav > nav a.menu-cta{
    margin:14px 0 6px;text-align:center;border:0;border-radius:999px;padding:12px 22px;
    background:var(--brown);color:#fff;font-weight:700;
  }

  .brand img{height:40px}
  .brand span{font-size:15px}
  .brand small{font-size:11px}
  .hero{padding:44px 0 38px}
  section{padding:44px 0}
  .cta .btn{flex:1 1 auto;text-align:center}
  .palm{grid-template-columns:repeat(2,1fr);max-width:none}
  table.svc{display:block;overflow-x:auto;white-space:nowrap}
  table.svc td:first-child{white-space:normal}
}
@media (max-width: 520px){
  .wrap{padding:0 16px}
  h1{letter-spacing:0}
  .result .name{font-size:28px}
  .result{padding:18px}
  .card{padding:18px}
}