/* saintcomet 도구 페이지(/tools/) 전용 스타일. 공용 style.css 다음에 읽는다 — 색·글꼴·머리말·바닥글은 style.css 것을 쓴다.
   외부 폰트/CDN/이미지 요청 없음. 고정 px 폭과 white-space: nowrap을 쓰지 않는다(320px 화면, lint-site 규칙). */

.tool-hero .eyebrow a {
  color: inherit;
}

/* ---------- 입력 ---------- */

.tool-form {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  background: var(--surface);
}

.field-label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0 0 6px;
}

.field-label + textarea,
.field-label + input {
  margin-bottom: 6px;
}

.tool-form textarea,
.tool-form input,
.out-line input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px 미만이면 iOS가 입력할 때 화면을 확대한다 */
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
}

.tool-form textarea {
  resize: vertical;
}

.tool-form textarea:focus-visible,
.tool-form input:focus-visible,
.out-line input:focus-visible,
.copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-help {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button.btn {
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}

/* ---------- 메시지 ---------- */

.tool-messages {
  margin-top: 16px;
}

.tool-error {
  border: 1px solid var(--warn-border, #e0b877);
  background: var(--warn-soft, #fdf3e3);
  color: var(--warn-text, #8a5a12);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9375rem;
}

@media (prefers-color-scheme: dark) {
  .tool-error {
    --warn-soft: #3a2f1a;
    --warn-border: #6d5426;
    --warn-text: #f0c983;
  }
}

/* ---------- 결과 ---------- */

.tool-result {
  margin-top: 20px;
}

.tool-summary {
  font-weight: 700;
}

.tool-notes {
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  border-radius: 10px;
  padding: 12px 14px 12px 32px;
}

.out-grid {
  display: grid;
  gap: 14px;
}

.out-row label {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 4px;
}

.out-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.out-line {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.out-line input {
  flex: 1 1 auto;
  min-width: 0;
}

.copy-btn {
  flex: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  min-height: 44px;
  min-width: 64px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.copy-btn:hover {
  background: var(--accent-soft);
}

.copy-status {
  min-height: 1.75em;
  margin: 10px 0 4px;
  font-size: 0.9375rem;
  color: var(--accent);
  font-weight: 700;
}

/* 복사 대체 경로(클립보드 API가 막혔을 때)의 임시 칸. 화면에 보이지 않게. */
.offscreen {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}