:root {
 --bg: #f5f7fb;
 --card: #ffffff;
 --text: #0f172a;
 --muted: #475569;
 --line: #e2e8f0;
 --primary: #2563eb;
 --danger: #e11d48;
 --ok: #16a34a;

 --shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
 --focus: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

* {
 box-sizing: border-box
}

body {
 margin: 0;
 font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
 background:
  radial-gradient(900px 500px at 20% 0%, #dbeafe 0%, transparent 60%),
  radial-gradient(700px 400px at 80% 10%, #fef3c7 0%, transparent 55%),
  var(--bg);
 color: var(--text);
}

.container {
 width: min(920px, 92vw);
 margin: 32px auto;
 padding: 8px 0 40px;
}

.header {
 padding: 10px 6px 14px;
}

h1 {
 font-size: 28px;
 margin: 0 0 6px;
 letter-spacing: -0.3px;
}

.subtitle {
 margin: 0;
 color: var(--muted);
 line-height: 1.4;
}

/* Steps */
.steps {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 10px;
 margin: 14px 0 18px;
}

.step {
 border: 1px solid var(--line);
 background: rgba(255, 255, 255, 0.7);
 padding: 10px 8px;
 border-radius: 12px;
 text-align: center;
 color: var(--muted);
 font-size: 13px;
}

.step.active {
 border-color: rgba(37, 99, 235, 0.55);
 box-shadow: var(--focus);
 color: var(--text);
 background: #eff6ff;
}

/* Cards */
.card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 18px;
 box-shadow: var(--shadow);
}

.view {
 margin-top: 14px;
}

.hidden {
 display: none;
}

h2 {
 margin: 0 0 10px;
 font-size: 20px;
 letter-spacing: -0.2px;
}

h3 {
 margin: 18px 0 8px;
 font-size: 16px;
}

.hint {
 margin: 0 0 14px;
 color: var(--muted);
 line-height: 1.5;
}

/* Form */
.field {
 display: block;
 margin: 12px 0;
}

.field span {
 display: block;
 margin: 0 0 6px;
 color: var(--text);
 font-size: 14px;
}

input {
 width: 100%;
 padding: 12px 12px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: #ffffff;
 color: var(--text);
 outline: none;
}

input::placeholder {
 color: #94a3b8;
}

input:focus {
 border-color: rgba(37, 99, 235, 0.6);
 box-shadow: var(--focus);
}

.error {
 display: block;
 color: var(--danger);
 font-size: 12px;
 min-height: 16px;
 margin-top: 6px;
}

/* Buttons */
.primary,
.secondary,
.ghost {
 border-radius: 12px;
 padding: 12px 14px;
 font-weight: 700;
 cursor: pointer;
 border: 1px solid transparent;
 transition: transform .06s ease, opacity .2s ease;
}

.primary {
 width: 100%;
 background: var(--primary);
 color: #ffffff;
}

.secondary {
 background: #ffffff;
 color: var(--text);
 border: 1px solid var(--line);
}

.ghost {
 background: transparent;
 color: var(--muted);
 border: 1px solid var(--line);
}

.primary:hover,
.secondary:hover,
.ghost:hover {
 transform: translateY(-1px);
}

.primary:disabled,
.secondary:disabled,
.ghost:disabled {
 opacity: 0.5;
 cursor: not-allowed;
 transform: none;
}

/* Pills */
.pill {
 display: inline-block;
 margin-left: 8px;
 padding: 4px 10px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: #f1f5f9;
 color: var(--muted);
 font-size: 12px;
}

/* Prompt box */
.prompt-box {
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: 14px;
 background: #f8fafc;
 margin-bottom: 12px;
}

.prompt-title {
 color: var(--muted);
 font-size: 12px;
 margin-bottom: 8px;
}

.prompt-text {
 font-size: 16px;
 line-height: 1.6;
}

.prompt-meta {
 margin-top: 10px;
 color: var(--muted);
 font-size: 12px;
}

/* Recorder */
.recorder {
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: 14px;
 background: #ffffff;
}

.status {
 color: var(--muted);
 font-size: 13px;
}

.timer {
 margin-top: 6px;
 font-variant-numeric: tabular-nums;
 font-size: 18px;
 color: var(--text);
}

.timer.big {
 font-size: 36px;
 margin-top: 8px;
}

.buttons {
 display: flex;
 gap: 10px;
 flex-wrap: wrap;
 margin-top: 12px;
}

.audio {
 margin-top: 12px;
 width: 100%;
}

/* Nav */
.nav {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 margin-top: 14px;
}

.nav .primary {
 width: auto;
 min-width: 160px;
}

.nav .ghost {
 width: auto;
 min-width: 120px;
}

.footnote {
 margin-top: 12px;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.5;
}

/* Image */
.image-box {
 width: 100%;
 max-width: 100%;
 border: 1px dashed #cbd5e1;
 border-radius: 16px;
 padding: 12px;
 background: #ffffff;

 display: flex;
 justify-content: center;
 align-items: center;

 overflow: hidden;
 /* VERY IMPORTANT */
}

.test-image {
 max-width: 100%;
 max-height: 420px;
 /* controls vertical size */
 width: auto;
 height: auto;

 object-fit: contain;
 /* keeps full image visible */
 border-radius: 12px;
}

/* Downloads */
.downloads a {
 display: block;
 margin: 8px 0;
 padding: 10px 12px;
 border-radius: 12px;
 border: 1px solid var(--line);
 background: #ffffff;
 color: var(--text);
 text-decoration: none;
}

.downloads a:hover {
 border-color: rgba(37, 99, 235, 0.35);
 box-shadow: var(--focus);
}

/* Summary */
.summary {
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: 14px;
 background: #f8fafc;
}