/* site/ 사본 — 원본은 스펙 design/system.css(2026-10-31). 토큰을 바꾸면 원본과 같이 바꾼다.
   body·시안 바깥 틀 규칙은 site.css 가 덮는다. */
/* saidit 디자인 체계 v0.3 — 2026-10-31.
   v0.2(참고 앱 공통 규칙) + 토스 TDS 공개 값을 참고해 새로 정한 토큰(research/토스_디자인_리서치.md §2).
   TDS 파일은 복사하지 않았다. 값을 참고해 우리 토큰을 다시 정했다.
   원칙: 그레이 10단계 · 글자 단계 t1/t3/t4/t5/t6/t7 · 행간 규칙(18px 이하 1.5배) · 좌우 여백 24 ·
   구간 띠 16 · 버튼 56/48/38 · 눌림 축소 · 강조 파랑 하나(대비 5.8:1) · 밝은 화면 기본 */

:root {
  /* 그레이 10단계 */
  --grey-50: #F9FAFB; --grey-100: #F2F4F6; --grey-200: #E5E8EB; --grey-300: #D1D6DB; --grey-400: #B0B8C1;
  --grey-500: #8B95A1; --grey-600: #6B7684; --grey-700: #4E5968; --grey-800: #333D4B; --grey-900: #191F28;
  /* 역할 토큰 */
  --bg: #FFFFFF;
  --band: var(--grey-100);      /* 구간 띠·화면 바깥 면 */
  --surface: var(--grey-100);   /* 입력창·칩·말풍선(상대) */
  --surface-2: var(--grey-200);
  --line: var(--grey-200);
  --text: var(--grey-900);
  --text-2: var(--grey-700);    /* 보조 글: 대비 7.1:1 */
  --text-3: #5F6977;            /* 입력 안내 글: 회색 면(#F2F4F6) 위 대비 4.9:1 */
  --accent: #1B5BEA;            /* 로고 파랑(06번 펜 안 뗀 따옴표) 그대로. 흰 바탕 대비 5.6:1, 연파랑 바탕 5.0:1 (D-70) */
  --accent-soft: #EBF1FF;
  --accent-ink: #FFFFFF;
  --danger: #C8291F;  --danger-soft: #FFEEEE;
  --warn: #B85C00;    --warn-soft: #FFF3E0;
  --ok: #157A3A;      --ok-soft: #F0FAF6;
  --me: #E8F3FF;      --them: var(--grey-100);
  --toast-bg: var(--grey-800); --toast-ink: #FFFFFF;
  /* 글자 단계 (크기 / 행간) */
  --t1: 30px; --t1-lh: 40px;    /* 화면 제목 */
  --t3: 22px; --t3-lh: 31px;    /* 요약 머리글·절 제목 */
  --t4: 20px; --t4-lh: 29px;    /* 목록 이름 */
  --t5: 17px; --t5-lh: 25.5px;  /* 본문 */
  --t6: 15px; --t6-lh: 22.5px;  /* 보조 */
  --t7: 13px; --t7-lh: 19.5px;  /* 탭 글자 */
  /* 간격·모서리 */
  --gutter: 24px;
  --radius-lg: 16px; --radius-md: 14px; --radius-sm: 10px; --radius-sheet: 24px;
  --btn-lg: 56px; --btn-md: 48px; --btn-sm: 38px;
  --press: transform 160ms cubic-bezier(.16, 1, .3, 1);
}
:root[data-theme="dark"] {
  --grey-50: #202027; --grey-100: #2C2C35; --grey-200: #3C3C47; --grey-300: #4D4D59; --grey-400: #62626D;
  --grey-500: #7E7E87; --grey-600: #9E9EA4; --grey-700: #C3C3C6; --grey-800: #E4E4E5; --grey-900: #FFFFFF;
  --bg: #17171C; --band: #101013; --surface: #202027; --surface-2: #2C2C35; --line: #3C3C47;
  --accent: #8FB0FF; --accent-soft: #16223F; --accent-ink: #0B1020;
  --danger: #FF7A70; --danger-soft: #3A1D1F; --warn: #FFB35C; --warn-soft: #3A2A12; --ok: #4FD07A; --ok-soft: #13301F;
  --me: #1A2744; --them: #202027; --toast-bg: #2C2C35; --toast-ink: #FFFFFF;
}
/* 앱 설정 "기기 따름"일 때만 기기 설정을 따른다(D-12: 밝은 화면이 기본) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --grey-50: #202027; --grey-100: #2C2C35; --grey-200: #3C3C47; --grey-300: #4D4D59; --grey-400: #62626D;
    --grey-500: #7E7E87; --grey-600: #9E9EA4; --grey-700: #C3C3C6; --grey-800: #E4E4E5; --grey-900: #FFFFFF;
    --bg: #17171C; --band: #101013; --surface: #202027; --surface-2: #2C2C35; --line: #3C3C47;
    --accent: #8FB0FF; --accent-soft: #16223F; --accent-ink: #0B1020;
    --danger: #FF7A70; --danger-soft: #3A1D1F; --warn: #FFB35C; --warn-soft: #3A2A12; --ok: #4FD07A; --ok-soft: #13301F;
    --me: #1A2744; --them: #202027; --toast-bg: #2C2C35; --toast-ink: #FFFFFF;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #E9ECF1;
  font-family: -apple-system, "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Roboto, sans-serif;
  font-size: var(--t5); line-height: var(--t5-lh); color: var(--text);
  word-break: keep-all; overflow-wrap: anywhere;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px 48px;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] body { background: #05070A; }

/* 시안 바깥 틀 */
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage-head { display: flex; gap: 12px; align-items: center; width: 390px; justify-content: space-between; }
.stage-head h1 { font-size: var(--t5); margin: 0; font-weight: 700; color: var(--text); }
.note { font-size: var(--t5); color: var(--text); margin: 0; max-width: 390px; }
.theme-toggle { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: var(--t5); cursor: pointer; }

