/***********************************************
Header
***********************************************/
.header { position: sticky; top: 0; z-index: 2000; background:#fff; border-bottom:1px solid #ededed; } 
.header-inner { max-width:1440px; margin:0 auto; padding:0 22px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; } 
.brand { font-size:24px; font-weight:800; letter-spacing:-0.3px; color:#2563eb; /* 로고는 이미지 톤 유지 */ } 

/* GNB */
.gnb { flex:1; display:flex; justify-content:center; } 
.gnb-depth1 { display:flex; gap:36px; align-items:center; } 

.gnb-item { position:relative; } 
.gnb-link { font-size:18px; font-weight:600; padding:10px 2px; color:#111; } 

.gnb-link-red { color:#2563eb; } 

/* dropdown */
.gnb-drop { position:absolute; left:50%; top:42px; transform:translateX(-50%) translateY(8px); width:190px; background:#fff; border:1px solid #ededed; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,0.08); opacity:0; visibility:hidden; pointer-events:none; transition: opacity .2s ease, transform .25s ease, visibility .2s ease; padding:8px; pointer-events: auto; } 
.gnb-drop a { display:flex; align-items:center; height:42px; padding:0 10px; border-radius:10px; font-size:16px; font-weight:600; color:#222; } 
.gnb-drop a:hover { background:#eff6ff; color:#2563eb; /* 메인 블루 */ } 
.gnb-item:hover .gnb-drop { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } 

/* UTIL */
.util { display:flex; align-items:center; gap:12px; } 
.util-btn { height:40px; padding:0 14px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; } 
.util-primary { background: linear-gradient(90deg, #2563eb, #3b82f6); color:#fff; } 
.util-ghost { background:#f3f4f6; color:#111; } 

/* mypage icon dropdown */
.util-pop { position:relative; } 
.util-icon { width:40px; height:40px; border-radius:10px; border:1px solid #ededed; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background .2s ease; } 
.util-icon:hover { background:#f8fafc; } 
.util-icon svg { width:20px; height:20px; fill:#111; } 
.util-layer { position:absolute; right:0; top:45px; width:180px; background:#fff; border:1px solid #ededed; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,0.08); padding:8px; opacity:0; visibility:hidden; pointer-events:none; transform: translateY(8px); transition: opacity .2s ease, transform .25s ease, visibility .2s ease; } 
.util-layer a { display:flex; align-items:center; height:42px; padding:0 10px; border-radius:10px; font-size:14px; font-weight:650; } 
.util-layer a:hover { background:#eff6ff; color:#2563eb; } 
.util-pop.is-open .util-layer { opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); } 

/* BURGER (morph) */
.burger { width:42px; height:42px; border:0; background:transparent; display:none; align-items:center; justify-content:center; position:relative; cursor:pointer; } 

.burger span { position:absolute; width:22px; height:2px; background:#111; transition: transform .25s ease, opacity .2s ease; } 
.burger span:nth-child(1) { transform: translateY(-6px); } 
.burger span:nth-child(2) { transform: translateY(0); } 
.burger span:nth-child(3) { transform: translateY(6px); } 

.burger.is-open span:nth-child(1) { transform: rotate(45deg); } 
.burger.is-open span:nth-child(2) { opacity:0; } 
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); } 

/* =========================
MOBILE NAV (OFFCANVAS)
========================= */
.mnav { position:fixed; inset:0; z-index:9999; background: rgba(0,0,0,0.28); /* dim */
opacity:0; visibility:hidden; pointer-events:none; transition: opacity .28s ease, visibility .28s ease; } 

.mnav.is-open { opacity:1; visibility:visible; pointer-events:auto; } 

/* panel */
.mnav-inner { height:100%; width:100%; max-width:540px; margin-left:auto; background:#fff; padding:20px 22px 28px; overflow:auto; transform: translateX(18px); transition: transform .32s ease; } 

.mnav.is-open .mnav-inner { transform: translateX(0); } 

/* top row */
.mnav-top { display:flex; align-items:center; justify-content:space-between; padding-top:6px; } 
.mnav-brand { font-size:24px; font-weight:800; letter-spacing:-0.3px; color:#2563eb; } 
.mnav-top-icons { display:flex; align-items:center; gap:14px; } 

.mnav-icon,
.mnav-close { width:34px; height:34px; border:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } 

.mnav-icon svg,
.mnav-close svg { width:22px; height:22px; fill:#111; } 

/* auth buttons */
.mnav-auth { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px; } 
.mnav-user { grid-column:1 / -1; display:flex; align-items:center; min-height:20px; padding:0 2px; font-size:14px; font-weight:700; color:#374151; } 

.mnav-btn { height:52px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; } 

.mnav-btn.primary { color:#fff; background: linear-gradient(90deg, #2563eb, #3b82f6); /* 블루 메인 */ } 
.mnav-btn.ghost { background:#f3f4f6; color:#111; } 

/* menu list */
.mnav-list { margin-top:18px; border-top:1px solid #ededed; } 
.mnav-item { border-bottom:1px solid #ededed; } 
.mnav-link { width:100%; height:64px; padding:0 4px; display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:600; background:transparent; border:0; cursor:pointer; color:#111; } 
.mnav-link.as-link { display:flex; align-items:center; justify-content:space-between; } 
.mnav-link.red { color:#2563eb; } 

.chev { width:18px; height:18px; border-right:2px solid #111; border-bottom:2px solid #111; transform: rotate(-45deg); margin-right:6px; transition: transform .2s ease, border-color .2s ease; } 

/* sub (smooth accordion) */
.mnav-subwrap { height:0; overflow:hidden; transition: height .28s ease; background:#fafafa; } 
.mnav-sub { padding:6px 0 12px; } 
.mnav-sub a { display:block; padding:12px 10px 12px 14px; font-size:15px; font-weight:700; color:#333; } 
.mnav-sub a:active { background:#f1f5f9; } 
.mnav-item.is-open .chev { transform: rotate(45deg); border-color:#2563eb; } 

@media screen and (max-width: 1024px) {.gnb { display:none; } 
.burger { display:flex; } 
 }

@media screen and (max-width: 480px) {.header-inner { height:60px; padding:0 16px; } 
.util-btn { display:none; } 
.util > .util-pop { display:none !important; }
.util > a[aria-label="장바구니"] { display:none !important; }
.mnav-inner { padding:18px 18px 24px; } 
 }



/***********************************************
Footer
***********************************************/
.site-footer { background:#fff; border-top: 1px solid #ededed; } 
.footer-wrap { max-width: 1440px; margin: 0 auto; padding: 26px 22px 34px; } 

/* top nav */
.footer-nav { display:flex; align-items:center; gap: 26px; flex-wrap: wrap; } 
.footer-link { font-size: 14px; font-weight: 600; color:#111; padding: 6px 2px; border-radius: 8px; } 
.footer-link:hover { color:#2563eb; } 
.footer-link.is-point { color:#2563eb; } 

/* info */
.footer-info { margin-top: 14px; color:#6b7280; font-size: 13px; line-height: 1.8; font-weight: 600; word-break: keep-all; }  

.footer-info p + p { margin-top: 4px; } 
.footer-copy { margin-top: 18px; font-size: 13px; font-weight: 650; color:#9ca3af; } 


@media screen and (max-width: 768px) {.footer-wrap { padding: 22px 18px 30px; } 
.footer-nav { gap: 18px; } 
.footer-info { font-size: 12px; } 
 }

@media screen and (max-width: 360px) {.footer-link { font-size: 13px; } 
 }