/* 자동 생성 파일 — 원본 redesign/legal/legal.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* legal.css — 이용약관 · 개인정보처리방침 공용(기준 문서 "E3 최종" 배치).
   회색 페이지(var(--bg)) + 문서 탭 + 머리(아이브로 · 제목 · 잉크 배지 2).
   1100 이상 2단: 왼쪽 260(문서 탭 → 아이브로 → 제목 → 배지 2 → 목차, 목차만 헤더 아래 고정) · 오른쪽 조항 흰 카드 최대 760, 사이 72.
   1099 이하: 한 칸 + 헤더 아래 고정 "목차 N개 항목 · 펼치기" 막대 / 600 이하: 좌우 16 · 카드 안쪽 22 · 18 · 2열 묶음 카드 1열.
   공용 헤더 · 푸터 · 토큰은 d3/d.css · shared/type.css. 모든 선택자는 .lp(body) 범위 */
.lp {
  --nav-h: 76px;        /* 공용 헤더 높이(d.css .d-nav-in) — 760 이하 64 */
  --mtoc-h: 48px;       /* 1099 이하 목차 막대 높이 */
  --lp-mute: #6b707a;   /* 목차 번호 · 번호 목록 번호 */
  --lp-dot: #b4b9c3;    /* 목록 점 */
  --lp-line: rgba(22, 24, 29, .08);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* 목차 이동 — 모션 줄이기 설정이면 바로 이동 */

/* 본문 폭 — 공용 헤더 로고와 같은 선(d-wrap과 같은 폭), 600 이하 좌우 16 */
.lp .lp-w { width: var(--wrap); margin-inline: auto; }

/* ── 문서 탭(실제로는 각 페이지 링크) — 현재 = 잉크 알약, 나머지 = 흰 알약 + 옅은 그림자 ── */
.lp .lp-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 40px; }
.lp .lp-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; border-radius: 99px; background: var(--surface); box-shadow: 0 1px 2px rgba(22, 24, 29, .06); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-3); text-decoration: none; }
.lp .lp-tab:hover { color: var(--ink); }
.lp .lp-tab[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }

/* ── 머리(바탕 없음) — 아이브로 → 제목(폼 페이지 제목 단계 40 · 1100 이하 36 · 900 이하 32 · 760 이하 30) → 배지 2 ── */
.lp .lp-head { padding: 28px 0 36px; }
.lp .lp-ey { font-size: var(--t-ey); font-weight: 600; line-height: 1.4; color: var(--t-ey-c); }
.lp .lp-h1 { margin-top: var(--t-gap-ey); font-size: 40px; font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--ink); }
.lp .lp-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.lp .lp-badge { padding: 11px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; }

/* ── 본문 칸 격자 — 1100 이상은 아래 "1100 이상" 블록이 main 격자로 대신함(이 .lp-grid는 display: contents), 1099 이하는 한 칸 ── */
.lp .lp-grid { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 72px; align-items: start; padding-bottom: 96px; }

/* 목차(왼쪽, 헤더 아래 고정) — 화면보다 길면 목차 안에서 지금 조항을 따라 스크롤(legal.js) */
.lp .lp-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-top: 28px; }
.lp .lp-toc-h { padding-left: 12px; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--lp-mute); }
.lp .lp-toc-list { display: grid; gap: 2px; }
.lp .lp-toc-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); text-decoration: none; transition: background-color .2s, color .2s; }
.lp .lp-toc-list a > span { font-size: 12px; color: var(--lp-mute); font-variant-numeric: tabular-nums; }
.lp .lp-toc-list a:hover { background: var(--surface); }
.lp .lp-toc-list a.is-on { background: var(--surface); color: var(--ink); font-weight: 700; }
.lp .lp-toc-list a.is-on > span { color: var(--brand-deep); }

/* 1099 이하 목차 막대 — 넓은 화면에서는 숨김. 펼친 목록은 불투명(막대 흐림 안에 겹친 흐림은 뒤 글자가 비쳐 보임) */
.lp .lp-mtoc { display: none; }

/* ── 본문: 조항마다 흰 카드(모서리 20 · 안쪽 28 · 32 · 사이 12) ── */
.lp .lp-body { display: grid; gap: 12px; padding-top: 28px; min-width: 0; }
.lp .lp-sec { padding: 28px 32px; border-radius: 20px; background: var(--surface); scroll-margin-top: calc(var(--nav-h) + 16px); }
.lp .lp-sec > :last-child { margin-bottom: 0; }
.lp .lp-sec > :first-child { margin-top: 0; }

/* 조항 제목 — 번호(#96103f) + 제목(잉크) 한 줄, 같은 크기 22 굵게. 번호 없는 항목(부칙 · 회사 정보)은 제목만 */
.lp .lp-h2 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.lp .lp-no { flex: none; color: var(--brand-deep); }
.lp .lp-sec h3 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ink); }

