.jec { margin: 24px 0; font-size: 16px; line-height: 1.5; }
.jec *, .jec *::before, .jec *::after { box-sizing: border-box; }
.jec-card { background: #fff; border: 1px solid #dfe3ea; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(16, 24, 40, .06); max-width: 720px; margin: 0 auto; color: #1f2937; }
.jec-title { margin: 0 0 14px; font-size: 20px; line-height: 1.3; }

.jec-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.jec-dot { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 4px; border-radius: 6px; background: #eef1f6; color: #6b7280; }
.jec-dot.on { background: #1d4ed8; color: #fff; }

.jec-note { margin: 0 0 12px; color: #4b5563; font-size: 14px; }
.jec-label { display: block; font-weight: 600; margin: 12px 0 6px; }
.jec input[type="date"], .jec select { width: 100%; max-width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid #c5ccd8; border-radius: 8px; background: #fff; color: #111827; }
.jec .jec-err { border-color: #dc2626 !important; }

.jec-q { border: 1px solid #e5e7eb; border-radius: 10px; margin: 0 0 10px; padding: 10px 12px 12px; min-width: 0; }
.jec-q.jec-err { background: #fef2f2; }
.jec-q legend { font-weight: 600; padding: 0 6px; max-width: 100%; }
.jec-yn { display: flex; gap: 10px; margin-top: 4px; }
.jec-opt { position: relative; flex: 0 0 auto; }
.jec-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jec-opt label { display: inline-block; min-width: 84px; text-align: center; padding: 8px 18px; border: 1px solid #c5ccd8; border-radius: 999px; cursor: pointer; font-weight: 600; background: #fff; user-select: none; }
.jec-opt input:focus-visible + label { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.jec-opt input:checked + label.jec-yes { background: #15803d; border-color: #15803d; color: #fff; }
.jec-opt input:checked + label.jec-no { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.jec-msg { color: #b91c1c; font-weight: 600; margin: 8px 0 0; }
.jec-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.jec-btn { display: inline-block; cursor: pointer; border: 1px solid #1d4ed8; background: #1d4ed8; color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.2; }
.jec-btn:hover { background: #1e40af; color: #fff; }
.jec-ghost { background: #fff; color: #1d4ed8; }
.jec-ghost:hover { background: #eff4ff; color: #1d4ed8; }

.jec-result { border-radius: 10px; padding: 16px; margin-top: 4px; }
.jec-ok { background: #ecfdf3; border: 1px solid #86d9a5; }
.jec-bad { background: #fef2f2; border: 1px solid #f4a3a3; }
.jec-verdict { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.jec-ok .jec-verdict { color: #15803d; }
.jec-bad .jec-verdict { color: #b91c1c; }
.jec-result p { margin: 0 0 10px; }
.jec-result ul { margin: 0 0 12px 20px; padding: 0; }
.jec-result li { margin-bottom: 6px; }
.jec-apply { margin-top: 4px; background: #15803d; border-color: #15803d; }
.jec-apply:hover { background: #166534; }
.jec-disc { margin: 16px 0 0; font-size: 12.5px; color: #6b7280; }
.jec-notice { padding: 10px 12px; background: #fff8e1; border: 1px dashed #d9a400; border-radius: 6px; font-size: 14px; }

@media (max-width: 480px) {
  .jec-card { padding: 14px; }
  .jec-dot { font-size: 11px; }
  .jec-nav .jec-btn { flex: 1; text-align: center; }
}