/*
 * 스톤 그룹웨어 — C안 "선명"
 * 흰 바탕, 진한 글씨, 파랑 1색. 50대 이상도 편하게: 본문 18px 이상, 터치 영역 48px 이상.
 * 킥은 핵심 숫자 하나에 형광펜 밑줄(.marker)만.
 */
:root {
  --bg: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --text: #101418;
  --text-2: #3D4450;
  --text-3: #4F5866;
  --line: #D5DAE1;
  --line-soft: #E4E8ED;
  --accent: #1A56DB;
  --accent-strong: #133E9E;
  --accent-soft: #E6EEFC;
  --ok: #0F7A3D;
  --ok-soft: #E3F4EA;
  --warn: #8A5A00;
  --warn-soft: #FFF4D6;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --marker: #FFE14D;

  --radius: 12px;
  --radius-lg: 16px;
  --tap: 48px;
  --font: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-sm: 15px;
  --fs: 18px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 30px;
  --maxw: 1320px;
  --header-h: 72px;
  --tabbar-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

/* hidden 속성은 display 를 준 요소에서도 숨긴다 (웹 전화 버튼 묶음 등) */
[hidden] { display: none !important; }

/* 내 정보 > 글자 크기 */
body[data-font="large"] { zoom: 1.12; }
body[data-font="xlarge"] { zoom: 1.25; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.55;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { margin: 0; }

a { color: var(--accent-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

img, svg { vertical-align: middle; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.muted { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }

/* 킥: 핵심 숫자 하나에만 쓰는 형광펜 밑줄 */
.marker {
  padding: 0 6px;
  background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 90%, transparent 90%);
}