/* ════════════════════════════════════════════════════════════════════════════
 *  AVA Admin — Site-Specific CSS Rules
 *
 *  📍 위치: /admin/_common/site_specific_rules.css
 *  📅 V32 (2026-05-14) — SSoT 통합 시 글로벌 룰 분리
 *
 *  📊 본 파일이 존재하는 이유
 *  ────────────────────────
 *  마스터 SSoT `_context/design_tokens/design_tokens_master.css` 는 `:root`
 *  변수 + opt-in 유틸리티 클래스만 정의 (글로벌 자손 셀렉터 룰 0개).
 *  admin·마케팅 허브 UI 가 자체적으로 가진 글로벌 룰 (.ava-btn, .ava-card 등)
 *  과 V29 환자 사이트 호환 글로벌 룰 (.ava-patient*) 은 본 파일로 분리.
 *  sync.sh 가 design_tokens.css 를 덮어써도 본 파일은 보존됨.
 *
 *  🎯 분류
 *  ─────
 *  1. icomoon @font-face + .icon-icon-ava + .sr-only (공통)
 *  2. .ava-btn / .ava-input / .ava-card / .ava-opt / .ava-h1~h3 (admin UI 컴포넌트)
 *  3. .ava-patient* (환자 사이트 호환 — 사실상 데드 코드. admin 에 ava-patient 사용처 0)
 *
 *  ⚠️ 주의
 *  ─────
 *  - 본 파일은 sync 대상 아님. 직접 수정 OK.
 *  - 새 글로벌 룰 추가는 본 파일에 (마스터 카피 design_tokens.css 에 금지).
 *  - HTML 에서 design_tokens.css 다음 줄에 `<link>` 로 import 필수.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ─── V27 — AVA 워드마크 폰트 (icomoon U+E900) ─── */
/* 모든 영문 "AVA" 표기에 사용. CLAUDE.md §4-3 강제 룰 */
@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';
}
.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;
}

/* ─── 공통 컴포넌트 토큰 (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개만 사용 */
  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 메인) */
.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 */
}

/* ━━━━━━ V29 — 환자 사이트 (ava-ps.com) 반응형 가독성 표준 ━━━━━━ */
/* 모바일 가독성 + 폰트 통일 + 단락 정렬 */

