/* 사라온 베타 모양. 기준: docs/DESIGN.md ("단정한 금융앱식")
   색·크기는 아래 변수로만 쓴다. 다크 모드 없음(밝은 화면 하나) */
:root {
  color-scheme: light;

  /* 색: 색마다 뜻 하나. 파랑은 누르는 곳에만, 초록은 잘 됐어요, 빨강은 조심하세요 */
  --white: #ffffff;
  --gray: #f2f4f6;
  --gray-line: #e5e8eb;
  --ink: #191f28;
  --ink-sub: #4e5968;
  --ink-muted: #636d7a;
  --blue: #2c4a8a;
  --blue-soft: #e9eef8;
  --on-blue: #ffffff;
  --green: #1b7a47;
  --green-soft: #e7f6ee;
  --red: #c0342b;
  --red-soft: #fdecea;
  --dim: rgba(20, 24, 30, .45);

  /* 글자: 휴대폰 기본 글꼴(웹 글꼴 없음). 16px 아래로 내려가지 않는다 */
  --font: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --title-size: 28px;       --title-line: 38px;       --title-weight: 700;  --title-tracking: -0.02em;
  --sheet-title-size: 23px; --sheet-title-line: 32px; --sheet-title-weight: 700;
  --question-size: 20px;    --question-line: 29px;    --question-weight: 600;
  --body-size: 18px;        --body-line: 29px;        --body-weight: 400;
  --button-size: 18px;      --button-line: 24px;      --button-weight: 600;
  --small-size: 16px;       --small-line: 24px;       --small-weight: 400;
  --strong-weight: 700;

  /* 간격 */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-gutter: 22px;
  --space-top: 26px;
  --space-answer: 16px;     /* 답 칸 안쪽 */

  /* 크기 */
  --button-height: 58px;
  --pick-min-height: 88px;
  --touch-min: 44px;
  --answer-min-height: 135px;
  --check-size: 24px;       /* 체크 상자·라디오 */
  --mark-size: 72px;        /* P2 ✓ 동그라미 */
  --dot-size: 8px;          /* P0 몇 번째 장 */
  --line: 1px;              /* 표·카드 테두리 */
  --line-strong: 1.5px;     /* 입력 칸·파랑 테두리 버튼 */
  --content-max: 640px;      /* 부모님·자녀·운영자(A1) 화면, 확인 창 */
  --tick-size: 28px;        /* A1 할 일 줄 왼쪽 동그라미(누르는 곳은 44px) */
  --progress-dot: 12px;     /* A1 가족 한눈에 점 */

  /* 모서리 */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-sheet: 24px;
  --radius-pill: 999px;
}

/* ── 바탕 ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--white); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font); font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight);
  word-break: keep-all; overflow-wrap: anywhere;
}
main {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-top) var(--space-gutter) var(--space-top);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
main > *, form > *, .group > * { margin-top: 0; margin-bottom: 0; }

h1 {
  font-size: var(--title-size); line-height: var(--title-line); font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking); margin: 0;
}
h2 { font-size: var(--question-size); line-height: var(--question-line); font-weight: var(--strong-weight); margin: var(--space-md) 0 0; }
p { margin: 0; }
a { color: var(--blue); }
b, strong { font-weight: var(--strong-weight); }
.lead { color: var(--ink-sub); }
.muted { color: var(--ink-muted); }
.hint { display: block; font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-muted); }
.brand { font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--strong-weight); color: var(--ink-muted); }
.box { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); color: var(--ink-sub); }
.error { color: var(--red); font-size: var(--small-size); line-height: var(--small-line); }
.error.box { background: var(--red-soft); color: var(--red); }
.warn.box { background: var(--red-soft); color: var(--red); }
.stack { display: flex; flex-direction: column; gap: var(--space-sm); }

/* ── 부모님 한 화면 틀: 내용은 위, 주 버튼은 화면 아래 ── */
body.screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body.screen main { flex: 1 0 auto; width: 100%; padding-bottom: var(--space-xs); }
form.fill { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--space-sm); }
.actions { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-xs); }
.actions > .btn { width: 100%; }
.actions.sticky {
  position: sticky; bottom: 0; z-index: 1; background: var(--white);
  margin: 0 calc(-1 * var(--space-gutter)); padding: var(--space-sm) var(--space-gutter) calc(var(--space-sm) + env(safe-area-inset-bottom));
}

