/* ps-main.css
   로드 순서: bootstrap.min.css → ps-main.css (이 파일)
   이 파일이 Bootstrap 다음에 로드되므로 모든 override가 확실히 적용됨
   
   HTML 확인 결과:
   - bootstrap.min.css 다음에 이 파일만 로드됨
   - ps-site.css는 HTML에 없음 (연결 안 됨)
   - tab-content 안에 완전한 HTML 페이지 삽입됨
*/

:root {
    --font-size-base: 0.875rem;
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.375rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1.125rem;
    --font-size-h5: 1rem;
    --font-size-h6: 0.875rem;
    --color-invalid: #e74c3c;
    --color-valid: #2ecc71;
}

input:required:invalid, input:focus:invalid,
select:required:invalid, select:focus:invalid,
textarea:required:invalid, textarea:focus:invalid {
    background-image: none;
    box-shadow: 0 0 5px var(--color-invalid);
    border-color: var(--color-invalid);
}
input:required:valid,
select:required:valid,
textarea:required:valid {
    background-image: none;
    box-shadow: 0 0 5px var(--color-valid);
    border-color: var(--color-valid);
}

a, .cursor { cursor: pointer; }

body, input, select, textarea, button, .dropdown-item {
    font-size: var(--font-size-base) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 { font-size: var(--font-size-h1); font-weight: bold; }
h2 { font-size: var(--font-size-h2); font-weight: bold; }
h3 { font-size: var(--font-size-h3); font-weight: bold; }
h4 { font-size: var(--font-size-h4); font-weight: bold; }
h5 { font-size: var(--font-size-h5); font-weight: bold; }
h6 { font-size: var(--font-size-h6); font-weight: bold; }

xmp {
    font-family: inherit;
    font-size: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.border-dotted { border-style: dotted; }
.modal-dialog { overflow-y: initial !important; }
.modal-body {
    max-height: calc(100vh - 200px);
    overflow-x: auto;
    overflow-y: auto;
}

.nav-tabs { margin-bottom: 0; }

/* 일반 페이지 tab-content — sc-permalink 제외하고 적용 */
.tab-content {
    border: 1px solid #ddd;
    border-radius: 0 0 5px 5px;
    padding: 10px;
}

.content img, .tab-content img {
    max-width: 100%;
    height: auto !important;
}

#ajaxLoadingImage {
    z-index: 99997;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0,0,0,.2);
}
#ajaxLoadingImage > img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.cubic-img { max-width: 300px; max-height: 200px; }
.app-img   { max-width: 180px; max-height: 120px; }
.app-title { max-width: 120px; }
.pac-container { z-index: 99990 !important; }

.table-responsive > div.row,
.table-responsive > div.row > div[class|="col"],
.table-responsive > div.row > div[class*="col-"] {
    margin: 0;
    padding: 0;
}

