/* 식치북 디자인 시스템: 토큰과 환자 화면 부품 (.lr-*). 플랫폼의 모든 도구가 이 파일을 씁니다.
   설명과 견본: /design (public/design.html). 값은 여기서만 바꿉니다.
   글꼴 파일(Pretendard, Gowun Batang)은 이 CSS를 쓰는 페이지가 불러옵니다. */

:root {
  /* ---- 팔레트 (라레몰) ---- */
  --lr-forest: #2F4A35;
  --lr-moss: #5B7A4E;
  --lr-sage: #EEF2EA;
  --lr-paper: #F7F5F0;
  --lr-sand: #E7E3DA;
  --lr-line: #D9D5CC;
  --lr-ink: #1F1F1C;
  --lr-stone: #6E6A63;
  --lr-faint: #A6A198;
  --lr-clay: #A8553A;
  --lr-clay-tint: #F7EAE5;
  --lr-amber: #8A5A00;
  --lr-amber-tint: #FBF1DC;
  --lr-mist: #F0EEEA;
  --lr-char: #161616;

  /* ---- 의미 색: 부품은 이 이름만 씁니다 ---- */
  --c-brand: var(--lr-forest);        /* 주 버튼, 선택, 섹션 제목 */
  --c-brand-sub: var(--lr-moss);      /* 진행 표시, 입력칸 강조 */
  --c-brand-tint: var(--lr-sage);     /* 선택된 보기 바탕, 안내 상자 */
  --c-on-brand: #FFFFFF;
  --c-bg: #FFFFFF;                    /* 환자 화면 바탕 */
  --c-bg-alt: var(--lr-paper);        /* 흰 면과 구분할 면 */
  --c-line: var(--lr-line);           /* 보기·입력칸 테두리 */
  --c-divider: var(--lr-sand);        /* 구분선, 비활성 바탕 */
  --c-text-1: var(--lr-ink);          /* 본문 16.6:1 */
  --c-text-2: var(--lr-stone);        /* 설명 5.4:1 */
  --c-text-3: var(--lr-faint);        /* 입력 예시·비활성만 2.6:1 */
  --c-danger: var(--lr-clay);         /* 필수 *, 오류, 삭제 5.2:1 */
  --c-danger-tint: var(--lr-clay-tint);
  --c-warning: var(--lr-amber);       /* 확인 필요, 마감 임박 6.0:1 */
  --c-warning-tint: var(--lr-amber-tint);
  --c-neutral-tint: var(--lr-mist);   /* 대기 */
  --c-highlight: #FFE58A;             /* 형광펜: 식치북 지면의 꼭 읽을 문장 (인쇄해도 눈에 띄게) */

  /* ---- 글꼴: font 속성에 그대로 넣습니다 (rem: 휴대폰 글자 크기 설정을 따름) ---- */
  --font-serif: 'Gowun Batang', 'Noto Serif KR', serif;
  --font-sans: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --t-section: 700 1.5rem/1.35 var(--font-serif);       /* 24 섹션 제목 */
  --t-lead: 400 1rem/1.7 var(--font-serif);             /* 16 인사말 */
  --t-bar: 600 1.0625rem/1.4 var(--font-sans);          /* 17 상단 제목 */
  --t-question: 700 1.0625rem/1.5 var(--font-sans);     /* 17 질문 */
  --t-row: 600 1rem/1.5 var(--font-sans);               /* 16 예/아니오 줄 질문 */
  --t-body: 400 1rem/1.5 var(--font-sans);              /* 16 보기·입력·본문 */
  --t-button: 600 1rem/1.5 var(--font-sans);            /* 16 버튼 */
  --t-help: 400 0.875rem/1.6 var(--font-sans);          /* 14 설명 */
  --t-caption: 500 0.8125rem/1.5 var(--font-sans);      /* 13 작은 글자 */

  /* ---- 간격 (4px 단위) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --page-x: var(--s-5);         /* 화면 좌우 여백 */
  --gap-option: var(--s-2);     /* 보기 사이 */
  --gap-row: var(--s-4);        /* 예/아니오 줄 사이 */
  --gap-section: var(--s-6);    /* 섹션 제목 아래 */
  --gap-question: var(--s-8);   /* 질문 사이 */

  /* ---- 크기 · 모서리 ---- */
  --h-bar: 56px;       /* 상단 바 */
  --h-button: 56px;    /* 하단 버튼 */
  --h-field: 52px;     /* 보기, 입력칸 */
  --h-touch: 44px;     /* 누르는 곳 최소 */
  --w-choice: 60px;    /* 예/아니오 버튼 최소 너비 */
  --r-pill: 999px;     /* 보기·입력·버튼 */
  --r-card: 16px;      /* 카드, 안내 상자, 장문 입력 */

  /* ---- 모션: 한 요소에 한 움직임 ---- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);   /* 상태 변화 */
  --ease-enter: cubic-bezier(.16, 1, .3, 1);    /* 화면·시트 들어오기 */
  --dur-fast: 120ms;   /* 누름, 선택 */
  --dur-base: 200ms;   /* 펼침, 오류 표시 */
  --dur-slow: 320ms;   /* 단계 넘김 */
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ================= 환자 화면 부품 — 바깥 상자에 class="lr" ================= */
.lr { background: var(--c-bg); color: var(--c-text-1); font: var(--t-body); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
.lr :focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* 상단 바 · 인사말 · 단계 표시 */
.lr-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; height: var(--h-bar); padding: 0 var(--s-4); background: var(--c-bg); font: var(--t-bar); }
.lr-top b { flex: 1; text-align: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--s-2); }
.lr-top span { width: 18px; font-size: 18px; line-height: 1; }
.lr-lead { font: var(--t-lead); text-align: center; color: var(--c-text-2); padding: 14px var(--page-x) 0; margin: 0; white-space: pre-wrap; }
.lr-lead b { display: block; color: var(--c-text-1); font-weight: 700; }
.lr-steps { display: flex; align-items: center; justify-content: center; padding: 18px 22px 22px; }
.lr-steps span { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--c-brand-sub); background: var(--c-bg); }
.lr-steps span.cur { width: 19px; height: 19px; border-width: 3.5px; }
.lr-steps span.todo { border-color: var(--c-line); }
.lr-steps em { flex: 0 1 26px; min-width: 3px; height: 2px; background: var(--c-brand-sub); }
.lr-steps em.todo { height: 0; background: none; border-top: 2px dotted var(--c-line); }
.lr-count { margin: -14px 0 var(--s-4); text-align: center; font: var(--t-caption); color: var(--c-text-2); }