/* ── 입력 ── */
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.label { font-weight: var(--button-weight); }
input[type=text], input[type=tel], input[type=password], textarea {
  font: inherit; font-size: var(--body-size); line-height: var(--body-line); color: var(--ink);
  width: 100%; min-height: var(--touch-min); padding: var(--space-sm) var(--space-answer);
  background: var(--white); border: var(--line-strong) solid var(--gray-line); border-radius: var(--radius-md);
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--blue); }
.field:has(.error) input { border-color: var(--red); }
input[type=checkbox], input[type=radio] { width: var(--check-size); height: var(--check-size); margin: 0; flex: none; accent-color: var(--blue); }
.check, .choice { display: flex; gap: var(--space-sm); align-items: center; min-height: var(--touch-min); cursor: pointer; }
.choices { display: flex; flex-direction: column; gap: var(--space-xs); }
/* C0 테마: 한 줄에 한 칸(긴 이름도 한두 줄로) */
.choices.cards .choice {
  background: var(--white); border: var(--line-strong) solid var(--gray-line); border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-answer);
}
.choices.cards .choice:has(input:checked) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); font-weight: var(--button-weight); }
/* 체크 줄 아래 딸린 줄(전체 보기·힌트): 체크 상자 너비만큼 들여서 글과 맞춘다 */
.check-sub { margin-left: calc(var(--check-size) + var(--space-sm)); }
.notice { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-sub); }

/* ── 버튼: 주 버튼은 파랑, 보조 버튼은 회색 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer;
  min-height: var(--button-height); padding: var(--space-xs) var(--space-md);
  font-family: inherit; font-size: var(--button-size); line-height: var(--button-line); font-weight: var(--button-weight);
  background: var(--gray); color: var(--ink-sub); border: 0; border-radius: var(--radius-md);
}
.btn.primary { background: var(--blue); color: var(--on-blue); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.outline { background: var(--white); color: var(--blue); border: var(--line-strong) solid var(--blue); }
.btn.small { min-height: var(--touch-min); padding: var(--space-xs) var(--space-sm); font-size: var(--small-size); }
.btn.small.danger { background: var(--red-soft); color: var(--red); }
form.inline { display: inline; }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }   /* 같은 크기 두 버튼. 글이 두 줄이어도 세로 가운데 */
.btn-pair .btn { width: 100%; }

/* 작은 링크: 누르는 높이 44px 이상 */
.small-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--space-md); }
.small-links a, .back a, .past a, footer a {
  display: inline-flex; align-items: center; min-height: var(--touch-min); text-decoration: none;
}
.back a { font-size: var(--body-size); }

/* 맨 아래 "그만 받을래요" */
footer {
  max-width: var(--content-max); width: 100%; margin: 0 auto;
  padding: 0 var(--space-gutter) calc(var(--space-xs) + env(safe-area-inset-bottom));
  display: flex; justify-content: center; gap: var(--space-md); font-size: var(--small-size); line-height: var(--small-line);
}
footer a { color: var(--ink-muted); }

/* ── P0 세 장 ── */
.intro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.intro-list li { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
/* P0 2장 세 줄·3장 약속 다섯 줄: 회색 칸 하나, 줄 간격 24(button-line)로 한 화면에. 줄마다 앞에 · */
.intro-list.promise { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
.intro-list.promise li { background: none; border-radius: 0; padding: 0 0 0 var(--space-sm); position: relative; line-height: var(--button-line); }
.intro-list.promise li::before { content: "·"; position: absolute; left: 0; color: var(--ink-muted); font-weight: var(--strong-weight); }
.notice-full summary {
  display: inline-flex; align-items: center; min-height: var(--touch-min); cursor: pointer; list-style: none;
  color: var(--blue); font-size: var(--small-size); text-decoration: underline;
}
.notice-full summary::-webkit-details-marker { display: none; }
.notice-full .notice { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); }
/* P0 1장: 누가 신청했는지 (부르지 않고 표기로) */
.sender { font-weight: var(--button-weight); }
.dots { display: flex; justify-content: center; gap: var(--space-xs); padding: var(--space-xs) 0; }
.dots span { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-pill); background: var(--gray-line); }
.dots span.on { background: var(--ink-muted); }