/* 폰 */
.phone { width: 390px; height: 844px; background: var(--bg); color: var(--text); border-radius: 36px; border: 1px solid var(--line); overflow: hidden; position: relative; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.12); }
.statusbar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); font-size: var(--t6); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.screen { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; position: relative; }
.screen::-webkit-scrollbar { display: none; }
.screen > * { flex-shrink: 0; }   /* 내용이 길어도 입력창·행이 눌려 줄지 않게 */

/* 상단 바 — 제목 하나. 보조 정보는 .subhead */
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px var(--gutter) 4px; min-height: 56px; }
.topbar.nav { padding-left: 12px; padding-right: 12px; }
.topbar h1 { font-size: var(--t1); line-height: var(--t1-lh); margin: 0; font-weight: 700; letter-spacing: -0.4px; }
.topbar h2 { font-size: var(--t4); line-height: var(--t4-lh); margin: 0; font-weight: 700; }
.topbar .spacer { flex: 1; }
.subhead { padding: 0 var(--gutter) 12px; color: var(--text-2); font-size: var(--t6); line-height: var(--t6-lh); }
.iconbtn { width: 44px; height: 44px; border-radius: 12px; border: none; background: transparent; color: var(--text); font-size: 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--press); }
.iconbtn:active { transform: scale(.96); background: var(--surface); }
.iconbtn.back::before { content: "‹"; font-size: 36px; line-height: 1; }
.iconbtn svg { width: 24px; height: 24px; }

/* 찾기 입력 */
.search { margin: 4px var(--gutter) 12px; height: var(--btn-md); border-radius: var(--radius-md); background: var(--surface); display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--text); }
.search .ph { color: var(--text-3); }
.search .ic { color: var(--text-3); display: inline-flex; }
.search svg { width: 22px; height: 22px; }

/* 막힘·안내 — 연한 바탕, 글자는 진하게, 버튼 하나 */
.banner, .notice, .hint { margin: 0 var(--gutter) 12px; padding: 14px 16px; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 12px; }
.banner { background: var(--danger-soft); }
.notice { background: var(--warn-soft); }
.hint { background: var(--accent-soft); }
.banner .msg, .notice .msg, .hint .msg { flex: 1; color: var(--text); font-weight: 600; line-height: 1.45; }
.banner .msg strong { color: var(--danger); }
.notice .msg strong { color: var(--warn); }
.hint .msg strong { color: var(--accent); }
.banner .btn, .notice .btn, .hint .btn { flex: none; }

