/* ============================================
   Common Styles - KRDS Standard
   Cavity Platform
   ============================================ */

/* auth-guard.js 통과 전 보호 페이지 본문 숨김 */
html:not(.auth-ok) body {
    visibility: hidden;
}

/* 로고 커스터마이징 */
#krds-header .logo a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-indent: 0;
    background-image: none !important;
}

#krds-header .logo .logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: #2563eb;
    color: #fff;
    flex-shrink: 0;
}

#krds-header .logo .logo-icon i {
    font-size: 2rem;
    line-height: 1;
}

#krds-header .logo .logo-text {
    font-weight: 700;
    white-space: nowrap;
}

[data-krds-mode="high-contrast"] #krds-header .logo .logo-icon {
    background: var(--krds-high-contrast-color-surface-primary);
    color: var(--krds-high-contrast-color-text-inverse);
}

#krds-header .header-container .logo {
    width: unset;
}

/* 세션 타이머 스타일 */
.session-timer {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin-right: 1rem;
}

.session-timer:empty {
    display: none;
}

.session-timer.warning {
    color: #dc3545;
    background: #fff5f5;
    border-color: #dc3545;
    animation: pulse 1s infinite;
}

#headerUserName {
    font-size: var(--krds-pc-font-size-body-xsmall);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.session-timer::before {
    margin-right: 0.5rem;
}

.session-info {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #6c757d;
}

/* 메인 컨테이너 */
.main-container,
.page-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
    min-height: calc(100vh - 300px);
}

/* 페이지 상단 */
.page-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

/* g-info-box 포함 시 전체 너비 안내 영역 */
.page-top:has(.g-info-box) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    row-gap: var(--krds-pc-gap-layout-title-body-large);
}

.page-top:has(.g-info-box) .page-title-wrap {
    display: contents;
}

.page-top:has(.g-info-box) .krds-breadcrumb-wrap {
    grid-column: 1;
    grid-row: 1;
}

.page-top:has(.g-info-box) h1 {
    grid-column: 1;
    grid-row: 2;
}

.page-top:has(.g-info-box) .page-actions,
.page-top:has(.g-info-box) > .krds-btn,
.page-top:has(.g-info-box) > button {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
}

.page-top:has(.g-info-box) .g-info-box {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* page-title-wrap — KRDS outline 패턴 */
.page-title-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--krds-pc-gap-layout-title-body-large);
    flex: 1;
    min-width: 0;
}

.page-title-wrap h1 {
    margin: 0;
}

@media (max-width: 767px) {
    .page-title-wrap {
        gap: var(--krds-mobile-gap-layout-title-body-large);
    }
}

/* g-info-box / g-desc — KRDS site.css (outline_01) */
.g-info-box {
    position: relative;
    width: 100%;
    background-color: var(--krds-light-color-surface-secondary-subtler);
    padding: var(--krds-pc-padding-card-small);
    border-radius: var(--krds-radius-xlarge1);
    box-sizing: border-box;
}

.g-info-box.bg-gray {
    background-color: var(--krds-light-color-surface-gray-subtler);
}

.g-info-box.line {
    background-color: var(--krds-light-color-surface-white-subtle);
    border: var(--krds-light-border-width-static-regular) solid var(--krds-light-color-border-gray-light);
}

.g-info-box.sm {
    padding: var(--krds-pc-padding-card-xsmall);
}

.g-info-box .g-desc + .g-desc {
    margin-top: var(--krds-pc-gap-layout-text-text-large);
}

.g-desc {
    margin: 0;
    font-size: var(--krds-pc-font-size-body-large);
    font-weight: var(--krds-font-weight-regular);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .g-info-box {
        padding: var(--krds-mobile-padding-card-small);
    }

    .g-info-box.sm {
        padding: var(--krds-mobile-padding-card-xsmall);
    }

    .g-info-box .g-desc + .g-desc {
        margin-top: var(--krds-mobile-gap-layout-text-text-large);
    }

    .g-desc {
        font-size: var(--krds-mobile-font-size-body-large);
    }
}

[data-krds-mode="high-contrast"] .g-info-box {
    background-color: var(--krds-high-contrast-color-surface-secondary-subtler);
}

[data-krds-mode="high-contrast"] .g-info-box.bg-gray {
    background-color: var(--krds-high-contrast-color-surface-gray-subtler);
}

