@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 전체메뉴 (햄버거 버튼)
  - PC     : 1201px ~   (좌측 이미지 영역 + 우측 메뉴 패널)
  - 1025~1200px         (이미지 영역 없이 전체 배경)
  - 태블릿 : 768~1024px (반투명 카드)
  - 모바일 : ~767px     (밝은 카드 + 아코디언)
  ※ 닫기 버튼 위치·크기는 햄버거 버튼(#top .top-menu-btn)에 맞춰 스크립트로 지정
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { opacity:1; visibility:visible; z-index: 1100; }
body.m-menu-on .is-subpage { height:100vh; overflow:hidden; }

#m-menu { position: fixed; top:0; left:0; right:0; bottom:0; max-width:100%; z-index: 1; overflow:hidden; opacity:0; visibility:hidden; transition-duration:400ms;
    --bg-w:30%;
    --mm-close-top:20px;  /* 스크립트에서 햄버거 버튼 위치로 갱신 */
    --mm-close-h:80px;
    --mm-line:rgba(255,255,255,.25);
    --mm-text:rgba(255,255,255,.75);
    --mm-cols:3;
}

/* 좌측 이미지 영역 */
#m-menu .bg { position:absolute; left:0; top:0; bottom:0; width:var(--bg-w); background:url('../img/main1.jpg?v=1') no-repeat center/cover; z-index:3; }
#m-menu .bg:before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.45); }
#m-menu .bg:after { content:""; position:absolute; left:0; right:0; bottom:0; height:60%; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%); z-index:1; }

/* 이미지 영역 하단 문구 */
#m-menu .bg-txt { position:absolute; left:var(--mm-logo-left, 40px); right:3vw; bottom:6vh; color:#fff; z-index:2; }
#m-menu .bg-txt { font-family:'Nanum Myeongjo', 'NanumMyeongjo', serif; text-shadow:0 2px 12px rgba(0,0,0,.35); }
#m-menu .bg-txt .tit { font-size:clamp(2rem, 2.6vw, 3.25rem); font-weight:600; /* 나눔명조는 400·700·800만 있어 700 파일로 표시 */ line-height:1.35; letter-spacing:-0.02em; }
#m-menu .bg-txt .tit:after { content:""; display:block; width:80px; height:2px; margin:32px 0; background:rgba(255,255,255,.9); }
#m-menu .bg-txt .sub { font-size:clamp(1.125rem, 1.35vw, 1.625rem); font-weight:400; line-height:1.5; letter-spacing:-0.02em; }

/* 로고 : 탑메뉴 로고와 같은 자리·크기 */
#m-menu .m-menu-logo { position:fixed; left:40px; top:20px; width:200px; height:40px; display:flex; align-items:center; z-index:11; }
#m-menu .m-menu-logo img { display:block; height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center; }

/* 닫기 버튼 : 햄버거 버튼과 같은 자리·모양 */
#m-menu .btn-close { position:fixed; top:20px; right:40px; width:80px; height:80px; background:var(--main-color3); z-index:10; }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; width:2px; height:36%; background:#fff; border-radius:4px; transform:translate(-50%, -50%) rotate(45deg); transition-duration:300ms; }
#m-menu .btn-close:after { transform:translate(-50%, -50%) rotate(-45deg); }
#m-menu .btn-close:hover:before { transform:translate(-50%, -50%) rotate(135deg); }
#m-menu .btn-close:hover:after { transform:translate(-50%, -50%) rotate(45deg); }

/* 우측 메뉴 패널 : 왼쪽에서 밀려 들어오는 배경 */
#m-menu .m-menu-container { position:absolute; left:var(--bg-w); top:0; right:0; bottom:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; z-index:2; }
#m-menu .m-menu-container:before { content:""; position:fixed; left:calc(var(--bg-w) - 30vw); top:0; right:0; bottom:0; z-index:-1; transition:left 1000ms ease-in-out 0ms; }
body.m-menu-on #m-menu .m-menu-container:before { left:var(--bg-w); transition:left 1.2s ease-in-out 300ms; }
#m-menu .m-menu-inner { display:flex; flex-direction:column; max-width:1100px; min-height:100%; margin:0 auto; padding:0 5% 60px; }


