@charset "utf-8";

/**!
  폰트 크기 체계:
    - 일반 모드: 16px(모바일) → 18px(태블릿) → 20px(데스크탑)
    - 시니어 모드(): 18px(모바일) → 20px(태블릿) → 22px(데스크탑)
    - 시니어 모드(): 20px(모바일) → 22px(태블릿) → 24px(데스크탑)

|    요소    | 모바일 |  태블릿 | Desktop  | xDesktop | 비고               |
|-----------|-------|-------|---------|----------|-------------------|
| 일반       |  16px |  18px |   20px  |   22px   |                    |
| 시니어(최소) |  18px |  20px |   22px  |   24px   | WCAG2.1 기준 최소 값 |
| 시니어(권장) |  20px |  22px |   24px  |   26px   | Nielsen Norman 권장 |
 */

/* ========================================
   1. 일반 사용자 기본 변수
======================================== */
:root {
    /* 폰트 크기 (디바이스별 기본값은 미디어쿼리에서 설정) */
    --font-size-body: 16px;     /* 본문 (모바일 기본) */
    --font-size-title: 24px;    /* 제목 */
    --font-size-sub: 14px;      /* 보조 텍스트 */
    
    --line-height: 1.5;
    --font-weight-body: 400;
    
    /* 레이아웃 */
    --container-padding: 16px;
    --item-gap: 12px;
    --spacing-m: 1rem;
    --border-radius: 12px;
    
    /* 컬러 */
    --primary-color: #0055ff;
    --text-color: #444444;
    --text-main: #444444;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
}

/* 디바이스별 폰트 크기, 모바일: 기본값 (16px) 이미 :root에 설정됨 */
@media (min-width: 768px) {
    :root { --font-size-body: 18px; }
}

@media (min-width: 1024px) {
    :root { --font-size-body: 20px; }
}

@media (min-width: 1280px) {
    :root { --font-size-body: 22px; }
}

/* ========================================
   2. 시니어 모드 (최소) 변수 덮어쓰기
======================================== */
html.mode-senior {
    --font-size-body: 18px;     /* 시니어 모바일 기본 */
    --font-size-title: 32px;
    --font-size-sub: 16px;
    --line-height: 1.7;
    --font-weight-body: 500;
    --container-padding: 24px;
    --item-gap: 20px;
    --spacing-m: 1.5rem;
    --text-color: #000000;
    --text-main: #000000;
    --border-color: #999999;
}

@media (min-width: 768px) {
    html.mode-senior { --font-size-body: 20px; }
}

@media (min-width: 1024px) {
    html.mode-senior { --font-size-body: 22px; }
}

@media (min-width: 1280px) {
    html.mode-senior { --font-size-body: 24px; }
}

/* ========================================
   3. 시니어 모드 (권장) 변수 덮어쓰기
======================================== */
html.mode-senior-rec {
    --font-size-body: 20px;     /* 시니어 모바일 권장 */
    --font-size-title: 32px;
    --font-size-sub: 16px;
    --line-height: 1.7;
    --font-weight-body: 500;
    --container-padding: 24px;
    --item-gap: 20px;
    --spacing-m: 1.5rem;
    --text-color: #000000;
    --text-main: #000000;
    --border-color: #999999;
}

@media (min-width: 768px) {
    html.mode-senior-rec { --font-size-body: 22px; }
}

@media (min-width: 1024px) {
    html.mode-senior-rec { --font-size-body: 24px; }
}

@media (min-width: 1280px) {
    html.mode-senior-rec { --font-size-body: 26px; }
}

/* ========================================
   4. 실제 스타일 적용
======================================== */
html {
    font-size: var(--font-size-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* transition: font-size 0.25s cubic-bezier(0.4, 0, 0.2, 1); */
    
    /* [추천] 시스템 설정을 무시하지 않으면서, 브라우저의 임의 확장을 방지 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Pretendard', sans-serif;
    font-size: 1rem;
    line-height: var(--line-height);
    font-weight: var(--font-weight-body);
    color: var(--text-color);
    background-color: #f4f7fa;
    padding: var(--container-padding);
    /* transition: color 0.2s linear; */

    /* iOS에서 글자가 작아지는 현상 방지 */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ========================================
   6. 각 컴포넌트 별 어떻게 설정하는지 테스트 코드
======================================== */

h1 {
    font-size: calc(var(--font-size-title) / var(--font-size-body) * 1rem);
    margin-bottom: var(--item-gap);
    font-weight: 800;
}

.title {
    font-size: 1.5rem;
    font-weight: bold;
}

.content {
    font-size: 1rem;
}

.description {
    font-size: calc(var(--font-size-sub) / var(--font-size-body) * 1rem);
    font-weight: var(--font-weight-body);
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: var(--container-padding);
    margin-bottom: var(--item-gap);
}