/* Atorni 새 사이트 디자인 시스템 (2026-08 이관)
 * 정본 = _design/outbox/20260802_new_site_migration/site/*.html
 *
 * ⚠️ 격리 원칙: 모든 규칙은 `.site` 안에서만 적용된다.
 *    기존 tokens.css / components.css 는 건드리지 않는다 —
 *    기존 화면(로그인·대시보드·사건·결제·스태프)이 그대로 살아 있어야 하기 때문.
 *
 * 색 규칙 하나만 기억할 것: **앰버는 버튼에만 쓴다.**
 *    그린은 정체성, 앰버는 행동. 라벨·아이콘에 앰버를 쓰면 "누르는 것" 신호가 죽는다.
 */

.site {
  --s-ink: #12161A;
  --s-ink-70: #4A535C;
  --s-ink-45: #7C868F;
  --s-forest: #0E4A38;
  --s-forest-dark: #0A3729;
  --s-amber: #F2B237;
  --s-mist: #FAF9F6;
  --s-sage: #E9F0EA;
  --s-sage-line: #D3E0D6;
  --s-line: #E6E4DE;
  --s-paper: #FFFFFF;
  --s-danger: #B4552D;   /* [착수38] 에러/반려 semantic 단일 토큰 (기존 하드코딩 #B4552D 통일·앰버 경고와 별개) */
  --s-wrap: 1140px;
  --s-serif: 'Instrument Serif', Georgia, serif;
  --s-sans: 'Instrument Sans', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  font-family: var(--s-sans);
  color: var(--s-ink);
  background: var(--s-paper);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

.site a { color: var(--s-forest); }

/* ── 공통 뼈대 ─────────────────────────────────────── */

.site .s-wrap { max-width: var(--s-wrap); margin: 0 auto; padding: 0 22px; }
.site .s-wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 22px; }

.site .s-hdr { border-bottom: 1px solid var(--s-line); padding: 18px 0; }
.site .s-wordmark {
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-size: 16px;
  text-decoration: none;
  color: var(--s-ink);
}

/* 제목은 전부 세리프. 나머지는 산세리프. */
.site h1, .site h2, .site h3 { font-family: var(--s-serif); font-weight: 400; }
.site h1 { letter-spacing: -.02em; line-height: 1.1; }

/* 라벨 — 11px 대문자 (새 사이트 .eyebrow 계승) */
.site .s-eyebrow {
  font-family: var(--s-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--s-ink-45);
}

/* ── 버튼 ────────────────────────────────────────────
 * [대표님 2026-08-29] 앰버(#F2B237) → forest. 눈에는 잘 띄었지만 보기 싫다는 판단.
 * 그린 하나로 가는 대신, **어두운 초록 띠 위에서는 버튼이 사라진다** — 그 자리에서는
 * 흰 버튼으로 뒤집는다(site_tweaks.css 의 '어두운 띠 위' 규칙). 둘은 한 쌍이다. */

.site .s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--s-forest);
  color: #fff;
  font-family: var(--s-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.site .s-btn:hover { background: var(--s-forest-dark); }
.site .s-btn:active { transform: translateY(1px); }

.site .s-btn-quiet {
  background: transparent;
  color: var(--s-forest);
  border: 1px solid var(--s-line);
}

/* ── 법률 문서 표면 (/privacy) ──────────────────────── */

.site .s-doc-top { padding: 56px 0 40px; border-bottom: 1px solid var(--s-line); }
.site .s-doc-top h1 { font-size: clamp(34px, 5.4vw, 48px); }
.site .s-doc-sub { font-family: var(--s-serif); font-size: 22px; color: var(--s-ink-45); margin-top: 6px; }
.site .s-doc-lede { color: var(--s-ink-70); margin-top: 20px; font-size: 15px; }
.site .s-doc-note {
  font-size: 13.5px;
  color: var(--s-ink-45);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--s-line);
}

.site .s-doc-sec { padding: 38px 0; border-bottom: 1px solid var(--s-line); }
.site .s-doc-sec h2 { font-family: var(--s-sans); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.site .s-doc-sec ul { list-style: none; margin: 14px 0 0; padding: 0; }
.site .s-doc-sec li {
  color: var(--s-ink-70);
  font-size: 15.5px;
  padding-left: 14px;
  position: relative;
  margin-top: 7px;
}
.site .s-doc-sec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #C6CCC8;
}

/* 한국어 정본 블록 — 항상 함께 노출(언어 전환 대상 아님) */
.site .s-doc-ko { margin-top: 24px; padding: 18px 20px; background: var(--s-mist); border-radius: 9px; }
.site .s-doc-ko h3 {
  font-family: var(--s-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--s-ink-45);
}
.site .s-doc-ko li { font-size: 14.5px; margin-top: 6px; }

.site .s-doc-foot { padding: 40px 0 70px; color: var(--s-ink-45); font-size: 13.5px; }
.site .s-doc-foot b { color: var(--s-ink-70); font-weight: 600; }

@media (max-width: 420px) {
  .site .s-doc-top { padding: 40px 0 30px; }
  .site .s-doc-ko { padding: 16px 14px; }
}