*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden; /* ★ 가로 스크롤 방지 */
}

/* ★ 사이드바 폭 한곳에서 관리 */
:root {
    --sidebar-w: 240px;
}

/* iOS/안드 주소창 높이 고려 */
.layout-container {
    display: flex;
    min-height: 100dvh;
    transition: padding-left .3s ease;
    width: 100%; /* ★ 추가: 전체 폭 보장 */
}

/* ★ 사이드바 열릴 때: 레이아웃 자체에 여백 확보 -> 겹침 방지 */
.sidebar-open .layout-container {
    padding-left: var(--sidebar-w);
}

/* ========== Sidebar ========== */
/* ★ fixed + transform 오프캔버스, 겹치지 않도록 컨테이너에 padding-left 확보 */
.sidebar {
    /* 기존 width:240px 삭제 → 아래 var로 일원화 */
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: #f5f5f5;
    border-right: 1px solid #ddd;
    display: flex;
    transform: translateX(-100%);
    transition: transform .3s ease;
    flex-direction: column;
    height: 100dvh;
    *z-index: 1000;
    justify-content: space-between;
    background-image: url('../Images/background.png'); /* css/reports.css 기준 상대경로 */
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover; /* contain/cover 중 선택 */
    background-color: transparent; /* 혹시 모를 덮임 방지 */
}

    .sidebar.show {
        transform: translateX(0);
    }

.sidebar-header {
    font-weight: bold;
    font-size: 22px;
    color: #1a3e5d;
    border-bottom: 3px solid #ed5656;
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
}

.menu-item {
    display: block;
    padding: 11px 15px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color .2s ease;
    font-size: 15px;
    margin-bottom: 6px;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
}

    .menu-item:hover {
        background: #e5e5e5;
        color: #ed5656;
        font-weight: 600;
    }

.logo-image {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    height: auto;
}

/* ========== Main ========== */
/* ★ 본문은 100% 폭 유지. margin-left 사용 안 함(겹침 원인 제거) */
.main-area {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    /* transition: margin-left .3s ease;  ← 이 줄도 삭제 */
}

.content-area {
    flex: 0 0 20%;
    padding: 20px;
    background: #fff;
    overflow-y: auto;
    min-width: 220px; /* 너무 좁아지는 것 방지 */
}

.viewer-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #ddd;
    padding: 20px;
    min-width: 0;
}

    .viewer-pane h2 {
        font-size: 20px;
        margin-bottom: 10px;
        padding-bottom: 6px;
        border-bottom: 3px solid #ed5656;
    }

/* ========== PDF 영역 ========== */
.pdf-frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.pdf-container {
    width: 100%;
    /* 데스크탑 기본 높이 */
    height: 80%;
    border: 1px solid #ff6600;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    margin-top: 10px;
}

.pdf-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    height: 100%;
}

/* ========== Forms / Misc ========== */
.captcha-code {
    color: #ed5656;
    font-weight: bold;
}

.input-text {
    width: 97%;
    padding: 10px;
    margin: 15px 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.btn-small {
    font-size: 10px; /* 글자 크기 */
    padding: 1px 3px; /* 위아래/양옆 패딩 */ 
    line-height: 1; /* 줄 높이 */
    border-radius: 2px; /* 모서리 둥글기 */
    min-width: auto; /* Bootstrap 기본 최소 너비 해제 */
    min-height: auto;
}

.shift-right {
    margin-left: 35px; /* 원하는 만큼 오른쪽으로 이동 */
}

.btn {
    background: #ed5656;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color .3s ease;
}

    .btn:hover {
        background: #d44141;
    }

.result-area {
    margin-top: 20px;
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
}

.message-area {
    margin-top: 10px;
    color: red;
}

.mt-16 {
    margin-top: 16px;
}

.content-pane {
    font-size: 13px;
    display: none;
}

    .content-pane.active {
        display: block;
    }

footer {
    border-top: 2px solid #ccc;
    margin-top: 20px;
    padding-top: 10px;
}

    footer .container-fluid {
        text-align: right;
    }

.guide-section {
    margin-top: 40px;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    text-align: center;
}

.guide-thumb {
    max-width: 100%;
    height: auto;
}

.guide-caption {
    margin-top: 8px;
    font-size: .9rem;
    color: #555;
}

[data-sidebar-toggle] {
    display: none;
}

.edge-hint {
    display: block !important;
    background: red;
    transform: none !important;
}



/* ========== Mobile (<=768px) ========== */
@media (max-width: 768px) {
    [data-sidebar-toggle] {
        display: inline-block; /* or block, 필요에 맞게 */
    }

    .layout-container {
        flex-direction: column; /* 상하 스택 */
        /* ★ 모바일은 오버레이 유지: 패딩 제거 */
        padding-left: 0 !important;
    }

    /* ★ 모바일에서 푸시 금지(오버레이 UX) */
    .sidebar-open .layout-container {
        padding-left: 0 !important;
    }

    /* 사이드바는 그대로 fixed + transform 사용 (재정의 불필요) */

    .sidebar-header {
        font-size: clamp(18px, 4vw, 22px);
        margin-bottom: 12px;
    }

    .main-area {
        flex-direction: column;
        overflow: visible;
    }

    .content-area {
        order: 1; /* 컨텐츠를 위로 */
        flex: 1 1 auto;
        min-width: 0;
        padding: 12px 16px;
    }

    .viewer-pane {
        order: 2;
        flex: 1 1 auto;
        min-height: 0; /* ★ 스크롤 가능해지는 핵심 */
        padding: 12px 16px;
        border-left: none;
        border-top: 1px solid #ddd;
        overflow: auto;
        -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    }

    .menu-item {
        font-size: clamp(14px, 3.5vw, 16px);
    }

    .pdf-container {
        height: 60vh;
    }
    /* 필요시 60dvh */
    .pdf-frame {
        border-radius: 6px;
    }

    .pdf-container,
    .pdf-frame {
        position: relative;
        z-index: 0;
    }
     

    @keyframes edgeNudge {
        0% {
            transform: translate(-60%, -50%);
        }

        20% {
            transform: translate(-20%, -50%);
        }

        40% {
            transform: translate(-60%, -50%);
        }

        100% {
            transform: translate(-60%, -50%);
        }
    }
}
@media (min-width: 769px) {
    .edge-hint {
        position: fixed; /* 화면 기준 고정 */
        top: 3%;
        left: 0;
        transform: translate(-40%, -50%); /* 살짝만 보이게 */
        width: 15px;
        height: 150px;
        border-radius: 0 10px 10px 0;
        border: 1px solid #ddd;
        background: #e5e7eb;
        border-color: #cbd5e1;
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
        cursor: pointer;
        /* ✅ 최상위로 끌어올리기 */
        z-index: 2147483647; /* 아주 큰 값 */
        pointer-events: auto; /* 클릭 가능 */
    }

    /* 사이드바 열렸을 땐 힌들 숨겨도 좋음 */
    .sidebar-open .edge-hint {
        opacity: 0;
        pointer-events: none;
    }
}