@charset "utf-8";

/* ============================================================================
   legal.css — 이용약관 / 개인정보 처리방침 전용
   ----------------------------------------------------------------------------
   ※ 이 두 페이지는 퍼블리싱 산출물에 존재하지 않던 신규 화면이라
     기존 CSS 파일은 한 줄도 수정하지 않고 전용 파일로 분리했다.
   ※ 선택자는 전부 .legal-* 로 시작하므로 다른 화면에 영향이 없다.
     (.customer-title-section 은 기존 클래스를 그대로 재사용해 제목 영역 톤을 맞춘 것)
   ※ 색상·폰트·여백은 customer.css / common.css 의 기존 값을 따랐다.
       제목 #111111 / 본문 #4D4D4D / 보조 #767676 / 포인트 #1D4ED8
       테두리 #E5E7EB / 배경 #F8F9FA · #F0F3F9 / 제목 폰트 YeogiOttaeJalnanGothic
   ========================================================================== */

.legal-section {padding-bottom: 120px;}
.legal-section .inner {max-width: 1053px;}

/* ---- 시행일 배지 ---------------------------------------------------------- */
.legal-meta {display: flex; align-items: center; gap: 10px; margin-bottom: 28px;}
.legal-meta .legal-effective {padding: 8px 16px; background-color: #F0F3F9; border-color: #F0F3F9; font-size: 14px; font-weight: 600; color: #0B1F45;}

/* ---- 목차 ---------------------------------------------------------------- */
.legal-toc {padding: 28px 30px; margin-bottom: 50px; border: 1px solid #E5E7EB; border-radius: 14px; background-color: #F8F9FA;}
.legal-toc > strong {display: block; margin-bottom: 16px; font-size: 17px; font-weight: 700; color: #111111;}
.legal-toc ol {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; list-style: none;}
.legal-toc ol li {position: relative; padding-left: 12px;}
.legal-toc ol li::before {content: ''; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #C4C9D2;}
.legal-toc ol li a {font-size: 15px; line-height: 1.6; color: #4D4D4D; word-break: keep-all;}
.legal-toc ol li a:hover, .legal-toc ol li a:focus-visible {color: #1D4ED8; text-decoration: underline;}

/* ---- 본문 ---------------------------------------------------------------- */
.legal-article {padding-top: 44px;}
.legal-article:first-child {padding-top: 0;}
.legal-article + .legal-article {border-top: 1px solid #F0F0F0;}
.legal-article h3 {margin-bottom: 18px; font-family: 'YeogiOttaeJalnanGothic'; font-size: 22px; font-weight: 700; line-height: 1.4; color: #111111; word-break: keep-all;}
.legal-article p {font-size: 16px; line-height: 1.85; color: #4D4D4D; word-break: keep-all;}
.legal-article p + p {margin-top: 12px;}

/* 번호 목록 — 실제 조문처럼 ①②③ 로 표기 */
.legal-list {margin-top: 14px; padding-left: 0; list-style: none; counter-reset: legal-item;}
.legal-list > li {position: relative; padding-left: 28px; font-size: 16px; line-height: 1.85; color: #4D4D4D; word-break: keep-all;}
.legal-list > li + li {margin-top: 10px;}
.legal-list > li:not(.sub) {counter-increment: legal-item;}
.legal-list > li:not(.sub)::before {content: counter(legal-item) '.'; position: absolute; top: 0; left: 0; min-width: 20px; font-weight: 600; color: #767676;}
/* 하위 항목(원고의 '―' 줄) — 번호 없이 한 단 들여쓰기 */
.legal-list > li.sub {margin-top: 6px; padding-left: 44px; color: #767676;}
.legal-list > li.sub::before {content: '–'; position: absolute; top: 0; left: 28px; color: #A8AEB8;}

/* ---- 표 ------------------------------------------------------------------ */
.legal-table-wrap {margin-top: 20px; overflow-x: auto; border: 1px solid #E5E7EB; border-radius: 12px;}
.legal-table {width: 100%; border-collapse: collapse; background-color: #fff;}
.legal-table th, .legal-table td {padding: 14px 18px; font-size: 15px; line-height: 1.7; text-align: left; vertical-align: top; word-break: keep-all; border-bottom: 1px solid #F0F0F0;}
.legal-table thead th {background-color: #F8F9FA; font-weight: 600; color: #111111; white-space: nowrap;}
.legal-table tbody th {font-weight: 600; color: #111111; white-space: nowrap;}
.legal-table tbody td {color: #4D4D4D;}
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td {border-bottom: 0;}

/* ---- 개정 이력 ------------------------------------------------------------ */
.legal-history {margin-top: 60px; padding: 24px 30px; border-radius: 12px; background-color: #F8F9FA;}
.legal-history > strong {display: block; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: #111111;}
.legal-history ul {list-style: none;}
.legal-history ul li {display: flex; gap: 14px; font-size: 15px; line-height: 1.8; color: #4D4D4D;}
.legal-history ul li span {flex-shrink: 0; font-weight: 600; color: #767676;}

/* ---- 하단 이동 버튼 -------------------------------------------------------- */
.legal-links {display: flex; justify-content: center; margin-top: 50px;}

/* ---- 모바일 --------------------------------------------------------------- */
@media (max-width: 1024px) {
    .legal-toc ol {grid-template-columns: 1fr;}
}

@media (max-width: 768px) {
    .legal-section {padding-bottom: 80px;}
    .legal-toc {padding: 22px 20px; margin-bottom: 36px;}
    .legal-article {padding-top: 34px;}
    .legal-article h3 {font-size: 19px;}
    .legal-article p, .legal-list > li {font-size: 15px;}
    .legal-history {padding: 20px;}
    .legal-history ul li {flex-direction: column; gap: 2px;}

    /* 표는 좁은 화면에서 카드 형태로 전환 (가로 스크롤 대신) */
    .legal-table-wrap {border: 0; overflow-x: visible;}
    .legal-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td {display: block; width: 100%;}
    .legal-table tbody tr {margin-bottom: 12px; padding: 16px 18px; border: 1px solid #E5E7EB; border-radius: 12px;}
    .legal-table tbody tr:last-child {margin-bottom: 0;}
    .legal-table th, .legal-table td {padding: 0; border-bottom: 0; white-space: normal;}
    .legal-table tbody th {margin-bottom: 8px; padding-bottom: 8px; font-size: 16px; border-bottom: 1px solid #F0F0F0;}
    .legal-table tbody td {font-size: 15px;}
    .legal-table tbody td + td {margin-top: 8px;}
    .legal-table tbody td::before {content: attr(data-label); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: #767676;}
}