/* ==========================================================
   Mustard Seed Layout v3 - layout-v3.css
   축소형 사이드바 + 글로벌 AI 검색 바 + 반응형 그리드
   
   상태 데이터 속성:
   - data-sidebar="auto"      : 데스크탑 기본 (축소 + hover 시 확장)
   - data-sidebar="expanded"  : 사용자가 잠근 확장
   - data-sidebar="collapsed" : 사용자가 잠근 축소
   - data-sidebar="open"      : 모바일 오프캔버스 열림
   ========================================================== */

/* ==========================================================
   1. 디자인 토큰 (dashboard-v2.css와 통일)
   ========================================================== */
:root {
    /* Layout */
    --ms-sidebar-w-collapsed: 72px;
    --ms-sidebar-w-expanded: 260px;
    --ms-topbar-h: 64px;
    
    /* Surface (Light Mode) */
    --ms-bg: #f8f9fa;
    --ms-card: #ffffff;
    --ms-sidebar-bg: #ffffff;
    --ms-sidebar-border: #E8ECF1;
    --ms-topbar-bg: rgba(255, 255, 255, 0.85);
    
    /* Brand */
    --ms-primary: #1A6FA8;
    --ms-primary-deep: #0B3D6B;
    --ms-primary-soft: #E8F1F8;
    --ms-primary-tint: #F4F8FB;
    
    /* Text */
    --ms-text: #1A2332;
    --ms-text-secondary: #4A5568;
    --ms-text-muted: #8896A8;
    
    /* Borders */
    --ms-border: #E8ECF1;
    --ms-border-light: #F1F4F8;
    
    /* Typography (clamp Fluid) */
    --ms-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --ms-fs-body: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    --ms-fs-small: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --ms-fs-tiny: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
    
    /* Layout */
    --ms-radius: 1rem;
    --ms-radius-sm: 0.625rem;
    --ms-radius-pill: 9999px;
    --ms-touch-min: 44px;
    
    /* Shadows */
    --ms-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --ms-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --ms-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
    --ms-shadow-focus: 0 0 0 3px rgba(26, 111, 168, 0.2);
    
    /* Animation */
    --ms-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ms-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ms-duration: 200ms;
    --ms-duration-slow: 320ms;
    
    /* Safe Area */
    --ms-safe-top: env(safe-area-inset-top, 0px);
    --ms-safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
    --ms-bg: #0F172A;
    --ms-card: #1E293B;
    --ms-sidebar-bg: #1E293B;
    --ms-sidebar-border: #334155;
    --ms-topbar-bg: rgba(15, 23, 42, 0.85);
    --ms-primary-soft: rgba(26, 111, 168, 0.18);
    --ms-primary-tint: rgba(26, 111, 168, 0.08);
    --ms-text: #F1F5F9;
    --ms-text-secondary: #CBD5E1;
    --ms-text-muted: #94A3B8;
    --ms-border: #334155;
    --ms-border-light: #1E293B;
    --ms-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --ms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --ms-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ==========================================================
   2. 기본 리셋 (기존 style.css의 sidebar/topbar를 무시하기 위함)
   
   [v3.5.6 패치] 모바일 가로 스와이프 (Horizontal Overflow) 방지
   - html, body 둘 다 overflow-x: hidden (iOS Safari 호환)
   - 모든 요소 box-sizing: border-box로 강제 (padding 누적으로 넘침 방지)
   - position: relative 로 요소들의 absolute 기준점 고정
   ========================================================== */

/* 모든 요소: padding/border가 width를 넘치지 않도록 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 최상위 두 요소 모두에 가로 overflow 차단 + 폭 고정 */
html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overscroll-behavior-x: none;  /* 스와이프 시 부모 요소까지 영향 가지 않도록 */
}