/* 상단 : 유틸메뉴 */
#m-menu .m-menu-head { display:flex; align-items:center; flex-shrink:0; margin-top:var(--mm-close-top); height:var(--mm-close-h); border-bottom:1px solid var(--mm-line); }

#m-menu .m-menu-util { display:flex; align-items:center; margin-left:auto; }
#m-menu .m-menu-util li { position:relative; }
#m-menu .m-menu-util li + li:before { content:""; position:absolute; left:0; top:50%; width:1px; height:12px; margin-top:-6px; background:rgba(255,255,255,.4); }
#m-menu .m-menu-util a { display:flex; align-items:center; gap:8px; padding:0 22px; color:#fff; font-size:1rem; opacity:.85; transition-duration:300ms; }
#m-menu .m-menu-util a:hover,
#m-menu .m-menu-util a:focus-visible { opacity:1; }
#m-menu .m-menu-util .ico { position:relative; display:none; }
#m-menu .m-menu-util .ico svg { display:block; width:26px; height:26px; }
/* 장바구니 : 탑메뉴와 같은 아이콘 이미지를 글자색으로 칠함 */
#m-menu .m-menu-util .ico-img { display:block; width:26px; height:26px; background:currentColor; -webkit-mask:url('../img/top-icon-cart.png') no-repeat center/contain; mask:url('../img/top-icon-cart.png') no-repeat center/contain; }
#m-menu .m-menu-util .util-cart .ico { display:block; order:2; }
/* 장바구니 개수 (탑메뉴 #top .cart .count 와 같은 색) */
#m-menu .m-menu-util .count { position:absolute; top:-6px; right:-9px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--main-color2); color:#fff; font-size:.625rem; font-style:normal; font-weight:700; line-height:17px; text-align:center; }


/* 메뉴 섹션 */
#m-menu .items { flex:1; display:flex; flex-direction:column; justify-content:center; padding:20px 0; }
#m-menu .item { position:relative; display:flex; align-items:stretch; padding:42px 0; border-bottom:1px solid var(--mm-line); }
#m-menu .item:last-child { border-bottom:none; }
#m-menu .item:before { content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:#fff; transition-duration:400ms; }
#m-menu .item:hover:before { width:100%; }
#m-menu .item:last-child:before { display:none; }

#m-menu .item-head { position:relative; display:flex; align-items:center; flex-shrink:0; width:320px; margin-right:50px; border-right:1px solid var(--mm-line); }
#m-menu .item .is_sub { display:flex; align-items:center; gap:20px; color:#fff; font-size:1.625rem; font-weight:700; letter-spacing:-.02em; }
#m-menu .item-icon svg { display:block; width:50px; height:50px; }
#m-menu .item .arrow { display:block; width:10px; height:10px; margin-left:4px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); transition-duration:300ms; }
#m-menu .item .is_sub:hover .arrow { transform:translateX(5px) rotate(45deg); }
#m-menu .item-toggle { display:none; }

#m-menu .item-body { flex:1; display:flex; align-items:center; }
#m-menu .item .depth2 { display:grid; grid-template-columns:repeat(var(--mm-cols), 170px); row-gap:6px; }
#m-menu .item .depth2.cols-2 { --mm-cols:2; }
#m-menu .item .depth2.cols-3 { --mm-cols:3; }
#m-menu .item .depth2 > li { position:relative; padding:0 0 0 30px; }
#m-menu .item .depth2 > li:before { content:""; position:absolute; left:0; top:50%; width:1px; height:14px; margin-top:-7px; background:rgba(255,255,255,.35); }
#m-menu .item .depth2.cols-2 > li:nth-child(2n+1):before,
#m-menu .item .depth2.cols-3 > li:nth-child(3n+1):before { display:none; }
#m-menu .item .sub .sub-a { position:relative; display:inline-block; padding:8px 0; color:var(--mm-text); font-size:1.125rem; white-space:nowrap; transition-duration:300ms; }
#m-menu .item .sub .sub-a:after { content:""; position:absolute; left:0; bottom:4px; width:0; height:1px; background:currentColor; transition-duration:300ms; }
#m-menu .item .sub li:hover > .sub-a,
#m-menu .item .sub .sub-a:focus-visible,
#m-menu .item .sub li.on > .sub-a { color:#fff; }
#m-menu .item .sub li:hover > .sub-a:after,
#m-menu .item .sub li.on > .sub-a:after { width:100%; }
#m-menu .item .sub li.on > .sub-a { font-weight:700; }


