/* 법적 고지 페이지(약관·개인정보·면책) 전용 스타일. * * 2026-08-30까지 이 파일은 **독립 시스템**이었다 — 자기 `:root`에 색과 글꼴을 * 다시 선언하고 마스트헤드까지 따로 그렸다. 그러다 값이 갈렸다. 실측: * * 토큰 콘솔(tokens.css) 여기(옛 legal.css) * --accent #4fa8ff #42a5ff ← 옛 액센트 * --muted #b3bdc7 #929ba3 ← AA 미달로 이미 올렸던 값 * --faint #8b96a1 #5f6870 ← 기준일 줄이 3.5:1 * --sans Pretendard Inter ← Pretendard 0개 * * 게다가 search.js가 모든 페이지의 `.mast-actions`에 검색창을 꽂는데 여기엔 * 그 스타일이 없어서, 약관 3장에서만 **브라우저 기본 입력칸**(높이 21px)이 * 떠 있었다. * * 그래서 monitor.css → tokens.css → legal.css 순으로 싣고, 이 파일은 **문서 * 고유의 것만** 갖는다. 셸(마스트헤드·검색·포커스 링·12px 바닥)은 공용에서 * 온다. 원래 이 파일에 있던 "의존성을 만들지 않는다"는 원칙은 **대시보드 * JS**를 두고 한 말이었고, 스타일시트는 스크립트 없이도 읽히는 데 지장이 없다. */ /* 문서는 훑는 화면이 아니라 읽는 글이다. 콘솔보다 행간을 넓게 준다. */ body { line-height: 1.75; } /* 브랜드 부제는 콘솔과 같이 감춘다. 두 줄 로크업은 마스트헤드를 114px까지 밀어 올렸고, 10px 회색 글자라 대비도 3.31:1이었다. */ .brand small { display: none; } /* 2026-09-01: 마스트헤드가 콘솔 13장과 같아졌다. * * 여기 있던 `.brand strong` 크기와 `.mast-nav` 되살리기는 **이 페이지들만 * 다른 머리를 쓰던 시절의 보정**이었다. 이제 같은 `.view-switch`를 쓰고 셸 * 규칙이 monitor.css에 있으므로 보정할 것이 없다. 실측(1440px, /privacy): * 머리 36 → 58px, 좌우 여백 0 → 60px, 아래 선 없음 → 1px, search.js가 꽂는 * 입력칸 16 → 32px — 전부 /kr과 같은 값이다. */ main { max-width: 780px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); } .doc-kicker { font-size: var(--fs-xs); letter-spacing: .16em; font-weight: 700; color: var(--accent); margin: 0 0 var(--sp-2); } h1 { font-size: var(--fs-xxl); line-height: 1.25; margin: 0 0 var(--sp-3); } /* 기준일 줄. 여기는 이 문서가 언제 것인지 말하는 자리라 흐리면 안 된다 — 옛 값(--faint, 등폭)은 3.5:1이었고 한글이 등폭 스택에 빠져 글꼴이 갈렸다. */ .doc-meta { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); } .doc-lede { color: var(--ink-2); margin: 0 0 var(--sp-6); } h2 { font-size: var(--fs-xl); letter-spacing: -.02em; margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--line); } h3 { font-size: var(--fs-lg); margin: var(--sp-5) 0 var(--sp-2); } p { margin: 0 0 var(--sp-3); } ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); } li { margin-bottom: var(--sp-2); } a { color: var(--accent); } strong { font-weight: 640; } /* ``는 식별자 자리다 — `xyz:SP500`, `/api/status`. 한글 UI 문구는 여기 넣지 않는다(등폭 스택에 한글이 없어 글꼴이 갈린다). 그 자리에는 `.ui-state`를 쓴다. */ code { font-family: var(--mono); font-size: var(--fs-xs); padding: 1px var(--sp-1); border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); } /* 화면에 뜨는 상태 낱말을 글 속에서 인용할 때. 본문 글꼴 그대로 두고 색만 준다. */ .ui-state { font-weight: 640; font-style: normal; color: var(--ink); padding: 1px var(--sp-1); border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); } /* 왼쪽 3px 띠 대신 테두리 전체를 호박색으로 옅게 물들이고 면도 함께 씻는다 — "주의"라는 뜻은 더 또렷해지고 표식은 사라진다. */ .callout { border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); background: color-mix(in srgb, var(--amber) 6%, var(--panel)); border-radius: var(--r-md); padding: var(--sp-4); margin: 0 0 var(--sp-5); } .callout p:last-child { margin-bottom: 0; } .table-scroll { overflow-x: auto; margin: 0 0 var(--sp-4); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 480px; } th, td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; } footer.doc-footer { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); } footer.doc-footer a { margin-right: var(--sp-4); } /* KO/EN은 DOM에 함께 두고 전환한다. 긴 산문은 JS 사전보다 이 편이 정확하고, 스크립트가 실패해도 최소한 한 언어는 반드시 읽힌다. 전환은 클래스로만 한다. `[lang="en"]`을 그대로 쓰면 토글이 에도 걸려 문서 전체가 사라진다. lang 속성은 스크린리더를 위해 그대로 둔다. */ .lang-en { display: none; } html[data-lang="en"] .lang-ko { display: none; } html[data-lang="en"] .lang-en { display: revert; } @media (max-width: 560px) { main { padding: var(--sp-5) var(--sp-3) var(--sp-7); } h1 { font-size: var(--fs-xl); } }