[data-krds-mode="high-contrast"] .g-info-box.line {
    background-color: var(--krds-high-contrast-color-surface-white-subtle);
    border: var(--krds-high-contrast-border-width-static-regular) solid var(--krds-high-contrast-color-border-gray-light);
}


.filter-bar select {
    max-width: 150px;
}
/* Breadcrumb */
.breadcrumb {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.breadcrumb li:not(:last-child)::after {
    content: '>';
    margin-left: 0.5rem;
}

/* 유틸리티 */
.w-100 {
    width: 100%;
}

/* 모바일 메뉴 강제 스타일 */
.krds-main-menu-mobile.is-open {
    display: block !important;
    visibility: visible !important;
}

body.is-gnb-mobile {
    overflow: hidden;
}

/* 반응형 */
@media (max-width: 768px) {
    .main-container,
    .page-container {
        padding: 1rem;
    }
    
    .page-top {
        flex-direction: column;
        gap: 1rem;
    }

    .page-top:has(.g-info-box) {
        grid-template-columns: 1fr;
        row-gap: var(--krds-mobile-gap-layout-title-body-large);
    }

    .page-top:has(.g-info-box) .page-actions,
    .page-top:has(.g-info-box) > .krds-btn,
    .page-top:has(.g-info-box) > button {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
    
    .page-actions {
        width: 100%;
    }
    
    .page-actions button {
        width: 100%;
    }
}

/* ============================================
   KRDS 모달 - 공통 최소 규칙 (페이지별 오버라이드 금지)
   ============================================ */
.krds-modal {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 10010; /* 상위 오버레이(툴팁/뷰어)보다 높게 */
}

/* 라이브러리에서 .in 또는 .show를 붙여 활성화 */
.krds-modal.in,
.krds-modal.show,
.krds-modal.shown {
    display: flex !important;
    z-index: 10010 !important;
}

/* 배경은 기본적으로 숨김, in 상태에서만 표시 */
.krds-modal .modal-back {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 화면 전체 고정 */
    top: 0; left: 0; bottom: 0; right: 0; /* 화면 전체 덮음 */
    background-color: rgba(51, 51, 51, 0.5); /* 매우 옅은 회색 반투명 배경 */
    pointer-events: none; /* 기본적으로 클릭 불가 */
    z-index: 10000 !important; /* 배경 레이어 (콘텐츠보다 낮음) */
}

/* KRDS 표준: 활성화된 모달일 때 백드롭을 표시 */
.krds-modal .modal-back.in {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    backdrop-filter: none !important; /* 블러 제거, 투명 회색만 */
    -webkit-backdrop-filter: none !important;
}

/* 모달은 항상 오버레이보다 위에 고정 */
.krds-modal,
.krds-modal.in,
.krds-modal.show,
.krds-modal.shown {
    z-index: 10010 !important;
}

/* 다이얼로그는 백드롭 위 */
.krds-modal .modal-dialog {
    width: 90% !important; /* 모바일 기본: 화면 폭의 90% */
    max-width: 900px; /* 기본 최대 너비 500px */
    margin: auto; /* 중앙 배치 */
    position: relative; /* 레이어 컨텍스트 설정 */
    z-index: 10011 !important; /* 모달 콘텐츠가 항상 배경 위 */
}

/* 모달 콘텐츠가 모든 페이지에서 배경(backdrop) 위에 오도록 강제 */
.krds-modal .modal-content {
    position: relative;
    z-index: 10012 !important;
}

/* Footer brand customization */
#krds-footer .f-logo {
  background-image: none !important; /* 예시 KRDS 로고 제거 */
  background: none !important;
}
#krds-footer .f-logo .brand-text {
  font-weight: var(--krds-font-weight-bold);
  font-size: var(--krds-pc-font-size-body-medium);
}

/* ============================================
   글자·화면 표시 설정 (KRDS 표준)
   ============================================ */

/* KRDS 표준: data-adjust-scale 속성 기반 글자 크기 조절 */
html[data-adjust-scale="small"],
html:not([data-adjust-scale]) {
    font-size: 67.5%; /* 12px - 기본값 */
}

html[data-adjust-scale="normal"] {
    font-size: 75%; /* 14px */
}

html[data-adjust-scale="slightly-large"] {
    font-size: 87.5%; /* 16px */
}

html[data-adjust-scale="large"] {
    font-size: 100%; /* 18px */
}

html[data-adjust-scale="largest"] {
    font-size: 112.5%; /* 20px */
}