/* ============================================================================
 * minimal.css — 미니멀 홈 레이아웃 (구글/ChatGPT 느낌)
 * 가운데 검색바 한 개 → 링크 입력 시 아래로 옵션 패널이 펼쳐진다.
 * 패널 내부 컴포넌트(미리보기·셀렉트·토글·진행바·결과)는 components.css 재사용.
 * ========================================================================== */

/* 무대: 화면 정중앙 정렬, 링크 입력 시 위로 이동 */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  transition: justify-content var(--dur-slow) var(--ease-out);
}
.stage.revealed { justify-content: flex-start; padding-top: 14vh; }
@media (max-width: 560px) { .stage.revealed { padding-top: var(--space-7); } }

.stage__wrap { width: 100%; max-width: 600px; text-align: center; }

.prompt {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: var(--space-6);
}
.prompt .grad {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 검색바 */
.bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 10px 10px 10px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.bar:focus-within {
  border-color: rgba(217,70,239,.55);
  box-shadow: 0 0 0 4px rgba(217,70,239,.13), 0 14px 50px rgba(0,0,0,.4);
}
.bar.input--invalid { border-color: rgba(251,113,133,.6); }
.bar.input--invalid:focus-within { box-shadow: 0 0 0 4px rgba(251,113,133,.14); }

.bar > svg.bar__icon { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.bar input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--text-1); font-size: 1.02rem; padding: 8px 0;
}
.bar input::placeholder { color: var(--text-3); }

.bar .input__clear {
  display: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-3);
  align-items: center; justify-content: center;
  flex: none;
}
.bar .input__clear:hover { color: var(--text-1); background: var(--surface-2); }
.bar.input--has-value .input__clear { display: inline-flex; }

/* 검색바 안의 추출(전송) 버튼 — 아이콘만 */
.go {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 13px;
  border: none;
  background: var(--surface-2);
  color: var(--text-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.go svg { width: 20px; height: 20px; }
.go .spinner { width: 18px; height: 18px; }
.bar.valid .go { background: var(--gradient-brand); color: #fff; box-shadow: 0 8px 26px rgba(124,58,237,.5); }
.bar.valid .go:hover:not(:disabled) { transform: translateY(-1px); }
.go:disabled { cursor: default; }

.bar__hint {
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
  min-height: 1.2em;
  color: var(--text-3);
}
.bar__hint.field-hint--error { color: var(--danger); }
.bar__hint.field-hint--ok { color: var(--success); }

/* 펼쳐지는 옵션 패널 */
.reveal-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
  transition: grid-template-rows var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.reveal-panel.open { grid-template-rows: 1fr; opacity: 1; transform: none; margin-top: var(--space-5); }
.reveal-panel__inner { overflow: hidden; text-align: left; display: grid; gap: var(--space-4); }