html {
    /* iOS Safari 노치 환경에서 가로 스크롤 방지 */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: var(--ms-bg);
    color: var(--ms-text);
    font-family: var(--ms-font-sans);
    font-size: var(--ms-fs-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;  /* 사이드바 fixed 기준점 고정 */
}

/* 기존 layout.html에 있던 상위 .topbar/.sidebar 셸 비활성화 */
body > .topbar,
body > .sidebar,
body > .sidebar-overlay,
body > main.content {
    display: none !important;
}

/* ==========================================================
   3. 앱 셸 (Grid Layout)
   - 데스크탑: [사이드바 72px][메인 1fr] + topbar 위쪽
   - 모바일: 사이드바는 fixed 오프캔버스
   
   [v3.5.6 패치] width: 100% + max-width: 100vw + overflow-x: hidden
   → 그리드 트랙이 어떤 경우에도 뷰포트를 넘지 못함
   ========================================================== */
.ms-app {
    display: grid;
    grid-template-columns: var(--ms-sidebar-w-collapsed) 1fr;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    transition: grid-template-columns var(--ms-duration-slow) var(--ms-ease);
}

/* 사용자가 사이드바 확장 잠금 */
[data-sidebar="expanded"] .ms-app {
    grid-template-columns: var(--ms-sidebar-w-expanded) 1fr;
}

/* 자동 모드에서 사이드바 hover 시 그리드는 그대로 유지 (사이드바만 floating 확장) */
[data-sidebar="auto"] .ms-app,
[data-sidebar="collapsed"] .ms-app {
    grid-template-columns: var(--ms-sidebar-w-collapsed) 1fr;
}

/* ==========================================================
   4. 사이드바 (Aside)
   ========================================================== */
.ms-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: var(--ms-sidebar-w-collapsed);
    background: var(--ms-sidebar-bg);
    border-right: 1px solid var(--ms-sidebar-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--ms-duration-slow) var(--ms-ease),
                box-shadow var(--ms-duration) var(--ms-ease),
                transform var(--ms-duration-slow) var(--ms-ease);
    z-index: 50;
    /* PWA 노치 대응 */
    padding-top: var(--ms-safe-top);
}

/* 사이드바 hover (auto 모드) — floating으로 확장 */
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:hover,
    [data-sidebar="auto"] .ms-sidebar:focus-within {
        width: var(--ms-sidebar-w-expanded);
        box-shadow: var(--ms-shadow-lg);
        z-index: 60;
    }
    [data-sidebar="expanded"] .ms-sidebar {
        width: var(--ms-sidebar-w-expanded);
    }
}

/* 모바일: 오프캔버스 - 기본 숨김 + 슬라이드
   [v3.5.6 패치] grid에서 완전히 빠지도록 grid-area 제거 + will-change */
@media (max-width: 1023px) {
    .ms-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--ms-sidebar-w-expanded);
        max-width: 85vw;  /* 매우 작은 화면에서도 화면 넘지 않음 */
        height: 100vh;
        height: 100dvh;   /* dynamic viewport height (iOS Safari 주소창 대응) */
        transform: translateX(-100%);
        will-change: transform;  /* 하드웨어 가속 + 레이아웃에서 빠짐 */
        box-shadow: var(--ms-shadow-lg);
        /* grid 부모에서 자기 자리를 차지하지 않도록 */
        grid-column: unset;
        grid-row: unset;
    }
    [data-sidebar="open"] .ms-sidebar {
        transform: translateX(0);
    }
    .ms-app {
        grid-template-columns: 1fr !important;
        /* 사이드바가 fixed로 빠진 후 그리드는 단일 1fr 한 컬럼만 */
    }
}

/* ==========================================================
   5. 사이드바 헤더 (로고 + 토글)
   ========================================================== */
.ms-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ms-topbar-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--ms-sidebar-border);
    flex-shrink: 0;
}
.ms-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.ms-brand-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}
.ms-brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--ms-duration-slow) var(--ms-ease);
}
.ms-brand-name {
    font-size: var(--ms-fs-body);
    font-weight: 700;
    color: var(--ms-text);
    text-overflow: ellipsis;
    overflow: hidden;
}
.ms-brand-sub {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 토글 버튼 (44x44 보장) */
.ms-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    border-radius: var(--ms-radius-sm);
    background: transparent;
    border: none;
    color: var(--ms-text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--ms-duration);
    flex-shrink: 0;
}
.ms-sidebar-toggle:hover {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
}
.ms-sidebar-toggle i {
    transition: transform var(--ms-duration-slow) var(--ms-ease);
}
[data-sidebar="expanded"] .ms-sidebar-toggle i {
    transform: rotate(0deg);
}
[data-sidebar="collapsed"] .ms-sidebar-toggle i,
[data-sidebar="auto"] .ms-sidebar-toggle i {
    transform: rotate(180deg);
}

