/* app/static/css/legal.css
   이용약관(terms) · 개인정보처리방침(privacy) · 별도 참고자료(호스트·게스트 이용약관, 환불정책) 공통 스타일.
   landing_layout.html 상속 페이지에서만 로드. 색상은 공통 토큰(colors.css) 재사용(폴백 병기). */

.legal-section { width: 100%; display: flex; justify-content: center; }
.legal-container { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* 상단 배너(제목) */
.legal-header {
    margin-top: 64px;
    width: 100%;
    padding: 110px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--Background-BGCoolGrey, #F4F6FA);
}
.legal-header h1 {
    margin: 0;
    color: var(--Navy, #002D58);
    text-align: center;
    font-family: var(--Font-Family);
    font-size: 32px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.8px;
}

/* 본문 컨테이너 */
.legal-contents {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 72px 40px 120px 40px;
    gap: 24px;
    background: var(--Background-BGWhite, #FFF);
}
.legal-body {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}

/* 조문 블록 */
.legal-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}
.legal-block h3 {
    margin: 0;
    color: var(--Text-Grey-Title, #232222);
    font-family: var(--Font-Family);
    font-size: 18px;
    font-weight: 700;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.45px;
}
.legal-block > div,
.legal-num > div,
.legal-item,
.legal-intro {
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
.legal-intro { align-self: stretch; line-height: 160%; }

/* ①②③ 항 */
.legal-num { display: flex; margin-left: 10px; align-self: stretch; }
.legal-num > div:first-child { flex-shrink: 0; }
.legal-num > div:nth-of-type(2) { margin-left: 6px; }

/* 1. 2. 3. 호 — ①항보다 한 단계 들여씀 */
.legal-num--list { margin-left: 32px; }

/* 가·나·다 목 — 앞 줄 깊이 아래로(l1 문단 아래 · l2 ①항 아래 · l3 1.호 아래) */
.legal-item { margin-left: 22px; }
.legal-item--l1 { margin-left: 10px; }
.legal-item--l2 { margin-left: 32px; }
.legal-item--l3 { margin-left: 54px; }

/* 표 — 공통 목록 표(.list-section > .table-wrapper > .data-table.no-hover, 2026-10-30)를 그대로 쓴다
   (바깥 테두리·머리 Cool Grey 100·행 구분선·Medium 16·좁은 화면 가로 스크롤). 여기는 약관 표 차이만:
   긴 문장이라 줄바꿈 허용(공통은 한 줄 말줄임) · 내용 길이에 맞춘 열 폭 · 위쪽 정렬 · 첫 칸(항목명) 최소폭 */
/* width:auto — 공통 .list-section 의 width:100% 에 왼쪽 여백 10이 더해져 부모를 넘치면(모달 본문 가로 스크롤) 안 되므로
   약관 표만 폭을 '남은 폭'(align-self:stretch)으로. 공통 .list-section 은 그대로(다른 목록 화면 영향 없음) */
.legal-table-wrap { align-self: stretch; width: auto; margin: 4px 0 4px 10px; }
.data-table.legal-table { table-layout: auto; }
.data-table.legal-table :is(thead th, tbody td) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
    vertical-align: top;
}
.data-table.legal-table tbody td:first-child { min-width: 96px; }

/* 이용약관 하단 별도 참고자료 — 새 탭 링크 목록 */
.legal-refs {
    margin: 0;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: disc;
}
.legal-refs li {
    color: var(--Text-Grey-800, #2E2E2E);
    font-family: var(--Font-Family);
    font-size: 16px;
    font-weight: 500;
    line-height: var(--LIne-Height-24, 24px);
    letter-spacing: -0.4px;
}
.legal-refs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-refs a:hover { color: var(--Navy, #002D58); }

/* 약관 페이지에서는 랜딩 상단 앵커 메뉴 숨김(이 CSS 는 약관/방침 페이지에서만 로드) */
.nav-center { display: none; }

@media (max-width: 820px) {
    .legal-header { margin-top: 56px; padding: 56px 16px; }
    .legal-header h1 { font-size: 24px; letter-spacing: -0.6px; }
    .legal-contents { padding: 40px 16px 60px 16px; gap: 18px; }
    .legal-body { gap: 22px; }
    .legal-block h3 { font-size: 16px; letter-spacing: -0.4px; }
    .legal-table-wrap { margin-left: 0; }
    .data-table.legal-table { min-width: 560px; }
    .legal-refs { padding-left: 22px; }
    .legal-refs li { font-size: 14px; line-height: 150%; letter-spacing: -0.35px; }
    .legal-block > div,
    .legal-num > div,
    .legal-item,
    .legal-intro { font-size: 14px; line-height: 150%; letter-spacing: -0.35px; }
}