/* ════════════════════════════════════════════════════════════════════════════
 *  Yeon & Yeon 사이트별 글로벌 룰 — design_tokens.css(마스터 카피)와 분리
 *
 *  📍 위치: yeonyeonlaw/_common/site_specific_rules.css
 *  📅 V32 (2026-05-14)
 *
 *  ⚠️ 본 파일에는 yeonyeon 사이트 전용 룰만 작성:
 *    - icomoon @font-face (AVA 워드마크 폰트)
 *    - .ava-btn, .ava-input, .ava-card 등 yeonyeon 컴포넌트 라이브러리
 *    - .ava-eyebrow (1픽 골드 액센트 OK)
 *
 *  ❌ 절대 금지:
 *    - 마스터 SSoT 의 변수 재정의 (마스터에만)
 *    - 글로벌 자손 셀렉터 룰 (body.X h1, .X p 등 — V30 사고 원인)
 *
 *  📚 마스터 SSoT: /_context/design_tokens/design_tokens_master.{css,js}
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── AVA 워드마크 폰트 (icomoon U+E900) ─── */
/* CLAUDE.md §4-3 강제 룰: 영문 "AVA" 표기는 항상 아이콘 글리프로 치환 */
@font-face {
  font-family: 'icomoon';
  src: url('/fonts/icomoon.eot');
  src: url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('/fonts/icomoon.ttf') format('truetype'),
       url('/fonts/icomoon.woff') format('woff'),
       url('/fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.icon-icon-ava,
.font-ava {
  font-family: 'icomoon', sans-serif;
  font-style: normal;
  speak: none;
  display: inline-block;
}
.icon-icon-ava::before {
  content: '\e900';
}
/* yeonyeon 코드 호환 — .sr-only (마스터에는 .ava-sr-only) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Yeon & Yeon 컴포넌트 라이브러리 (V24 표준 UI) ─── */

/* 버튼 — 검정 primary + outline secondary */
.ava-btn {
  font-family: var(--ava-font-body);
  font-size: var(--ava-fs-sm);
  font-weight: var(--ava-fw-medium);
  padding: 10px 18px;
  border-radius: var(--ava-r-md);
  border: 1px solid var(--ava-line);
  background: var(--ava-paper);
  color: var(--ava-ink);
  cursor: pointer;
  transition: all var(--ava-t-fast);
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 6px;
}
.ava-btn:hover {
  background: var(--ava-surface);
  border-color: var(--ava-line-strong);
  transform: translateY(-1px);
}
.ava-btn:active { transform: scale(.97); }

.ava-btn-primary {
  background: var(--ava-ink);
  color: var(--ava-paper);
  border-color: var(--ava-ink);
}
.ava-btn-primary:hover {
  background: var(--ava-ink-soft);
  border-color: var(--ava-ink-soft);
  color: var(--ava-paper);
}

.ava-btn-gold {        /* 페이지당 최우선 CTA 1개만 사용 — 골드 5% 다이어트 */
  background: var(--ava-gold);
  color: var(--ava-paper);
  border-color: var(--ava-gold);
  font-weight: var(--ava-fw-semi);
}
.ava-btn-gold:hover {
  background: #97785A;
  border-color: #97785A;
}

.ava-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ava-mute);
}
.ava-btn-ghost:hover {
  background: var(--ava-surface);
  color: var(--ava-ink);
}

/* 인풋 — focus 시 검정 outline (골드 X) */
.ava-input,
.ava-textarea {
  width: 100%;
  border: 1px solid var(--ava-line);
  border-radius: var(--ava-r-md);
  padding: 9px 12px;
  font-size: var(--ava-fs-md);
  font-family: var(--ava-font-body);
  background: var(--ava-paper);
  color: var(--ava-ink);
  transition: border-color var(--ava-t-fast), box-shadow var(--ava-t-fast);
}
.ava-input:focus,
.ava-textarea:focus {
  outline: none;
  border-color: var(--ava-ink);
  box-shadow: 0 0 0 3px rgba(31,31,31,.08);
}
.ava-input::placeholder,
.ava-textarea::placeholder {
  color: var(--ava-mute-light);
}

/* 카드·패널 */
.ava-card {
  background: var(--ava-paper);
  border: 1px solid var(--ava-line);
  border-radius: var(--ava-r-lg);
  padding: var(--ava-s-5);
}

/* 옵션·탭 — 검정-화이트 컨트라스트 */
.ava-opt {
  background: var(--ava-paper);
  border: 1px solid var(--ava-line);
  border-radius: var(--ava-r-md);
  padding: 9px 12px;
  cursor: pointer;
  font-size: var(--ava-fs-sm);
  transition: all var(--ava-t-fast);
  color: var(--ava-ink);
}
.ava-opt:hover {
  background: var(--ava-surface);
  border-color: var(--ava-line-strong);
  transform: translateY(-1px);
}
.ava-opt.on,
.ava-opt[aria-selected="true"] {
  background: var(--ava-ink);
  color: var(--ava-paper);
  border-color: var(--ava-ink);
}

/* 헤딩 (Pretendard 메인) — opt-in 클래스 (글로벌 h1 룰 안 사용) */
.ava-h1 { font-family: var(--ava-font-header); font-weight: var(--ava-fw-semi); font-size: var(--ava-fs-xxl); line-height: var(--ava-lh-tight); letter-spacing: var(--ava-tracking-tight); color: var(--ava-ink); }
.ava-h2 { font-family: var(--ava-font-header); font-weight: var(--ava-fw-medium); font-size: var(--ava-fs-xl); line-height: var(--ava-lh-tight); color: var(--ava-ink); }
.ava-h3 { font-family: var(--ava-font-header); font-weight: var(--ava-fw-medium); font-size: var(--ava-fs-lg); line-height: var(--ava-lh-tight); color: var(--ava-ink); }
.ava-body { font-family: var(--ava-font-body); font-size: var(--ava-fs-md); line-height: var(--ava-lh-normal); color: var(--ava-ink); }
.ava-meta { font-family: var(--ava-font-body); font-size: var(--ava-fs-xs); letter-spacing: var(--ava-tracking-widest); text-transform: uppercase; color: var(--ava-mute); }

/* Eyebrow (작은 라벨) — 골드 사용 가능한 1픽 위치 */
.ava-eyebrow {
  font-family: var(--ava-font-display);
  font-style: italic;
  font-size: var(--ava-fs-xs);
  letter-spacing: var(--ava-tracking-widest);
  text-transform: uppercase;
  color: var(--ava-gold);   /* 1픽 골드 OK */
}

/* ════════════════════════════════════════════════════════════════════════════
 *  ⚠️ 본 파일 끝 — V30 글로벌 자손 룰 (.ava-patient * 등) 절대 추가 금지.
 *  yeonyeon 컴포넌트는 모두 단일 클래스 opt-in 패턴만 사용.
 * ════════════════════════════════════════════════════════════════════════════ */