/* 본문 시트 · 섹션 제목 */
.lr-sheet { background: var(--c-bg); padding: var(--s-1) var(--page-x) 0; min-height: 60%; }
.lr-sec { text-align: center; padding-bottom: 18px; margin-bottom: var(--gap-section); border-bottom: 1px solid var(--c-divider); }
.lr-sec h3 { font: var(--t-section); color: var(--c-brand); margin: 0; }

/* 질문 */
.lr-q { margin-bottom: var(--gap-question); }
.lr-q > b { display: flex; gap: var(--s-1); font: var(--t-question); margin-bottom: var(--s-3); }
.lr-q b em { font-style: normal; color: var(--c-danger); }
.lr-q b > span:first-child { flex: none; white-space: nowrap; } /* 번호는 줄바꿈하지 않음 */
.lr-help { font: var(--t-help); color: var(--c-text-2); margin: -6px 0 var(--s-3) var(--s-5); }

/* 예/아니오 줄: 짧은 보기 두 개는 질문과 한 줄 */
.lr-q.lr-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap-row); }
.lr-row > div:first-child { flex: 1; min-width: 0; }
.lr-row b { display: flex; gap: var(--s-1); font: var(--t-row); }
.lr-row .lr-help { margin: 2px 0 0 var(--s-5); }
.lr-pair { flex: none; display: flex; gap: 6px; }
.lr-pair .lr-opt { min-width: var(--w-choice); min-height: var(--h-touch); padding: 0 var(--s-3); margin: 0; }
.lr-pair .lr-opt.on::after { display: none; }

/* 보기: 선택은 색 + 굵은 테두리 + 체크 표시 */
.lr-opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--h-field); padding: 10px 44px; margin-bottom: var(--gap-option);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-bg); color: var(--c-text-1); font: var(--t-body); text-align: center; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.lr-opt.on, .lr-opt[aria-checked="true"] { border: 1.5px solid var(--c-brand); background: var(--c-brand-tint); color: var(--c-brand); font-weight: 600; }
.lr-opt.on::after { content: ''; position: absolute; right: var(--s-5); top: 50%; width: 11px; height: 5px; margin-top: -5px; border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand); transform: rotate(-45deg); }
.lr-scale { display: flex; gap: 6px; }
.lr-scale .lr-opt { flex: 1; padding: 0; min-height: var(--h-touch); margin: 0; }
.lr-scale .lr-opt.on::after { display: none; }
.lr-scale-lab { display: flex; justify-content: space-between; font: var(--t-caption); color: var(--c-text-2); margin-top: 6px; padding: 0 var(--s-1); }

