@charset "UTF-8";

/* ==========================================================================
   업데이트 안내 화면 공통 스타일
   Figma: Z3lJdvt9P2YgGOFlpj8XS6
     · node 3:38  — Screen/업데이트 안내            → index.html
     · node 11:3  — Screen/업데이트 안내 - 노보 다이아케어 → novo-diacare.html
     · node 11:27 — Screen/업데이트 안내 - 노보 핏케어   → novo-fitcare.html
     · node 11:53 — Screen/업데이트 안내 - 하이케어     → novo-hicare.html
   모바일 디자인(360×800) 기준 · 모바일 우선 반응형
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (Figma variables)
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --color-bg-canvas: #ffffff;
  --color-bg-subtle: #f3f4f6;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
  --color-icon-default: #4b5563;
  --color-border-subtle: #f3f3f3;

  /* 브랜드 강조색 — 기본값은 본문 색, 각 화면에서 .theme-* 로 덮어씀 */
  --color-accent: var(--color-text-default);

  /* Spacing */
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* Radius */
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Sizing */
  --size-icon-lg: 24px;

  /* Typography */
  --font-family-base: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    system-ui, -apple-system, "Segoe UI", sans-serif;

  /* heading/lg — Noto Sans KR Bold 20/28 */
  --font-size-title: 20px;
  --line-height-title: 28px;

  /* body/md — Noto Sans KR Regular 14/22 */
  --font-size-body: 14px;
  --line-height-body: 22px;

  /* label/md — Noto Sans KR Medium 14/20 */
  --font-size-label: 14px;
  --line-height-label: 20px;

  /* body/sm — Noto Sans KR Regular 13/20 */
  --font-size-caption: 13px;
  --line-height-caption: 20px;

  /* Layout */
  --content-max-width: 420px;
  --content-gap: var(--space-lg);
}

/* 브랜드별 강조색 (body 클래스로 지정) */
.theme-diacare {
  --color-accent: #ff850b;
}

.theme-fitcare {
  --color-accent: #021864;
}

.theme-hicare {
  --color-accent: #00a1e5;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-bg-canvas);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
p,
dl,
dd {
  margin: 0;
}

img {
  display: block;
}

/* --------------------------------------------------------------------------
   3. Screen — 화면 전체를 채우고 콘텐츠를 상하좌우 중앙 정렬
   콘텐츠가 뷰포트보다 길어져도 잘리지 않도록 margin:auto 로 중앙 정렬한다.
   -------------------------------------------------------------------------- */
.screen {
  display: flex;

  min-height: 100vh;
  min-height: 100dvh; /* 모바일 브라우저 주소창 대응 */

  /* 노치/홈 인디케이터 safe area */
  padding:
    calc(var(--space-lg) + env(safe-area-inset-top))
    calc(var(--space-lg) + env(safe-area-inset-right))
    calc(var(--space-lg) + env(safe-area-inset-bottom))
    calc(var(--space-lg) + env(safe-area-inset-left));

  background-color: var(--color-bg-canvas);
}

.screen__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--content-gap);

  margin: auto;
  width: 100%;
  max-width: var(--content-max-width);
}

/* --------------------------------------------------------------------------
   4. IconBadge — 원형 배경 + 아이콘
   패딩(--space-xl) × 2 + 아이콘(--size-icon-lg) = 뱃지 지름
   -------------------------------------------------------------------------- */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  padding: var(--space-xl);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-subtle);
  overflow: hidden;
}

.icon-badge__glyph {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}

/* --------------------------------------------------------------------------
   5. Message — 제목 + 설명 문단(문단 간격 --space-sm)
   -------------------------------------------------------------------------- */
.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);

  width: 100%;
  text-align: center;

  /* 한글은 어절 단위로 끊어 읽기 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.message__title {
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-title);
  color: var(--color-text-default);
}

.message__description {
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   6. Notice — 보조 안내 문단 (body/sm)
   -------------------------------------------------------------------------- */
.notice {
  width: 100%;

  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
  text-align: center;

  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   7. InfoBox / InfoRow — 라벨-값 정보 묶음
   --high: 꼭 읽어야 할 핵심 정보 (회색 배경 + 진한 값)
   --low : 보조 정보 (테두리만 + 작은 회색 글자)
   -------------------------------------------------------------------------- */
.info-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  width: 100%;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);

  word-break: keep-all;
  overflow-wrap: break-word;
}

.info-box--high {
  background-color: var(--color-bg-subtle);
}

.info-box--low {
  border: 1px solid var(--color-border-subtle);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.info-row__label {
  flex-shrink: 0;
  white-space: nowrap;

  font-size: var(--font-size-label);
  font-weight: 500;
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

.info-row__value {
  flex: 1 0 0;
  min-width: 0;

  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text-default);
}

/* 보조 정보 박스 안에서는 라벨·값 모두 작은 회색 글자 */
.info-box--low .info-row__label,
.info-box--low .info-row__value {
  font-size: var(--font-size-caption);
  font-weight: 400;
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   8. Contact — 문의 안내 문단 + 연락처 박스
   -------------------------------------------------------------------------- */
.contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);

  width: 100%;
}

/* --------------------------------------------------------------------------
   9. Inline utilities
   -------------------------------------------------------------------------- */
.text-highlight {
  font-weight: 700;
  color: var(--color-accent);
}

/* 전화번호 탭-투-콜. 디자인과 동일하게 보이도록 색/밑줄은 상속 */
.tel-link {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   10. 반응형 — 태블릿 (≥768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --space-md: 14px;
    --space-xl: 28px;
    --radius-lg: 14px;
    --size-icon-lg: 32px;

    --font-size-title: 24px;
    --line-height-title: 34px;
    --font-size-body: 16px;
    --line-height-body: 26px;
    --font-size-label: 15px;
    --line-height-label: 22px;
    --font-size-caption: 14px;
    --line-height-caption: 22px;

    --content-max-width: 480px;
    --content-gap: 20px;
  }
}

/* --------------------------------------------------------------------------
   11. 반응형 — 데스크톱 (≥1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --space-md: 16px;
    --space-xl: 32px;
    --radius-lg: 16px;
    --size-icon-lg: 40px;

    --font-size-title: 28px;
    --line-height-title: 40px;
    --font-size-body: 17px;
    --line-height-body: 28px;
    --font-size-label: 16px;
    --line-height-label: 24px;
    --font-size-caption: 15px;
    --line-height-caption: 24px;

    --content-max-width: 560px;
    --content-gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   12. 가로 모드 낮은 높이 — 세로 여백 축소로 콘텐츠 잘림 방지
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  :root {
    --space-xl: 16px;
    --size-icon-lg: 24px;

    --font-size-title: 18px;
    --line-height-title: 26px;
    --font-size-body: 14px;
    --line-height-body: 22px;
    --font-size-label: 14px;
    --line-height-label: 20px;
    --font-size-caption: 13px;
    --line-height-caption: 20px;

    --content-gap: 12px;
  }
}