/* ── P1 고르기: 질문 버튼 ── */
.readmark {
  align-self: flex-start; background: var(--green-soft); color: var(--green); border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-sm); font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--button-weight);
}
.readmark::before { content: "✓ "; }
.picks { display: flex; flex-direction: column; gap: var(--space-sm); }
.pick {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0;
  min-height: var(--pick-min-height); padding: var(--space-sm) calc(var(--space-md) + var(--space-md)) var(--space-sm) var(--space-md);
  background: var(--gray); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none;
  font-size: var(--question-size); line-height: var(--question-line); font-weight: var(--question-weight);
}
.pick::after {
  content: "›"; position: absolute; right: var(--space-md); top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: var(--title-size); font-weight: var(--body-weight);
}
.pick-tag { font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--strong-weight); color: var(--blue); }
.pick.done { color: var(--ink-muted); font-weight: var(--body-weight); padding-right: var(--space-md); }
.pick.done::after { content: none; }
.pick.done .pick-tag { color: var(--green); }

/* ── P1 답 쓰기 ── */
/* 제목 옆 단계 표시 1/3 (같은 줄이라 높이가 늘지 않는다) */
.step-of {
  margin-left: var(--space-xs); font-size: var(--small-size); line-height: var(--small-line);
  font-weight: var(--body-weight); letter-spacing: normal; color: var(--ink-muted); white-space: nowrap;
}
.prev-q {
  font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qcard { display: flex; flex-direction: column; gap: var(--space-sm); }
.qcard .qtext {
  margin: 0; background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md);
  font-size: var(--question-size); line-height: var(--question-line); font-weight: var(--question-weight); color: var(--ink);
}
.qcard textarea {
  min-height: var(--answer-min-height); height: var(--answer-min-height); resize: none; overflow-y: hidden;
  background: var(--gray); border-color: transparent; padding: var(--space-answer);
}
.qcard textarea:focus { background: var(--white); border-color: var(--blue); }
.qcard textarea::placeholder { color: var(--ink-muted); }
/* 빈 답 오류: 부모님 화면에선 상자 없이 빨간 한 줄 + 답 칸 빨간 테두리 (60자 2단 질문도 한 화면에) */
body.screen .error.box { background: none; padding: 0; border-radius: 0; font-weight: var(--button-weight); }
body.screen:has(.error.box) .qcard textarea:not(:focus) { border-color: var(--red); }

/* ── P2 끝 화면 ── */
.sent-line { color: var(--green); font-weight: var(--button-weight); }
.sent-line::before { content: "✓ "; }
.done { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; }
.done-mark {
  width: var(--mark-size); height: var(--mark-size); border-radius: var(--radius-pill);
  background: var(--green-soft); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--title-size); font-weight: var(--title-weight);
}

/* ── 확인 창: 아래에서 올라오는 판 ── */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center;
  background: var(--dim); overscroll-behavior: contain;
}
.sheet-panel {
  width: 100%; max-width: var(--content-max); background: var(--white);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: var(--space-top) var(--space-gutter) calc(var(--space-md) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-sm);
  animation: sheet-up .2s ease-out;
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet-panel { animation: none; } }
.sheet-panel p { margin: 0; color: var(--ink-sub); }
.sheet-panel .sheet-title {
  color: var(--ink); font-size: var(--sheet-title-size); line-height: var(--sheet-title-line); font-weight: var(--sheet-title-weight);
}
.sheet-panel .sheet-preview {
  white-space: pre-line; background: var(--gray); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-answer); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sheet .btn-pair { margin-top: var(--space-xs); }

/* ── 지난 질문 목록 ── */
.past { list-style: none; margin: 0; padding: 0; }
.past li { display: flex; align-items: center; gap: var(--space-sm); border-bottom: var(--line) solid var(--gray-line); }
.past a { flex: 1; }

/* ── C1 자녀: 받은 답 카드 ── */
.acard { background: var(--gray); border: var(--line) solid transparent; border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.acard[open] { background: var(--white); border-color: var(--gray-line); }
.acard summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); min-height: var(--touch-min); }
.acard summary::-webkit-details-marker { display: none; }
.acard .meta { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-muted); }
.acard summary .qtext { font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--button-weight); color: var(--ink); }
.acard > .qtext { margin: var(--space-sm) 0 0; font-weight: var(--strong-weight); color: var(--ink-sub); }
.acard .answer { margin: var(--space-xs) 0 0; background: var(--gray); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-answer); }
.badge {
  display: inline-block; vertical-align: middle; margin-left: var(--space-xs); padding: 0 var(--space-xs);
  background: var(--blue); color: var(--on-blue); border-radius: var(--radius-pill);
  font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--button-weight);
}
.badge.gray { background: var(--ink-muted); color: var(--white); }