/* 데스크탑: 토글 버튼 표시 */
@media (min-width: 1024px) {
    .ms-sidebar-toggle { display: flex; }
}

/* ==========================================================
   6. 사이드바 네비게이션
   ========================================================== */
.ms-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px;
    /* 스크롤바 슬림 */
    scrollbar-width: thin;
    scrollbar-color: var(--ms-border) transparent;
}
.ms-sidebar-nav::-webkit-scrollbar { width: 6px; }
.ms-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--ms-border);
    border-radius: 3px;
}

.ms-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ms-nav-divider {
    height: 1px;
    background: var(--ms-sidebar-border);
    margin: 12px 12px;
}

/* 메뉴 링크 (44px 보장) */
.ms-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: var(--ms-touch-min);
    padding: 8px 14px;
    border-radius: var(--ms-radius-sm);
    text-decoration: none;
    color: var(--ms-text-secondary);
    font-size: var(--ms-fs-body);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    transition: background var(--ms-duration), color var(--ms-duration);
    position: relative;
}
.ms-nav-link:hover {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
}
.ms-nav-link:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}
.ms-nav-link.is-active {
    background: var(--ms-primary);
    color: white;
    font-weight: 600;
}
.ms-nav-link.is-active::before {
    /* 좌측 표시바 */
    content: '';
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--ms-primary-deep);
    border-radius: 0 3px 3px 0;
}

.ms-nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.ms-nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity var(--ms-duration-slow) var(--ms-ease);
}

.ms-nav-chevron {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--ms-duration), transform var(--ms-duration);
    color: var(--ms-text-muted);
}
.ms-nav-toggle[aria-expanded="true"] .ms-nav-chevron {
    transform: rotate(180deg);
}

/* ==========================================================
   7. 라벨 표시 조건 (사이드바 확장 시)
   - hover (auto 모드)
   - 잠금 확장
   - 모바일 (항상)
   ========================================================== */
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:hover .ms-brand-text,
    [data-sidebar="auto"] .ms-sidebar:hover .ms-nav-label,
    [data-sidebar="auto"] .ms-sidebar:hover .ms-nav-chevron,
    [data-sidebar="auto"] .ms-sidebar:focus-within .ms-brand-text,
    [data-sidebar="auto"] .ms-sidebar:focus-within .ms-nav-label,
    [data-sidebar="auto"] .ms-sidebar:focus-within .ms-nav-chevron,
    [data-sidebar="expanded"] .ms-brand-text,
    [data-sidebar="expanded"] .ms-nav-label,
    [data-sidebar="expanded"] .ms-nav-chevron {
        opacity: 1;
    }
}

/* 모바일은 항상 표시 */
@media (max-width: 1023px) {
    .ms-brand-text,
    .ms-nav-label,
    .ms-nav-chevron {
        opacity: 1;
    }
}

/* ==========================================================
   8. 축소 상태 - 툴팁 (FontAwesome 아이콘 옆 작은 라벨)
   ========================================================== */
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:not(:hover):not(:focus-within) .ms-nav-link[data-tooltip],
    [data-sidebar="collapsed"] .ms-nav-link[data-tooltip] {
        position: relative;
    }
    [data-sidebar="auto"] .ms-sidebar:not(:hover):not(:focus-within) .ms-nav-link[data-tooltip]:hover::after,
    [data-sidebar="collapsed"] .ms-nav-link[data-tooltip]:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 8px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--ms-text);
        color: var(--ms-card);
        padding: 6px 10px;
        border-radius: 6px;
        font-size: var(--ms-fs-tiny);
        font-weight: 500;
        white-space: nowrap;
        z-index: 100;
        pointer-events: none;
        box-shadow: var(--ms-shadow-md);
        animation: ms-fade-in 150ms var(--ms-ease);
    }
}

/* ==========================================================
   9. 아코디언 하위 메뉴
   ========================================================== */
