/* ==========================================================
   깔끔 테마(clean) — 환자 웹뷰와 앱 로그인이 함께 쓰는 토큰·부품

   <html class="clean"> 가 붙은 화면에서만 산다. 색은 회사 공통(style.css --snt-*)과 같고,
   여기서 다른 것은 크기·밀도뿐이다(로그인 화면은 앱 번들에서만 clean 이 붙는다).

   기준은 셋이다 — 70대가 읽는 크기와 대비, 색 하나(파랑)만 강조,
   그리고 화면에 보이는 보안(개인정보 가림). 폰이든 태블릿이든 같은 배치다.
   색은 2026-10-06 대표 시안(파랑·옅은 회청 지면)을 따른다. 전에는 청록이었다.
   ========================================================== */
html.clean {
  color-scheme: only light;

  /* 2026-10-20 디자인 통일 — 값은 style.css 의 회사 공통 색(--snt-*)을 그대로 쓴다.
     환자 앱만 파랑이 한 톤 달랐다(#2563eb ↔ 의사·보조자 시안 #2f6bff). 어두운 화면은 theme.css. */
  --bg:          var(--snt-paper);   /* 지면 — 아주 옅은 회청. 흰 카드가 떠 보인다 */
  --surface:     #ffffff;
  --surface-2:   var(--snt-surface-2);

  --ink:         var(--snt-ink);
  --ink-2:       var(--snt-ink-2);
  --ink-3:       var(--snt-ink-3);   /* 흰 바탕 6.2:1, 지면 위 5.6:1 — 보조 글자 하한 */
  --line:        var(--snt-line);
  --line-2:      var(--snt-line-2);

  --brand:       var(--snt-blue);    /* 파랑 — 유일한 강조색. 채움 위 흰 글자는 굵게(17px 이상) */
  --brand-deep:  var(--snt-blue-deep);
  --brand-ink:   var(--snt-blue-ink);
  --brand-tint:  var(--snt-blue-tint);

  /* 상태색. 색만으로 말하지 않는다 — 글자와 기호가 항상 같이 간다 */
  --done:        var(--snt-green-ink);   --done-tint:   var(--snt-green-tint);    /* 확인 완료·통과 */
  --wait:        var(--snt-amber-ink);   --wait-tint:   var(--snt-amber-tint);    /* 의료진 확인 대기 */
  --warn:        var(--snt-orange-ink);  --warn-tint:   var(--snt-orange-tint);   /* 재측정·해야 할 일 */
  --danger:      var(--snt-red-ink);     --danger-tint: var(--snt-red-tint);      /* 내원 권고·삭제 */

  --r-lg: 14px;  --r-md: 12px;  --r-sm: 10px;  --radius: 12px;
  --tap: 56px;
  --shadow: none; --shadow-soft: none; --shadow-1: none;

  /* style.css·app.js(확인창) 가 쓰는 옛 이름 — 값만 이 테마로 맞춘다 */
  --paper: var(--bg);           --paper-2: var(--snt-paper-2);
  --line-strong: var(--line-2);
  --pine: var(--brand);         --pine-deep: var(--brand-deep);   --pine-tint: var(--brand-tint);
  --link: var(--brand-ink);
  --warm: var(--warn);          --warm-deep: #92400e;             --warm-tint: var(--warn-tint);
  --redo: var(--warn);          --redo-tint: var(--warn-tint);
  --refer: var(--danger);       --refer-tint: var(--danger-tint);
  --red: var(--danger);         --red-tint: var(--danger-tint);
  --amber-tint: var(--wait-tint);
  --blue-tint: var(--brand-tint);
}

html.clean { background: var(--bg); }
.clean body {
  background: var(--bg); color: var(--ink);
  font-size: 17px; line-height: 1.5; letter-spacing: -.01em;
}
/* 브라우저가 그리는 면도 이 테마의 것이다 — 선택 영역·포커스 링 */
.clean ::selection { background: var(--brand-tint); color: var(--ink); }
.clean :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.clean input:focus, .clean select:focus, .clean textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}

/* 웹 전용 요소(회사 소개·의료진 가입)는 앱에서 통째로 뺀다 */
html.app .web-only { display: none !important; }