@page { size: A4; margin: 20mm; }
@media all  { .page-break { display: none; } }
@media print {
    html, body { width: 210mm; min-height: 297mm; }
    .page-break { display: block; page-break-before: always; }
    .no-print { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ★★★ SC-PERMALINK 완전 여백 제거
   
   소스 확인 결과:
   bootstrap.min.css → ps-main.css 순으로 로드
   이 파일이 마지막 → 여기 규칙이 Bootstrap을 반드시 이김
   
   HTML 구조:
   div.container-fluid.sc-permalink-container
     div.d-flex.mt-3.border-bottom.sc-permalink-title
     div.p-3                         ← Bootstrap .p-3{padding:1rem!important}
       div.card.sc-permalink-info    ← Bootstrap .card{border, border-radius}
         div.row.no-gutters          ← Bootstrap .row{margin:-15px}
           div.col-6.col-sm-3...     ← Bootstrap col{padding:15px}
       ul.nav.nav-tabs.mt-3          ← Bootstrap .mt-3{margin-top:1rem!important}
       div.tab-content.table-responsive.p-3.sc-permalink-menu-content
   footer.footer.bg-light.mt-auto.p-3.sc-permalink-footer
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. container-fluid padding:15px 제거 ── */
.sc-permalink-container,
.container-fluid.sc-permalink-container,
div.container-fluid.sc-permalink-container {
    padding-left:   0 !important;
    padding-right:  0 !important;
    padding-top:    0 !important;
    padding-bottom: 0 !important;
    margin:  0 !important;
    width:   100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ── 2. div.p-3 래퍼 제거
   Bootstrap: .p-3 { padding:1rem !important }
   우리 셀렉터 specificity: (0,2,1) vs Bootstrap (0,1,0) → 승리 ── */
div.container-fluid.sc-permalink-container > div,
div.container-fluid.sc-permalink-container > div.p-3,
div.sc-permalink-container > div,
div.sc-permalink-container > div.p-3 {
    padding: 0 !important;
    margin:  0 !important;
}

/* ── 3. p-3 자식 mt-3 제거
   Bootstrap: .mt-3 { margin-top:1rem !important }
   specificity: (0,3,1) vs Bootstrap (0,1,0) → 승리 ── */
div.container-fluid.sc-permalink-container > div > *,
div.container-fluid.sc-permalink-container > div.p-3 > *,
div.sc-permalink-container > div > *,
div.sc-permalink-container > div.p-3 > * {
    margin-top:    0 !important;
    margin-bottom: 0 !important;
}
div.container-fluid.sc-permalink-container .mt-3,
div.sc-permalink-container .mt-3,
.sc-permalink-container .mt-3 {
    margin-top: 0 !important;
}

/* ── 4. tab-content + table-responsive + p-3 삼중 패딩 제거
   ps-main: .tab-content { padding:10px }   ← 이 파일 위에서 선언됨
   Bootstrap: .p-3 { padding:1rem !important }
   specificity (0,5,1) — 최강으로 둘 다 제거 ── */
div.container-fluid.sc-permalink-container div.tab-content.table-responsive.p-3.sc-permalink-menu-content,
div.sc-permalink-container div.tab-content.table-responsive.p-3.sc-permalink-menu-content,
div.container-fluid.sc-permalink-container .tab-content,
div.container-fluid.sc-permalink-container .table-responsive,
div.sc-permalink-container .tab-content,
div.sc-permalink-container .table-responsive,
div.sc-permalink-container > div > .tab-content,
div.sc-permalink-container > div.p-3 > .tab-content,
div.sc-permalink-container > div > .table-responsive,
div.sc-permalink-container > div.p-3 > .table-responsive,
.tab-content.table-responsive.p-3.sc-permalink-menu-content,
.tab-content.sc-permalink-menu-content,
.sc-permalink-menu-content,
div.sc-permalink-menu-content {
    padding:       0 !important;
    margin:        0 !important;
    width:         100% !important;
    max-width:     100% !important;
    border:        none !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    overflow:      visible !important;
}

/* ── 5. Bootstrap .card 제거 ── */
div.container-fluid.sc-permalink-container .card,
div.sc-permalink-container .card,
.sc-permalink-container .card {
    border-radius: 0 !important;
    border-top:    none !important;
    border-left:   none !important;
    border-right:  none !important;
    box-shadow:    none !important;
}
.sc-permalink-info,
div.container-fluid.sc-permalink-container div.card.sc-permalink-info,
div.sc-permalink-container div.card.sc-permalink-info,
.sc-permalink-container div.card.sc-permalink-info {
    border:        none !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    margin:        0 !important;
    padding:       0 !important;
    width:         100% !important;
    max-width:     100% !important;
    background:    #fff !important;
    overflow:      hidden !important;
}

/* ── 6. row 음수마진 제거 ── */
div.container-fluid.sc-permalink-container .row,
div.sc-permalink-container .sc-permalink-info .row,
.sc-permalink-info .row,
.sc-permalink-info .row.no-gutters {
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding:      0 !important;
    width:        100% !important;
}

/* ── 7. col-* 15px padding 제거
   Bootstrap 4: col에 !important 없음 → specificity만으로 이김 ── */
.sc-permalink-info [class*="col"],
.sc-permalink-info [class^="col"],
.sc-permalink-info .col-6,
.sc-permalink-info .col-sm-3,
.sc-permalink-info .col-lg-2,
.sc-permalink-info .col-xl-1,
.sc-permalink-info .col-12,
.sc-permalink-info .col-sm-6,
.sc-permalink-info .col-lg-8,
.sc-permalink-info .col-xl-10 {
    padding-left:  0 !important;
    padding-right: 0 !important;
}
.sc-permalink-info .card-body {
    padding: 10px 14px !important;
    margin:  0 !important;
}
.sc-permalink-info img {
    width:   100% !important;
    height:  auto !important;
    display: block !important;
    margin:  0 !important;
}

/* ── 8. tab-pane 내 인라인 img[style="width:960px"] 차단
   CSS !important로 인라인 style 속성을 이길 수 없으므로
   부모 overflow-x:hidden으로 잘라내기 ── */
.sc-permalink-menu-content .tab-pane,
.sc-permalink-menu-content div.tab-pane,
div.sc-permalink-menu-content .tab-pane,
div.sc-permalink-container .tab-content .tab-pane {
    overflow-x: hidden !important;
    max-width:  100% !important;
    width:      100% !important;
}
.sc-permalink-menu-content img,
.sc-permalink-menu-content p img,
.sc-permalink-menu-content .tab-pane img,
div.sc-permalink-menu-content img,
div.sc-permalink-container .tab-content img {
    max-width:  100% !important;
    width:      100% !important;
    height:     auto !important;
    display:    block !important;
    box-sizing: border-box !important;
}

/* ── 9. 탭 메뉴 ── */
div.container-fluid.sc-permalink-container ul.nav.nav-tabs,
div.sc-permalink-container ul.nav.nav-tabs,
.sc-permalink-container ul.nav.nav-tabs,
.sc-permalink-container ul.nav-tabs {
    display:         flex !important;
    flex-wrap:       nowrap !important;
    overflow-x:      auto !important;
    scrollbar-width: none !important;
    padding:         0 !important;
    margin:          0 !important;
    border-bottom:   2px solid rgba(0,0,0,.12) !important;
    list-style:      none !important;
    background:      #fff !important;
}
div.container-fluid.sc-permalink-container ul.nav.nav-tabs::-webkit-scrollbar,
.sc-permalink-container ul.nav-tabs::-webkit-scrollbar { display: none !important; }

.sc-permalink-menu-tab .nav-link {
    display:         inline-flex !important;
    align-items:     center !important;
    padding:         .55rem .9rem !important;
    font-weight:     700 !important;
    font-size:       13px !important;
    color:           #444 !important;
    border:          none !important;
    border-bottom:   3px solid transparent !important;
    background:      transparent !important;
    white-space:     nowrap !important;
    min-height:      44px !important;
    border-radius:   0 !important;
    margin:          0 !important;
    text-decoration: none !important;
}
.sc-permalink-menu-tab .nav-link:hover  { color: #4f46e5 !important; background: #eef2ff !important; }
.sc-permalink-menu-tab .nav-link.active { color: #4f46e5 !important; border-bottom-color: #4f46e5 !important; font-weight: 800 !important; }

/* ── 10. iframe ── */
div.container-fluid.sc-permalink-container iframe,
div.sc-permalink-container iframe,
.sc-permalink-container iframe,
.sc-permalink-menu-content iframe {
    display:    block !important;
    width:      100% !important;
    min-width:  100% !important;
    max-width:  100% !important;
    min-height: calc(100svh - 90px) !important;
    height:     calc(100svh - 90px) !important;
    border:     none !important;
    margin:     0 !important;
    padding:    0 !important;
    box-sizing: border-box !important;
}

/* ── 11. footer — Bootstrap .p-3{padding:1rem!important} 제거 ── */
.sc-permalink-footer,
footer.sc-permalink-footer,
footer.p-3.sc-permalink-footer,
footer.bg-light.sc-permalink-footer,
footer.footer.bg-light.mt-auto.p-3.sc-permalink-footer {
    padding:    8px 14px !important;
    margin:     0 !important;
    background: #1e293b !important;
    color:      rgba(255,255,255,.6) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    width:      100% !important;
    font-size:  .8rem !important;
    box-sizing: border-box !important;
}

/* ── 12. 모바일 (max-width: 767px) ── */
@media (max-width: 767px) {
    div.container-fluid.sc-permalink-container {
        padding: 0 !important; margin: 0 !important;
    }
    div.container-fluid.sc-permalink-container > div,
    div.container-fluid.sc-permalink-container > div.p-3 {
        padding: 0 !important; margin: 0 !important;
    }
    div.container-fluid.sc-permalink-container > div > *,
    div.container-fluid.sc-permalink-container > div.p-3 > * {
        margin-top: 0 !important; margin-bottom: 0 !important;
    }
    div.container-fluid.sc-permalink-container .mt-3 { margin-top: 0 !important; }
    div.container-fluid.sc-permalink-container div.tab-content.table-responsive.p-3.sc-permalink-menu-content,
    div.sc-permalink-container .tab-content,
    div.sc-permalink-container .table-responsive,
    .sc-permalink-menu-content {
        padding: 0 !important; margin: 0 !important;
        border: none !important; border-radius: 0 !important;
    }
    .sc-permalink-menu-content .tab-pane,
    .sc-permalink-menu-content div.tab-pane {
        overflow-x: hidden !important; max-width: 100% !important;
    }
    .sc-permalink-menu-content img,
    div.sc-permalink-container .tab-content img {
        max-width: 100% !important; width: 100% !important;
        height: auto !important; display: block !important;
    }
    div.container-fluid.sc-permalink-container div.card.sc-permalink-info,
    .sc-permalink-container .card.sc-permalink-info {
        border: none !important; border-radius: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,.08) !important;
        margin: 0 !important; padding: 0 !important; width: 100% !important;
    }
    .sc-permalink-info [class*="col"],
    .sc-permalink-info [class^="col"] { padding: 0 !important; }
    .sc-permalink-info .card-body { padding: 8px 10px !important; margin: 0 !important; }
    div.container-fluid.sc-permalink-container iframe,
    .sc-permalink-container iframe,
    .sc-permalink-menu-content iframe {
        width: 100% !important; min-width: 100% !important;
        min-height: calc(100svh - 75px) !important;
        height: calc(100svh - 75px) !important;
        border: none !important; margin: 0 !important;
    }
    footer.p-3.sc-permalink-footer { padding: 6px 12px !important; }
}

/* ── 13. 데스크탑 (min-width: 1024px) ── */
@media (min-width: 1024px) {
    div.container-fluid.sc-permalink-container {
        padding: 0 !important; margin: 0 !important;
    }
    div.container-fluid.sc-permalink-container > div,
    div.container-fluid.sc-permalink-container > div.p-3 {
        padding: 0 !important; margin: 0 !important;
    }
    div.container-fluid.sc-permalink-container div.tab-content.table-responsive.p-3.sc-permalink-menu-content,
    div.sc-permalink-container .tab-content,
    .sc-permalink-menu-content {
        padding: 0 !important; margin: 0 !important;
    }
    .sc-permalink-menu-content .tab-pane {
        overflow-x: hidden !important; max-width: 100% !important;
    }
    .sc-permalink-menu-content img { max-width: 100% !important; height: auto !important; }
    div.container-fluid.sc-permalink-container iframe,
    .sc-permalink-container iframe {
        min-height: calc(100svh - 90px) !important;
        height: calc(100svh - 90px) !important;
    }
}