/* ===== 蘇記嘀兜雞 Di Do G — 網站樣式 =====
   參考 hotpot106.com.tw 的深色×金色質感，重新實作 */

:root{
  --bg:#1d1d1d;
  --bg-2:#252525;
  --bg-3:#121212;
  --gold:#c59d5f;
  --gold-2:#e0bd84;
  --line:rgba(197,157,95,.35);
  --txt:#ffffff;
  --txt-2:#cccccc;
  --txt-3:#8f8f8f;
  --serif:"Noto Serif TC",serif;
  --sans:"Cabin","Noto Serif TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --maxw:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.4;margin:0}
strong{color:var(--gold-2);font-weight:600}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:760px}
.center{text-align:center}

.kicker{
  font-family:var(--sans);font-size:12px;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;margin:0 0 14px
}
.h2{font-size:clamp(28px,4vw,42px);letter-spacing:.04em}
.p{margin:0 0 18px;color:var(--txt-2)}
.fine{font-size:13px;color:var(--txt-3);margin-top:16px}

.divider{color:var(--gold);margin:14px 0 26px;font-size:18px;letter-spacing:.3em}
.divider.center{text-align:center}

/* ---- 按鈕 ---- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:14px;letter-spacing:.14em;
  padding:13px 30px;border:1px solid var(--gold);color:var(--gold);
  transition:.25s;cursor:pointer;background:transparent;text-transform:uppercase
}
.btn:hover{background:var(--gold);color:#1d1d1d}
.btn--gold{background:var(--gold);color:#1d1d1d}
.btn--gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn--line{color:var(--txt);border-color:rgba(255,255,255,.45)}
.btn--line:hover{background:#fff;color:#1d1d1d;border-color:#fff}
.btn--lg{padding:16px 42px;font-size:15px}

/* ---- 導覽 ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.3s;background:transparent}
.nav.scrolled{background:rgba(18,18,18,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:42px;height:42px}
.brand__name{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.06em;white-space:nowrap}
.brand__name em{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.18em;color:var(--gold)}
.brand__branch{font-size:12px;letter-spacing:.04em;color:var(--gold);white-space:nowrap}
.combo-items{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--txt-3);letter-spacing:0;line-height:1.7}
.nav__menu{margin-left:auto;display:flex;gap:26px;font-size:14px;letter-spacing:.06em}
.nav__menu a{color:#e9e9e9;position:relative;padding:6px 0}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:.25s}
.nav__menu a:hover::after{width:100%}
.nav__cta{padding:10px 22px;font-size:12px}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:#fff;display:block;transition:.3s}

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.15)}}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.55),rgba(18,18,18,.75) 60%,#1d1d1d)}
.hero__content{position:relative;z-index:2;padding:120px 24px 100px;animation:fadeUp 1s .2s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero__title{font-size:clamp(44px,9vw,104px);font-weight:900;letter-spacing:.08em;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero__sub{font-size:clamp(15px,2vw,20px);letter-spacing:.3em;color:var(--gold-2);margin:12px 0 0}
.hero__lead{color:#eaeaea;max-width:560px;margin:0 auto 34px;font-size:15px}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:var(--gold);font-size:22px;animation:bob 1.8s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---- Section ---- */
.section{padding:96px 0}
.section--dark{background:var(--bg-2)}
.section--gold{background:linear-gradient(135deg,#2a2317,#1d1d1d);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.stats{display:flex;justify-content:center;gap:56px;margin-top:44px;flex-wrap:wrap}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:34px;color:var(--gold);line-height:1.2}
.stat span{font-size:13px;letter-spacing:.12em;color:var(--txt-3)}

/* ---- 卡片 ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.card{border:1px solid var(--line);padding:38px 30px;background:rgba(255,255,255,.02);transition:.3s}
.card:hover{border-color:var(--gold);transform:translateY(-4px)}
.card h3{font-size:22px;margin-bottom:14px;color:var(--gold-2)}
.card p{color:var(--txt-2);font-size:15px;margin:0}

/* ---- Gallery ---- */
.gallery__grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
.gallery__item{margin:0;overflow:hidden;position:relative;aspect-ratio:4/3}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:.6s}
.gallery__item:hover img{transform:scale(1.08)}
.gallery__item::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,.18);transition:.4s}
.gallery__item:hover::after{background:rgba(18,18,18,0)}