.ms-submenu {
    list-style: none;
    margin: 4px 0 4px 0;
    padding: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--ms-duration-slow) var(--ms-ease);
}
.ms-nav-toggle[aria-expanded="true"] + .ms-submenu {
    max-height: 500px;
}

.ms-submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;  /* 하위 메뉴는 약간 작게 (모바일에선 44px로) */
    padding: 6px 12px;
    border-radius: var(--ms-radius-sm);
    text-decoration: none;
    color: var(--ms-text-secondary);
    font-size: var(--ms-fs-small);
    transition: background var(--ms-duration), color var(--ms-duration);
}
.ms-submenu-link:hover {
    background: var(--ms-primary-tint);
    color: var(--ms-primary);
}
.ms-submenu-link.is-active {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    font-weight: 600;
}
.ms-submenu-link i {
    font-size: 13px;
    width: 16px;
    flex-shrink: 0;
}
.ms-submenu-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모바일에서는 하위 메뉴도 44px */
@media (max-width: 1023px) {
    .ms-submenu-link { min-height: var(--ms-touch-min); }
}

/* 축소 상태에서 하위 메뉴 강제 숨김 */
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:not(:hover):not(:focus-within) .ms-submenu,
    [data-sidebar="collapsed"] .ms-submenu {
        max-height: 0 !important;
    }
}

/* ==========================================================
   10. 사이드바 푸터
   ========================================================== */
.ms-sidebar-footer {
    border-top: 1px solid var(--ms-sidebar-border);
    padding: 12px 16px;
    flex-shrink: 0;
}
.ms-sidebar-footer-text {
    opacity: 0;
    transition: opacity var(--ms-duration-slow) var(--ms-ease);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
@media (min-width: 1024px) {
    [data-sidebar="auto"] .ms-sidebar:hover .ms-sidebar-footer-text,
    [data-sidebar="auto"] .ms-sidebar:focus-within .ms-sidebar-footer-text,
    [data-sidebar="expanded"] .ms-sidebar-footer-text {
        opacity: 1;
    }
}
@media (max-width: 1023px) {
    .ms-sidebar-footer-text { opacity: 1; }
}

.ms-footer-slogan {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text);
    margin: 0 0 2px 0;
    font-weight: 600;
}
.ms-footer-version {
    font-size: 0.625rem;
    color: var(--ms-text-muted);
    margin: 0;
}

/* ==========================================================
   11. 모바일 오버레이
   ========================================================== */
.ms-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 49;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--ms-duration);
}
@media (max-width: 1023px) {
    [data-sidebar="open"] .ms-overlay {
        display: block;
        opacity: 1;
    }
}

/* ==========================================================
   12. 메인 영역
   [v3.5.6 패치] 그리드 자식이 콘텐츠로 인해 늘어나는 것 방지
   ========================================================== */
.ms-main {
    display: flex;
    flex-direction: column;
    min-width: 0;       /* grid item 기본 min-width: auto 무시 → 자식이 부모 폭 따라감 */
    max-width: 100%;    /* 부모(.ms-app) 폭을 절대 넘지 않음 */
    overflow-x: hidden; /* 만일에 대비한 안전망 */
    min-height: 100vh;
}

/* ==========================================================
   13. 상단 글로벌 바 (Topbar)
   [v3.5.6 패치] max-width로 가로 넘침 방지
   ========================================================== */
.ms-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--ms-topbar-h);
    background: var(--ms-topbar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ms-border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    /* PWA 노치 */
    padding-top: var(--ms-safe-top);
    height: calc(var(--ms-topbar-h) + var(--ms-safe-top));
}

/* 햄버거 (모바일 전용) */
.ms-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    border-radius: var(--ms-radius-sm);
    background: transparent;
    border: none;
    color: var(--ms-text);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.ms-hamburger:hover {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
}
@media (max-width: 1023px) {
    .ms-hamburger { display: flex; }
}

/* ==========================================================
   14. 글로벌 AI 검색 바 (Zero Interface)
   [v3.5.6 패치] min-width: 0으로 flex 자식 축소 허용
   - flex item 기본 min-width는 auto (자식 콘텐츠 크기) 라서
     긴 placeholder가 화면을 밀어낼 수 있음
   ========================================================== */
