/* 공개 페이지(홈 제외) R2 가벼운 맞춤, 2026-10-27 (G11-11, 26, 27, 38, 39).
 * 홈(index.html)과 그것이 불러오는 파일은 이 파일을 싣지 않는다. 404, 회사소개, 데모, 로그인 계열, 법무 문서만 마지막에 싣는다.
 * 새 문구 없음. 값은 tokens.css의 --r2-* 토큰만 읽는다(홈과 공용인 tokens.css, site-chrome.css는 건드리지 않고 이 페이지들에서만 덮는다).
 * 규칙: 흰 바탕, 회색 단계, 카드 16 / 단추와 입력 12, 주 단추 진한 주황 바탕 + 흰 글자, 강조색은 주 단추 한 곳, 큰 굵은 제목. 법무 문서는 상자 반복 없이 구획, 선, 표. */

/* ── 0. 토큰: 베이지 와시와 붉은 주황을 R2 값으로. 별칭(--bg-card, --text-gray 등)은 :root에서 해석되므로 같은 :root에서 덮는다 ── */
:root {
  /* 주황 2단계(2026-10-30 주황 감사 a): 로고 주황 #ff4d00은 큰 면, 점, 막대, 19px 700 이상 흰 글자에. 작은 흰 글씨 단추(머리 14px)는 --ec-action-small(#cf3600, 5.02:1).
     tokens.css는 홈 보존 대상이라 이 페이지들만 여기서 덮는다(콘솔은 components.css 0절, 파트너 앱은 theme.css) */
  --ec-action: var(--envoy-9);
  --ec-action-hover: var(--envoy-10);
  --ec-action-active: color-mix(in srgb, var(--envoy-10) 92%, black); /* #e13c00, 콘솔의 #e03b00과 한 단계 차이. 이 파일은 색 리터럴 검사(check-static-color-literals) 대상이라 혼합으로 만든다 */
  --ec-action-small: var(--envoy-11);
  --ec-action-small-hover: color-mix(in srgb, var(--envoy-11) 89%, black); /* #b83000 */
  --ec-action-small-active: color-mix(in srgb, var(--envoy-11) 76%, black); /* #9d2900 */
  --r2-accent: var(--envoy-9);
  --r2-accent-hover: var(--envoy-10);
  --bv-ember: var(--envoy-9); /* 밤 면(로그인 소개) 위 단계 숫자와 머리 선: #ff4d00 on #16130f 5.57:1 */
  --ec-text: var(--r2-text);
  --ec-text-muted: var(--r2-text-muted);
  --ec-text-disabled: var(--r2-text-disabled);
  --ec-placeholder: var(--r2-text-muted);
  --ec-icon: var(--r2-text-muted);
  --ec-line: var(--r2-line);
  --ec-line-strong: var(--r2-line-strong);
  --ec-bg: var(--r2-surface);
  --ec-bg-subtle: var(--r2-surface-1);
  --ec-surface: var(--r2-surface);
  --ec-surface-hover: var(--r2-surface-1);
  --ec-surface-active: var(--r2-surface-2);
  --ec-field-bg: var(--r2-surface);
  --ec-field-line: var(--r2-line-strong);
  --ec-field-line-hover: var(--r2-text);
  --ec-focus: var(--r2-text);
  --ec-text-on-accent: var(--ec-on-action); /* 주 행동은 tokens.css의 진한 envoy 주황 + 흰 글자(5.0:1)를 그대로 쓴다 */
  --ec-accent-solid: var(--r2-accent);
  --ec-accent-solid-hover: var(--r2-accent-hover);
  --ec-accent-text: var(--r2-text);
  --ec-accent-text-strong: var(--r2-text);
  --bv-canvas: var(--r2-surface);
  --bv-slip: var(--r2-surface);
  --bv-slip-sunken: var(--r2-surface-1);
  --bv-ink: var(--r2-text);
  --bv-ink-muted: var(--r2-text-muted);
  --bv-hair: var(--r2-line);
  --bv-rule: var(--r2-text);
  --bv-lantern: var(--ec-action);
  --bv-lantern-hover: var(--ec-action-hover);
  --bv-lantern-text: var(--r2-text);
  --bv-field-bg: var(--r2-surface);
  --bv-field-line: var(--r2-line-strong);
  --bv-r-field: var(--r2-radius-input);
  --bv-r-button: var(--r2-radius-input);
}
body { background: var(--r2-surface); color: var(--r2-text); }

