/* ============================================================
   kt잇다 — 헤더 스타일 (header.css)
   common.css 의 토큰을 사용합니다. common.css 뒤에 로드하세요.
   ============================================================ */

.promobar { background:var(--gray-900); color:#fff; position:relative; }
.promobar .inner { max-width:var(--maxw); margin:0 auto; padding:11px 48px; text-align:center; font-size:clamp(8px,2.5vw,14px); font-weight:600; display:flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; }
.promobar .coupon { background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-6); }
.promobar .close { position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#fff; font-size:18px; opacity:.8; }
.header { position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--gray-100); }
.header-main { display:flex; align-items:center; gap:24px; height:88px; }
.logo { display:flex; align-items:center; gap:9px; font-size:23px; font-weight:800; color:var(--gray-900); flex-shrink:0; }
.logo .logo-img { height:30px; width:auto; display:block; }
.util-acct { position:relative; display:flex; align-items:center; }
.acct-pop { position:absolute; top:calc(100% + 14px); right:0; width:248px; background:#fff; border:1px solid var(--gray-100); border-radius:14px; box-shadow:0 14px 36px rgba(15,23,42,.16); padding:18px 14px 7px; z-index:210; transform-origin:top right; animation:acctDown .22s cubic-bezier(.4,0,.2,1); }
.acct-pop[hidden] { display:none; }
.acct-pop .acct-login { display:block; text-align:center; padding:13px; font-size:15px; font-weight:800; color:#fff; background:var(--blue-600); border-radius:10px; transition:background .15s; }
.acct-pop .acct-login:hover { background:var(--blue-700); color:#fff; }
.acct-sub { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0; }
.acct-sub a { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:var(--gray-400); white-space:nowrap; transition:color .15s; }
.acct-sub a:hover { color:var(--blue-600); }
.acct-sub .acct-div { width:1px; height:11px; background:var(--gray-300); }
.acct-pt { font-size:11px; font-weight:800; color:var(--blue-600); }
.acct-line { height:1px; background:var(--gray-100); margin:0 -14px 7px; }
.acct-menu a { display:flex; align-items:center; gap:9px; padding:11px 8px; font-size:14px; font-weight:600; color:var(--gray-800); border-radius:9px; white-space:nowrap; transition:background .15s, color .15s; }
.acct-menu a svg { width:18px; height:18px; color:var(--gray-400); flex:0 0 auto; }
.acct-menu a:hover { background:var(--gray-50); color:var(--blue-600); }
.acct-menu a:hover svg { color:var(--blue-600); }
@keyframes acctDown { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }
.logo .dot { width:22px; height:22px; border-radius:50%; background:var(--blue-600); display:inline-block; }
.logo span { color:var(--gray-900); }
.gnb { display:flex; align-items:center; gap:14px; margin-left:8px; }
.gnb a { position:relative; font-size:15px; font-weight:600; letter-spacing:0.2px; color:var(--gray-700); white-space:nowrap; padding:5px 8px 5px 5px; }
.gnb a.on { color:var(--blue-600); }
.gnb a.on::after { content:''; position:absolute; top:3px; right:1px; width:5px; height:5px; border-radius:50%; background:var(--blue-600); }
.gnb a:hover { color:var(--blue-600); }
.gnb .badge-new { color:var(--blue-600); font-size:9px; font-weight:800; vertical-align:super; margin-left:2px; }
.header-util .util-search { display:flex; align-items:center; }
.header-util .util-search svg { width:24px; height:24px; color:var(--gray-800); }
.util-search .ic-x, .m-search .ic-x { display:none; }
.util-search.open .ic-search, .m-search.open .ic-search { display:none; }
.util-search.open .ic-x, .m-search.open .ic-x { display:block; }
.header-util .util-ico { display:flex; align-items:center; position:relative; color:var(--gray-800); }
.header-util .util-ico svg { width:24px; height:24px; }
.util-bubble { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:var(--blue-600); color:#fff; font-size:12px; font-weight:800; line-height:1; letter-spacing:-.2px; padding:5px 9px; border-radius:8px; white-space:nowrap; box-shadow:0 6px 14px rgba(37,99,235,.4); pointer-events:none; animation:utilBob 2.2s ease-in-out infinite; }
.util-bubble::after { content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--blue-600); }
@keyframes utilBob { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-5px); } }
.header-util .util-menu { background:none; border:none; padding:0; cursor:pointer; }
.util-menu .ic-x { display:none; }
.util-menu.open .ic-bars { display:none; }
.util-menu.open .ic-x { display:block; }
.mega-menu { position:absolute; top:100%; left:0; width:100%; background:#fff; border-top:1px solid var(--gray-100); box-shadow:0 18px 30px rgba(0,0,0,.06); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s; }
.header-dim { position:fixed; left:0; right:0; bottom:0; top:var(--hdim-top,88px); background:rgba(15,23,42,.4); z-index:195; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility .25s ease; }
.header-dim.show { opacity:1; visibility:visible; pointer-events:auto; }
.header.mega-open .mega-menu { opacity:1; visibility:visible; transform:translateY(0); }
.mega-inner { display:grid; grid-template-columns:repeat(7,1fr); gap:24px; padding-top:36px; padding-bottom:44px; }
.mega-col { display:flex; flex-direction:column; min-width:0; }
.mega-h { font-size:16px; font-weight:700; color:var(--gray-900); margin-bottom:14px; }
.mega-h:hover { color:var(--blue-600); }
.mega-s { font-size:14px; color:var(--gray-500); padding:7px 0; }
.mega-s:hover { color:var(--blue-600); }
.header-util { display:flex; align-items:center; gap:16px; margin-left:auto; flex-shrink:0; }
.header-util a { font-size:13px; color:var(--gray-600); white-space:nowrap; }
.header-util a:hover { color:var(--blue-600); }
.header-util .cart svg { width:24px; height:24px; }
.header-util .write { background:var(--blue-600); color:#fff; font-weight:700; padding:9px 16px; border-radius:var(--r-8); font-size:13px; display:flex; align-items:center; gap:5px; }
.hamburger { display:none; }
.m-search { display:none; }
.search-overlay { position:fixed; inset:0; z-index:210; pointer-events:none; }
.search-overlay[hidden] { display:none; }
.so-backdrop { position:absolute; left:0; right:0; bottom:0; top:var(--so-top,0px); z-index:1; background:rgba(15,23,42,.4); pointer-events:auto; }
.so-sheet { position:absolute; z-index:2; top:var(--so-top,0px); left:auto; right:var(--so-right,24px); width:min(540px, calc(100vw - 48px)); overflow:visible; background:#fff; border:1px solid var(--gray-100); border-radius:16px; box-shadow:0 16px 40px rgba(15,23,42,.18); padding:18px 0; margin-top:-14px; pointer-events:auto; transform-origin:top right; animation:soDown .26s ease; }
.so-sheet .wrap { max-width:none; margin:0; padding-left:28px; padding-right:28px; }
.so-x { display:flex; position:absolute; top:14px; right:20px; width:32px; height:32px; align-items:center; justify-content:center; border-radius:50%; color:var(--gray-500); font-size:18px; line-height:1; transition:background .15s, color .15s; }
.so-x:hover { color:var(--gray-900); background:var(--gray-100); }
@keyframes soDown { from{ opacity:.2; transform:translateY(-10px); clip-path:inset(0 0 100% 0); } to{ opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0); } }
.search-overlay.closing .so-sheet { animation:soUp .28s cubic-bezier(.4,0,.2,1) forwards; }
.search-overlay.closing .so-backdrop { animation:soFade .28s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes soUp { from{ opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0); } to{ opacity:0; transform:translateY(-10px); clip-path:inset(0 0 100% 0); } }
@keyframes soFade { from{ opacity:1; } to{ opacity:0; } }
.so-bar { display:flex; align-items:center; gap:10px; height:72px; }
.so-form { flex:1; min-width:0; display:flex; align-items:center; gap:9px; height:50px; padding:0 18px; background:var(--gray-100); border:1px solid transparent; border-radius:var(--r-full); transition:border-color .15s, background .15s; }
.so-form:focus-within { background:#fff; border-color:var(--gray-300); }
.so-form > svg { width:20px; height:20px; color:var(--gray-400); flex:0 0 auto; }
.so-form input { flex:1; min-width:0; border:none; background:none; font-size:15px; color:var(--gray-900); letter-spacing:-.02em; }
.so-form input::placeholder { color:var(--gray-400); }
.so-form input:focus { outline:none; }
.so-clear { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--gray-300); color:#fff; display:none; align-items:center; justify-content:center; font-size:11px; }
.so-clear.show { display:flex; }
.so-cancel { display:none; flex:0 0 auto; font-size:15px; font-weight:600; color:var(--gray-600); white-space:nowrap; }
.so-cancel:hover { color:var(--gray-900); }
.so-content { padding:10px 0 30px; }
.so-block { padding:14px 0; }
.so-block h4 { font-size:18px; font-weight:800; color:var(--gray-900); letter-spacing:-.4px; margin-bottom:12px; }
.so-chips { display:flex; flex-wrap:wrap; gap:8px; }
.so-chip { font-size:14px; font-weight:600; color:var(--gray-800); background:var(--gray-100); border:none; padding:11px 16px; border-radius:var(--r-full); cursor:pointer; transition:background .15s; }
.so-chip:hover { background:var(--gray-200); }
.so-rank { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:28px; }
.so-rank a { display:flex; align-items:center; gap:14px; padding:9px 2px; line-height:1.25; font-size:16px; color:var(--gray-900); cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.so-rank a:focus, .so-rank a:focus-visible { outline:none; }
.so-rank a:hover .kw { color:var(--blue-600); }
.so-rank .num { width:16px; text-align:center; font-weight:700; font-size:15px; color:var(--gray-400); flex:0 0 auto; }
.so-rank .num.top { color:var(--blue-600); }
.so-rank .so-kw { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; letter-spacing:-.3px; }
.so-back { display:none; flex:0 0 auto; width:34px; height:40px; align-items:center; justify-content:center; color:var(--gray-900); margin-left:-8px; }
.so-back svg { width:26px; height:26px; }
.so-block-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.so-block-head h4 { margin-bottom:0; }
.so-recent-clear { flex:0 0 auto; font-size:13px; font-weight:600; color:var(--gray-400); }
.so-recent-clear:hover { color:var(--gray-700); }
.so-recent-empty { font-size:14px; color:var(--gray-400); padding:2px 0 4px; }
.so-recent-chips { display:flex; flex-wrap:wrap; gap:8px; }
.so-recent-item { display:inline-flex; align-items:center; background:var(--gray-100); border:none; border-radius:var(--r-full); transition:background .15s; }
.so-recent-item:hover { background:var(--gray-200); }
.so-rkw { font-size:14px; font-weight:600; color:var(--gray-800); padding:10px 4px 10px 16px; }
.so-rdel { padding:10px 14px 10px 6px; color:var(--gray-400); font-size:11px; line-height:1; }
.so-rdel:hover { color:var(--gray-700); }
@media (min-width:769px) {
  .header-util a { font-size:14px; }
  .gnb a { font-size:16px; }
}
@media (max-width:768px) {
  .promobar .inner { padding:9px 34px; }
  .search, .header-util, .mega-menu { display:none; }
  .header-main { column-gap:12px; row-gap:0; height:auto; flex-wrap:wrap; align-items:center; padding-top:12px; }
  .hamburger { display:flex; width:24px; height:24px; flex-direction:column; justify-content:center; gap:5px; }
  .hamburger span { display:block; height:2px; background:var(--gray-900); border-radius:2px; }
  .m-search { display:flex; order:2; margin-left:auto; align-items:center; justify-content:center; width:24px; height:24px; color:var(--gray-900); }
  .m-search svg { width:22px; height:22px; }
  .so-sheet { flex:1; max-height:none; box-shadow:none; }
  .so-backdrop { display:none; }
  .search-overlay { z-index:250; }
  .so-backdrop { display:none; }
  .so-sheet { top:0; bottom:0; left:0; right:0; width:auto; max-height:none; border:0; border-radius:0; box-shadow:none; padding:0; margin-top:0; }
  .so-sheet .wrap { padding-left:16px; padding-right:16px; }
  .so-x { display:none; }
  .so-back { display:flex; }
  .so-cancel { display:none; }
  .so-bar { height:auto; min-height:56px; gap:8px; padding-top:max(10px,env(safe-area-inset-top)); padding-bottom:10px; }
  .so-content { padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
  .so-clear { width:26px; height:26px; }
  .so-form input { font-size:16px; }
  .so-rank { display:flex; flex-direction:column; }
  .header-main .logo { order:1; margin:0; }
  .header-main .hamburger { order:3; }
  .gnb { display:flex; order:4; flex-basis:100%; width:100%; gap:6px; margin:0; padding:6px 0 10px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .gnb::-webkit-scrollbar { display:none; }
  .gnb a { white-space:nowrap; flex:0 0 auto; letter-spacing:-0.02em; }
}
.menu-overlay { position:fixed; inset:0; z-index:400; }
.menu-overlay[hidden] { display:none; }
.menu-dim { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .28s ease; }
.menu-panel { position:absolute; top:0; left:auto; right:0; height:100%; width:340px; max-width:86vw; background:#fff; box-shadow:-2px 0 30px rgba(0,0,0,.14); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.menu-overlay.open .menu-dim { opacity:1; }
.menu-overlay.open .menu-panel { transform:translateX(0); }
.menu-top { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 16px 20px; }
.menu-logo { display:flex; align-items:center; gap:6px; font-size:20px; font-weight:800; color:var(--blue-600); }
.menu-logo span { font-size:20px; font-weight:800; color:var(--blue-600); }
.menu-close { background:none; border:none; padding:4px; cursor:pointer; color:var(--gray-700); display:flex; }
.menu-close svg { width:26px; height:26px; }
.menu-account { padding:0 20px 18px; border-bottom:8px solid var(--gray-50); }
.menu-join { display:block; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--r-10); padding:14px 16px; font-size:14px; font-weight:700; color:var(--gray-900); }
.menu-auth { display:flex; align-items:center; gap:14px; margin-top:14px; padding:0 2px; font-size:14px; color:var(--gray-700); }
.menu-auth a { color:var(--gray-700); font-weight:600; }
.menu-auth-div { width:1px; height:12px; background:var(--gray-300); }
.menu-nav { padding:6px 0; }
.menu-link { display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 20px; font-size:16px; font-weight:600; color:var(--gray-900); background:none; border:none; cursor:pointer; text-align:left; transition:background .15s; }
.menu-link:hover { background:var(--gray-50); }
.menu-acc svg { width:18px; height:18px; color:var(--gray-400); transition:transform .2s; }
.menu-group.open > .menu-acc svg { transform:rotate(180deg); }
.menu-sub { display:none; padding:2px 0 8px; background:var(--gray-50); }
.menu-group.open .menu-sub { display:block; }
.menu-sub a { display:block; padding:11px 20px 11px 34px; font-size:14px; color:var(--gray-600); }
.menu-sub a:hover { color:var(--blue-600); }
.menu-foot { margin-top:auto; padding:22px 20px 26px; border-top:1px solid var(--gray-100); }
.menu-cs-label { font-size:12px; font-weight:700; color:var(--gray-400); }
.menu-cs-num { font-size:22px; font-weight:800; color:var(--gray-900); letter-spacing:-.5px; margin:5px 0; }
.menu-cs-hours { font-size:12px; color:var(--gray-500); }