.ms-global-search {
    flex: 1 1 0;        /* basis 0으로 시작 → 진짜 1fr처럼 동작 */
    min-width: 0;       /* 자식 텍스트로 인해 최소폭이 커지지 않도록 */
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: var(--ms-card);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius-pill);
    transition: all var(--ms-duration);
    height: 42px;
}
.ms-global-search-input {
    flex: 1 1 0;
    min-width: 0;       /* input도 부모 따라 축소 가능하도록 */
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: var(--ms-fs-body);
    color: var(--ms-text);
    min-height: var(--ms-touch-min);
    /* 모바일에서 placeholder가 input 폭을 강제하지 않도록 */
    width: 100%;
}
.ms-global-search:focus-within {
    border-color: var(--ms-primary);
    box-shadow: var(--ms-shadow-focus);
}
.ms-global-search-icon {
    color: var(--ms-primary);
    font-size: 14px;
    flex-shrink: 0;
}
.ms-global-search-input::placeholder {
    color: var(--ms-text-muted);
}
.ms-global-search-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--ms-border-light);
    color: var(--ms-text-muted);
    font-size: 11px;
    font-family: 'SF Mono', monospace;
    border-radius: 4px;
    flex-shrink: 0;
}
.ms-global-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ms-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: all var(--ms-duration);
    flex-shrink: 0;
}
.ms-global-search-submit:hover {
    background: var(--ms-primary-deep);
    transform: scale(1.05);
}
.ms-global-search-submit:active { transform: scale(0.95); }

/* 모바일에서는 키보드 단축키 숨김 */
@media (max-width: 768px) {
    .ms-global-search { padding-left: 12px; gap: 6px; }
    .ms-global-search-kbd { display: none; }
    .ms-global-search-input::placeholder { font-size: var(--ms-fs-small); }
}

/* ==========================================================
   15. 상단 우측 액션 (테마, 설정, 사용자)
   ========================================================== */
.ms-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ms-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-touch-min);
    height: var(--ms-touch-min);
    border-radius: var(--ms-radius-sm);
    background: transparent;
    border: none;
    color: var(--ms-text-secondary);
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ms-duration);
}
.ms-icon-btn:hover {
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
}
.ms-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}

.ms-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--ms-radius-pill);
    background: transparent;
    cursor: pointer;
    transition: background var(--ms-duration);
    min-height: var(--ms-touch-min);
    border: 1px solid transparent;
}
.ms-user-chip:hover {
    background: var(--ms-border-light);
    border-color: var(--ms-border);
}
.ms-user-chip:focus-visible {
    outline: none;
    box-shadow: var(--ms-shadow-focus);
}
.ms-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-deep));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.ms-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.ms-user-name {
    font-size: var(--ms-fs-small);
    font-weight: 600;
    color: var(--ms-text);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-user-role {
    font-size: var(--ms-fs-tiny);
    color: var(--ms-text-muted);
}

/* 모바일에서 사용자 정보 텍스트는 숨기고 아바타만 */
@media (max-width: 768px) {
    .ms-user-info { display: none; }
    .ms-user-chip { padding: 4px; }
}

/* ==========================================================
   16. 본문 영역
   [v3.5.6 패치] padding 누적으로 폭 초과 방지
   ========================================================== */
.ms-content {
    flex: 1;
    padding: 24px;
    padding-bottom: calc(24px + var(--ms-safe-bottom));
    min-width: 0;
    max-width: 100%;     /* 부모 폭을 절대 넘지 않음 */
    overflow-x: hidden;  /* 자식 요소가 강제로 넘쳐도 차단 */
    /* box-sizing: border-box는 전역 *에서 이미 적용 */
}
@media (max-width: 768px) {
    .ms-content {
        padding: 16px;
        padding-bottom: calc(16px + var(--ms-safe-bottom));
    }
    .ms-topbar {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
        max-width: 100vw;     /* topbar도 뷰포트 넘지 않음 */
        overflow: hidden;     /* 검색바 등 내부 요소가 넘치면 잘라냄 */
    }
}

/* ==========================================================
   17. 애니메이션
   ========================================================== */
@keyframes ms-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}