.price{font-family:var(--serif);font-size:22px;color:var(--gold-2);margin:22px 0 30px}

/* ---- 分店 ---- */
.stores{display:grid;grid-template-columns:minmax(0,680px);justify-content:center;gap:26px;margin-bottom:40px}
.store{border:1px solid var(--line);padding:34px 30px;background:rgba(255,255,255,.02)}
.store--main{border-color:var(--gold);background:linear-gradient(160deg,rgba(197,157,95,.10),transparent)}
.store h3{font-size:21px;color:var(--gold-2);margin-bottom:4px}
.store__tag{font-size:12px;letter-spacing:.16em;color:var(--gold);margin:0 0 20px;text-transform:uppercase}
.store ul{list-style:none;margin:0;padding:0}
.store li{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.09);font-size:15px;color:var(--txt-2)}
.store li:last-child{border-bottom:0}
.store li span{flex:0 0 52px;color:var(--txt-3);font-size:13px;letter-spacing:.1em}
.store a{color:var(--gold-2)}

.map{border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:380px;border:0;filter:grayscale(.3) contrast(.95)}

/* ---- 訂位 CTA ---- */
.cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ---- 頁尾 ---- */
.footer{background:var(--bg-3);border-top:1px solid var(--line);padding:70px 0 0}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.footer__logo{width:52px;height:52px;margin-bottom:14px}
.footer__name{font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.06em;margin:0}
.footer__tag{color:var(--gold);font-size:13px;letter-spacing:.12em;margin:6px 0 0}
.footer__col h4{font-size:15px;color:var(--gold-2);margin-bottom:12px;letter-spacing:.06em}
.footer__col p{margin:6px 0;color:var(--txt-3);font-size:14px}
.footer__col a{color:var(--txt-2)}
.footer__col a:hover{color:var(--gold)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:50px;padding:22px 0;text-align:center}
.footer__bottom p{margin:0;font-size:13px;color:var(--txt-3);letter-spacing:.06em}

/* ---- 回頂端 ---- */
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gold);background:rgba(18,18,18,.8);color:var(--gold);cursor:pointer;
  opacity:0;pointer-events:none;transition:.3s;font-size:16px;z-index:40}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--gold);color:#1d1d1d}

/* ---- 菜單頁 ---- */
.page-head{padding:150px 0 10px;background:linear-gradient(180deg,#121212,#1d1d1d)}
.menu-block{border-top:1px solid var(--line);padding:34px 0 6px;margin-top:20px}
.menu-block:first-child{border-top:0;margin-top:0}
.menu-block__title{font-size:22px;color:var(--gold-2);letter-spacing:.08em;margin-bottom:6px}
.menu-block--hl{background:linear-gradient(160deg,rgba(197,157,95,.10),transparent);border:1px solid var(--line);padding:30px 26px;margin-top:34px}
.menu-note{color:var(--txt-3);font-size:14px;margin:4px 0 8px}
.menu-list{list-style:none;margin:12px 0 0;padding:0}
.menu-list li{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:14px 4px;border-bottom:1px dashed rgba(255,255,255,.09)}
.menu-list li:last-child{border-bottom:0}
.menu-list--grid{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.menu-list--grid li{display:block}
.menu-list .mi{font-family:var(--serif);font-size:18px;color:#fff}
.menu-list .md{color:var(--txt-3);font-size:14px;text-align:right}

/* ---- 菜單價目表 ---- */
.ptable{list-style:none;margin:14px 0 0;padding:0}
.ptable li{display:flex;gap:18px;align-items:flex-start;padding:14px 4px;border-bottom:1px dashed rgba(255,255,255,.09)}
.ptable li:last-child{border-bottom:0}
.ptable .price-tag{flex:0 0 60px;font-family:var(--serif);font-size:19px;color:var(--gold-2)}
.ptable .items{color:var(--txt-2);font-size:15px;line-height:1.7}

/* ---- 響應式 ---- */
@media(max-width:900px){
  .nav__menu{display:none}
  .nav__menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:rgba(18,18,18,.98);padding:10px 24px;border-top:1px solid var(--line)}
  .nav__menu.open a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav__toggle{display:flex;margin-left:auto}
  .nav__cta{display:none}
  .cards{grid-template-columns:1fr}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .stores{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr}
  .section{padding:70px 0}
  .stats{gap:34px}
}
@media(max-width:520px){
  .gallery__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
}