/* 구간 띠·구분선 */
.band { height: 16px; background: var(--band); flex: none; }
.divider { height: 16px; background: var(--band); margin: 8px 0; flex: none; }
.hr { height: 1px; background: var(--line); margin: 0 var(--gutter); }

/* 목록 머리(ListHeader) — 제목 왼쪽, 보조 숫자 오른쪽 */
.group { display: flex; justify-content: space-between; align-items: baseline; padding: 20px var(--gutter) 6px; font-size: var(--t6); line-height: var(--t6-lh); font-weight: 700; color: var(--text-2); }
.group .count { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 목록 행(ListRow) — 왼쪽 / 가운데 / 오른쪽 */
.row { display: flex; gap: 14px; padding: 16px var(--gutter); align-items: flex-start; text-decoration: none; color: inherit; position: relative; transition: background 120ms; }
.row + .row::before { content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 58px); right: var(--gutter); height: 1px; background: var(--line); }
.row:active { background: var(--surface); }
.row .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; color: var(--text-2); font-size: var(--t6); }
.row .body { flex: 1; min-width: 0; }
.row .title { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.row .name { font-weight: 700; font-size: var(--t4); line-height: var(--t4-lh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.2px; }
.row .when { color: var(--text-2); font-size: var(--t6); flex: none; font-variant-numeric: tabular-nums; max-width: 80%; }
.row .summary { color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .summary.two { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.meta { display: flex; gap: 10px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.cap { font-size: var(--t6); line-height: var(--t6-lh); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cap.strong { color: var(--text); font-weight: 600; }

/* 상태 셋 — 글자 + 색 */
.status { font-size: var(--t6); font-weight: 700; }
.status.ing { color: var(--warn); }
.status.done { color: var(--ok); }
.status.fail { color: var(--danger); }
.status::before { content: "●"; font-size: 9px; margin-right: 6px; vertical-align: 2px; }

/* 버튼 — 큰 56 / 중간 48 / 작은 38. 눌리면 줄어든다 */
.btn { height: var(--btn-md); padding: 0 18px; border-radius: var(--radius-md); border: none; background: var(--surface); color: var(--text); font-size: var(--t5); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; transition: var(--press); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.soft, .btn.weak { background: var(--accent-soft); color: var(--accent); }
.btn.danger { background: var(--danger-soft); color: var(--danger); }
.btn.outline { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.block { width: 100%; }
.btn.lg { height: var(--btn-lg); border-radius: var(--radius-lg); font-size: var(--t5); }
.btn.sm { height: var(--btn-sm); padding: 0 14px; font-size: var(--t6); border-radius: var(--radius-sm); }
.btn.text { background: transparent; color: var(--accent); padding: 0 8px; height: 44px; }
.actions { padding: 12px var(--gutter); display: flex; gap: 8px; }
.actions .btn { flex: 1; }
.bottom-cta { margin-top: auto; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.bottom-cta .btn { height: var(--btn-lg); border-radius: var(--radius-lg); width: 100%; }
.bottom-cta.double { flex-direction: row; }
.bottom-cta.double .btn:first-child { flex: 0 0 40%; }
.bottom-cta.double .btn:last-child { flex: 1; }

/* 하단 탭 */
.tabbar { height: 72px; border-top: 1px solid var(--line); display: flex; background: var(--bg); flex: none; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--text-2); font-size: var(--t7); line-height: var(--t7-lh); font-weight: 600; }
.tabbar a .ic { display: inline-flex; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--accent); }

/* 본문 블록 */
.section { padding: 8px var(--gutter); }
.section h3 { font-size: var(--t3); line-height: var(--t3-lh); margin: 12px 0 8px; font-weight: 700; letter-spacing: -0.3px; }
.section p { margin: 6px 0; }
.lead { font-size: var(--t3); line-height: var(--t3-lh); font-weight: 700; margin: 8px 0; letter-spacing: -0.3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: var(--btn-sm); padding: 0 14px; border-radius: 12px; background: var(--surface); display: inline-flex; align-items: center; gap: 6px; font-size: var(--t6); font-weight: 600; color: var(--text); text-decoration: none; }
.chip.on { background: var(--accent-soft); color: var(--accent); }

/* 시각 칩 — 할 일·요약 줄 앞 */
.tchip { display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.lines { padding: 0 var(--gutter); }
.line { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.line .tchip { margin-top: 0; }

/* 말풍선 */
.bubbles { padding: 4px var(--gutter) 12px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 86%; display: flex; flex-direction: column; gap: 4px; }
.bubble .who { font-size: var(--t6); color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.bubble .txt { padding: 12px 16px; border-radius: 18px; line-height: 1.5; }
.bubble.me { align-self: flex-end; align-items: flex-end; }
.bubble.me .txt { background: var(--me); border-bottom-right-radius: 6px; }
.bubble.them { align-self: flex-start; }
.bubble.them .txt { background: var(--them); border-bottom-left-radius: 6px; }
.bubble.hit .txt { box-shadow: inset 0 0 0 2px var(--accent); }
.bubble mark { background: transparent; color: var(--accent); font-weight: 700; }

/* 설정 행 */
.setting { display: flex; align-items: center; gap: 12px; padding: 16px var(--gutter); min-height: 64px; position: relative; text-decoration: none; color: inherit; }
.setting + .setting::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.setting .label { flex: 1; min-width: 0; }
.setting .label .cap { display: block; margin-top: 2px; }
.setting .value { color: var(--text-2); font-size: var(--t6); font-weight: 600; }
.setting .chev { color: var(--text-3); font-size: 22px; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: var(--grey-300); position: relative; flex: none; }
.switch.on { background: var(--accent); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.switch.on::after { left: 23px; }

/* 진행 막대 */
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* 요금 카드 — 테두리만, 고른 것은 연한 파랑 */
.plan { border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: inset 0 0 0 1.5px var(--line); }
.plan.pick { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.plan .name { font-size: var(--t4); line-height: var(--t4-lh); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; }
.plan ul { margin: 8px 0 0; padding-left: 20px; }
.plan li { margin: 2px 0; }

/* 빈 상태(Result) */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 0 var(--gutter) 40px; }
.empty .fig { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.empty .fig svg { width: 34px; height: 34px; }
.empty h2 { font-size: var(--t3); line-height: var(--t3-lh); margin: 0; font-weight: 700; }
.empty p { margin: 0; color: var(--text-2); }
.empty .btn { margin-top: 16px; }

/* 토스트 — 알약, 3초 */
.toast { position: absolute; left: 20px; right: 20px; bottom: 16px; min-height: 52px; padding: 14px 20px; border-radius: 100px; background: var(--toast-bg); color: var(--toast-ink); font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 5; }
.toast .ok { color: #7EE2A3; font-weight: 800; }

/* 첫 실행 */
.onboard { padding: 24px var(--gutter) 0; display: flex; flex-direction: column; gap: 16px; }
.onboard .step { font-size: var(--t6); font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.onboard h1 { font-size: var(--t1); line-height: var(--t1-lh); margin: 0; letter-spacing: -0.4px; font-weight: 700; }
.onboard .check { display: flex; gap: 12px; align-items: center; }
.onboard .check .mark { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 800; }
.onboard .check .mark.ok { color: var(--ok); background: var(--ok-soft); }
.onboard .check .mark.no { color: var(--danger); background: var(--danger-soft); }
.dots { display: flex; gap: 6px; justify-content: center; padding: 6px 0; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--accent); }
.checkbox { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.checkbox .box { width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--grey-400); flex: none; margin-top: 1px; }
.checkbox .box.on { background: var(--accent); box-shadow: none; position: relative; }
.checkbox .box.on::after { content: "✓"; color: var(--accent-ink); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* 흐림(결제 벽) */
.blur { filter: blur(6px); user-select: none; pointer-events: none; }