/* ── 1. 공용 머리와 바닥(site-chrome.css는 홈 보존 대상이라 변수만 덮는다) ── */
.site-header, .mobile-menu, .site-footer {
  --sc-ink: var(--r2-text);
  --sc-muted: var(--r2-text-muted);
  --sc-paper: var(--r2-surface);
  --sc-rule: var(--r2-text);
  --sc-line: var(--r2-line);
  --sc-action: var(--ec-action-small);
  --sc-action-hover: var(--ec-action-small-hover);
  --sc-action-active: var(--ec-action-small-active);
  --sc-on-action: var(--ec-on-action);
}
.site-header, .mobile-menu { border-bottom-color: var(--r2-line); }
.gnb-btn { border-radius: var(--r2-radius-input); }
.site-header .gnb-toggle { border-radius: var(--r2-radius-input); }
.site-footer { background: var(--r2-text); color: var(--r2-line); }
.site-footer .footer-brand p, .site-footer .footer-notice { color: var(--r2-line); }
.site-footer .footer-links a { color: var(--r2-surface); }
.site-footer .footer-links a:hover { color: var(--r2-surface); text-decoration-color: var(--r2-surface); }
.site-footer :focus-visible { outline-color: var(--r2-surface); }
.site-footer .footer-company { border-top-color: var(--r2-text-muted); }
.site-footer .footer-company::before { display: none; }
.site-footer.auth-footer { background: transparent; color: var(--r2-text-muted); }
.site-footer.auth-footer .footer-links a { color: var(--r2-text); }
.site-footer.auth-footer :focus-visible { outline-color: var(--r2-text); }
.site-footer.auth-footer .footer-company { border-top: 0; }
@media (min-width: 681px) {
  .marketing-consent[data-marketing-consent-banner] { border-radius: var(--r2-radius-card); background: var(--r2-text); border-color: var(--r2-text-muted); }
  .marketing-consent[data-marketing-consent-banner] button { border-radius: var(--r2-radius-input); }
}

/* ── 2. 404 는 404.html 안에 자체 스타일 ── */

/* ── 3. 회사소개 ── */
body.company-page, body.legal-doc {
  --bv-night: var(--r2-surface);
  --bv-night-2: var(--r2-surface-1);
  --bv-night-line: var(--r2-line);
  --bv-on-night: var(--r2-text);
  --bv-on-night-muted: var(--r2-text-muted);
  --bv-ember: var(--r2-text);
}
.co-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--r2-line); }
.co-eyebrow { color: var(--r2-text-muted); font-weight: 700; }
.co-eyebrow-line { display: none; }
.co-hero h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.03em; }
.co-ledger { border-top-color: var(--r2-line); }
.co-ledger .legal-updated { border-bottom-color: var(--r2-line); }
.co-sec > h2::before { display: none; }
.co-slip { background: var(--r2-surface-1); border-radius: var(--r2-radius-card); }
.co-steps > li::before { color: var(--r2-text); }
.co-rules h3::before { background: var(--r2-line-strong); }
.co-join { background: var(--r2-surface-1); border-radius: var(--r2-radius-card); }
.co-join h2::before { display: none; }
.co-btn-ghost { border-color: var(--r2-line-strong); }
.co-btn-ghost:hover { background: var(--r2-surface-2); border-color: var(--r2-text); }
@media (max-width: 720px) {
  .co-slip, .co-join { margin-inline: 0; }
}