/* ── C0 신청서 ── */
.group { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.group h2 { margin: 0; }
.group .notice { background: var(--white); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-answer); }

/* ── 신청 페이지 /beta: 누구나 여는 공개 페이지, 한 페이지를 위에서 아래로 ── */
.beta-example { margin: 0; background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.beta-example figcaption { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-muted); }
.beta-example p { font-size: var(--question-size); line-height: var(--question-line); font-weight: var(--question-weight); }
/* 이렇게 해요: 번호 동그라미(회색 칸, 누르는 곳이 아니라 파랑 안 씀) */
.beta-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); counter-reset: step; }
.beta-steps li { counter-increment: step; display: grid; grid-template-columns: var(--check-size) 1fr; gap: var(--space-sm); align-items: start; }
.beta-steps li::before {
  content: counter(step); width: var(--check-size); height: var(--check-size); margin-top: 2px; border-radius: var(--radius-pill);
  background: var(--gray); color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--strong-weight);
}
.beta-info { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.beta-info ul { margin: 0; padding-left: var(--space-md); display: flex; flex-direction: column; gap: 4px; }
/* 신청 마감: 베타 안내 맨 위, 크고 굵게 */
.beta-deadline { display: flex; flex-direction: column; }
.beta-deadline span { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-sub); }
.beta-deadline strong { font-size: var(--question-size); line-height: var(--question-line); color: var(--ink); }
.faq { margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.faq div { border-bottom: var(--line) solid var(--gray-line); padding-bottom: var(--space-sm); }
.faq dt { font-weight: var(--button-weight); }
.faq dd { margin: 4px 0 0; color: var(--ink-sub); }
.group h3 { margin: 0; font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--strong-weight); }
/* 짧은 고르기 칸(나이대 등): 한 줄에 여러 칸 */
.choices.cards.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.choices.cards.cols .choice { padding: var(--space-sm); gap: var(--space-xs); white-space: nowrap; }
/* 동의 안내문(원문 그대로): 흰 칸 안. 보관 기간 같은 중요한 줄은 크고 굵게 */
.notice-doc { background: var(--white); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-answer); font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-sub); display: flex; flex-direction: column; gap: var(--space-xs); }
.notice-doc h3 { margin: 0; font-size: var(--body-size); line-height: var(--body-line); color: var(--ink); }
.notice-doc h4 { margin: var(--space-xs) 0 0; font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--strong-weight); color: var(--ink); }
.notice-doc ul { margin: 0; padding-left: var(--space-md); }
.notice-doc strong { font-size: var(--body-size); line-height: var(--body-line); color: var(--ink); }
.notice-doc a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.until { text-align: center; font-weight: var(--button-weight); }
/* 자동 신청을 막는 숨은 칸: 사람에게는 안 보이고 읽는 프로그램도 건너뛴다 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── 개인정보 처리방침 /privacy: 읽는 페이지 ── */
.doc { display: flex; flex-direction: column; gap: var(--space-sm); }
.doc h2 { margin-top: var(--space-md); }
.doc h3 { margin: var(--space-xs) 0 0; font-size: var(--body-size); line-height: var(--body-line); }
.doc ul { margin: 0; padding-left: var(--space-md); display: flex; flex-direction: column; gap: 4px; }
.doc hr { width: 100%; border: 0; border-top: var(--line) solid var(--gray-line); margin: var(--space-xs) 0; }
.doc a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.doc-table { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--small-size); line-height: var(--small-line); }
.doc th, .doc td { border: var(--line) solid var(--gray-line); padding: var(--space-xs); text-align: left; vertical-align: top; }
.doc th { background: var(--gray); font-weight: var(--strong-weight); }

/* ── G1 사라온이 뭐예요? ── */
.about-list { margin: 0; padding-left: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }

/* 복사 상자 */
.copybox { display: flex; flex-direction: column; gap: var(--space-xs); }
.copybox textarea { min-height: 0; font-size: var(--small-size); line-height: var(--small-line); background: var(--gray); border-color: transparent; }
.copybox .btn { align-self: flex-start; }

