@charset "utf-8";

/* ============================================================================
   ProgramDetailModal - 프로그램 상세 모달 (재사용 컨트롤)
   경로 : /site/resource/bcic/common/css/program-detail-modal.css
   ----------------------------------------------------------------------------
   ※ Program02.aspx(상세보기)의 .board-view-info / .vinfo-list / .rsv-status
      마크업/클래스를 그대로 재사용하므로, 해당 스타일이 이미 로드된 화면에서는
      자연스럽게 이어지고, 없는 화면에서도 아래 pdm-* 규칙만으로 정상 표시된다.
   ※ 색상/폰트는 site 공통 :root 토큰을 사용한다.
   ※ 부트스트랩 JS 모달을 사용하지 않는 자체 오버레이이므로 z-index 를 충분히 높게 둔다.
   ========================================================================== */

/* 요구사항(6차-3) : 모바일(특히 iOS Safari)에서는 overflow:hidden 만으로 배경 터치
   스크롤을 막지 못하는 경우가 있어서, JS(program-detail-modal.js 의 _lockBodyScroll)
   에서 body 를 position:fixed 로 현재 스크롤 위치에 고정시키는 방식을 함께 쓴다.
   이 클래스는 html 의 스크롤바 자체를 감추는 역할만 한다. */
html.pdm-lock-scroll {
    overflow: hidden !important;
}

body.pdm-lock-scroll {
    overflow: hidden !important;
    /* position/top/left/right/width 는 JS 가 인라인으로 채워준다(스크롤 위치 보존) */
}

.pdm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 22, 26, 0);
    opacity: 0;
    transition: opacity .2s ease-out, background-color .2s ease-out;
    box-sizing: border-box;
}

    .pdm-overlay[hidden] {
        display: none;
    }

    .pdm-overlay.is-open {
        opacity: 1;
        background: rgba(20, 22, 26, .55);
    }

/* 요구사항(8차-2) : 타이틀 + 닫기 버튼(.pdm-header)은 스크롤 영역 밖에 고정하고,
   .pdm-scroll 안쪽만 스크롤되도록 다이얼로그를 세로 flex 로 구성한다. 예전에는
   다이얼로그 전체(padding 포함)가 하나의 스크롤 영역이라, 아래로 스크롤한 뒤 닫으려면
   맨 위로 다시 올라와야 했다. */
.pdm-dialog {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 요구사항(4차-2) : 기존 상세보기 페이지의 컨텐츠 영역(.col-xl-8, 전체 1400px 중
       66.667%)과 폭을 맞췄다. 1400 * 0.666667 ≈ 933px. */
    max-width: 933px;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    transform: translateY(8px);
    transition: transform .2s ease-out;
    outline: none;
}

.pdm-overlay.is-open .pdm-dialog {
    transform: translateY(0);
}

/* 요구사항(8차-3) : "헤더"라는 느낌이 나도록 배경색을 명확히 넣었다 (사이트 메인
   컬러 톤의 옅은 배경 + 밑줄 구분선). */
.pdm-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    padding: 20px 24px;
    background: var(--blue-color01, #ECF6FF);
    border-bottom: 1px solid #DCE7F2;
    border-radius: 10px 10px 0 0;
}

.pdm-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-type02);
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color02, var(--font-color01));
    margin: 0;
    line-height: 1.4;
    word-break: break-word;
}

.pdm-close {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--font-color02);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .pdm-close:hover {
        background: rgba(0, 0, 0, .06);
        color: var(--font-color01);
    }

/* 요구사항(8차-2) : 실제 스크롤은 이 안에서만 일어난다. 헤더는 항상 보인다. */
.pdm-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* 요구사항(5차-1) : 다이얼로그 안에서 스크롤이 끝까지 가도(맨 위/아래) 배경 페이지로
       스크롤이 "체이닝"되지 않도록 막는다 - 배경 스크롤바가 대신 움직이던 문제의 핵심 원인. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.pdm-body {
    padding: 24px 28px 28px;
}

.pdm-loading,
.pdm-error {
    padding: 60px 8px;
    text-align: center;
    font-family: var(--font-type01);
    font-size: 15px;
    color: var(--font-color02);
}

