/* ==========================================================================
   미소산 약국 · 디자인 시스템 · Colors & Type
   ------------------------------------------------------------
   3개 제품 라인이 하나의 "미소산 약국" 우산 브랜드 아래 각기 다른 컬러 테마를
   사용합니다.
      · 미소산 (두피열 케어)  → Blue     #0084C7 / #063B61
      · 고운산 (피부/여드름)   → Forest   #285B38 / #2C5530
      · 술깨산 (숙취해소)      → Deep Blue #0E3B6E + Amber #EAB84A
   공통 요소는 브랜드 그린 새싹 심볼(#3F9D55) 하나로만 통일합니다.
   ========================================================================== */

/* -------- Web Fonts (Google Fonts) -------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&family=Nanum+Myeongjo:wght@400;700;800&family=Gowun+Batang:wght@400;700&display=swap');

:root {
  /* ---------------- Brand Umbrella (미소산 약국) ---------------- */
  --brand-green:        #3F9D55;   /* 새싹 심볼 컬러 (파비콘 기준) */
  --brand-green-dark:   #2F7A41;
  --brand-green-soft:   #E6F2E9;

  /* ---------------- Misosan Fit (두피열 케어 · Blue) ------------ */
  --misosan-blue:       #0084C7;   /* Primary CTA */
  --misosan-blue-dark:  #006DA3;
  --misosan-blue-navy:  #063B61;   /* 헤드라인 텍스트 */
  --misosan-blue-soft:  #E6F5FC;
  --misosan-blue-tint:  #F0F9FF;
  --misosan-blue-line:  #DBEAFE;

  /* ---------------- Gounsan (피부 케어 · Forest Green) ---------- */
  --gounsan-green:      #285B38;
  --gounsan-green-dark: #1F4A2D;
  --gounsan-green-alt:  #2C5530;   /* 랜딩 v2 forest green */
  --gounsan-green-soft: #E2F0DE;
  --gounsan-green-tint: #F5F8F2;
  --gounsan-cream:      #F5F3EF;   /* 베이지 배경 */
  --gounsan-cream-2:    #F7F5F1;
  --gounsan-gold:       #8A6B3D;   /* 서브 강조 */
  --gounsan-gold-star:  #C9A34D;   /* 리뷰 별점 */

  /* ---------------- Gounsan Acne (여드름 페이지 · Red) ---------- */
  --gounsan-red:        #DC2626;
  --gounsan-red-dark:   #B91C1C;
  --gounsan-red-soft:   #FEE2E2;

  /* ---------------- Sulgaesan (숙취해소 · Deep Blue + Amber) ---- */
  --sulgaesan-navy:     #0E3B6E;   /* Deep Blue 배경/헤드라인 */
  --sulgaesan-navy-2:   #124E92;
  --sulgaesan-blue:     #1D6FC4;   /* Primary blue */
  --sulgaesan-cyan:     #6FC6E6;   /* 시원함 · 이수 파도 */
  --sulgaesan-cyan-soft:#DFF2FA;
  --sulgaesan-amber:    #EAB84A;   /* 강조 · "황금" 성분 연상 */
  --sulgaesan-amber-dk: #C99724;
  --sulgaesan-cream:    #FBF6EA;   /* Warm 배경 */
  --sulgaesan-ink:      #0B1E33;   /* 최고 대비 텍스트 */

  /* ---------------- Neutral (모든 페이지 공통) ------------------ */
  --ink:                #1F2421;
  --text:               #183222;
  --text-2:             #385444;
  --muted:              #5C635E;
  --muted-2:            #607261;
  --line:               #DBE6D5;   /* soft green line */
  --line-neutral:       #E5E7EB;
  --bg:                 #FFFFFF;
  --bg-soft:            #F8FBF6;
  --bg-cream:           #F5F3EF;

  /* ---------------- Semantic ----------------------------------- */
  --success:            #285B38;
  --warning:            #EAB84A;
  --danger:             #DC2626;
  --info:               #0084C7;

  /* ---------------- Elevation & Radius ------------------------- */
  --radius-sm:          10px;
  --radius-md:          14px;
  --radius-lg:          18px;    /* card 기본 */
  --radius-xl:          22px;
  --radius-2xl:         28px;    /* hero, page 컨테이너 */
  --radius-pill:        999px;

  --shadow-sm:          0 4px 12px rgba(24, 50, 34, .05);
  --shadow-md:          0 10px 26px rgba(25, 33, 28, .10);
  --shadow-lg:          0 18px 44px rgba(24, 50, 34, .08);
  --shadow-xl:          0 18px 50px rgba(25, 33, 28, .10);
  --shadow-blue:        0 16px 30px rgba(0, 132, 199, .22);
  --shadow-green:       0 16px 30px rgba(44, 85, 48, .22);
  --shadow-navy:        0 20px 40px rgba(14, 59, 110, .28);

  /* ---------------- Spacing scale (4px base) ------------------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            20px;
  --space-6:            24px;
  --space-8:            32px;
  --space-10:           40px;
  --space-12:           48px;
  --space-16:           64px;
  --space-20:           80px;

  /* ---------------- Layout ------------------------------------- */
  --container:          1120px;
  --container-wide:     1240px;

  /* ---------------- Type Families ------------------------------ */
  --font-sans:          "Noto Sans KR", -apple-system, BlinkMacSystemFont,
                        "Apple SD Gothic Neo", "Pretendard", Segoe UI, Roboto, sans-serif;
  --font-serif:         "Nanum Myeongjo", "Gowun Batang", "Noto Serif KR",
                        "AppleMyungjo", serif;

  /* ---------------- Type Scale (semantic) ---------------------- */
  --fs-eyebrow:         12px;   /* uppercase tracking */
  --fs-caption:         12px;
  --fs-small:           13px;
  --fs-body:            15px;
  --fs-body-lg:         16px;
  --fs-lead:            18px;
  --fs-h4:              18px;
  --fs-h3:              22px;
  --fs-h2:              34px;
  --fs-h1:              44px;
  --fs-display:         58px;

  --lh-tight:           1.15;
  --lh-snug:            1.28;
  --lh-normal:          1.55;
  --lh-loose:           1.7;

  --tracking-tight:     -0.03em;
  --tracking-snug:      -0.02em;
  --tracking-eyebrow:    0.14em;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;
  --fw-black:           900;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Semantic Text (default = 미소산 네이비 헤드라인)
   ========================================================================== */
