@charset "utf-8";

.ml-drawer-panel{padding:28px;}
.ml-drawer-panel > *{flex-shrink:0;}

/* 상단 */
.ml-drawer-top{
	display:flex;justify-content:space-between;align-items:center;
	margin-bottom:40px;
}
.ml-drawer-word{display:inline-flex;align-items:center;line-height:0;}
.ml-drawer-word .ml-logo{height:22px;width:auto;fill:var(--fg);}
.ml-drawer-close{
	align-self:auto;margin:0;padding:0;background:none;border:0;
	color:var(--fg);cursor:pointer;opacity:.75;line-height:0;
}
.ml-drawer-close:hover{opacity:1;}
.ml-drawer-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;}

/* 회원 상태 */
.ml-drawer-account{
	padding:0 0 22px;margin-bottom:24px;
	border-bottom:1px solid var(--border);
}
.ml-drawer-hello{
	font-family:var(--font-display);font-size:20px;line-height:1.3;
	color:var(--fg);margin:0 0 16px;
}
.ml-drawer-hello strong{font-weight:400;}
.ml-drawer-authlinks{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
.ml-drawer-authlinks a{
	font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
	text-transform:uppercase;color:var(--muted);transition:color .2s ease;
}
.ml-drawer-authlinks a:hover{color:var(--fg);}
.ml-drawer-authlinks .ml-btn-line{
	border:1px solid var(--fg);color:var(--fg);
	padding:9px 22px;border-radius:2px;letter-spacing:0.1em;
	transition:background .2s ease,color .2s ease;
}
.ml-drawer-authlinks .ml-btn-line:hover{background:var(--fg);color:var(--bg);}

/* 주메뉴 */
.ml-drawer-nav{display:flex;flex-direction:column;gap:0;}
.ml-drawer-nav a{
	font-family:var(--font-display);font-size:32px;line-height:1.15;
	padding-block:10px;border-bottom:1px solid var(--border);
	color:var(--fg);transition:color .2s ease;
}
.ml-drawer-nav a:hover{color:var(--muted);}

/* 전체 카테고리 버튼 */
.ml-drawer-nav .ml-drawer-catall{
	font-family:var(--font-mono);font-size:12px;font-weight:500;
	letter-spacing:0.1em;text-transform:uppercase;
	color:var(--muted);
	white-space:nowrap;line-height:1.4;
	padding:16px 0 2px;margin-top:2px;
	border-top:0;border-bottom:0;
}
.ml-drawer-nav .ml-drawer-catall:hover{color:var(--fg);}

/* 하단 util */
.ml-drawer-foot{
	margin-top:auto;padding-top:24px;
	display:flex;gap:20px;align-items:center;
}
.ml-drawer-foot a{
	font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
	text-transform:uppercase;color:var(--muted);transition:color .2s ease;
}
.ml-drawer-foot a:hover{color:var(--fg);}
.ml-drawer-foot .ml-drawer-cartnum{
	display:inline-block;min-width:18px;padding:1px 6px;margin-left:2px;
	font-variant-numeric:tabular-nums;font-size:11px;line-height:1.5;
	text-align:center;border-radius:9px;background:var(--fg);color:var(--bg);
}

/* firstmall 콘텐츠 페이지(상품상세·목록·장바구니·게시판): 헤더 고정 + 본문 오프셋.
   서브페이지는 body.ml-subpin(#layout_body_inner 오프셋), 메인은 .ml-overlay 사용.
   이 페이지들은 #layout_body_inner 가 없어 body 자체에 오프셋을 준다. */
body.ml-fmpin .ml-header .ml-announce{position:fixed;top:0;left:0;right:0;z-index:61;}
body.ml-fmpin .ml-header .ml-nav{position:fixed;top:var(--announce-h);left:0;right:0;z-index:50;}
body.ml-fmpin.ml-announce-closed .ml-header .ml-nav{top:0;}
body.ml-fmpin{padding-top:calc(var(--announce-h) + var(--nav-h));}
body.ml-fmpin.ml-announce-closed{padding-top:var(--nav-h);}