/* 모든 환자 페이지 공통 폰트 적용 */
.ava-patient-page,
body.ava-patient {
  font-family: var(--ava-font-body);
  font-size: var(--ava-fs-body);
  line-height: var(--ava-lh-body);
  color: var(--ava-ink);
  letter-spacing: var(--ava-tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 환자 사이트 헤딩 — clamp 반응형 자동 */
.ava-patient h1, .ava-patient-page h1 {
  font-family: var(--ava-font-header);
  font-size: var(--ava-fs-h1-rsp);
  line-height: var(--ava-lh-display);
  letter-spacing: var(--ava-tracking-h1);
  font-weight: 600;
  margin: 0 0 var(--ava-p-block);
}
.ava-patient h2, .ava-patient-page h2 {
  font-family: var(--ava-font-header);
  font-size: var(--ava-fs-h2-rsp);
  line-height: var(--ava-lh-heading);
  letter-spacing: var(--ava-tracking-h2);
  font-weight: 600;
  margin: 0 0 var(--ava-p-paragraph);
}
.ava-patient h3, .ava-patient-page h3 {
  font-family: var(--ava-font-header);
  font-size: var(--ava-fs-h3-rsp);
  line-height: var(--ava-lh-heading);
  font-weight: 600;
  margin: 0 0 var(--ava-p-paragraph);
}
.ava-patient h4, .ava-patient-page h4 {
  font-family: var(--ava-font-header);
  font-size: var(--ava-fs-h4-rsp);
  line-height: var(--ava-lh-heading);
  font-weight: 600;
  margin: 0 0 var(--ava-p-paragraph);
}

/* 본문 단락 spacing 통일 */
.ava-patient p, .ava-patient-page p {
  margin: 0 0 var(--ava-p-paragraph);
  line-height: var(--ava-lh-body);
}
.ava-patient p:last-child, .ava-patient-page p:last-child { margin-bottom: 0; }

/* 섹션 간격 */
.ava-patient section, .ava-patient-page section {
  padding-top: var(--ava-p-section);
  padding-bottom: var(--ava-p-section);
}

/* 모바일 컨테이너 좌우 패딩 통일 */
@media (max-width: 768px) {
  .ava-patient .container, .ava-patient-page .container,
  .ava-patient [class*="px-"], .ava-patient-page [class*="px-"] {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* 너무 큰 본문 자동 축소 */
  .ava-patient body, .ava-patient-page body {
    font-size: var(--ava-fs-body);   /* 16px 고정 (iOS 줌 방지) */
  }
}

/* iOS Safari: input/textarea/button 등 폰트 16px 고정 (자동 줌 방지) */
@media (max-width: 768px) {
  .ava-patient input, .ava-patient textarea, .ava-patient select,
  .ava-patient-page input, .ava-patient-page textarea, .ava-patient-page select {
    font-size: 16px !important;
  }
}

/* 한 줄 카피 (Hero 등) — 화면 폭 비례 */
.ava-hero-text { font-size: var(--ava-fs-hero-rsp); line-height: var(--ava-lh-display); letter-spacing: var(--ava-tracking-h1); }

/* 라벨·EYEBROW (작은 골드 라벨) */
.ava-label {
  font-size: var(--ava-fs-label);
  letter-spacing: var(--ava-tracking-widest);
  text-transform: uppercase;
  color: var(--ava-gold);
  font-family: var(--ava-font-display);
  font-style: italic;
}

/* ━━━━━━ V30 — 이미지·미디어 톤 통일 ━━━━━━ */
/* 모든 환자 사이트 이미지/비디오에 부드러운 그림자 + 라운드 자동 */
/* (HTML 단 클래스 추가 없이 글로벌 적용) */

.ava-patient img:not([class*="logo"]):not([class*="icon"]):not([alt=""]):not([role="presentation"]),
.ava-patient-page img:not([class*="logo"]):not([class*="icon"]):not([alt=""]):not([role="presentation"]) {
  border-radius: var(--ava-r-md);
  box-shadow: var(--ava-shadow-sm);
  transition: transform var(--ava-t-normal), box-shadow var(--ava-t-normal);
}
.ava-patient img:hover:not([class*="logo"]):not([class*="icon"]) {
  transform: translateY(-2px);
  box-shadow: var(--ava-shadow-md);
}

/* Hero·메인 비주얼은 더 큰 그림자·라운드 */
.ava-patient .hero img,
.ava-patient .hero video,
.ava-patient [class*="hero"] img,
.ava-patient [class*="hero"] video,
.ava-patient .visual img,
.ava-patient .visual video {
  border-radius: var(--ava-r-lg);
  box-shadow: var(--ava-shadow-lg);
}

/* 시술 전후 사진·인물 사진 카드 — Vogue 톤 */
.ava-patient .card img,
.ava-patient [class*="card"] img,
.ava-patient [class*="prepost"] img,
.ava-patient [class*="before-after"] img {
  border-radius: var(--ava-r-md);
  box-shadow: var(--ava-shadow-md);
}

/* 동영상도 동일 톤 */
.ava-patient video:not([class*="bg"]):not([class*="intro"]),
.ava-patient-page video:not([class*="bg"]):not([class*="intro"]) {
  border-radius: var(--ava-r-md);
  box-shadow: var(--ava-shadow-md);
}

/* iframe (지도·유튜브 등) */
.ava-patient iframe,
.ava-patient-page iframe {
  border-radius: var(--ava-r-md);
  box-shadow: var(--ava-shadow-sm);
}

/* ━━━━━━ V30 — 접근성 (a11y) 글로벌 ━━━━━━ */
/* focus 시 골드 ring (키보드 네비) */
.ava-patient a:focus-visible,
.ava-patient button:focus-visible,
.ava-patient input:focus-visible,
.ava-patient textarea:focus-visible,
.ava-patient select:focus-visible,
.ava-patient [tabindex]:focus-visible {
  outline: 2px solid var(--ava-gold);
  outline-offset: 3px;
  border-radius: var(--ava-r-sm);
}

/* 화면 외부 접근 — skip link */
.ava-patient .skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ava-ink);
  color: var(--ava-paper);
  padding: 12px 18px;
  z-index: 9999;
  font-size: var(--ava-fs-sm);
  text-decoration: none;
}
.ava-patient .skip-link:focus {
  top: 0;
}

/* 모션 감소 환경 — animation/transition 비활성 (전정 장애 사용자) */
@media (prefers-reduced-motion: reduce) {
  .ava-patient *, .ava-patient-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ━━━━━━ V30 — 인터랙션 마이크로 애니메이션 ━━━━━━ */
/* 스크롤 시 부드럽게 등장 (스크롤 reveal class) */
.ava-patient .reveal,
.ava-patient [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(.5,1.2,.5,1);
}
.ava-patient .reveal.is-visible,
.ava-patient [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}