.h-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: -0.05em;
  color: var(--misosan-blue-navy);
  margin: 0 0 12px;
}
.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--misosan-blue-navy);
  margin: 8px 0 12px;
}
.h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 10px;
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 6px;
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 6px;
}
.p, p.body {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text);
  margin: 0 0 12px;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
}
.small { font-size: var(--fs-small); color: var(--muted); }
.caption { font-size: var(--fs-caption); color: var(--muted); }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--misosan-blue);
}

/* 한자/한글 병기 강조 (한방 브랜드 특성) */
.hanja {
  font-family: var(--font-serif);
  font-weight: var(--fw-bold);
  color: currentColor;
}

/* ==========================================================================
   Theme scopes — 페이지/섹션에 클래스 하나로 적용
   ========================================================================== */
.theme-misosan   { --accent: var(--misosan-blue);    --accent-dark: var(--misosan-blue-dark);   --accent-soft: var(--misosan-blue-soft);   --accent-ink: var(--misosan-blue-navy); }
.theme-gounsan   { --accent: var(--gounsan-green);   --accent-dark: var(--gounsan-green-dark);  --accent-soft: var(--gounsan-green-soft);  --accent-ink: var(--gounsan-green-dark); }
.theme-gounsan-red{--accent: var(--gounsan-red);     --accent-dark: var(--gounsan-red-dark);    --accent-soft: var(--gounsan-red-soft);    --accent-ink: var(--gounsan-red-dark); }
.theme-sulgaesan { --accent: var(--sulgaesan-blue);  --accent-dark: var(--sulgaesan-navy);      --accent-soft: var(--sulgaesan-cyan-soft); --accent-ink: var(--sulgaesan-navy); }

/* ==========================================================================
   Button (theme-aware · uses --accent)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: var(--tracking-snug);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-primary { background: var(--accent, var(--misosan-blue)); color: #fff; box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.btn-primary:hover { background: var(--accent-dark, var(--misosan-blue-dark)); transform: translateY(-1px); }
.btn-ghost   { background: transparent; color: var(--accent, var(--misosan-blue)); border-color: var(--line-neutral); }
.btn-ghost:hover { background: var(--accent-soft, var(--misosan-blue-soft)); }
.btn-outline { background: #fff; color: var(--accent-ink, var(--misosan-blue-navy)); border-color: var(--accent, var(--misosan-blue)); }

/* ==========================================================================
   Chip / Badge
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--accent-ink, var(--misosan-blue-navy));
  font-size: 13px; font-weight: var(--fw-bold);
}
.badge {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft, var(--misosan-blue-soft));
  color: var(--accent-ink, var(--misosan-blue-navy));
  font-size: 12px; font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-snug);
}

/* ==========================================================================
   Card
   ========================================================================== */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-soft {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}