/**
 * Terms / Privacy / Cookie policy pages only.
 * Loaded when request URI contains /terms/ (see headFragment in fragUtils.html).
 */

/* 버전 선택(cpnt_controlLine) 아래 본문과 간격 */
.termsWrap .cpnt_controlLine {
    margin-bottom: 4rem;
}

/*
 * 본문 HTML이 .termsBody 없이 ul/li만 오는 경우:
 * common.css의 .termsWrap .termsBody ul li 규칙이 적용되지 않아 글자가 거의 안 보이거나
 * (상속/미적용) 레이아웃이 깨질 수 있음 → terms 영역 안에서는 목록·문단을 명시적으로 복구.
 */
.termsWrap {
    color: #666;
    font-size: 1rem;
    line-height: 1.75;
}

.termsWrap p {
    color: #666;
    font-size: 1rem;
    line-height: 1.75;
}

/*
 * 전역 reset(common.css)에서 ul/ol/li { list-style: none } 이라 약관 본문 목록 불릿이 안 보임 → 복구
 */
.termsWrap ul:not(.tabNavList),
.termsWrap ol {
    font-size: 1rem;
    line-height: 1.75;
    color: #666;
    overflow: visible;
    list-style: revert;
    padding-left: 1.5rem;
}

.termsWrap ul:not(.tabNavList) {
    list-style-type: disc;
}

.termsWrap ol {
    list-style-type: decimal;
}

.termsWrap ul:not(.tabNavList) li,
.termsWrap ol li {
    display: list-item;
    font-size: 1rem;
    line-height: 1.75;
    color: #666;
    list-style-type: inherit;
    list-style-position: outside;
}

.termsWrap ul:not(.tabNavList) ul li {
    list-style-type: circle;
}

.termsWrap ul:not(.tabNavList) ul ul li {
    list-style-type: square;
}

.termsWrap ol ol li {
    list-style-type: lower-alpha;
}

/* 본문 최상단 ul에 실수로 tabNavList가 붙은 경우(탭용 font-size:0 등 회피) — 실제 탭은 .tabNavWrap 밖에 있음 */
.termsWrap > ul.tabNavList {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #666 !important;
    overflow: visible !important;
    list-style: revert !important;
    padding-left: 1.5rem !important;
}

.termsWrap > ul.tabNavList li {
    display: list-item !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #666 !important;
    list-style: revert !important;
}

/* 약관 버전 선택 드롭다운(selectric) 옵션에는 불릿 비표시 */
.termsWrap .selectric-items ul,
.termsWrap .selectric-items ul li {
    list-style: none !important;
    padding-left: 0 !important;
}

.termsWrap .selectric-items ul li {
    display: block !important;
    padding: 10px 16px !important;
}

/* 본문 내 링크: 파란색 + 밑줄 */
.termsWrap a:link,
.termsWrap a:visited {
    color: #1565c0;
    text-decoration: underline;
}

.termsWrap a:hover,
.termsWrap a:active {
    color: #0d47a1;
    text-decoration: underline;
}

/*
 * 약관 본문 표: 모든 셀 상·하·좌·우 패딩, 제목행(thead)은 본문과 다른 톤
 * (.termsBody 유무·common.css 미디어쿼리와 무관하게 /terms/ 본문에 통일 적용)
 */
.termsWrap table,
.termsWrap .termsBody table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    margin: 1.5rem 0;
}

/*
 * DB/CMS HTML에 cellpadding="1" 또는 td style="padding:1px" 등이 있으면 일반 패딩 규칙이 안 먹음 → !important
 */
.termsWrap table th,
.termsWrap table td,
.termsWrap .termsBody table th,
.termsWrap .termsBody table td {
    padding: 0.33rem 0.67rem !important;
}

.termsWrap table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    color: #111;
    padding: 0 0 0.75rem 0;
}

.termsWrap table thead th,
.termsWrap table thead td,
.termsWrap .termsBody table thead th,
.termsWrap .termsBody table thead td {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02px;
    color: #111;
    text-align: left;
    vertical-align: middle;
    background-color: #f4f4f4;
    border-bottom: 2px solid #111;
}

.termsWrap table tbody th,
.termsWrap table tbody td,
.termsWrap .termsBody table tbody th,
.termsWrap .termsBody table tbody td {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: -0.02px;
    color: #666;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
}

.termsWrap table tbody th:last-child,
.termsWrap table tbody td:last-child,
.termsWrap .termsBody table tbody th:last-child,
.termsWrap .termsBody table tbody td:last-child {
    border-right: none;
}

.termsWrap table tbody tr:last-child th,
.termsWrap table tbody tr:last-child td,
.termsWrap .termsBody table tbody tr:last-child th,
.termsWrap .termsBody table tbody tr:last-child td {
    border-bottom: 1px solid #cfcfcf;
}

.termsWrap table tbody td.tdBold,
.termsWrap .termsBody table tbody td.tdBold {
    font-weight: 700;
    color: #111;
}

/*
 * CKEditor 등: figure에 인라인 width(33%, 100% 등)가 DB에 박혀 좁은 화면에서 깨짐 → 전폭
 * cookie-policy / privacy-policy 등 .termsWrap 본문 공통 (/terms/ 에서 terms.css 로드)
 */
@media (max-width: 1000px) {
    .termsWrap figure {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .termsWrap figure table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* /terms/ 본문(DB HTML): 좁은 화면에서 본문·표 가독성 */
@media (max-width: 600px) {
    .termsWrap {
        font-size: 14px;
    }

    /* 표 안 문단만(일반 본문 p는 기존 .termsWrap p 1rem 유지) */
    .termsWrap table p,
    .termsWrap .termsBody table p {
        font-size: 14px;
    }

    .termsWrap ul:not(.tabNavList),
    .termsWrap ol {
        font-size: 14px;
    }

    .termsWrap ul:not(.tabNavList) li,
    .termsWrap ol li {
        font-size: 14px;
    }

    .termsWrap > ul.tabNavList {
        font-size: 14px !important;
    }

    .termsWrap > ul.tabNavList li {
        font-size: 14px !important;
    }

    .termsWrap table caption {
        font-size: 14px;
    }

    .termsWrap table thead th,
    .termsWrap table thead td,
    .termsWrap .termsBody table thead th,
    .termsWrap .termsBody table thead td {
        font-size: 14px;
    }

    .termsWrap table tbody th,
    .termsWrap table tbody td,
    .termsWrap .termsBody table tbody th,
    .termsWrap .termsBody table tbody td {
        font-size: 14px;
    }

    /* figure로 감싼 표(cookie-policy 등) 안 글자도 동일 크기 */
    .termsWrap figure {
        font-size: 14px;
    }
}