/* ── 앱바 ── 폰·앱은 브랜드만. 로그아웃은 '내 정보'에 있다 */
.clean nav.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  height: auto; min-height: 52px; padding: env(safe-area-inset-top) 16px 0;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.clean nav.appbar .brand { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.clean nav.appbar .brand .mark { width: 26px; height: 26px; border-radius: 7px; }
.clean nav.appbar .brand .mark svg { width: 15px; height: 15px; }
.clean nav.appbar .page { display: none; font: inherit; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; }
.clean nav.appbar .who { display: none; font-size: 14px; color: var(--ink-2); }
.clean nav.appbar .nav-logout { display: none; }

/* ── 글자 크기 세 단계 ── 제목 22~24 · 본문 17 · 라벨 15 */
.clean h1 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.clean .card h2, .clean h2 {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.35;
  color: var(--ink); border: 0; padding: 0; margin: 0 0 12px;
}
.clean .card h2::before { content: none; }       /* 서식 번호(01·02)는 이 테마에 없다 */
.clean .msg { font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.clean .msg.good { color: var(--done); font-weight: 700; }
.clean .muted { font-size: 15px; color: var(--ink-3); }
.clean .sub { font-size: 15px; color: var(--ink-3); }

/* ── 카드 ── 흰 면, 1px 선, 그림자 없음 */
.clean .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 16px; margin-bottom: 14px; box-shadow: none;
}

/* ── 폼 ── 누르는 것은 56px 하한. 손이 떨려도 들어가야 한다 */
.clean label { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 16px 0 6px; }
.clean label .hint { display: block; font-weight: 500; font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }
.clean input, .clean select, .clean textarea {
  min-height: var(--tap); padding: 12px 16px; font-size: 17px; color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
}
.clean select {
  appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6772' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 22px;
}
.clean select:disabled { color: var(--ink); background-color: var(--surface-2); opacity: 1; }
.clean input[type="checkbox"] { min-height: 0; padding: 0; width: 22px; height: 22px; accent-color: var(--brand); }
.clean input[type="file"] { padding: 10px 12px; font-size: 15px; background: var(--surface); }
.clean ::placeholder { color: var(--placeholder); }   /* style.css --snt-placeholder (4.5:1 이상) */

/* ── 버튼 ── 채움(주 행동) · 흰 테두리(보조) · 빨간 글자(위험) */
.clean button {
  min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-sm);
  background: var(--brand); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .05s;
}
.clean button:hover { background: var(--brand-deep); }
.clean button.green { background: var(--brand); }
.clean button.gray { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-2); box-shadow: none; }
.clean button.gray:hover { background: var(--surface-2); border-color: var(--ink-3); }
.clean button.red { background: transparent; color: var(--danger); border: 1.5px solid #f0c4be; box-shadow: none; }
.clean button.red:hover { background: var(--danger-tint); }
.clean button:disabled, .clean button:disabled:hover { background: #d3d8de; color: #fff; border-color: transparent; }
.clean .actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.clean .actions button { flex: 1 1 100%; min-height: var(--tap); font-size: 18px; font-weight: 800; }
.clean .actions.split button { flex: 1 1 40%; }

/* ── 누르는 것 ── 폰 웹뷰에서 "가끔 안 눌린다"(2026-10-07)를 줄인다.
   touch-action: manipulation — 두 번 누르기 확대를 기다리느라 탭이 늦게 먹거나
   빠른 연속 탭이 확대로 먹히는 것을 막는다. 누른 순간 살짝 눌려 보여야
   "눌렸는지"를 사람이 안다 — 아무 변화가 없으면 같은 버튼을 다시 누른다. */
.clean button, .clean a, .clean label, .clean select, .clean [data-act] {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.clean button:active:not(:disabled), .clean [data-act]:active { transform: scale(.98); filter: brightness(.96); }
/* 앱에서는 화면 어디를 두 번 쳐도 확대되지 않게 — 단추 밖(글·카드)을 두 번 치면 확대되고 되돌리지 못했다
   (2026-10-13 사용자). 확대 자체는 앱 번들의 viewport(user-scalable=no, copy-web.mjs)가 막는다. */
html.app, html.app body { touch-action: manipulation; }

/* ── 비밀번호 표시 버튼 ── 입력칸 안, 손가락 크기 */
.clean .pw-eye {
  min-height: 40px; min-width: 44px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); font-size: 14px;
}
/* .clean button:hover(진녹 바탕)가 이 버튼까지 덮어 탭한 순간 글자가 사라졌다 —
   안드로이드 웹뷰는 탭 뒤 hover 가 남는다. 테두리만 진해지게. */
.clean .pw-eye:hover, .clean .pw-eye:focus, .clean .pw-eye:active {
  background: transparent; color: var(--ink);
}
/* 누를 때 줄어들거나 움직이지 않는다 — 위 .clean button:active 의 scale 이 버튼을 밀어 손가락 밑에서
   빠져나가 눌림이 취소됐다(2026-10-19 사용자). 그보다 강한 선택자로 막는다. */
.clean .pw-wrap .pw-eye:active:not(:disabled) { transform: none; filter: none; }

/* ── 확인창 ── 크기는 손가락 기준, 모양은 이 테마 */
.clean dialog.ui-dlg, .clean dialog.pw-modal { border-radius: var(--r-md); }
.clean .ui-dlg-acts button { border-radius: var(--r-sm); }

/* ── 알림·오프라인 막대 ── */
.clean .offline-bar { border-radius: var(--r-sm); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .clean * { transition: none !important; animation: none !important; }
}