/* ── 운영자(A1): 같은 시스템. 위 작은 이름 줄, 분절 탭, 할 일 줄(동그라미·할 일·버튼), 가족 한눈에, 가족 카드 ── */
body.admin footer { display: none; }
.a1-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.a1-brand { font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--strong-weight); color: var(--ink-muted); }
.link-btn {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--small-size); line-height: var(--small-line); color: var(--blue); text-decoration: underline;
}
.link-btn.danger { color: var(--red); }
.a1-bar .link-btn { color: var(--ink-sub); }
/* 분절 탭: 회색 판 위 흰 칸이 지금 탭 */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--gray); border-radius: var(--radius-md); }
.seg a {
  display: flex; align-items: center; justify-content: center; min-height: var(--touch-min); border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--button-size); line-height: var(--button-line); font-weight: var(--button-weight); color: var(--ink-sub);
}
.seg a[aria-current] { background: var(--white); color: var(--ink); }
.seg.three { grid-template-columns: 1fr 1fr 1fr; }
.a1-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); }
.a1-head h2 { margin: 0; }
.a1-count { font-size: var(--question-size); line-height: var(--question-line); color: var(--ink-muted); white-space: nowrap; }
.a1-count b { color: var(--ink); }
.box.how { font-size: var(--small-size); line-height: var(--small-line); }
.alerts { margin: 0; padding-left: var(--space-md); }
.alerts a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.all-done { background: var(--green-soft); color: var(--green); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); font-weight: var(--button-weight); }
.all-done::before { content: "✓ "; }
.a1-group { font-size: var(--body-size); line-height: var(--body-line); color: var(--ink-sub); margin-top: var(--space-xs); }
/* 그 일을 한 자리 바로 옆의 안내 */
.a1-notice { font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--button-weight); }
.a1-notice.ok { color: var(--green); }
.a1-notice.error { color: var(--red); }
:target { scroll-margin-top: var(--space-md); }

/* 할 일 줄: 왼쪽 동그라미 / 가운데 할 일 / 오른쪽 버튼 */
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.task { display: grid; grid-template-columns: var(--touch-min) 1fr auto; gap: var(--space-xs); align-items: start; padding: var(--space-xs) 0; border-bottom: var(--line) solid var(--gray-line); }
.task-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.task-title { font-weight: var(--button-weight); line-height: var(--button-line); }
.task-sub, .task-time { font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.task-warn { font-size: var(--small-size); line-height: var(--small-line); color: var(--red); }
.task-side { display: flex; align-items: center; min-height: var(--touch-min); }
.task-side .btn { white-space: nowrap; }
.task.is-done .task-title { color: var(--ink-muted); font-weight: var(--body-weight); }
.task.is-done .task-time { color: var(--green); }
.task.is-done .task-time::before { content: "✓ "; }
.tick-form { display: contents; }
.tick { font-size: var(--small-size); position: relative; display: block; width: var(--touch-min); height: var(--touch-min); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.tick::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--tick-size); height: var(--tick-size); box-sizing: border-box; border-radius: var(--radius-pill);
  border: 2px solid var(--ink-muted); background: var(--white);
}
.tick.on::before { border-color: var(--green); background: var(--green); }
.tick.on::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: var(--small-size); font-weight: var(--strong-weight);
}
.task-more summary {
  display: inline-flex; align-items: center; min-height: var(--touch-min); cursor: pointer; list-style: none;
  color: var(--blue); font-size: var(--small-size); line-height: var(--small-line);
}
.task-more summary::-webkit-details-marker { display: none; }
.task-more[open] summary { color: var(--ink-sub); }
.newanswer { border-left: var(--line-strong) solid var(--gray-line); padding-left: var(--space-sm); margin: var(--space-xs) 0; display: flex; flex-direction: column; gap: 4px; }
.newanswer .muted { font-size: var(--small-size); line-height: var(--small-line); }
.newanswer .late { color: var(--red); }
.newanswer .qtext { font-weight: var(--button-weight); color: var(--ink-sub); }
.newanswer .answer { background: var(--gray); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); }

