/* =========================================================
   [Custom] 조문 연혁 모달 전용 스타일
   파일명: jo-his-custom-modal.css
   ========================================================= */

/* 1. 설정 변수 (jo-his-custom-modal.js의 CONFIG와 값 맞추기) */
:root {
    --rule-card-width: 400px;    /* 카드 너비 */
    --rule-card-gap: 20px;       /* 카드 간격 */
    --rule-modal-padding: 24px;  /* 모달 패딩 */
    --rule-modal-buffer: 20px;   /* 모달 여유 공간 */
    --rule-header-bg: #f8f9fa;   /* 헤더 배경 */
    --rule-border-color: #e0e0e0;
}

/* 2. 모달 윈도우 너비 덮어쓰기 */
.modal-window {
    /* 카드 2개 + 간격 + 패딩이 딱 맞는 너비 계산 */
    width: calc((var(--rule-card-width) * 2) + var(--rule-card-gap) + (var(--rule-modal-padding) * 2) + var(--rule-modal-buffer));

    /* 모서리 드래그 사이즈 조절 허용 및 최소 크기 고정 */
    resize: both !important;
    min-width: 650px !important;
    min-height: 400px !important;
}

.modal-body {
    padding: var(--rule-modal-padding);
}

.modal-header {
	background-color: #242d3a;
}

/* 3. 가로 스크롤 타임라인 컨테이너 */
.comparison-wrapper {
    display: flex;
    gap: var(--rule-card-gap);

    overflow-x: auto;
    overflow-y: hidden;

    height: 100%;
    padding-bottom: 10px;
    align-items: stretch;
    scroll-behavior: smooth;
}

/* 4. 개별 조문 카드 */
.comp-column {
    flex: 0 0 calc((100% - var(--rule-card-gap)) / 2) !important;
    width: calc((100% - var(--rule-card-gap)) / 2) !important;
    min-width: 300px;

    display: flex;
    flex-direction: column;

    background-color: #fff;
    border: 1px solid var(--rule-border-color);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* 데이터가 1개일 때는 모달 너비 100%를 꽉 채우도록 설정 */
.comparison-wrapper.single-card .comp-column {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* 모달이 특정 너비 이상으로 넓어졌을 때 카드를 3개 보여주기 위한 클래스 */
.comparison-wrapper.show-3-cards .comp-column {
    flex: 0 0 calc((100% - (var(--rule-card-gap) * 2)) / 3) !important;
    width: calc((100% - (var(--rule-card-gap) * 2)) / 3) !important;
}

/* 현행(마지막) 카드 강조 */
.comp-column:last-child {
    border-color: #0066cc;
    background-color: #fafdff;
}

/* 5. 내부 텍스트 스타일 */
.rule-meta {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.rule-name {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 6px;
}

.rule-info {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

.rule-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #333;
    overflow-y: auto;
    flex: 1;
    padding-right: 4px;
    white-space: pre-wrap;
}

ins {
    text-decoration: none;
    background-color: #e6ffec;
    color: #24292e;
    border-bottom: 2px solid #28a745;
}

del {
    text-decoration: none;
    background-color: #ffebe9;
	color: #ff0000;
}

/* 스크롤바 디자인 */
.rule-text::-webkit-scrollbar,
.comparison-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}

.rule-text::-webkit-scrollbar-thumb,
.comparison-wrapper::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* 6. 조문 내 테이블(표) 스타일 */
.rule-text ins:has(table),
.rule-text del:has(table) {
    display: block;
    border-bottom: none !important;
    text-decoration: none !important;
    background: none !important;
}

/* 테이블 기본 틀 */
.rule-text table {
    width: 100% !important;
    table-layout: auto !important;
    float: none !important;
    margin: 15px 0 !important;
    border-collapse: collapse !important;
    font-size: 0.85rem !important;
    white-space: normal !important;
}

.rule-text table div,
.rule-text table span {
    white-space: normal !important;
    margin: 0 !important;
}

/* 셀 내부 스타일 */
.rule-text table th,
.rule-text table td {
    width: auto !important;
    height: auto !important;
    padding: 8px 10px !important;
    border: 1px solid #c0c0c0 !important;
    vertical-align: middle !important;
    word-break: keep-all !important;
    line-height: 1.5 !important;
}

/* 표 내부 스타일 */
.rule-text table div.text-center { text-align: center !important; }
.rule-text table div.text-left { text-align: left !important; }
.rule-text table div.text-right { text-align: right !important; }

.rule-text ins table {
    border: 2px solid #28a745 !important;
}

.rule-text ins table td,
.rule-text ins table th {
    border: 1px solid #7bc58c !important;
    background-color: rgba(40, 167, 69, 0.03) !important;
}

.rule-text del table {
    border: 2px solid #cb2431 !important;
    opacity: 0.8 !important;
}

.rule-text del table td,
.rule-text del table th {
    border: 1px solid #e28990 !important;
    background-color: rgba(203, 36, 49, 0.03) !important;
}

.rule-text ins table *,
.rule-text del table * {
    text-decoration: none !important;
    border-bottom: none !important;
}