/* v7 site menu on the Fonday for Brands page (2026-10-11, 대표 「1번으로 해줘」). Only the menu is styled here:
   the homepage tokens are scoped to #hp-nav so the page's own F1 styles are untouched. Rules copied from hp2/e
   (e-theme, e-ink, e-rooms, e-ci) and limited to .hp-* selectors. */
#hp-nav{
  --paper:#FBF6F2;--ink-1:#201A19;--ink-2:#3A3230;--ink-3:#554C49;--hair:rgba(32,26,25,.10);--surface:#FFFFFF;
  --co:#D63A6E;--co-btn:#B8285B;--co-on:#FFFFFF;--co-hover:#A12250;--co-active:#8A1C45;--co-tint:#FBE6EC;--co-tint-2:#F7D3DE;
  --wordmark:#B8285B;--menu-ink:#A12250;--t-head:#201A19;--t-aux:#554C49;
  --r-xs:4px;--r-sm:8px;--r-btn:10px;--r-card:16px;
  --hp-bg:var(--paper);--hp-fg:var(--ink-1);--hp-muted:var(--ink-3);--hp-line:var(--hair);
  --hp-panel:var(--paper);--hp-accent:var(--co-tint);--hp-accent-fg:var(--menu-ink);--hp-soon:var(--ink-3);
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;
}
/* hp.css reset, scoped to the menu (this page has no list/button reset of its own) */
#hp-nav,#hp-nav *,#hp-nav *::before,#hp-nav *::after{box-sizing:border-box}
#hp-nav ul,#hp-nav ol{margin:0;padding:0;list-style:none}
#hp-nav p,#hp-nav h2,#hp-nav h3{margin:0}
#hp-nav a{color:inherit;text-decoration:none}
#hp-nav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#hp-nav img,#hp-nav svg{display:block;max-width:100%}
#hp-nav [hidden]{display:none!important}
#hp-nav details>summary{list-style:none}#hp-nav details>summary::-webkit-details-marker{display:none}
#hp-nav .ci-logo{display:block;height:var(--ci-h);width:auto;max-width:none;flex:none}
#hp-nav .hp-word{--ci-h:22px;padding:calc(var(--ci-h)/2);flex:none;color:var(--wordmark)}
#hp-nav .hp-sheet-brand{margin:12px 0 20px}
#hp-nav .hp-mi b{color:var(--t-head)}
#hp-nav .hp-mi span{color:var(--t-aux);font-weight:500;font-size:13px}
#hp-nav .hp-panel{border:1px solid var(--hair);box-shadow:none;border-radius:var(--r-card)}
#hp-nav.solid .hp-bar,#hp-nav:has(.hp-panel:not([hidden])) .hp-bar{box-shadow:none;border-bottom:1px solid var(--hair)}
#hp-nav .hp-tb,#hp-nav .hp-burger,#hp-nav .hp-mi{border-radius:var(--r-sm)}
#hp-nav .hp-tb[aria-expanded="true"],#hp-nav .hp-mi:hover,#hp-nav .hp-mi:focus-visible{background:rgba(32,26,25,.06)}
#hp-nav .hp-sheet-act .hp-mail,#hp-nav .hp-try,#hp-nav .hp-sheet-act .hp-try{
  min-height:48px;height:48px;padding:0 22px;border-radius:var(--r-btn);border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;font-weight:650;letter-spacing:-.01em;box-shadow:none;transform:none;text-decoration:none}
#hp-nav .hp-sheet-act .hp-mail{background:var(--co-btn);color:var(--co-on)}
#hp-nav .hp-try,#hp-nav .hp-sheet-act .hp-try{background:transparent;color:var(--ink-1);box-shadow:inset 0 0 0 1.5px var(--ink-1)}
#hp-nav .hp-try:hover{background:var(--ink-1);color:var(--paper)}
#hp-nav .hp-demo,#hp-nav .hp-sheet-act .hp-demo{height:36px;min-height:36px;padding:0 14px;border-radius:var(--r-sm);border:0;background:var(--co-tint);color:var(--menu-ink);font-size:14px;font-weight:650;box-shadow:none;display:inline-flex;align-items:center}
#hp-nav .hp-demo:hover{background:var(--co-tint-2);color:var(--co-hover)}
#hp-nav .ext-arrow{font-size:.85em;color:var(--ink-3)}
#hp-nav a:focus-visible,#hp-nav button:focus-visible{outline:2px solid var(--co);outline-offset:3px;border-radius:var(--r-sm)}
@media(max-width:1099px){#hp-nav .hp-act .hp-try,#hp-nav .hp-act .hp-demo{display:none}}
@media(max-width:899px){#hp-nav .hp-word{--ci-h:20px}}