/* 입력칸 · 오류 상태 */
.lr-in { display: block; width: 100%; min-height: var(--h-field); border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 0 var(--s-5); font: var(--t-body); color: var(--c-text-1); background: var(--c-bg); outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard); }
.lr-in::placeholder { color: var(--c-text-3); }
.lr-in:focus { border: 1.5px solid var(--c-brand-sub); }
textarea.lr-in { min-height: 96px; border-radius: var(--r-card); padding: var(--s-3) var(--s-4); resize: vertical; }
.lr-opt .lr-in { margin-left: var(--s-2); min-height: 36px; }
.lr-in.err, .lr-in[aria-invalid="true"], .lr-opt.err { border: 1.5px solid var(--c-danger); }
.lr-errmsg { display: flex; gap: 6px; align-items: center; font: var(--t-help); color: var(--c-danger); margin: 6px 0 0 var(--s-3); }
.lr-errmsg svg { flex: none; }
.lr-row + .lr-errmsg { margin: calc(-1 * var(--s-2)) 0 var(--gap-row) var(--s-3); } /* 예/아니오 줄 아래 */
.lr-sheet > .lr-errmsg { justify-content: center; margin: 0 0 var(--s-2); } /* 보내기 실패: 버튼 줄 바로 위 */

/* 안내 상자 (화면당 하나) · 동의 상자 */
.lr-note { border-radius: var(--r-card); padding: 14px 18px; font: var(--t-help); color: var(--c-text-2); background: var(--c-brand-tint); }
.lr-consent { border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 14px var(--s-4); font: var(--t-caption); font-weight: 400; line-height: 1.7; color: var(--c-text-2); white-space: pre-wrap; }
.lr-consent + .lr-opt { margin-top: 10px; }

/* 버튼 · 하단 고정 버튼 줄 */
.lr-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: var(--h-button); border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text-1); font: var(--t-button); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard); }
.lr-btn.pri { flex: 1.4; border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.lr-btn:disabled { border-color: var(--c-divider); background: var(--c-divider); color: var(--c-text-3); cursor: default; }
/* 아직 못 넘어감: 비활성처럼 보이지만 누를 수 있다 (누르면 답하지 않은 문항으로 이동) */
.lr-btn[aria-disabled="true"] { border-color: var(--c-divider); background: var(--c-divider); color: var(--c-text-3); }
.lr-btn.danger { border-color: var(--c-line); background: var(--c-bg); color: var(--c-danger); } /* 되돌릴 수 없는 일 */
.lr-why { margin: 0; text-align: center; font: var(--t-help); color: var(--c-text-2); } /* 주 버튼이 꺼진 이유 한 줄 (버튼 줄 바로 위) */
.lr-nav { position: sticky; bottom: 0; display: flex; gap: var(--s-2); margin: var(--s-2) calc(-1 * var(--page-x)) 0; padding: var(--s-3) var(--page-x) var(--s-4); background: var(--c-bg); } /* 시트 끝에 붙어 마지막 내용을 가리지 않음 */

/* 완료 화면 · 빈 상태 */
.lr-done { text-align: center; padding: 70px 22px 30px; }
.lr-done i { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--c-brand); align-items: center; justify-content: center; }
.lr-done h3 { font: var(--t-section); font-size: 1.375rem; margin: var(--s-5) 0 10px; }
.lr-done p { color: var(--c-text-2); font: var(--t-body); line-height: 1.7; margin: 0 0 30px; }
.lr-empty { color: var(--c-text-2); font: var(--t-help); text-align: center; padding: 30px 0; }

/* 상태 표시: 색 하나에 뜻 하나 (원장님 앱에서도 씀) */
.lr-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font: var(--t-caption); font-weight: 600; white-space: nowrap; }
.lr-badge.done { background: var(--c-brand-tint); color: var(--c-brand); }       /* 응답 완료 */
.lr-badge.check { background: var(--c-warning-tint); color: var(--c-warning); }  /* 확인 필요 */
.lr-badge.fail { background: var(--c-danger-tint); color: var(--c-danger); }    /* 전송 실패 */
.lr-badge.wait { background: var(--c-neutral-tint); color: var(--c-text-2); }   /* 대기 */