/* ── 4. 로그인 계열(login, signup, forgot-password, reset-password, invite). 사진 면은 그대로, 주황 머리말만 정리 ── */
.auth-eyebrow { color: var(--bv-on-night-muted); font-weight: 700; }
.auth-eyebrow-line { display: none; }
.auth-intro .auth-title::after { display: none; }
.auth-card { background: var(--r2-surface); border: 1px solid var(--r2-line); border-radius: var(--r2-radius-card); }
.auth-body .input { border-radius: var(--r2-radius-input); }
.auth-body .btn, .auth-body .btn-primary { border-radius: var(--r2-radius-input); }
@media (max-width: 480px) {
  .auth-card { border-width: 1px 0; border-radius: 0; }
}

/* ── 5. 법무 문서: 흰 바탕, 선과 표. 상자 반복 없음 ── */
.legal-doc .legal-hero { border-bottom: 1px solid var(--r2-line); }
.legal-doc .legal-hero::before { display: none; }
.legal-doc .legal-hero h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.03em; }
.legal-doc .legal-section h2::before { display: none; }
.legal-doc .doc-toc a:hover, .legal-doc .doc-toc a:focus-visible,
.legal-doc:has(#art-1:target) .doc-toc a[href="#art-1"],
.legal-doc:has(#art-2:target) .doc-toc a[href="#art-2"],
.legal-doc:has(#art-3:target) .doc-toc a[href="#art-3"],
.legal-doc:has(#art-4:target) .doc-toc a[href="#art-4"],
.legal-doc:has(#art-5:target) .doc-toc a[href="#art-5"],
.legal-doc:has(#art-6:target) .doc-toc a[href="#art-6"],
.legal-doc:has(#art-7:target) .doc-toc a[href="#art-7"],
.legal-doc:has(#art-8:target) .doc-toc a[href="#art-8"],
.legal-doc:has(#art-9:target) .doc-toc a[href="#art-9"],
.legal-doc:has(#art-10:target) .doc-toc a[href="#art-10"],
.legal-doc:has(#art-11:target) .doc-toc a[href="#art-11"],
.legal-doc:has(#art-12:target) .doc-toc a[href="#art-12"],
.legal-doc:has(#art-13:target) .doc-toc a[href="#art-13"],
.legal-doc:has(#overseas-transfer:target) .doc-toc a[href="#overseas-transfer"] { box-shadow: inset 3px 0 0 var(--r2-text); color: var(--r2-text); }
.legal-doc .legal-section a:hover, .legal-doc .legal-footer-block a:hover, .legal-doc .legal-reference-links a:hover, .legal-doc .legal-footer-links a:hover { text-decoration-color: var(--r2-text); }
.legal-doc .doc-toc-m summary:hover::after, .legal-doc .doc-toc-m[open] summary::after { border-color: var(--r2-text); }
.legal-doc .legal-table thead th { background: var(--r2-surface-1); color: var(--r2-text); font-weight: 750; padding-inline: var(--sp-5); border-top: 0; }
.legal-doc .legal-table thead th:first-child { border-top-left-radius: var(--r2-radius-input); border-bottom-left-radius: var(--r2-radius-input); }
.legal-doc .legal-table thead th:last-child { border-top-right-radius: var(--r2-radius-input); border-bottom-right-radius: var(--r2-radius-input); }
.legal-doc .legal-table tbody th, .legal-doc .legal-table tbody td { padding-inline: var(--sp-5); }

/* ── 6. 데모 시작 화면 ── */
.demo-label { border-radius: 999px; }
.number { display: none; }
.roles { border-radius: var(--r2-radius-card); }
.demo-role-image { border-radius: var(--r2-radius-card); }
.roles button, .roles .internal-demo-login { border-radius: var(--r2-radius-input); background: var(--ec-action); color: var(--ec-on-action); font-weight: 700; }
.roles .internal-demo-login:hover, .roles button:hover { background: var(--ec-action-hover); }
.roles button:disabled { background: var(--r2-surface-2); color: var(--r2-text-muted); opacity: 1; }
.locale-picker select, .internal-demo-fields input { border-radius: var(--r2-radius-input); }
.intro h1 { font-weight: 800; letter-spacing: -0.03em; }