/* [C-01] Minimal clean UI for test page */
:root{
  --bg:#f8fafc; --card:#fff; --text:#0f172a; --muted:#64748b;
  --line:#e5e7eb; --good:#16a34a; --warn:#f59e0b; --bad:#dc2626;
  --btn:#2563eb; --btnh:#1e40af;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.page-check{max-width:980px;margin:24px auto;padding:0 16px 48px}
.header{margin-bottom:14px}
.header h1{margin:0 0 8px;font-size:26px}
.lead{margin:0;color:var(--muted);line-height:1.5}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 10px rgba(15,23,42,.06);padding:16px}
.card + .card{margin-top:14px}
.card--intro .actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.footer-note{margin:12px 0 0;color:var(--muted);font-size:13px}

.box{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.box--info{background:#fbfdff}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:780px){.cols{grid-template-columns:1fr}}
.note{color:var(--muted);font-size:13px;margin:8px 0 0}

.meta ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.check{display:flex;gap:10px;align-items:center}
.check input{transform:scale(1.1)}

.btn{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:12px;padding:10px 14px;cursor:pointer}
.btn:hover{border-color:#cbd5e1}
.btn-primary{background:var(--btn);border-color:var(--btn);color:#fff}
.btn-primary:hover{background:var(--btnh);border-color:var(--btnh)}
.btn-good{border-color:rgba(22,163,74,.35)}
.btn-bad{border-color:rgba(220,38,38,.35)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

.card--running .spinner{
  width:34px;height:34px;border-radius:999px;border:4px solid var(--line);border-top-color:var(--btn);
  margin:10px 0 8px;animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.steps .muted{opacity:.8}

/* [C-RESULT-STACK] 결과 카드: 기본은 상하 스택 */
.result-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.inner{padding:14px}

/* [C-20] 4) 종합판정 + 메일: 반반 2열 */
.result-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  align-items:stretch;
}
@media (max-width:900px){
  .result-row{grid-template-columns:1fr}
}
#mailCard{display:flex;flex-direction:column}
#mailCard .note{margin-top:auto}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-weight:700;margin:6px 0}
.badge.pass{color:var(--good);border-color:rgba(22,163,74,.35)}
.badge.warn{color:var(--warn);border-color:rgba(245,158,11,.35)}
.badge.fail{color:var(--bad);border-color:rgba(220,38,38,.35)}

.headline{font-size:18px;font-weight:800;margin:6px 0 0}
.desc{color:var(--muted);margin:8px 0 0;line-height:1.5}
.subnote{margin-top:10px;padding:10px;border-radius:12px;border:1px dashed var(--line);background:#fff7ed;color:#7c2d12;font-size:14px}

.small{color:var(--muted);font-size:13px}
.small strong{color:#334155}

.box--action{margin-top:12px;background:#f8fafc}
.box--action h3{margin:0 0 8px;font-size:15px}
.box--action ul{margin:0;padding-left:18px;color:#334155}

.speaker-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* [C-TABLE] */
.table-wrap{overflow:auto;border-radius:12px}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:top;
  text-align:left;
  font-size:14px;
}
.table thead th{
  background:#f8fafc;
  font-size:12px;
  color:#475569;
}
.table tbody tr:last-child td{border-bottom:0}
.table--check{table-layout: fixed;}
.table--check th:nth-child(1),
.table--check td:nth-child(1){width:170px;font-weight:700;}
.table--check th:nth-child(2),
.table--check td:nth-child(2){padding-left:28px;}
.table--check th:nth-child(3),
.table--check td:nth-child(3){width:420px;}

.st{font-weight:700}
.st.pass{color:var(--good)}
.st.warn{color:var(--warn)}
.st.fail{color:var(--bad)}

/* modal */
.modal{border:none;border-radius:16px;max-width:560px;width:92vw;padding:0}
.modal::backdrop{background:rgba(15,23,42,.45)}
.modal__body{padding:16px}
.field{margin-top:12px}
.field label{display:block;font-weight:700;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);outline:none}
.field input:focus,.field textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(147,197,253,.35)}
.req{color:var(--bad)}
.error{color:var(--bad);font-size:13px;margin-top:6px}
.meta-line{display:flex;justify-content:flex-end;color:var(--muted);font-size:12px;margin-top:6px}
.modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}

/* [C-TOAST] 결과 메시지: 메시지만 스크롤, 버튼은 고정 */
.toast{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#f8fafc;color:#0f172a;display:flex;flex-direction:column;gap:10px;}
.toast .toast__msg{white-space:pre-wrap;line-height:1.5;max-height:110px;overflow:auto;padding-right:4px;}
.toast .toast-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.toast .btn{padding:8px 12px;border-radius:10px;}