@media (max-width: 1500px) {
    #m-menu { --bg-w:25%; }
    #m-menu .item-head { width:260px; margin-right:40px; }
    #m-menu .item .is_sub { font-size:1.5rem; }
    #m-menu .item .depth2 { grid-template-columns:repeat(var(--mm-cols), 150px); }
}

/* 1200px 이하 : 좌측 이미지 영역 대신 전체 배경 (블러 + 브라운) */
@media (max-width: 1200px) {
    #m-menu { --bg-w:0px; }
    #m-menu .bg { right:0; width:auto; filter:blur(6px); transform:scale(1.08); z-index:1; }
    #m-menu .bg:before { background:linear-gradient(180deg, rgba(91,65,45,.88) 0%, rgba(91,65,45,.8) 100%); }
    #m-menu .bg-txt,
    #m-menu .bg:after { display:none; }
    #m-menu .m-menu-container:before { display:none; }
    #m-menu .m-menu-inner { padding:0 40px 60px; }
}

/* 1025~1200px : 유틸메뉴가 로고와 같은 줄 → 상단 줄을 고정해 스크롤되는 메뉴가 그 뒤로 지나가게 */
@media (min-width: 1025px) and (max-width: 1200px) {
    #m-menu .m-menu-head { position:sticky; top:0; z-index:3; margin-top:0; padding-top:var(--mm-close-top); height:calc(var(--mm-close-top) + var(--mm-close-h)); background:linear-gradient(180deg, rgba(91,65,45,.95) 80%, rgba(91,65,45,.85) 100%); }
}

@media (max-width: 1024px) {
    /* 스크롤 시 메뉴가 고정된 로고·닫기 버튼 뒤로 지나가도록 상단 음영 (유틸메뉴는 그 아래 줄이라 가리지 않음) */
    #m-menu:after { content:""; position:fixed; left:0; right:0; top:0; height:calc(var(--mm-close-top) + var(--mm-close-h) + 12px); background:linear-gradient(180deg, rgba(91,65,45,.95) 65%, rgba(91,65,45,0) 100%); z-index:9; pointer-events:none; }
}

@media (max-width: 1024px) {
	body.m-menu-on { overflow:hidden !important; height:100vh !important; }

    #m-menu .m-menu-inner { max-width:760px; padding:0 30px 40px; }

    /* 상단 : 첫 줄은 로고·닫기 버튼 자리, 유틸메뉴는 아래 줄 아이콘 카드로 */
    #m-menu .m-menu-head { flex-wrap:wrap; height:auto; border-bottom:none; }
    #m-menu .m-menu-head:before { content:""; width:100%; height:var(--mm-close-h); }
    #m-menu .m-menu-util { order:3; width:100%; margin:20px 0 0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:14px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
    #m-menu .m-menu-util li { flex:1; }
    #m-menu .m-menu-util li + li:before { top:22%; height:56%; margin-top:0; background:var(--mm-line); }
    #m-menu .m-menu-util a { flex-direction:column; justify-content:center; gap:8px; padding:18px 0; font-size:.9375rem; }
    #m-menu .m-menu-util .ico { display:block; }
    #m-menu .m-menu-util .util-cart .ico { order:0; }

    /* 섹션 : 반투명 카드 */
    #m-menu .items { justify-content:flex-start; gap:16px; padding:16px 0 0; }
    #m-menu .item { display:block; padding:28px 32px; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.06); }
    #m-menu .item:last-child { border-bottom:1px solid rgba(255,255,255,.22); }
    #m-menu .item:before { display:none; }
    #m-menu .item-head { width:auto; margin:0 0 16px; border-right:none; }
    #m-menu .item .is_sub { width:100%; gap:16px; font-size:1.375rem; }
    #m-menu .item-icon svg { width:42px; height:42px; }
    #m-menu .item .arrow { margin-left:auto; margin-right:6px; }
    #m-menu .item .depth2 { width:100%; grid-template-columns:repeat(var(--mm-cols), minmax(0, 1fr)); row-gap:0; }
    #m-menu .item .depth2.cols-2 { width:66.666%; }
    #m-menu .item .depth2 > li { padding-left:24px; }
    #m-menu .item .depth2.cols-3 > li:nth-child(3n+1),
    #m-menu .item .depth2.cols-2 > li:nth-child(2n+1) { padding-left:0; }
    #m-menu .item .sub .sub-a { font-size:1.0625rem; }
}