/* 가족 한눈에: 번호 / 점 10개 / 상태 */
.glance { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-md); }
.legend { display: flex; flex-wrap: wrap; column-gap: var(--space-md); font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-sub); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: var(--progress-dot); height: var(--progress-dot); border-radius: var(--radius-pill); box-sizing: border-box; flex: none; }
.dot.answered { background: var(--green); }
.dot.seen { background: var(--ink-muted); }
.dot.missed { background: var(--white); border: 2px solid var(--red); }
.dot.none { background: var(--gray-line); }
.fam-rows { list-style: none; margin: 0; padding: 0; }
.fam-row {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-sm); row-gap: 2px; min-height: var(--touch-min);
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0; position: relative; border-bottom: var(--line) solid var(--gray-line);
  color: var(--ink); text-decoration: none;
}
.fam-row::after { content: "›"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: var(--question-size); }
.fam-no { min-width: 2.6em; font-weight: var(--button-weight); font-variant-numeric: tabular-nums; }
.dots10 { display: inline-flex; gap: 4px; }
.fam-state { margin-left: auto; font-size: var(--small-size); line-height: var(--small-line); color: var(--ink-sub); text-align: right; }
.fam-state.watch { color: var(--red); font-weight: var(--strong-weight); }

/* 가족 관리 */
.a1-box { background: var(--gray); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.a1-box h2 { margin: 0; font-size: var(--body-size); line-height: var(--body-line); }
.a1-box p { color: var(--ink-sub); }
.qerrors { margin: 0; padding-left: var(--space-md); font-size: var(--small-size); line-height: var(--small-line); color: var(--red); }
.fam-card { border: var(--line) solid var(--gray-line); border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.fam-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.fam-card-head h3 { margin: 0; font-size: var(--question-size); line-height: var(--question-line); }
.fam-card .fam-state { margin-left: 0; }
.fam-info { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.fam-info div { display: grid; grid-template-columns: 4.5em 1fr; gap: var(--space-xs); }
.fam-info dt { color: var(--ink-muted); }
.fam-info dd { margin: 0; }
.card-links { display: flex; flex-wrap: wrap; column-gap: var(--space-md); }
.card-links form { display: inline; }
.phone { font-variant-numeric: tabular-nums; }
/* 신청 탭: 경로별 표, 상태 거르기, 신청 카드(상태 바꾸기·C0 링크) */
.a1-table { width: 100%; border-collapse: collapse; font-size: var(--small-size); line-height: var(--small-line); font-variant-numeric: tabular-nums; }
.a1-table th, .a1-table td { padding: var(--space-xs); border-bottom: var(--line) solid var(--gray-line); text-align: right; vertical-align: top; }
.a1-table th:first-child, .a1-table td:first-child { text-align: left; }
.a1-table thead th { color: var(--ink-muted); font-weight: var(--body-weight); }
.a1-table tfoot th { font-weight: var(--strong-weight); border-bottom: 0; }
.a1-table .sub { display: block; color: var(--ink-muted); }
.src-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.src-links li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.src-links .btn { flex: none; white-space: nowrap; min-width: var(--touch-min); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips a {
  display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-sm); border-radius: var(--radius-pill);
  background: var(--gray); color: var(--ink-sub); text-decoration: none; font-size: var(--small-size); line-height: var(--small-line);
}
.chips a[aria-current] { background: var(--blue-soft); color: var(--blue); font-weight: var(--button-weight); }
select {
  font: inherit; font-size: var(--body-size); color: var(--ink); min-height: var(--touch-min); padding: 0 var(--space-sm);
  background: var(--white); border: var(--line-strong) solid var(--gray-line); border-radius: var(--radius-md);
}
select:focus { outline: none; border-color: var(--blue); }
.su-status { display: flex; align-items: flex-end; gap: var(--space-xs); }
.su-status .field { flex: 1; }
.su-invite { display: flex; flex-direction: column; gap: var(--space-xs); }
.su-actions { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-md); }
.su-actions form { display: inline; }
.su-invite a, .fam-info a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

/* 확인 판 안: 지울 것 요약 상자, 번호 칸 */
.sheet-box { background: var(--gray); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-answer); }
.sheet-panel .sheet-box p { color: var(--ink); }
.sheet-panel .field input.invalid { border-color: var(--red); }
.sheet-panel .error { color: var(--red); font-weight: var(--button-weight); }
.btn.danger-solid { background: var(--red); color: var(--white); }