/* ==========================================================================
   동래성모안과 — Design Tokens
   이 파일이 색상·크기의 유일한 출처입니다.
   컴포넌트에서 HEX/px를 직접 쓰지 말고 반드시 var(--...)를 사용하세요.
   상세 규칙: /docs/design-system.md
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------
     #4AB6B9 는 흰 글자와 대비 2.42:1 로 WCAG AA 미달입니다.
     글자가 얹히는 곳은 반드시 --color-primary-deep 을 사용하세요.        */
  --color-primary:        #4AB6B9;  /* 면, 아이콘, 장식 (글자 배경 금지) */
  --color-primary-deep:   #2A7679;  /* 버튼 배경, 링크, 컬러 텍스트 (5.29:1) */
  --color-primary-darker: #216163;  /* hover / active */
  --color-primary-muted:  #4E7374;  /* 보조 텍스트, 라벨 */
  --color-primary-light:  #F1F9F9;  /* 연한 섹션 배경 */
  --color-primary-tint:   rgba(74, 182, 185, 0.08);
  --color-eq-stage:       #E3F1F1;  /* 첨단보유장비 — 사진 뒤 원 */

  /* ---- Ink (다크 섹션) ---- */
  --color-ink:      #1C2B2C;
  --color-ink-soft: #24393A;

  /* 사진 위에 까는 딥틸 가림막. 알파를 자유롭게 주려고 RGB 채널만 담습니다.
     rgba(var(--hero-scrim-rgb), 0.8) 형태로 사용하세요. */
  --hero-scrim-rgb: 5, 35, 40;

  /* ---- 어두운 배경 위 요소 ---- */
  --color-on-dark-sub:  rgba(255, 255, 255, 0.72);
  --color-on-dark-line: rgba(255, 255, 255, 0.30);

  /* ---- Text ---- */
  --color-text:        #222222;
  --color-text-sub:    #666666;
  --color-text-weak:   #999999;
  --color-text-invert: #FFFFFF;

  /* ---- Surface ---- */
  --color-bg:      #FFFFFF;
  --color-bg-alt:  #F1F2F3;
  --color-bg-soft: #F8F8F8;
  --color-line:    #EDEDED;
  --color-line-mid:#DDDDDD;
  --color-alert:   #B10F15;
  --color-illust-ring: #40AF7E;   /* 해부 일러스트의 확대 원 초록 테두리 (영상 확대 시 같은 테두리를 그림) */
  --color-illust-ring-teal: #0BB89B;   /* ICL 해부 일러스트의 확대 원 청록 테두리 (icl-define.webp 에서 잰 값) */

  /* ---- Type ---- */
  --font-base: "Pretendard", "Pretendard Variable", -apple-system,
               BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  --font-display: "Marcellus", "Times New Roman", serif;

  --fs-hero: 60px;
  --fs-h1:   45px;
  --fs-h2:   34px;
  --fs-h3:   26px;
  --fs-lg:   20px;
  --fs-body: 17px;
  --fs-sm:   15px;
  --fs-xs:   14px;

  --lh-tight: 1.3;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-base:  -0.01em;
  --ls-wide:   0.15em;

  /* ---- Layout ---- */
  --container-wide: 1440px;
  --container-base: 1280px;
  --container-text: 1024px;
  --gutter: 20px;

  --sp-1:  8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 56px;
  --sp-7: 80px;

  --section-pad:    100px;
  --section-pad-lg: 150px;

  --header-h: 84px;
  --logo-h: 40px;
  --equip-card-w: 300px;
  --fs-eq-name: clamp(40px, 5.2vw, 76px);   /* 첨단보유장비 — 큰 영문 모델명 */
  --equip-loop-speed: 45;     /* 장비 띠가 흐르는 속도 (px/초, 단위 없이) — main.js 가 읽습니다 */
  --equip-hover-scale: 1.06;  /* 올린 카드가 커지는 배율 */
  --tour-hover-scale: 1.05;   /* 병원둘러보기 — 올린 사진이 커지는 배율 */
  --lens-view-fade: 0.6s;     /* 노안·백내장 렌즈별 풍경 — 사진 전환 시간 */
  --equip-dim-blur: 3px;      /* 나머지 카드 흐림 */
  --ticker-h: 46px;   /* 헤더 위 학회 안내 바 */

  /* 꽉 찬 서브히로 아래로 로컬 탭이 겹쳐 올라오는 높이.
     .sub-hero-full 의 아래 여백과 .local-tabs-float 의 음수 마진이 같이 씁니다. */
  --local-tabs-overlap: 96px;

  /* ---- Shape ---- */
  --radius-sm:    4px;
  --radius-base:  8px;
  --radius-lg:   20px;
  --radius-pill: 9999px;

  --shadow-card:  0 11px 20px 0 rgba(0, 0, 0, 0.08);
  --shadow-float: 0 3px 14px 0 rgba(0, 0, 0, 0.15);
  --shadow-eq-product: 0 26px 26px rgba(20, 60, 62, 0.20);   /* 첨단보유장비 — 제품 발밑 그림자 */

  /* 플로팅 퀵메뉴 — 민트빛 번짐 + 둥근 알약 */
  --quick-w:          96px;
  --radius-quick:     32px;
  --color-quick-line: rgba(74, 182, 185, 0.22);
  --shadow-quick:     0 0 0 5px rgba(74, 182, 185, 0.10), 0 10px 32px rgba(74, 182, 185, 0.30);
  --shadow-quick-bar: 0 -6px 20px rgba(74, 182, 185, 0.18);  /* 모바일 하단 띠 */
  --color-naver:      #03C75A;  /* 네이버 N 배지 전용 (브랜드 색, 글자 배경 아님) */

  --transition: 0.45s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media screen and (max-width: 1024px) {
  :root {
    --fs-hero: 44px;
    --fs-h1:   36px;
    --fs-h2:   29px;
    --fs-h3:   23px;
    --section-pad:    72px;
    --section-pad-lg: 96px;
    --header-h: 68px;
    --logo-h: 34px;
    --ticker-h: 42px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --fs-hero: 32px;
    --fs-h1:   28px;
    --fs-h2:   24px;
    --fs-h3:   20px;
    --fs-lg:   17px;
    --fs-body: 15px;
    --fs-sm:   14px;
    --fs-xs:   13px;
    --gutter:  16px;
    --section-pad:    50px;
    --section-pad-lg: 60px;
    --header-h: 60px;
    --logo-h: 30px;
    --equip-card-w: 240px;
    --ticker-h: 38px;
  }
}

/* 대메뉴 9개가 한 줄에 들어가도록 1025~1280px 에서 로고를 조금 줄입니다 */
@media screen and (max-width: 1280px) and (min-width: 1025px) {
  :root { --logo-h: 34px; }
}