/* 홈페이지 머리(로고·주 메뉴·메가메뉴·모바일 메뉴) — templates/bana_home/_header.html 짝.
   홈페이지 화면과 가맹 랜딩(/fi)이 같이 쓴다. 랜딩 CSS 와 부딪치지 않게 전부 header.top 아래로 묶고,
   색·글꼴 값도 머리 안에서 다시 정한다(랜딩의 :root 값은 건드리지 않음).
   머리 = 커피색 고정(밝은·어두운 모드 같음, 푸터와 같은 #2B211D — 2026-10-27 대표 '상단 고정'). 메가메뉴·폰 메뉴도 같은 색.
   .top-light = 밝은 머리(예전 가맹 랜딩용, 지금은 안 씀). */
header.top{
  --pink:#FF8F94; --pink-ink:#FF8597; --wash:#3A2D28; --ink:#F6EEEA; --ink-2:#CDBFB8; --muted:#A8988F;
  --bg:#2B211D; --surface:#2B211D; --line:#3D302A; --line-2:#4A3B35;
  --shadow:0 18px 40px -18px rgba(0,0,0,.6);
  --display:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --latin:"Bricolage Grotesque","Gothic A1",system-ui,sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --maxw:1240px;
  --gut-l:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
}
header.top.top-light{
  --pink:#F48184; --pink-ink:#CC3F57; --wash:#FFF1F0; --ink:#2B211D; --ink-2:#6E5E57; --muted:#9C8D86;
  --bg:#FFFBFA; --surface:#FFFFFF; --line:#F0E4E2; --line-2:#E4D6D3;
  --shadow:0 18px 40px -18px rgba(78,59,48,.35);
}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
header.top{transition:background-color .3s ease,border-color .3s ease}
/* 스크롤해 내려가면 투명(유리)하게 — 맨 위에서는 커피색 그대로 (2026-10-28 대표). 메뉴를 펼치면 다시 커피색. */
header.top.scrolled:not(.open):not(.top-light){background:rgba(43,33,29,.38);border-bottom-color:transparent;backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px)}
header.top *{box-sizing:border-box}
header.top a{color:inherit;text-decoration:none}
header.top button{font:inherit;color:inherit}
header.top img{display:block;max-width:100%}
header.top .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
header.top .top-in{height:72px;display:flex;align-items:center;gap:40px}
header.top .logo{color:var(--pink);line-height:0;flex:none}
header.top .logo svg{height:23px;width:auto}
header.top .gnb{display:flex;gap:6px;height:100%;margin-left:auto}
header.top .gnb > a{position:relative;display:flex;align-items:center;padding:0 18px;font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
header.top .gnb > a::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;background:var(--pink-ink);transform:scaleX(0);transition:transform .2s ease}
header.top .gnb > a:hover::after,header.top .gnb > a.on::after{transform:scaleX(1)}
header.top .acts{display:flex;align-items:center;gap:8px;flex:none}
header.top .ibtn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--ink-2);border:0;background:transparent;cursor:pointer;white-space:nowrap}
header.top .ibtn:hover{background:var(--wash);color:var(--ink)}
header.top .ibtn svg{width:18px;height:18px;flex:none}
header.top .pill-cta{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;white-space:nowrap}
header.top .pill-cta:hover{background:var(--pink-ink);color:#FFFFFF}
header.top .burger{display:none}
header.top .mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
header.top.open .mega{opacity:1;visibility:visible;transform:none}
header.top .mega-in{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:32px;padding-block:28px 34px}
header.top .mega h4{margin:0 0 12px;font-family:var(--latin);font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
header.top .mega h4 b{font-family:var(--display);font-size:16px;letter-spacing:-.01em;color:var(--ink);text-transform:none;display:block;margin-bottom:2px}
header.top .mega ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
header.top .mega li a{display:block;padding:5px 0;color:var(--ink-2);font-size:14.5px}
header.top .mega li a:hover{color:var(--pink-ink)}
header.top .feat{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:14px;border-radius:16px;background:var(--wash)}
header.top .feat-art{aspect-ratio:1;border-radius:12px;background:var(--surface);overflow:hidden;display:grid;place-items:center}
header.top .feat-art img{width:100%;height:100%;object-fit:contain;padding:6px}
header.top .feat small{display:block;font-size:12px;color:var(--pink-ink);font-weight:700}
header.top .feat b{display:block;font-family:var(--display);font-size:16px;margin:2px 0}
header.top .feat > span > span{font-size:13px;color:var(--ink-2)}
header.top .sheet{display:none}
header.top :focus-visible{outline:2px solid var(--pink-ink);outline-offset:3px;border-radius:4px}

@media (max-width:1080px){
  header.top .mega-in{grid-template-columns:repeat(4,1fr)}
  header.top .feat{display:none}
}
@media (max-width:860px){
  header.top .gnb,header.top .acts .ibtn span,header.top .acts .pill-cta,header.top .mega{display:none}
  header.top .top-in{height:62px;gap:12px}
  header.top .logo svg{height:20px}
  header.top .acts{margin-left:auto}
  header.top .burger{display:grid;place-items:center;width:42px;height:42px;border:0;background:transparent;border-radius:12px;cursor:pointer;color:var(--ink)}
  header.top .burger svg{width:22px;height:22px}
  header.top .sheet{display:block;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 62px);overflow:auto;padding-block:8px 20px}
  header.top .sheet[hidden]{display:none!important}
  header.top .sheet details{border-bottom:1px solid var(--line)}
  header.top .sheet summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-family:var(--display);font-weight:800;font-size:17px;color:var(--ink);cursor:pointer}
  header.top .sheet summary::-webkit-details-marker{display:none}
  header.top .sheet summary::after{content:"+";font-family:var(--latin);font-size:22px;color:var(--muted)}
  header.top .sheet details[open] summary::after{content:"−"}
  header.top .sheet ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:2px}
  header.top .sheet ul a{display:block;padding:8px 0;color:var(--ink-2)}
  header.top .sheet .pill-cta{display:flex;justify-content:center;margin-top:18px;height:48px}
}
@media (prefers-reduced-motion:reduce){header.top *,header.top *::before,header.top *::after{transition:none!important}}