/* E2X 법적 고지 — 미니멀 플레인 텍스트 스타일 대형 앱 약관 페이지(x.ai/legal 등) 톤. 카드/아이콘/그라데이션 없음. */ :root { --text: #1a1a1a; --text-secondary: #6b6b6b; --text-tertiary: #9a9a9a; --border: #e6e6e6; --border-strong: #d4d4d4; --bg: #ffffff; --bg-subtle: #fafafa; --bg-note: #f7f7f8; --accent: #b1202d; --todo-bg: #fff3cd; --todo-border: #d39e00; --todo-text: #7a5c00; --max-width: 720px; color-scheme: light; } /* ─────────────────────────────────────────────── 다크 테마 적용 기준은 각 페이지 의 인라인 스크립트가 결정한다: ① 저녁/야간 시간대(기본 로컬 18:00~06:00) 또는 ② OS 다크 모드(prefers-color-scheme: dark) 이면 로 설정. JS 미동작 시에도 OS가 다크면 아래 media 쿼리로 폴백된다. 이면 항상 라이트로 강제된다. ─────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text: #e9e9ec; --text-secondary: #9a9aa3; --text-tertiary: #66666e; --border: #262629; --border-strong: #3a3a40; --bg: #0d0d0f; --bg-subtle: #161619; --bg-note: #161618; --accent: #ff6b70; --todo-bg: rgba(211, 158, 0, 0.14); --todo-border: #8a6f24; --todo-text: #e6c668; color-scheme: dark; } } :root[data-theme="dark"] { --text: #e9e9ec; --text-secondary: #9a9aa3; --text-tertiary: #66666e; --border: #262629; --border-strong: #3a3a40; --bg: #0d0d0f; --bg-subtle: #161619; --bg-note: #161618; --accent: #ff6b70; --todo-bg: rgba(211, 158, 0, 0.14); --todo-border: #8a6f24; --todo-text: #e6c668; color-scheme: dark; } * { box-sizing: border-box; } body { transition: background-color 0.25s ease, color 0.25s ease; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif; font-size: 16px; line-height: 1.75; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ── 헤더 ── */ .site-header { border-bottom: 1px solid var(--border); } .site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; white-space: nowrap; } .brand:hover { opacity: 0.7; } .header-back { font-size: 14px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .header-back:hover { color: var(--text); } /* ── 본문 ── */ main { max-width: var(--max-width); margin: 0 auto; padding: 56px 24px 96px; } .doc-title { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 14px; } .doc-subtitle { color: var(--text-secondary); font-size: 16px; margin: 0 0 20px; } .doc-meta { color: var(--text-secondary); font-size: 14px; margin: 0; } .doc-meta + .doc-meta { margin-top: 2px; } /* 시행일자 등 게시 전 입력 필요 플레이스홀더 */ .todo-marker { display: inline-block; background: var(--todo-bg); border: 1px dashed var(--todo-border); color: var(--todo-text); font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 4px; letter-spacing: 0; } /* 헤더 메타 영역 구분선 */ .doc-header { padding-bottom: 28px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } /* ── 섹션 ── */ section { margin-top: 44px; } section:first-of-type { margin-top: 36px; } h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; margin: 0 0 14px; scroll-margin-top: 24px; } h3 { font-size: 16px; font-weight: 700; margin: 26px 0 8px; } p { margin: 0 0 16px; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0 0 16px; padding-left: 20px; } li { margin: 6px 0; } li::marker { color: var(--text-secondary); } a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; } a:hover { text-decoration-color: var(--text); } strong { font-weight: 700; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.35em; } hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } /* ── 인용/안내 노트 ── */ blockquote { margin: 18px 0; padding: 14px 18px; background: var(--bg-note); border-left: 3px solid var(--border-strong); border-radius: 0 6px 6px 0; color: var(--text-secondary); font-size: 15px; } blockquote p { margin: 0 0 8px; } blockquote p:last-child { margin: 0; } blockquote strong { color: var(--text); } /* ── 표 ── */ .table-wrap { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; } th, td { text-align: left; vertical-align: top; padding: 10px 14px; border: 1px solid var(--border); } th { background: var(--bg-subtle); font-weight: 700; white-space: nowrap; } td strong { font-weight: 700; } /* ── 목차 ── */ .toc { margin: 28px 0 8px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-subtle); } .toc__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 10px; } .toc ol, .toc ul { margin: 0; columns: 2; column-gap: 28px; } .toc ol { padding-left: 20px; } .toc ul { padding-left: 0; list-style: none; } .toc li { margin: 4px 0; break-inside: avoid; } .toc a { text-decoration: none; color: var(--text-secondary); font-size: 14px; } .toc a:hover { color: var(--text); text-decoration: underline; } /* ── 법적 문서 인덱스 (루트) ── */ .index-intro { color: var(--text-secondary); font-size: 16px; margin: 0 0 36px; } .doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); } .doc-list li { margin: 0; } .doc-list a { display: block; padding: 22px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); transition: padding-left 0.15s ease; } .doc-list a:hover { padding-left: 10px; } .doc-list__title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .doc-list__title::after { content: "→"; color: var(--text-tertiary); font-weight: 400; margin-left: auto; } .doc-list__desc { margin: 4px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; } /* ── 푸터 ── */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); } .site-footer__inner { max-width: var(--max-width); margin: 0 auto; padding: 36px 24px 44px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 22px; } .footer-nav a { font-size: 13px; color: var(--text-secondary); text-decoration: none; } .footer-nav a:hover { color: var(--text); } .footer-brand { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .footer-biz { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.8; margin: 0 0 12px; } .footer-biz span { margin-right: 6px; } .footer-biz a { color: var(--text-tertiary); } .footer-copy { font-size: 12px; color: var(--text-tertiary); margin: 0; } /* ── 반응형 ── */ @media (max-width: 600px) { main { padding: 40px 20px 72px; } .doc-title { font-size: 26px; } h2 { font-size: 18px; } .toc ol { columns: 1; } .site-header__inner { padding: 16px 20px; } .site-footer__inner { padding: 32px 20px 40px; } }