/* Basic skin – footer / checkout legal modals (#policy, #privacy, …)
   크기·헤더는 brand terms-modal 과 맞춘다. DB HTML 스타일은 덮지 않는다.

   이 스킨은 스크롤바가 html 에 있다. Bootstrap 은 모달을 열 때 body 에만
   padding-right 를 넣어, 스크롤바는 남고 본문만 줄어 오른쪽에 여백이 생긴다. */
body.modal-open {
    padding-right: 0 !important;
}

.basic-legal-modal .modal-dialog {
    --bs-modal-width: 50vw;
    width: 50vw !important;
    max-width: none !important;
    margin-right: auto;
    margin-left: auto;
}

.basic-legal-modal .modal-content {
    width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    background-color: #fefefe;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.basic-legal-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.basic-legal-modal .modal-title {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: normal;
    color: #333 !important;
}

.basic-legal-modal .btn-close {
    flex-shrink: 0;
    margin: 0;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

.basic-legal-modal .btn-close:hover {
    opacity: 0.85;
}

.basic-legal-modal .modal-body {
    padding: 20px;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    line-height: 1.6;
    color: #666;
    text-align: left;
    background: #fff;
}

.basic-legal-modal__prose {
    min-width: 0;
    max-width: 100%;
}

/* styles.php 의 a.active { color: … !important } 가
   약관·이용안내 선택 칩의 color:#fff 를 덮어 글자가 회색으로 남는다. */
.basic-legal-modal a.chip.active,
.basic-legal-modal a.chip.active:hover,
.basic-legal-modal a.chip.active:focus {
    color: #fff !important;
}

/* new_style.css 의 .wrap { width:1300px } 가 약관·이용안내 HTML 의 .wrap 까지 잡는다.
   컴포넌트는 max-width 만 지정해서, 실제 너비는 1300px 가 된 뒤 max-width 로만 잘리고
   프레임에 가로 스크롤이 생긴다. width 만 모달 안에서 되돌린다. */
.basic-legal-modal .wrap {
    width: auto !important;
}

.basic-legal-modal__prose .title {
    padding: 0;
    font-size: 28px;
    font-weight: 800;
    border: none;
}

/* DB가 비어 fallback blade를 넣을 때만 기본 가독성을 맞춘다. */
.basic-legal-modal__fallback > :first-child {
    margin-top: 0;
}

.basic-legal-modal__fallback h1,
.basic-legal-modal__fallback h2,
.basic-legal-modal__fallback h3,
.basic-legal-modal__fallback h4 {
    margin: 1.35em 0 0.65em;
    font-weight: 700;
    color: #333;
    line-height: 1.45;
}

.basic-legal-modal__fallback h1 {
    font-size: 1.25rem;
}

.basic-legal-modal__fallback h2 {
    font-size: 1.125rem;
}

.basic-legal-modal__fallback h3,
.basic-legal-modal__fallback h4 {
    font-size: 1rem;
}

.basic-legal-modal__fallback p,
.basic-legal-modal__fallback li {
    margin-bottom: 0.65em;
}

.basic-legal-modal__fallback ul,
.basic-legal-modal__fallback ol {
    margin: 0.5em 0 1em;
    padding-left: 1.25em;
}

.basic-legal-modal__fallback table {
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    font-size: 13px;
}

.basic-legal-modal__fallback table th,
.basic-legal-modal__fallback table td {
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    vertical-align: top;
}

.basic-legal-modal__fallback table th {
    background: #f5f5f5;
    font-weight: 600;
    color: #333;
}

.basic-legal-modal__fallback p span[style*="font-size: 18px"],
.basic-legal-modal__fallback p span[style*="font-size:18px"] {
    display: block;
    margin-bottom: 1rem !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.45 !important;
}

.basic-legal-modal__fallback p span[style*="font-size: 12px"],
.basic-legal-modal__fallback p span[style*="font-size:12px"] {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #555 !important;
    line-height: 1.75 !important;
}

.basic-legal-modal__fallback .plc_container {
    width: 100%;
}

.basic-legal-modal__fallback .plc_title {
    margin: 0 0 1.5rem;
    font-size: 17px;
    text-align: left;
}

.basic-legal-modal__fallback .plc_paragraph {
    margin-bottom: 2rem;
}

.basic-legal-modal__fallback .plc_index {
    border-color: #d9d9d9;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .basic-legal-modal .modal-dialog {
        --bs-modal-width: 90%;
        width: 90% !important;
        max-width: none !important;
        margin: 20px auto;
    }

    .basic-legal-modal .modal-content {
        height: 85vh !important;
        max-height: 85vh !important;
        border-radius: 8px;
    }

    .basic-legal-modal .modal-header {
        padding: 15px 15px 10px;
    }

    .basic-legal-modal .modal-title {
        font-size: 18px;
    }

    .basic-legal-modal .modal-body {
        padding: 15px;
    }
}