/* 방송 시작 알림. Tokens come from ../site.css. */

.nt { padding-top: 24px; padding-bottom: 8px; }
.nt-view { max-width: 560px; }
.nt h1 { margin: 0 0 20px; font-size: clamp(26px, 5vw, 34px); line-height: 1.3; letter-spacing: -0.03em; font-weight: 800; word-break: break-all; }

.nt-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}

.nt-field { display: grid; gap: 8px; min-width: 0; }
.nt-field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.nt-field input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  outline: none;
  transition: border-color 0.15s;
}
.nt-field input::placeholder { color: #5c5c68; }
.nt-field input:focus { border-color: var(--accent); }
.nt-field input[aria-invalid='true'] { border-color: #ff6b6b; }

.nt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #1a1206;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.nt-btn svg { width: 18px; height: 18px; flex: none; }
.nt-btn:disabled { opacity: 0.5; cursor: default; }
.nt-btn-quiet { background: var(--accent-soft); color: var(--accent); }
.nt-btn-danger { background: rgba(255, 90, 90, 0.14); color: #ff8a8a; }

.nt-copy { display: flex; gap: 8px; min-width: 0; }
.nt-copy input { flex: 1; font-size: 14px; color: var(--muted); }
.nt-copy .nt-btn { flex: none; }

.nt-error { margin: 0; color: #ff9b9b; font-size: 15px; }
.nt-link { color: var(--muted); font-size: 15px; justify-self: start; }
.nt-link:hover { color: var(--text); }

.nt-view[aria-busy='true'] .nt-card { opacity: 0.6; }

@media (max-width: 480px) {
  .nt-copy .nt-btn span { display: none; }
  .nt-copy .nt-btn { width: 48px; padding: 0; }
}