/* =============================================================
   메뉴 열람 권한 관리 — 맥 고밀도형 (사용자 2026-11-02 "1")
   범위: #menu_settings-content 안쪽만. 화면에서만.
   큰 제목 · 굵은 글씨(900) · 9~10.5px 글자 · 테두리 상자 줄 · 파란 점선 단추 →
   17px 제목 · 600 이하 · 11px 이상 · 32px 한 줄(휴대폰 44px) · 흰 단추.
   고른 메뉴는 파란 줄(흰 글자 대비 4.5:1 이상인 --ui-accent, 시스템 파랑은 옆 메뉴 전용). 채운 파랑 단추는 '저장' 하나.
   드래그 · 순서 · 카테고리 · 권한 켜기/끄기 · 저장은 그대로.
   ============================================================= */
@media screen{
/* ---------- 틀 · 머리 ---------- */
html #menu_settings-content > .max-w-7xl{ border:0 !important; border-radius:var(--ui-radius-card) !important; box-shadow:var(--ui-elev-raised) !important; background:var(--ui-surface) !important; font-family:var(--ui-font); color:var(--ui-text-1) }
html #menu_settings-content > .max-w-7xl > .flex:first-child{ min-height:52px; padding:10px 16px !important; border-bottom:0 !important; box-shadow:inset 0 -.5px var(--ui-line); background:var(--ui-surface) !important }
html #menu_settings-content > .max-w-7xl > .flex:first-child h3{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #menu_settings-content > .max-w-7xl > .flex:first-child h3 > i{ display:none !important }
html #menu_settings-content > .max-w-7xl > .flex:first-child > .flex{ gap:6px !important }
html #menu_settings-content > .max-w-7xl > .flex:first-child button{ height:28px; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #menu_settings-content > .max-w-7xl > .flex:first-child button:hover{ background:var(--ui-fill-subtle) !important }
html #menu_settings-content #menu-settings-save-btn{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #menu_settings-content #menu-settings-save-btn:hover{ background:var(--ui-accent-hover) !important }
html #menu_settings-content #menu-settings-save-btn > i{ display:none }
html #menu_settings-content #ms2-dirty{ display:inline-flex; align-items:center; gap:6px; padding:0 4px !important; border-radius:0 !important; background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #menu_settings-content #ms2-dirty.hidden{ display:none }
html #menu_settings-content #ms2-dirty::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-warning) }

/* ---------- 왼쪽 메뉴 목록 ---------- */
html #menu_settings-content .ms2-body{ grid-template-columns:300px minmax(0,1fr); min-height:520px }
html #menu_settings-content .ms2-tree{ border-right:0; box-shadow:inset -.5px 0 var(--ui-line); background:var(--ui-surface-alt) }
html #menu_settings-content .ms2-tree-head{ min-height:40px; padding:6px 10px 6px 14px; border-bottom:0 }
html #menu_settings-content .ms2-tree-title{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #menu_settings-content .ms2-addcat{ height:24px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-addcat:hover{ background:var(--ui-fill-subtle) }
html #menu_settings-content .ms2-addcat > i{ color:var(--ui-text-2) }
html #menu_settings-content .ms2-hint{ padding:0 14px 6px; color:var(--ui-text-2); font-size:var(--ui-text-caption); line-height:1.45 }
html #menu_settings-content .ms2-hint > i{ display:none }
html #menu_settings-content .ms2-tree-scroll{ padding:4px 8px 12px }
/* 카테고리 */
html #menu_settings-content .ms2-cat{ margin-bottom:2px; border:0; border-radius:var(--ui-radius-row) }
html #menu_settings-content .ms2-cat.is-open{ background:transparent }
html #menu_settings-content .ms2-cat-h{ min-height:28px; gap:2px; padding:2px 4px; border-radius:var(--ui-radius-row) }
html #menu_settings-content .ms2-cat-h:hover, html #menu_settings-content .ms2-cat.is-open .ms2-cat-h:hover{ background:var(--ui-fill-subtle) }
html #menu_settings-content .ms2-cat-toggle{ width:20px; height:20px; border-radius:var(--ui-radius-row); color:var(--ui-text-3); font-size:var(--ui-text-caption) }
html #menu_settings-content .ms2-cat-toggle:hover{ background:var(--ui-fill); color:var(--ui-text-1) }
html #menu_settings-content :is(.ms2-cat-name,.ms2-cat-fixed-name){ height:22px; padding:0 4px; letter-spacing:0; color:var(--ui-text-2); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold) }
/* 카테고리 이름 칸: 평소엔 글자처럼, 누르면 입력칸 */
html #menu_settings-content input.ms2-cat-name{ min-width:0; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; box-shadow:none !important }
html #menu_settings-content input.ms2-cat-name:hover{ background:var(--ui-surface) !important; box-shadow:0 0 0 .5px var(--ui-line) !important }
html #menu_settings-content input.ms2-cat-name:focus{ background:var(--ui-surface) !important; box-shadow:var(--ui-focus-ring) !important; color:var(--ui-text-1) }
/* 카테고리 단추(하위 추가 · 위 · 아래 · 삭제)는 PC 에서 그 줄에 마우스를 올리거나 칸을 고를 때만 */
@media (hover:hover){
html #menu_settings-content .ms2-cat-h .ms2-cat-btn{ opacity:0 }
html #menu_settings-content .ms2-cat-h:is(:hover,:focus-within) .ms2-cat-btn{ opacity:1 }
}
html #menu_settings-content .ms2-cat-fixed-name > i{ color:var(--ui-text-3) }
html #menu_settings-content .ms2-cat-btn{ width:22px; height:22px; border-radius:var(--ui-radius-row); color:var(--ui-text-3); font-size:var(--ui-text-caption) }
html #menu_settings-content .ms2-cat-btn:hover{ background:var(--ui-fill); color:var(--ui-text-1) }
html #menu_settings-content .ms2-cat-btn.del:hover{ background:var(--ui-danger-tint); color:var(--ui-danger) }
html #menu_settings-content .ms2-cat-count{ margin-left:auto; min-width:0; padding:0 4px; background:transparent; color:var(--ui-text-3); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular); font-variant-numeric:tabular-nums }
html #menu_settings-content .ms2-cat-items{ min-height:8px; padding:0 0 4px 18px; border-radius:var(--ui-radius-row) }
html #menu_settings-content .ms2-cat-items.over{ background:var(--ui-accent-tint); box-shadow:inset 0 0 0 1px var(--ui-accent) }
html #menu_settings-content .ms2-subcat{ margin:2px 0; background:transparent }
html #menu_settings-content .ms2-subcat .ms2-cat-h{ min-height:28px; padding-left:4px }
html #menu_settings-content .ms2-subcat .ms2-cat-items{ padding:0 0 4px 18px }
/* 메뉴 줄: 테두리 상자 → 32px 한 줄, 고른 줄은 파랑 */
html #menu_settings-content .ms2-mi{ min-height:32px; gap:8px; margin:0; padding:0 8px; border:0; border-radius:var(--ui-radius-row); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-mi:hover{ background:var(--ui-fill-subtle) }
html #menu_settings-content .ms2-mi.sel{ background:var(--ui-accent); box-shadow:none; color:var(--ui-on-accent) }
html #menu_settings-content .ms2-mi.sel :is(i,.ms2-grip,.ms2-ico,.ms2-tag,.ms2-item-order button){ color:var(--ui-on-accent) !important }
html #menu_settings-content .ms2-mi.sel .ms2-tag{ background:transparent }
html #menu_settings-content .ms2-mi.plain{ color:var(--ui-text-2) }
html #menu_settings-content .ms2-mi.dragging{ transform:none; background:var(--ui-surface); box-shadow:var(--ui-elev-popover) }
html #menu_settings-content .ms2-grip{ color:var(--ui-text-3); font-size:var(--ui-text-caption) }
html #menu_settings-content .ms2-ico{ font-size:var(--ui-text-footnote) }
html #menu_settings-content .ms2-tag{ padding:0 2px; background:transparent; color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-tag.blue{ background:transparent; color:var(--ui-accent-text) }
html #menu_settings-content .ms2-tag.gray{ background:transparent; color:var(--ui-text-2) }
html #menu_settings-content .ms2-item-order button{ width:22px; height:22px; border-radius:var(--ui-radius-row); color:var(--ui-text-2); font-size:var(--ui-text-caption) }
html #menu_settings-content .ms2-item-order button:hover{ background:var(--ui-fill); color:var(--ui-text-1) }
html #menu_settings-content .ms2-mi.sel .ms2-item-order button:hover{ background:var(--ui-fill-hover) }
html #menu_settings-content .ms2-drop-line, html #menu_settings-content .ms2-drop-line::before{ background:var(--ui-accent) }
html #menu_settings-content .ms2-child{ min-height:28px; gap:6px; margin:0 0 0 22px; padding:0 8px; border:0; border-radius:var(--ui-radius-row); color:var(--ui-text-2); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-child:hover{ background:var(--ui-fill-subtle) }
html #menu_settings-content .ms2-child.sel{ background:var(--ui-accent); color:var(--ui-on-accent) }
html #menu_settings-content .ms2-child.sel :is(i,.ms2-tag){ color:var(--ui-on-accent) !important }
html #menu_settings-content .ms2-child-arrow{ color:var(--ui-text-3); font-size:var(--ui-text-caption) }

/* ---------- 오른쪽 편집 ---------- */
html #menu_settings-content .ms2-editor{ padding:14px 16px }
html #menu_settings-content .ms2-empty{ gap:6px; padding:64px 0; color:var(--ui-text-2) }
html #menu_settings-content .ms2-empty i{ font-size:var(--ui-text-title2); color:var(--ui-text-3) }
html #menu_settings-content .ms2-empty p{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-ecard{ border:0; border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line) }
html #menu_settings-content .ms2-einfo{ gap:12px; padding:10px 12px; align-items:flex-end }
html #menu_settings-content .ms2-avatar{ width:28px; height:28px; border-radius:var(--ui-radius-control); background:var(--ui-fill-subtle); font-size:var(--ui-text-callout); align-self:flex-end }
html #menu_settings-content .ms2-fld{ gap:3px }
html #menu_settings-content .ms2-fld label:not(.ms-switch){ color:var(--ui-text-2); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-fld :is(input,select){ height:28px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); box-shadow:var(--ui-elev-field); background-color:var(--ui-surface); color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-fld :is(input,select):focus{ border-color:transparent; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) }
html #menu_settings-content .ms2-fld-c{ min-height:47px; justify-content:space-between }
html #menu_settings-content .ms2-static{ height:28px; display:flex; align-items:center; padding:0 2px; color:var(--ui-text-2); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-dual{ gap:12px; margin-top:12px }
html #menu_settings-content .ms2-pcard{ border:0; border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line) }
html #menu_settings-content .ms2-ph{ min-height:36px; padding:4px 12px; border-bottom:0; box-shadow:inset 0 -.5px var(--ui-line); background:var(--ui-surface) }
html #menu_settings-content .ms2-ph .t{ color:var(--ui-text-1); font-size:var(--ui-text-callout); font-weight:var(--ui-weight-semibold) }
html #menu_settings-content .ms2-ph .t > i{ display:none }
html #menu_settings-content .ms2-allbtns{ gap:2px }
html #menu_settings-content .ms2-allbtns button{ height:24px; padding:0 6px; border-radius:var(--ui-radius-row); color:var(--ui-accent-text); font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-allbtns button:hover{ background:var(--ui-fill-subtle) }
html #menu_settings-content .ms2-allbtns i{ color:var(--ui-text-3); font-size:var(--ui-text-caption) }
html #menu_settings-content .ms2-grp{ padding:8px 12px 2px; letter-spacing:0; background:var(--ui-surface-alt); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold) }
html #menu_settings-content .ms2-prow{ min-height:32px; padding:0 12px; border-top:0; box-shadow:inset 0 .5px var(--ui-line) }
html #menu_settings-content .ms2-prow-label{ color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular) }
html #menu_settings-content .ms2-pfoot{ padding:8px 12px; border-top:0; box-shadow:inset 0 .5px var(--ui-line); background:var(--ui-surface-alt); color:var(--ui-text-2); font-size:var(--ui-text-caption); line-height:1.45 }
html #menu_settings-content .ms2-pfoot b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
}

/* ---------- 휴대폰 ---------- */
@media screen and (max-width:768px){
html #menu_settings-content > .max-w-7xl > .flex:first-child{ flex-wrap:wrap; gap:8px }
html #menu_settings-content > .max-w-7xl > .flex:first-child button{ height:36px }
html #menu_settings-content .ms2-body{ grid-template-columns:1fr }
html #menu_settings-content .ms2-tree{ box-shadow:inset 0 -.5px var(--ui-line) }
html #menu_settings-content .ms2-addcat{ height:32px }
html #menu_settings-content .ms2-cat-h{ min-height:44px }
html #menu_settings-content :is(.ms2-mi,.ms2-child){ min-height:44px }
html #menu_settings-content .ms2-cat-btn, html #menu_settings-content .ms2-item-order button{ width:32px; height:32px }
html #menu_settings-content .ms2-prow{ min-height:44px }
html #menu_settings-content .ms2-einfo{ flex-direction:column; align-items:stretch }
html #menu_settings-content .ms2-avatar{ display:none }
html #menu_settings-content .ms2-fld select{ width:100% }
html #menu_settings-content .ms2-fld :is(input,select){ height:36px }
}