/* 세 페이지가 함께 쓰는 최소한의 스타일. 폰트 파일도, 외부 스크립트도 불러오지 않는다. 개인정보 처리방침 페이지가 제3자에게 접속 기록을 넘기면 그 자체로 방침과 어긋난다. 색은 전부 토큰으로만 정한다. 개별 규칙에서 색을 직접 쓰지 않으면 배경이 바뀌는 곳(다크 모드, 랜딩의 검정 띠)에서 글자만 따로 남아 사라지는 사고가 나지 않는다. 모든 글자/배경 조합은 WCAG AA(4.5:1) 이상이다. 강조색은 앱 아이콘의 코랄이다. 앱 화면의 인디고는 스크린샷 안에만 둔다. */ /* 지원·개인정보 처리방침 같은 문서 페이지는 시스템 라이트/다크를 따른다. */ :root { color-scheme: light dark; --bg: #faf8f5; --card: #ffffff; --ink: #171415; --muted: #5f5857; --line: #ebe5df; --brand: #c0403a; --brand-hover: #a8352f; --accent: #c0403a; --accent-hover: #a8352f; --accent-ink: #ffffff; /* 로고 타일 테두리. 아이콘 자체 배경이 흰색에 가까워 모드별로 테두리만 바꾼다. */ --mark-ring: #1714151a; --mark-shadow: #1e121024; } @media (prefers-color-scheme: dark) { :root { --bg: #121013; --card: #1c191c; --ink: #f4f0ef; --muted: #b0a5a3; --line: #302b2e; /* 어두운 배경에서는 밝은 코랄이 읽힌다. 코랄 위 글자는 어두운 잉크로 뒤집는다. */ --brand: #ff9c93; --brand-hover: #ffb3ab; --accent: #ff8a80; --accent-hover: #ffa39b; --accent-ink: #241619; --mark-ring: #ffffff24; --mark-shadow: #00000080; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Segoe UI", sans-serif; word-break: keep-all; overflow-wrap: anywhere; } .wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 96px; } header.site { margin-bottom: 40px; } /* 브랜드: 앱 아이콘 타일 + 워드마크 */ .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none; letter-spacing: -.01em; } .brand-mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px var(--mark-ring), 0 1px 3px var(--mark-shadow); } h1 { font-size: 30px; line-height: 1.35; margin: 14px 0 6px; } h2 { font-size: 19px; margin: 40px 0 10px; } h3 { font-size: 16px; margin: 24px 0 6px; } .lede { color: var(--muted); margin: 0 0 8px; } .updated { color: var(--muted); font-size: 14px; margin: 0; } p, li { color: var(--ink); } ul { padding-left: 20px; } li { margin: 6px 0; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin: 18px 0; } .card h3:first-child, .card h2:first-child { margin-top: 0; } /* CSP가 인라인 style 속성을 막으므로(default-src 'self') 여백도 클래스로 준다. */ .tight { margin: 0; } table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; } .scroll { overflow-x: auto; } a { color: var(--brand); } code { font-size: 14px; background: var(--bg); padding: 2px 6px; border-radius: 6px; } footer.site { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; gap: 18px; flex-wrap: wrap; } /* ───────────────────────── 랜딩 페이지 ───────────────────────── 랜딩은 시스템 다크 모드를 따르지 않고 한 가지 모습으로 고정한다. 흰 바탕에 검정 띠를 중간중간 넣어 리듬을 만드는 디자인이라, 통째로 검게 뒤집히면 그 대비가 사라지고 페이지 전체가 어둡게 가라앉는다. 띠마다 같은 이름의 토큰을 다시 정의한다. 그 안의 카드·글자·버튼은 토큰만 보므로 흰 띠에 두든 검정 띠에 두든 알아서 맞는 색이 된다. */ :root:has(body.landing) { color-scheme: light; } body.landing, .band-paper { --bg: #ffffff; --card: #f8f4ee; --ink: #171415; --muted: #5f5857; --line: #ece6e0; --brand: #c0403a; --brand-hover: #a8352f; /* 흰 띠의 주 버튼은 검정. 코랄은 강조 글자와 빛번짐에만 아껴 쓴다. */ --accent: #171415; --accent-hover: #3a3334; --accent-ink: #ffffff; --mark-ring: #1714151a; --mark-shadow: #1e121024; --glow-strength: .62; } .band-cream { --bg: #f8f4ee; --card: #ffffff; --ink: #171415; --muted: #5f5857; --line: #e8e0d7; --brand: #b83b35; --brand-hover: #a8352f; --accent: #171415; --accent-hover: #3a3334; --accent-ink: #ffffff; --glow-strength: .62; } .band-night { --bg: #171415; --card: #221e1f; --ink: #f5f1ed; --muted: #bdb4b1; --line: #3a3334; --brand: #ff9c93; --brand-hover: #ffb3ab; --accent: #ffffff; --accent-hover: #ece6e0; --accent-ink: #171415; --glow-strength: .78; } .band { background: var(--bg); color: var(--ink); } /* 빛번짐이 화면 밖으로 번져 가로 스크롤을 만들지 않게 띠 단위로 자른다. clip 을 모르는 브라우저를 위해 hidden 을 먼저 둔다. */ .band { overflow-x: hidden; overflow-x: clip; } .wrap-wide { width: min(1120px, calc(100% - 44px)); margin: 0 auto; } .nav-wrap { width: min(1120px, calc(100% - 44px)); margin: 0 auto; height: 74px; display: flex; align-items: center; gap: 28px; } .nav-wrap nav { display: flex; gap: 26px; margin-left: auto; } .nav-wrap nav a, .footer-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: -.005em; } .nav-wrap nav a:hover, .footer-links a:hover { color: var(--ink); } .nav-cta { background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 8px 14px; text-decoration: none; font-size: 13px; font-weight: 700; } .nav-cta:hover { background: var(--accent-hover); } /* 언어 선택기. 모바일에서는 주메뉴가 숨지만 이건 남아야 하므로