/* 본문 글 15.5 · 1.85 · 보조 잉크, 굵은 글씨 잉크, 링크 잉크 밑줄 */
.lp .lp-sec p, .lp .lp-sec li { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.lp .lp-sec p { margin-bottom: 10px; }
.lp .lp-sec strong { font-weight: 700; color: var(--ink); }
.lp .lp-sec a { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lp .lp-sec a:hover { text-decoration-thickness: 2px; }

/* 번호 목록(번호 회색) · 점 목록(옅은 회색 작은 점) */
.lp .lp-sec ol { list-style: decimal; padding-left: 22px; margin: 4px 0 14px; }
.lp .lp-sec ol > li { padding-left: 4px; margin-bottom: 6px; }
.lp .lp-sec ol > li::marker { color: var(--lp-mute); font-weight: 600; }
.lp .lp-sec ul { display: grid; gap: 6px; margin: 4px 0 14px; }
.lp .lp-sec ul > li { position: relative; padding-left: 16px; }
.lp .lp-sec ul > li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-dot); }

/* 방침 머리말 두 문단 = 첫 흰 카드 */
.lp .lp-intro p { margin-bottom: 0; line-height: 1.8; }
.lp .lp-intro p + p { margin-top: 6px; }

/* 카드 안 묶음 — 2열 이름표 카드(이름 위 작게 · 값 아래, 콜론 없음): 약관 회사 정보 · 방침 개인정보 보호책임자 */
.lp .lp-box { margin: 14px 0; }
.lp .lp-sec .lp-box-h { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.lp .lp-sec ul.lp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp .lp-sec ul.lp-kv > li { padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 14.5px; line-height: 1.5; }
.lp .lp-sec ul.lp-kv strong { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
/* 방침 11 신고 기관 4곳 — 2열 카드(기관명 굵게 / 번호 · 사이트) */
.lp .lp-sec ul.lp-agency { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp .lp-sec ul.lp-agency > li { padding: 16px 18px; border-radius: 14px; background: var(--bg); font-size: 14px; line-height: 1.6; }
.lp .lp-sec ul.lp-agency strong { display: block; font-size: 15px; }
.lp .lp-sec ul.lp-kv > li::before, .lp .lp-sec ul.lp-agency > li::before { content: none; }
/* 이용약관 버전 — 머리 "현재 약관 보기"(이전 버전 보관본, 흰 알약) · 맨 끝 "시행일" 목록(legal.js가 그림, 오른쪽 정렬) */
.lp .lp-badge--link { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .14); text-decoration: none; }
.lp .lp-badge--link:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lp .lp-ver { display: flex; justify-content: flex-end; padding-top: 8px; }
.lp .lp-ver-in { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.lp .lp-ver select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 9px 38px 9px 14px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(22, 24, 29, .14); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2316181d%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center / 16px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.lp .lp-ver select:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.lp .lp-ver select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 환불 규정(body.lp-solo) — 홈페이지 메뉴 · 문서 탭에 걸지 않는 따로 페이지: 헤더 가운데 메뉴(데스크톱 · 모바일 드로어) 숨김, 문서 탭 없이 머리부터 */
.lp-solo .d-nav-links, .lp-solo .d-nav-dlinks { display: none; }
.lp-solo .lp-head { padding-top: 40px; }
@media (min-width: 1100px) { .lp-solo .lp-head { padding-top: 0; } }
/* 환불 규정 제2조 요금 구성 표 — 머리 행 회색 띠 · 행 사이 옅은 선 · 600 이하는 행마다 묶음 카드(항목 → 내용 → 환불 기준) */
.lp .lp-tbl-w { margin: 10px 0 4px; }
.lp .lp-tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.lp .lp-tbl th, .lp .lp-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--lp-line); text-align: left; vertical-align: top; }
.lp .lp-tbl thead th { padding-block: 10px; background: var(--bg); border-bottom: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.lp .lp-tbl thead th:first-child { border-radius: 10px 0 0 10px; } .lp .lp-tbl thead th:last-child { border-radius: 0 10px 10px 0; }
.lp .lp-tbl tbody th { width: 128px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lp .lp-tbl td:last-child { width: 30%; }
.lp .lp-tbl b { font-weight: 700; color: var(--ink); }
@media (max-width: 600px) {
  .lp .lp-tbl thead { display: none; }
  .lp .lp-tbl, .lp .lp-tbl tbody, .lp .lp-tbl tr, .lp .lp-tbl th, .lp .lp-tbl td { display: block; width: auto; }
  .lp .lp-tbl tbody { display: grid; gap: 10px; }
  .lp .lp-tbl tr { padding: 14px 16px; border-radius: 14px; background: var(--bg); }
  .lp .lp-tbl th, .lp .lp-tbl td { padding: 0; border: 0; }
  .lp .lp-tbl tbody th { margin-bottom: 4px; font-size: 15px; white-space: normal; }
  .lp .lp-tbl td:last-child { width: auto; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lp-line); font-size: 14px; color: var(--ink-3); }
  .lp .lp-tbl td:last-child::before { content: "환불 기준"; display: block; font-size: 12.5px; font-weight: 600; }
}

/* ── 1100 이상: 2단 — 왼쪽 380(문서 탭 → 아이브로 → 제목 → 배지 2 → 목차) · 사이 40 · 오른쪽 조항 카드 = 나머지 전부(오른쪽 끝 = 헤더 오른쪽 끝) ──
   main을 격자로 쓰고 .lp-w 두 겹은 display: contents로 풀어 탭 · 머리 · 목차 · 본문을 바로 격자 칸에 놓음(HTML 순서 = 읽는 순서 그대로).
   오른쪽 첫 카드 위 = 문서 탭 위(둘 다 main 안쪽 위 40에서 시작). 탭 · 제목 · 배지는 페이지와 함께 올라가고,
   목차만 헤더 아래 고정 — 목차 칸(3행)이 본문 끝까지 이어져서 끝까지 붙어 있음.
   왼쪽 칸 안: 제목 32 한 줄 · 배지 2개 한 줄 · 목차 항목 한 줄(번호 칸 고정 폭, 넘치면 말줄임) */
@media (min-width: 1100px) {
  .lp main { display: grid; width: var(--wrap); margin-inline: auto; grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; align-items: start; padding: 40px 0 96px; }
  .lp main > .lp-w { display: contents; }
  .lp .lp-tabs { grid-column: 1; grid-row: 1; padding-top: 0; }
  .lp .lp-head { grid-column: 1; grid-row: 2; }
  .lp main .lp-h1 { font-size: 32px; white-space: nowrap; }   /* 1100 · 900 제목 단계보다 앞섬(선택자 더 구체적) */
  .lp .lp-meta { flex-wrap: nowrap; gap: 8px; }
  .lp .lp-badge { padding: 10px 14px; border-radius: 10px; font-size: 14px; white-space: nowrap; }
  .lp .lp-toc { grid-column: 1; grid-row: 3; padding-top: 0; }
  .lp .lp-toc .lp-toc-list a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lp .lp-toc .lp-toc-list a > span { display: inline-block; width: 44px; vertical-align: baseline; }
  .lp .lp-body { grid-column: 2; grid-row: 1 / 4; padding-top: 0; }
}

/* ── 1100 · 900: 제목 단계(회원가입 · 도입 상담과 같음) ── */
@media (max-width: 1100px) { .lp .lp-h1 { font-size: 36px; } }
@media (max-width: 900px) { .lp .lp-h1 { font-size: 32px; } }
@media (max-width: 760px) { .lp { --nav-h: 64px; } .lp .lp-h1 { font-size: 30px; } }

/* ── 1099 이하: 한 칸 + 헤더 아래 고정 목차 막대(옅은 회색 반투명) ── */
@media (max-width: 1099px) {
  .lp .lp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 72px; }
  .lp .lp-toc { display: none; }
  .lp .lp-head { padding-bottom: 24px; }
  .lp .lp-body { padding-top: 16px; }
  .lp .lp-sec { scroll-margin-top: calc(var(--nav-h) + var(--mtoc-h) + 12px); }
  .lp .lp-mtoc { display: block; position: sticky; top: var(--nav-h); z-index: 15; background: rgba(245, 246, 248, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--lp-line), 0 -1px 0 var(--lp-line); }
  .lp .lp-mtoc-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: var(--mtoc-h); padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; }
  .lp .lp-mtoc-btn b { font-weight: 700; }
  .lp .lp-mtoc-st { display: inline-flex; align-items: center; gap: 6px; padding-right: 3px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
  .lp .lp-mtoc-st::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
  .lp .lp-mtoc.is-open .lp-mtoc-st::after { margin-top: 3px; transform: rotate(-135deg); }
  .lp .lp-mtoc-pop { position: absolute; left: 0; right: 0; top: 100%; max-height: min(60vh, calc(100vh - var(--nav-h) - var(--mtoc-h) - 24px)); overflow: auto; overscroll-behavior: contain; padding: 4px 0 12px; background: var(--bg); box-shadow: 0 1px 0 var(--lp-line), 0 18px 30px -18px rgba(22, 24, 29, .28); }
  .lp .lp-mtoc-pop[hidden] { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp .lp-mtoc { background: var(--bg); }
}

/* ── 600 이하: 좌우 16 · 카드 안쪽 22 · 18 · 모서리 16 · 2열 묶음 카드 1열 ── */
@media (max-width: 600px) {
  .lp .lp-w { width: calc(100% - 32px); }
  .lp .lp-tabs { padding-top: 28px; }
  .lp .lp-head { padding-top: 24px; }
  .lp .lp-badge { padding: 9px 14px; font-size: 14px; }
  .lp .lp-sec { padding: 22px 18px; border-radius: 16px; }
  .lp .lp-h2 { font-size: 19px; }
  .lp .lp-sec p, .lp .lp-sec li { font-size: 15px; }
  .lp .lp-sec ul.lp-kv > li { font-size: 14.5px; }
  .lp .lp-sec ul.lp-agency > li { font-size: 14px; }
  .lp .lp-sec ul.lp-kv, .lp .lp-sec ul.lp-agency { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { .lp .lp-toc-list a { transition: none; } }