/* 상단 메뉴 · 묶음 패널 · 휴대폰 카테고리 줄 · 서랍 묶음 (대표 지시 2026-10-24, docs/20261024_소개_메뉴정리_회의.md)
   템플릿: site/partials/menu_nav.html · menu_strip.html · drawer.html  동작: assets/js/menu.js */
.mnav{position:relative;border-top:1px solid #E6E6E6;word-break:keep-all}
.mnav-row{display:flex;justify-content:center;align-items:stretch;gap:30px;height:46px;margin:0 auto;list-style:none;font-size:13px;font-weight:400}
.mnav-row>li{display:flex;align-items:center}
.mnav-a,.mnav-btn{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0;border:0;background:none;color:#111111;font:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap;position:relative}
.mnav-a:hover{text-decoration:none}
.mnav-a::after,.mnav-btn::after{content:'';position:absolute;left:0;right:0;bottom:12px;height:1px;background:#111111;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.mnav-a:hover::after,.mnav-btn:hover::after,.mnav-g.open>.mnav-btn::after,.mnav-a.on::after,.mnav-btn.on::after{transform:scaleX(1)}
.mnav-a.on,.mnav-btn.on{font-weight:500}
.mnav-btn svg{color:#6E6E6E;transition:transform .2s ease}
.mnav-g.open>.mnav-btn svg{transform:rotate(180deg);color:#111111}
.mnav-btn:focus-visible,.mnav-a:focus-visible{outline:2px solid #1B2438;outline-offset:4px}
/* 패널: 머리 바로 아래에 붙어 내려온다(본문을 밀지 않음 · 덮개 없음) */
.mpanel{position:absolute;left:0;right:0;top:100%;z-index:5;background:#FFFFFF;border-top:1px solid #E6E6E6;border-bottom:1px solid #111111;box-shadow:0 22px 32px -28px rgba(17,17,17,.35);text-align:left;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
.mnav-g.open>.mpanel{visibility:visible;clip-path:inset(0 0 -48px 0);transition:clip-path .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mpanel-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:48px;padding-top:40px;padding-bottom:44px;align-items:start}
.mp-head p{margin:0}
.mp-en{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#6E6E6E;font-style:italic}
.mp-ko{margin-top:10px!important;font-family:'Noto Serif KR',serif;font-size:34px;line-height:1.2;font-weight:400;color:#111111}
.mp-desc{margin-top:18px!important;max-width:280px;font-size:14px;line-height:1.85;color:#5E5E5E}
.mp-items{list-style:none;margin:0;padding:0;border-top:1px solid #111111;display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.mp-items.mp-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-items li{border-bottom:1px solid #E6E6E6}
.mp-items a{display:block;padding:16px 0 15px;color:#111111;transition:padding .15s ease}
.mp-items a:hover,.mp-items a:focus-visible{text-decoration:none;padding-left:6px}
.mp-items a:focus-visible{outline:2px solid #1B2438;outline-offset:2px}
.mp-t{display:block;font-family:'Noto Serif KR',serif;font-size:18px;font-weight:500;line-height:1.4}
.mp-items a.on .mp-t{color:#1B2438;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.mp-d{display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:#5E5E5E}
.mp-ph{margin:0;justify-self:end;width:100%;max-width:240px}
.mp-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#F2F1EE}
.mp-ph figcaption{margin-top:8px;font-size:10.5px;letter-spacing:.04em;color:#6E6E6E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.mpanel,.mnav-g.open>.mpanel,.mnav-btn svg,.mnav-a::after,.mnav-btn::after{transition:none}}
@container mg (max-width:1180px){.mpanel-in{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}.mp-ph{display:none}.mnav-row{gap:24px}}
@container mg (max-width:1080px){.mnav-row{gap:18px}}
/* 2026-11-03: '디자이너 브랜드관'이 더해진 뒤 본문 폭 961~1000(1024 화면 + 접힌 레일)에서 메뉴 끝이 14px 넘치던 것 — 이름은 그대로 두고 간격만 한 단계 더 좁힌다 */
@container mg (max-width:1000px){.mnav-row{gap:15px}}

/* 휴대폰 카테고리 줄 — 옆으로 밀어 보기, 터치 영역 44px */
.mstrip{display:none}
@container mg (max-width:960px){
 .mstrip{display:block;border-bottom:1px solid #E6E6E6;background:#FFFFFF;word-break:keep-all;overflow:hidden}
 .mstrip-row{display:flex;gap:0;margin:0;padding:0 8px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
 .mstrip-row::-webkit-scrollbar{display:none}
 .mstrip-row li{flex:none;scroll-snap-align:start}
 .mstrip-row li:last-child{padding-right:20px}
 .ms-c{display:inline-flex;align-items:center;gap:5px;min-height:46px;padding:0 12px;font-size:14px;color:#111111;white-space:nowrap}
 .ms-c:hover{text-decoration:none}
 .ms-c svg{color:#6E6E6E}
 .ms-c.on{font-weight:500;box-shadow:inset 0 -2px 0 #1B2438}
 .ms-c:focus-visible{outline:2px solid #1B2438;outline-offset:-4px}
}

/* 서랍 안 묶음(펼침) */
.hb-g{border-bottom:1px solid #E6E6E6}
.hb-g>summary{display:grid;grid-template-columns:36px minmax(0,1fr) auto 28px;align-items:baseline;padding:15px 0;list-style:none;cursor:pointer;color:#111111}
.hb-g>summary::-webkit-details-marker{display:none}
.hb-g>summary:focus-visible{outline:2px solid #1B2438;outline-offset:2px}
.hb-g>summary small{font-family:'Bodoni Moda',serif;font-size:14px;font-style:italic;color:#6E6E6E}
.hb-gx{justify-self:end;align-self:center;color:#111111;transition:transform .2s ease}
.hb-g[open]>summary .hb-gx{transform:rotate(180deg)}   /* 펼침 표시: '+ → ×'(닫기 단추로 읽힘) 대신 '+ → −'(디자인 점검 11-02 A) */
.hb-gv{transform-origin:6px 6px;transition:transform .2s ease}.hb-g[open]>summary .hb-gv{transform:scaleY(0)}
.hb-gi{list-style:none;margin:0;padding:0 0 12px 36px}
.hb-list .hb-gi a{display:block;padding:10px 0;border-bottom:0;min-height:44px;box-sizing:border-box;color:#111111!important}
.hb-list .hb-gi a:hover{padding-left:6px}
.hb-it{display:block;font-family:'Noto Serif KR',serif;font-size:16px;font-weight:500;line-height:1.45}
.hb-id{display:block;margin-top:3px;font-size:12px;line-height:1.55;color:#5E5E5E}
.hb-list a[aria-current="page"] .hb-t,.hb-list a[aria-current="page"] .hb-it{color:#1B2438;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.hb-g.flash>summary{background:linear-gradient(90deg,#F5F4F1,transparent)}
@media (prefers-reduced-motion:reduce){.hb-gx{transition:none}}
.hb-list>a{grid-template-columns:36px minmax(0,1fr) auto 28px}
.hb-list>a::after{content:''}
/* 바닥글 안내 줄에 '매거진 소개'가 더해져 휴대폰에서 두 줄이 된다 — 44px 터치 영역끼리 겹치지 않게 음수 여백을 푼다 */
@container mg (max-width:960px){.ft-legal{row-gap:0;margin-top:8px}.ft-legal a{margin:0}}
/* 예전 카테고리 줄 규칙(.catnav a.on 밑줄)이 패널 안 현재 지면에 겹치지 않게 */
.mnav .mp-items a.on{border-bottom:0;padding-bottom:15px}
.mnav .mnav-a.on{border-bottom:0;padding-bottom:0}

/* 바닥글 메뉴 (대표 결정 2026-11-03 메뉴 개편 · 11-04 길이 정리) — 상단 메뉴와 같은 아홉 묶음.
   넓은 PC(1180 이상) 한 줄 아홉 칸 · 961~1179 다섯 칸 · 960 이하 세 칸 · 560 이하는 묶음을 접은 두 칸 목차(누르면 그 묶음만 펼침, footer.html 스크립트) */
.ft-menu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px 32px;margin-top:56px;padding-top:32px;border-top:1px solid #333333;word-break:keep-all}
.ft-col{min-width:0}
.ft-g{margin:0 0 10px;font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;color:#8E8E8E}
.ft-tg{display:none}
.ft-menu ul{list-style:none;margin:0;padding:0}
.ft-menu li a{display:inline-flex;align-items:center;min-height:32px;font-family:'Noto Serif KR',serif;font-size:15px;font-weight:400;letter-spacing:.02em;color:#E6E6E6;line-height:1.45}
.ft-menu a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ft-menu a:focus-visible,.ft-tg:focus-visible{outline:1px solid #FFFFFF;outline-offset:4px}
@container mg (min-width:1180px){.ft-menu{grid-template-columns:repeat(8,max-content);justify-content:space-between;gap:24px 20px}.ft-menu li a{font-size:14px;min-height:30px}}
@container mg (max-width:960px){.ft-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px;margin-top:48px;padding-top:24px}.ft-menu li a{min-height:44px;min-width:44px;font-size:14px}.ft-g{margin-bottom:2px}}
@container mg (max-width:560px){
  .ft-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-menu.ft-js{gap:0 20px;margin-top:40px;padding-top:4px;align-items:start}
  .ft-js .ft-col{border-bottom:1px solid #2A2A2A}
  .ft-js .ft-g{margin:0}
  .ft-js .ft-gl{display:none}
  .ft-js .ft-tg{position:relative;display:flex;align-items:center;width:100%;min-height:44px;margin:0;padding:0 20px 0 0;border:0;background:none;cursor:pointer;text-align:left;font:500 12px 'Noto Sans KR',sans-serif;letter-spacing:.12em;color:#BDBDBD;word-break:keep-all}
  .ft-js .ft-tg::after{content:'';position:absolute;right:2px;top:50%;width:9px;height:1px;background:#8E8E8E}
  .ft-js .ft-tg::before{content:'';position:absolute;right:6px;top:calc(50% - 4px);width:1px;height:9px;background:#8E8E8E;transition:transform .2s}
  .ft-js .ft-col.on .ft-tg{color:#FFFFFF}
  .ft-js .ft-col.on .ft-tg::before{transform:scaleY(0)}
  .ft-js ul{display:none;padding:0 0 8px}
  .ft-js .ft-col.on ul{display:block}
  .ft-menu li a{width:100%;min-height:44px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.ft-tg::before{transition:none}}

/* 로그인 상태 머리: 이름 · 마이페이지 · 로그아웃 + 스케줄 바로가기 (auth-nav.js · 표시 전용) */
[data-acct-in][hidden],[data-acct-logout][hidden],[data-acct-name][hidden],[data-acct-sched][hidden]{display:none!important}
.acct-name{font-weight:400;color:#5E5E5E;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.acct-out{border:0;background:none;padding:0;font-family:inherit;cursor:pointer;color:#111111}
.acct-out:hover{text-decoration:underline;text-underline-offset:4px}
.acct-out:focus-visible,.acct-bar a:focus-visible,.acct-bar button:focus-visible{outline:2px solid #1B2438;outline-offset:3px}
.mnav-sc{display:flex;align-items:center}
.mnav-sc .mnav-a{font-weight:500;color:#1B2438}
.ms-sc .ms-c{font-weight:500;color:#1B2438}
.hb-sc{display:flex;align-items:center;justify-content:center;height:48px;margin-top:10px;border:1px solid #1B2438;color:#1B2438!important;font-size:13px;letter-spacing:.06em;font-weight:500}
.hb-sc[hidden]{display:none}
/* 서랍 아래 계정 줄: '계정 관리'(비밀번호 · 로그아웃 · 회원 탈퇴, 액션 카드 20261103_탈퇴_찾는길) · '로그아웃' 두 글자 링크를 같은 급으로 */
.hb-low{display:flex;justify-content:center;gap:28px;margin:14px 0 0}
.hb-low[hidden]{display:none}
.hb-low .hb-out{display:inline-flex;width:auto;margin:0;min-height:44px}
.hb-low a,.hb-low button{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;font-family:inherit;font-size:13px;font-weight:400;letter-spacing:0;color:#5E5E5E!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer;word-break:keep-all}
button.hb-out{display:block;width:100%;margin-top:14px;border:0;background:none;font-family:inherit;cursor:pointer;min-height:44px}
.acct-bar{display:none}
@container mg (max-width:960px){
 .acct-bar:not([hidden]){display:block;border-top:1px solid #E6E6E6;background:#FFFFFF;word-break:keep-all}
 .acct-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
 .acct-bar-n{font-size:12.5px;color:#5E5E5E;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
 .acct-bar-r{display:inline-flex;align-items:center;gap:18px;flex:none}
 .acct-bar-r a,.acct-bar-r button{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:500;color:#111111;cursor:pointer;white-space:nowrap}
 .acct-bar-r a{color:#1B2438}
}
/* 최상위가 자기 화면으로 가는 링크 + 하위 드롭다운(광고 > 광고 제휴, 2026-10-30). 링크 옆 작은 화살표 단추가 하위 메뉴를 연다 */
.mnav-gm{display:inline-flex;align-items:center;height:100%;gap:2px}
.mnav-caret{width:22px;justify-content:center}
.mnav-caret::after{display:none}
.mnav-gm.open>.mnav-main::after{transform:scaleX(1)}
.hb-list>a.hb-subl{display:block;grid-template-columns:none;padding:10px 0 10px 36px;min-height:44px;box-sizing:border-box;font-size:15px;border-bottom:0;margin-top:-6px}
.hb-list>a.hb-subl::before{content:'· '}
.hb-list>a.hb-subl::after{content:none}
/* 강조 항목(대표 지시 2026-11-04 · 비즈니스 › 지원사업): 네이비 굵게 + 글자 앞 작은 네모. 'NEW' 같은 딱지 · 다른 색 · 이모지 없이 단정하게 */
.mi-hl .mp-t,.mi-hl .hb-it{color:#1B2438;font-weight:700}
.mi-hl .mp-t::before,.mi-hl .hb-it::before,.ft-menu a.mi-hl::before{content:'';display:inline-block;width:6px;height:6px;margin-right:9px;background:#1B2438;vertical-align:.2em}
.mi-hl .mp-t::before,.mi-hl .hb-it::before{margin-left:-15px}   /* 네모는 왼쪽 여백에 걸어 글자 줄을 다른 항목과 맞춘다 */
.ft-menu li a.mi-hl{color:#FFFFFF;font-weight:700}
.ft-menu a.mi-hl::before{background:#FFFFFF;margin-right:8px;vertical-align:0}