/* Shared styling for the two standalone legal pages (privacy.html, terms.html). They are plain static files in public/ rather than app routes on purpose: the Google OAuth consent screen wants URLs that resolve for a reviewer who never loads the editor, and the CloudFront viewer function rewrites every extension- less path to /index.html — so these keep their .html and need no JS at all. Tokens copied from src/styles.css; two files this small don't share a build. */ :root { --bg: #eef1f6; --panel: #ffffff; --border: #e3e8f0; --text: #1b2534; --text-soft: #62708a; --text-mute: #8a94a6; --accent: #2f6bff; --shadow: 0 1px 3px rgba(16, 26, 46, 0.12); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.75 system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif; -webkit-text-size-adjust: 100%; } .wrap { max-width: 760px; margin: 0 auto; padding: 28px 20px 80px; } header.site { display: flex; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } header.site img { width: 28px; height: 28px; border-radius: 7px; } header.site a.home { font-weight: 600; color: var(--text); text-decoration: none; } header.site .spacer { flex: 1; } header.site nav a { color: var(--text-soft); text-decoration: none; font-size: 13.5px; margin-left: 14px; } header.site nav a:hover { color: var(--accent); } header.site nav a.langswitch { color: var(--accent); } /* One language at a time. Both halves are in the markup; the head script picks which shows by stamping `data-lang` on before first paint. With JS off the attribute never lands and both stay visible — the right failure mode for a page whose only job is to be readable. */ html[data-lang='ko'] [data-when='en'], html[data-lang='en'] [data-when='ko'] { display: none; } html[data-lang] .divider { display: none; } article { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 32px 34px; margin-top: 24px; } h1 { font-size: 26px; line-height: 1.3; margin: 0 0 6px; } h2 { font-size: 17px; margin: 32px 0 8px; padding-top: 4px; } h2:first-of-type { margin-top: 24px; } .meta { color: var(--text-mute); font-size: 13px; margin: 0; } p, li { color: var(--text-soft); } p { margin: 10px 0; } ul { margin: 10px 0; padding-left: 20px; } li { margin: 5px 0; } strong { color: var(--text); } a { color: var(--accent); } code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 13px; } .divider { margin: 44px 0 0; border: 0; border-top: 1px solid var(--border); } footer.site { margin-top: 22px; text-align: center; color: var(--text-mute); font-size: 13px; } footer.site a { color: var(--text-mute); } @media (max-width: 560px) { article { padding: 24px 20px; } h1 { font-size: 22px; } }