/* manual.css — 사용자 매뉴얼 (user.html / full.html 공용) */
:root {
    --m-primary: #0064d6;
    --m-primary-dark: #0052b0;
    --m-text: #1f2937;
    --m-text-mute: #6b7280;
    --m-border: #e5e7eb;
    --m-bg: #f8fafc;
    --m-bg-section: #fff;
    --m-sidebar-w: 260px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: var(--m-text);
    background: var(--m-bg);
    font-size: 14px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--m-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.manual-layout {
    display: flex;
    min-height: 100vh;
}

/* ---- 사이드바 ---- */
.manual-sidebar {
    width: var(--m-sidebar-w);
    background: #fff;
    border-right: 1px solid var(--m-border);
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}
.manual-sidebar .ms-brand {
    padding: 0 22px 16px;
    border-bottom: 1px solid var(--m-border);
    margin-bottom: 14px;
}
.manual-sidebar .ms-brand .ms-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
}
.manual-sidebar .ms-brand .ms-mode {
    font-size: 12px;
    color: var(--m-text-mute);
}
.manual-sidebar .ms-mode-toggle {
    display: flex;
    margin: 0 22px 14px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 12px;
}
.manual-sidebar .ms-mode-toggle a {
    flex: 1;
    text-align: center;
    padding: 7px 8px;
    color: var(--m-text-mute);
    background: #fff;
    transition: background .15s;
}
.manual-sidebar .ms-mode-toggle a.active {
    background: var(--m-primary);
    color: #fff;
    font-weight: 600;
}
.manual-sidebar .ms-mode-toggle a:hover {
    text-decoration: none;
}

.manual-sidebar .ms-search {
    margin: 0 22px 14px;
}
.manual-sidebar .ms-search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--m-border);
    border-radius: 6px;
    font-size: 13px;
}

.manual-sidebar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.manual-sidebar nav > ul > li > a {
    display: block;
    padding: 9px 22px;
    color: var(--m-text);
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid transparent;
}
.manual-sidebar nav > ul > li > a:hover {
    background: #f1f5f9;
    text-decoration: none;
}
.manual-sidebar nav > ul > li > a.active {
    color: var(--m-primary);
    background: #eaf2fc;
    border-left-color: var(--m-primary);
    font-weight: 600;
}
.manual-sidebar nav .ms-sub {
    list-style: none;
    padding: 0 0 4px 0;
    margin: 0;
}
.manual-sidebar nav .ms-sub li a {
    display: block;
    padding: 5px 22px 5px 38px;
    color: var(--m-text-mute);
    font-size: 13px;
}
.manual-sidebar nav .ms-sub li a:hover {
    background: #f8fafc;
    color: var(--m-text);
    text-decoration: none;
}
.manual-sidebar nav .ms-sub li a.active {
    color: var(--m-primary);
    font-weight: 600;
}

/* ---- 메인 컨텐츠 ---- */
.manual-main {
    flex: 1;
    min-width: 0;
    padding: 36px 44px 80px;
    max-width: 1080px;
}
.manual-main .ms-section {
    background: var(--m-bg-section);
    border: 1px solid var(--m-border);
    border-radius: 10px;
    padding: 28px 32px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.manual-main h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111;
}
.manual-main h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 28px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--m-primary);
    color: #111;
}
.manual-main h2:first-child { margin-top: 0; }
.manual-main h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 22px 0 8px;
    color: #1f2937;
}
.manual-main p { margin: 8px 0 12px; }
.manual-main ol, .manual-main ul { padding-left: 22px; margin: 8px 0 14px; }
.manual-main li { margin-bottom: 4px; }

.manual-main .ms-lead {
    font-size: 15px;
    color: var(--m-text-mute);
    margin-bottom: 18px;
}

/* 표 */
.manual-main table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    font-size: 13px;
}
.manual-main table th,
.manual-main table td {
    border: 1px solid var(--m-border);
    padding: 8px 10px;
    vertical-align: top;
    text-align: left;
}
.manual-main table th {
    background: #f1f5f9;
    font-weight: 600;
    color: #334155;
}
.manual-main table tbody tr:nth-child(even) td { background: #fafbfc; }

/* 경로/코드 */
.manual-main code, .manual-main kbd {
    background: #f1f5f9;
    border: 1px solid var(--m-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Consolas', monospace;
    font-size: 12.5px;
    color: #be185d;
}

/* 단계 박스 */
.manual-main .ms-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
}
.manual-main .ms-steps > li {
    counter-increment: step;
    padding: 12px 14px 12px 56px;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    margin-bottom: 10px;
    position: relative;
    background: #fafbfc;
}
.manual-main .ms-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 16px;
    top: 12px;
    width: 28px;
    height: 28px;
    background: var(--m-primary);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: 700;
    font-size: 13px;
}

/* 알림 박스 */
.manual-main .ms-note,
.manual-main .ms-warn,
.manual-main .ms-tip {
    padding: 12px 16px;
    border-radius: 8px;
    margin: 12px 0;
    border-left: 4px solid;
    font-size: 13.5px;
}
.manual-main .ms-note { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
.manual-main .ms-tip  { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.manual-main .ms-warn { background: #fef3c7; border-color: #f59e0b; color: #78350f; }

/* 스크린샷 */
.manual-main figure {
    margin: 14px 0;
    padding: 0;
    border: 1px solid var(--m-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.manual-main figure img {
    width: 100%;
    height: auto;
    display: block;
}
.manual-main figcaption {
    padding: 8px 12px;
    background: #f8fafc;
    border-top: 1px solid var(--m-border);
    font-size: 12.5px;
    color: var(--m-text-mute);
    text-align: center;
}

/* 스크린샷 데스크탑/모바일 토글 */
.manual-main .ms-shot-toggle {
    display: inline-flex;
    border: 1px solid var(--m-border);
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 0 10px;
    font-size: 12px;
}
.manual-main .ms-shot-toggle button {
    background: #fff;
    border: none;
    padding: 5px 14px;
    cursor: pointer;
    color: var(--m-text-mute);
    font-size: 12px;
}
.manual-main .ms-shot-toggle button.active {
    background: var(--m-primary);
    color: #fff;
    font-weight: 600;
}
.manual-main .ms-shot {
    display: none;
}
.manual-main .ms-shot.active {
    display: block;
}

/* 권한 매트릭스 등 색상 셀 */
.manual-main td.ok    { background: #ecfdf5; color: #047857; font-weight: 600; text-align: center; }
.manual-main td.no    { background: #fef2f2; color: #b91c1c; text-align: center; }
.manual-main td.cond  { background: #fef3c7; color: #92400e; font-size: 12px; }

/* 미디어 쿼리 */
@media (max-width: 900px) {
    .manual-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 100;
        transition: left .2s;
        width: 80vw;
        max-width: 320px;
    }
    .manual-sidebar.open { left: 0; }
    .manual-main { padding: 18px 18px 80px; }
    .ms-sidebar-toggle {
        display: inline-flex;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 90;
        background: var(--m-primary);
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
    }
}
@media (min-width: 901px) {
    .ms-sidebar-toggle { display: none; }
}