/* 요구사항(7차-2) : "상세정보 보기" 영역을 새로 디자인하는 대신, Program01.aspx 의
   "약관동의" 아코디언(.acc-style01 .card .card-header .btn-link ...)과 똑같은
   마크업/클래스를 그대로 재사용한다. 그러면 site 공용 CSS 가 이미 스타일링해 둔
   카드 헤더 배경/보더/타이포그래피를 그대로 물려받아서, 여기서 새로 만든 회색 버튼보다
   화면 전체와 훨씬 자연스럽게 어울리고 눈에도 잘 띈다. 아래 pdm-* 규칙은 site CSS 가
   없는 화면에서도 최소한의 모양이 나오도록 하는 보강용 폴백일 뿐, site 의 .card/.card-header
   스타일을 덮어쓰지 않는다.
   토글 동작 자체는(부트스트랩 JS collapse 플러그인 로드 여부를 이 컨트롤이 보장할 수
   없으므로) data-toggle 에 기대지 않고 program-detail-modal.js 에서 직접 처리한다. */
.pdm-info.acc-style01 {
    margin-bottom: 20px;
}

    .pdm-info.acc-style01 .card {
        border: 1px solid #E5E5E5;
        border-radius: 8px;
        overflow: hidden;
    }

    .pdm-info.acc-style01 .card-header {
        padding: 0;
        border-bottom: 0;
        background: var(--gray-color01, #F5F6F8);
    }

    .pdm-info.acc-style01 .btn-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
        border: 0;
        background: transparent;
        box-shadow: none;
        text-decoration: none;
        cursor: pointer;
    }

    .pdm-info.acc-style01 .btn-link .tit {
        margin: 0;
        font-family: var(--font-type02);
        font-size: 18px;
        font-weight: 700;
        color: var(--font-color01);
    }

    .pdm-info.acc-style01 .btn-link i {
        font-size: 15px;
        color: var(--font-color02);
        transition: transform .2s;
    }

    .pdm-info.acc-style01 .btn-link.is-open i {
        transform: rotate(180deg);
    }

    .pdm-info.acc-style01 .card-body {
        padding: 4px 16px 16px;
        border-top: 1px solid #E5E5E5;
        background: #fff;
    }

.pdm-vinfo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .pdm-vinfo-list li {
        display: flex;
        padding: 8px 0;
        font-family: var(--font-type01);
        /* 요구사항(4차-3) : 글자 크기 15px */
        font-size: 15px;
        line-height: 1.6;
    }

    .pdm-vinfo-list .vi-tit {
        flex: none;
        width: 88px;
        color: var(--font-color02);
        font-weight: 600;
    }

    .pdm-vinfo-list .vi-txt {
        flex: 1;
        color: var(--font-color01);
        word-break: break-word;
    }

/* 요구사항(6차-1, 6차-2) : 현황판(모집정원~잔여)은 모달에서 완전히 삭제하고
   이용안내(우측 목록) 카드 쪽으로 옮겼다 - 스타일은 program-calendar.css 참고. */

.pdm-content {
    font-family: var(--font-type01);
    font-size: 14px;
    line-height: 1.7;
    color: var(--font-color01);
    word-break: break-word;
}

    .pdm-content img {
        max-width: 100%;
        height: auto;
    }

    .pdm-content .non-info {
        padding: 40px 0;
        text-align: center;
        color: var(--font-color02);
    }

/* ── 반응형 (site 공통 991px 기준과 통일) ─────────────────────────────────── */

@media (max-width: 991px) {
    /* 요구사항(4차-5) : 모바일에서는 모달이 화면 하단이 아니라 상단에 붙도록 한다 */
    .pdm-overlay {
        padding: 0;
        align-items: flex-start;
    }

    .pdm-dialog {
        max-width: none;
        width: 100%;
        /* 요구사항(7차-1) : max-height 를 없애고(none) min-height:100vh 만 두면 내용이
           뷰포트보다 길어져도 다이얼로그 박스 자체가 그만큼 늘어나 버려서(overflow-y:auto
           가 걸릴 대상 자체가 없어짐) 스크롤할 것이 없어진다 - 그 상태에서 body 는
           position:fixed 로 잠겨있으니 아예 스크롤이 "사라진" 것처럼 보이는 원인이었다.
           높이를 뷰포트에 고정(dvh 우선, 구형 브라우저 대비 vh 폴백)하고, 실제 스크롤은
           .pdm-scroll 안쪽에서만 일어나도록 한다(헤더는 고정, 요구사항 8차-2). */
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .pdm-header {
        padding: 16px 18px;
        border-radius: 0;
    }

    .pdm-body {
        padding: 20px 18px 32px;
    }

    .pdm-title {
        font-size: 17px;
    }

    .pdm-info.acc-style01 .btn-link {
        padding: 12px 14px;
    }

    .pdm-info.acc-style01 .btn-link .tit {
        font-size: 16px;
    }

    .pdm-vinfo-list li {
        font-size: 14px;
    }

    .pdm-vinfo-list .vi-tit {
        width: 72px;
    }
}