@media (max-width: 767px) {
    #m-menu { --mm-card:rgba(255,248,242,.92); }
    #m-menu .bg:before { background:linear-gradient(180deg, rgba(91,65,45,.8) 0%, rgba(91,65,45,.45) 100%); }
    #m-menu .m-menu-inner { padding:0 16px 30px; }

    #m-menu .btn-close:before,
    #m-menu .btn-close:after { height:40%; }

    /* 상단 : 로그인·회원가입 버튼 + 아이콘 카드 3개 */
    #m-menu .m-menu-util { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-top:18px; background:none; border:none; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; }
    #m-menu .m-menu-util li + li:before { display:none; }
    #m-menu .m-menu-util li { grid-column:span 2; }
    #m-menu .m-menu-util li.util-member { grid-column:span 3; }
    #m-menu .m-menu-util a { height:100%; padding:14px 0; border-radius:10px; background:var(--mm-card); color:var(--main-color1); font-size:.8125rem; opacity:1; }
    #m-menu .m-menu-util a:active { transform:scale(.97); }
    #m-menu .m-menu-util .ico svg,
    #m-menu .m-menu-util .ico-img { width:24px; height:24px; }
    #m-menu .m-menu-util .util-member a { flex-direction:row; height:52px; padding:0; font-size:1rem; font-weight:700; }
    #m-menu .m-menu-util .util-member .ico { display:none; }
    #m-menu .m-menu-util .util-member:first-child a { background:var(--main-color1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }

    /* 섹션 : 밝은 카드 + 아코디언 */
    #m-menu .items { gap:12px; padding-top:12px; }
    #m-menu .item { padding:0; border:none !important; border-radius:12px; background:var(--mm-card); overflow:hidden; }
    #m-menu .item-head { margin:0; }
    #m-menu .item .is_sub { gap:14px; padding:16px 56px 16px 18px; color:var(--main-color1); font-size:1.1875rem; }
    #m-menu .item-icon svg { width:34px; height:34px; }
    #m-menu .item .arrow { display:none; }
    #m-menu .item-toggle { display:block; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; background:none; z-index:2; }
    #m-menu .item-toggle:after { content:""; position:absolute; right:24px; top:50%; width:9px; height:9px; margin-top:-2px; border-top:2px solid var(--main-color1); border-right:2px solid var(--main-color1); transform:translateY(-50%) rotate(135deg); transition-duration:300ms; }
    #m-menu .item.open .item-toggle:after { margin-top:2px; transform:translateY(-50%) rotate(-45deg); }

    #m-menu .item-body { display:block; overflow:hidden; }
    #m-menu .item .depth2,
    #m-menu .item .depth2.cols-2 { width:100%; padding:0 18px 16px; }
    #m-menu .item .depth2.cols-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    #m-menu .item .depth2 > li { padding-left:14px; }
    #m-menu .item .depth2 > li:before { height:12px; margin-top:-6px; background:rgba(91,65,45,.25); }
    #m-menu .item .sub .sub-a { padding:6px 0; color:rgba(91,65,45,.85); font-size:.9375rem; }
    #m-menu .item .sub .sub-a:after { display:none; }
    #m-menu .item .sub li:hover > .sub-a,
    #m-menu .item .sub li.on > .sub-a { color:var(--main-color1); }
}

@media (max-width: 360px) {
    #m-menu .item .depth2 > li { padding-left:10px; }
    #m-menu .item .sub .sub-a { font-size:.875rem; }
    #m-menu .m-menu-util a { font-size:.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    #m-menu, #m-menu * { transition-duration:0ms !important; animation-duration:0ms !important; }
}