/* 설문·관리자 공용 스타일 — 진단 사이트(../mockup/self_manual_base.css + index.html)의 시안 C '컬러 타일'에서
   설문에 필요한 토큰·부품만 옮김. 진단 사이트와 파일을 공유하지 않는 별도 프로젝트라 복사본으로 둠 */
:root {
  --navy: #2d4d83;
  --navy-2: #5b76a8;
  --t1: #b8c6de; --t2: #dbe3f0; --t3: #edf1f8; --t4: #f3f6fb;
  --ink: #1c2230;
  --g-text: #333; --g-sub: #7d8595; --g-line: #cfd5e0;
  --line: #eceef3;
  --page-bg: #f7f8fb;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--page-bg); color: var(--ink); line-height: 1.6;
  word-break: keep-all; overflow-wrap: break-word;
  min-height: 100vh; min-height: 100dvh;
}
[hidden] { display: none !important; }
.wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.appbar { background: #fff; color: var(--navy); display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.appbar .t { font-size: 14.5px; font-weight: 700; }
.appbar .t::before { content: "📝 "; }
.appbar .u { font-size: 12px; color: var(--g-sub); background: var(--t3); padding: 3px 10px; border-radius: 999px; }
.screen { display: none; flex: 1; flex-direction: column; padding: 16px 16px 36px; }
.screen.active { display: flex; }
.pg-title { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 22px; padding: 20px 18px; margin-bottom: 14px; }
.pg-title .k { font-size: 12px; font-weight: 600; opacity: .85; }
.pg-title h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.3; margin: 2px 0 6px; }
.pg-title p { font-size: 13.8px; opacity: .92; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.panel-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.panel-h .ico { flex: 0 0 30px; height: 30px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.panel-b { font-size: 13.5px; color: var(--g-text); }
.btn {
  display: block; width: 100%; padding: 15px; border: 1.5px solid var(--navy); border-radius: 16px;
  background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 16px rgba(45,77,131,.25);
}
.btn:active { transform: translateY(1px); }
.btn.line { background: #fff; color: var(--navy); box-shadow: none; }
.btn:disabled { background: var(--t1); border-color: var(--t1); box-shadow: none; cursor: default; }
.btn + .btn { margin-top: 8px; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.summary { background: #fff; border: 2px solid var(--t2); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.summary .sh { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.summary .sh::before { content: "💡 "; }
.summary ul { list-style: none; font-size: 13.3px; color: var(--g-text); margin-top: 8px; }
.summary li { position: relative; padding-left: 20px; }
.summary li::before { content: "✔"; position: absolute; left: 2px; color: var(--navy-2); font-size: 12px; }