@charset "utf-8";
/* theme — 닥터스랩 브랜드 변수. 리브랜딩은 이 파일만 고치면 된다.
   모든 페이지가 가장 먼저 읽고, 다른 CSS 는 전부 이 변수를 참조한다.

   --mainColor  #00DDFF  브랜드 메인. 심볼·포인트·뱃지에 쓴다.
                흰 배경 대비 1.64:1 이라 본문 글자로는 쓰지 않는다.
   --subColor   #0089C7  글자·버튼·링크용. 흰 배경 대비 3.89:1. */
:root{
  --mainColor:#00DDFF;
  --subColor:#0089C7;
  --pointColor:#00DDFF;
  --mainBgColor:#EAFBFF;
  --lightGray:#f2f2f2;--darkGray:#2b2b2b;--btnBlack:#0B2B3A;
  --gray1:#FBFBFB;--gray2:#F2F2F2;--gray3:#ECECEC;--gray4:#DEDEDE;--gray5:#C4C4C4;
  --black:#000;
  --black90:rgba(0,0,0,0.9);--black80:rgba(0,0,0,0.8);--black70:rgba(0,0,0,0.7);
  --black60:rgba(0,0,0,0.6);--black50:rgba(0,0,0,0.5);--black40:rgba(0,0,0,0.4);
  --black30:rgba(0,0,0,0.3);--black20:rgba(0,0,0,0.2);--black10:rgba(0,0,0,0.1);
  --white:#fff;
  --white90:rgba(255,255,255,0.9);--white80:rgba(255,255,255,0.8);--white70:rgba(255,255,255,0.7);
  --white60:rgba(255,255,255,0.6);--white50:rgba(255,255,255,0.5);--white40:rgba(255,255,255,0.4);
  --white30:rgba(255,255,255,0.3);--white20:rgba(255,255,255,0.2);--white10:rgba(255,255,255,0.1);
  /* 글자색은 흰 배경 대비 4.5:1 을 넘겨야 작은 글씨가 읽힌다.
     --fontProDesc 7.2:1  본문 설명
     --muted       4.9:1  용량·날짜·주석 같은 보조 글자
     휴대폰 밝은 화면에서는 거의 안 보였다. */
  --fontColor:#0B2B3A;--fontProName:#2A3F49;--fontPrice:#16343F;
  --fontProDesc:#4A5A62;--muted:#63737B;
  --border:rgba(0,0,0,0.1);--border2:rgba(0,0,0,0.15);

  /* ===== 글자 크기 =====================================================
     페이지마다 제각각이던 값을 한 줄로 모았다. 여기만 고치면 전 페이지가 같이 움직인다.
     실제로 보이는 크기는 여기 적힌 값의 0.896 배다. (5.2rem -> 약 47px)
     한 단계씩 약 1.25 배로 벌려 큰 제목과 본문이 따로 놀지 않게 했다. */
  --fs-page:5.2rem;      /* 서브페이지 대제목 — About / Notice / Inquiry */
  --fs-hero:4.6rem;      /* 메인 히어로 문구 */
  --fs-sec:3rem;         /* 섹션 제목 — Key Points / Mask */
  --fs-lead:2.6rem;      /* 리드 한 줄 */
  --fs-h3:2rem;          /* 카드 제목 */
  --fs-body:1.6rem;      /* 본문 */
  --fs-sm:1.4rem;        /* 표·설명 */
  --fs-xs:1.3rem;        /* 주석 */
  --fs-eyebrow:1.3rem;   /* 제목 위 영문 라벨 */

  /* ===== 간격 =====================================================
     섹션 사이는 --sp-section 하나로 통일한다. 페이지마다 10/11/12rem 으로
     달랐던 탓에 메뉴를 옮겨 다니면 리듬이 끊겨 보였다. */
  --sp-page-top:14rem;     /* 헤더 아래 ~ 페이지 대제목 */
  --sp-page-gap:7rem;      /* 대제목 ~ 첫 내용 */
  --sp-page-bottom:14rem;  /* 마지막 내용 ~ 푸터 */
  --sp-section:11rem;      /* 섹션 사이 */
  --sp-tit:3.2rem;         /* 섹션 제목 ~ 그 아래 내용 */
  --sp-block:2rem;         /* 카드 사이 */

  /* ===== 폭 ===== */
  --page-max:132rem;       /* 일반 내용 */
  --read-max:100rem;       /* 글 위주 (공지 본문 등) */
  --page-pad:4rem;
}