/* 정책·소개 페이지 공용 스타일. 앱과 분리된 정적 페이지라 앱의 CSS 변수를 쓸 수 없어 값을 직접 적는다. (색을 바꿀 때는 src/index.css 의 토큰과 함께 맞춘다) */ /* ── 테마 ──────────────────────────────────────────────────────── 세 단계로 정한다 (뒤가 앞을 이긴다): ① 기본 다크 ② 기기 설정 prefers-color-scheme ③ **사이트에서 고른 값** html[data-theme] — 각 페이지 의 짧은 스크립트가 localStorage('dobox-theme') 를 읽어 붙인다. 본 화면에서 라이트로 보던 사람이 정책 문서만 까맣게 보는 일이 없어야 한다. */ :root { color-scheme: dark; --bg: #0b0e14; --card: #131722; --border: #1f2633; --text: #e6e9ef; --sub: #8a93a5; --accent: #ffd54d; /* 글자용 앰버 — 라이트에서 흰 바탕 대비를 맞추려면 앰버를 낮춰야 한다 */ --accent-text: #ffd54d; } @media (prefers-color-scheme: light) { :root { color-scheme: light; --bg: #f4f6f9; --card: #ffffff; --border: #e4e8ee; --text: #1a1f2b; --sub: #6b7484; --accent: #e8a800; --accent-text: #a06e00; } } /* 사이트에서 고른 값이 기기 설정을 이긴다 */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b0e14; --card: #131722; --border: #1f2633; --text: #e6e9ef; --sub: #8a93a5; --accent: #ffd54d; --accent-text: #ffd54d; } :root[data-theme='light'] { color-scheme: light; --bg: #f4f6f9; --card: #ffffff; --border: #e4e8ee; --text: #1a1f2b; --sub: #6b7484; --accent: #e8a800; --accent-text: #a06e00; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', sans-serif; font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; } .wrap { /* 한 줄 70~80자가 읽기 편한 폭이다 — 넓히면 눈이 다음 줄 첫 글자를 놓친다 */ max-width: 780px; margin: 0 auto; padding: 28px 20px 72px; } .back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 700; margin-bottom: 22px; } .back:hover { text-decoration: underline; } h1 { font-size: 26px; font-weight: 800; letter-spacing: 0.3px; margin-bottom: 6px; } .lead { color: var(--sub); font-size: 14px; margin-bottom: 26px; } /* 절 제목 — 위쪽 실선으로 문서를 덩어리로 끊는다. 긴 문서에서 제목만 훑어 원하는 절을 찾을 수 있어야 한다. */ h2 { font-size: 17px; font-weight: 800; color: var(--text); margin: 36px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); } /* 첫 h2 는 lead 바로 아래라 실선이 겹쳐 보인다 */ .lead + h2 { margin-top: 8px; padding-top: 0; border-top: none; } h3 { font-size: 14.5px; font-weight: 700; color: var(--accent-text); margin: 20px 0 6px; } p { margin-bottom: 12px; } ul { margin: 0 0 16px 4px; padding-left: 18px; } li { margin-bottom: 6px; padding-left: 2px; } li::marker { color: var(--sub); } a { color: var(--accent-text); } /* 표는 좁은 화면에서 **표만** 가로로 스크롤한다 (본문은 가로 스크롤 금지) */ .table-wrap { overflow-x: auto; margin: 12px 0 20px; } table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; /* 모서리를 둥글게 하려면 셀 경계를 지우고 바깥에서 그려야 한다 */ border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .table-wrap table { margin: 0; } th, td { border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; } tr:last-child th, tr:last-child td { border-bottom: none; } th { background: var(--card); font-weight: 700; white-space: nowrap; font-size: 13px; color: var(--sub); } /* 줄무늬 — 열이 많은 표에서 눈이 행을 놓치지 않게 */ tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--card) 55%, transparent); } strong { color: var(--text); font-weight: 700; } .note { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 14px; color: var(--sub); margin: 18px 0; } .updated { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--sub); } .docnav { margin-top: 18px; font-size: 13px; color: var(--sub); } .docnav a { margin-right: 12px; }