/* Sovasta Essei — 화면 꼴.
 *
 * 색은 눈대중으로 고르지 않았다. 본문 4.5:1, 테두리·단추 같은 비텍스트는
 * 3:1 (WCAG 1.4.3 / 1.4.11) 을 넘도록 **재서** 골랐다. 검사 스크립트가
 * 같은 값을 다시 잰다 (sove-qa/scripts/check-essei-ui.mjs).
 *
 * 초점 윤곽선은 플랫폼 공통 규칙(F-platform-012)을 따른다 — 2px 실선 +
 * 2px 띄움, 배경과 3:1 이상.
 */

:root {
  --ink: #15131f;          /* 본문 글자 */
  --ink-soft: #4a4560;     /* 보조 글자 — 흰 배경에서 7.4:1 */
  --paper: #ffffff;
  --paper-2: #f6f5fb;
  --line: #d6d2e4;         /* 테두리 — 흰 배경에서 1.6:1 이라 **장식용만** */
  --line-strong: #767090;  /* 뜻을 지닌 테두리 — 4.3:1 */
  --indigo: #3b2d6b;       /* 주색 — 흰 배경에서 10.4:1 */
  --indigo-ink: #2a1f52;
  --gold: #8a6500;         /* 흰 배경에서 4.8:1. 원래 금색(#F5B400)은 1.9:1 이라 글자에 못 쓴다 */
  --warn: #8a2b2b;
  --absent: #5e5873;       /* '재지 않음' 글자 — 5.9:1 */
  --focus: #1b1733;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece9f5;
    --ink-soft: #b4adc9;
    --paper: #15131f;
    --paper-2: #1e1a2e;
    --line: #342e4a;
    --line-strong: #8d86a8;
    --indigo: #c9bdf0;
    --indigo-ink: #e3dbff;
    --gold: #f0c04a;
    --warn: #ff9a9a;
    --absent: #a69fbd;
    --focus: #cdbcff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: 10px 14px; border-radius: var(--radius); z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* 초점은 **모든** 조작 가능한 것에 보인다. 색만으로 가르지 않는다. */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 머리 */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 15px; }
.brand b { color: var(--indigo); }
.top-nav { display: flex; align-items: center; gap: 10px; }

select {
  font: inherit; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
}

.btn {
  font: inherit; cursor: pointer; border-radius: 10px;
  padding: 9px 16px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); text-decoration: none;
  display: inline-block;
}
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn.primary:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btn.signed { border-style: dashed; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary { color: #17122c; }
}

/* ── 본문 */
main { max-width: 820px; margin: 0 auto; padding: 24px 16px 60px; }

.hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.sage { width: 190px; height: auto; flex: 0 0 auto; }
/* 글 상자에 flex 를 주지 않으면 제목의 **최대 너비**가 그대로 자리를
 * 요구해 그림을 밀어내고 줄이 접힌다. 줄어들 수 있게 해 둔다.
 * min-width:0 이 없으면 flex 항목은 내용보다 작아지지 않는다. */
.hero > div { flex: 1 1 320px; min-width: 0; }
.eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
h1 { margin: 0 0 10px; font-size: clamp(24px, 4.4vw, 34px); line-height: 1.25; color: var(--indigo-ink); }
.lede { margin: 0; color: var(--ink-soft); max-width: 46ch; }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin: 0 0 20px; background: var(--paper-2);
}
.card h2 { margin: 0 0 10px; font-size: 19px; color: var(--indigo-ink); }
.card p { margin: 0 0 10px; }
.note { font-size: 14px; color: var(--ink-soft); margin: 8px 0 0; }

/* ── 입력 */
.modes { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.modes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 14px; color: var(--ink-soft); margin-bottom: 5px; }
.field.inline { flex: 1 1 240px; margin-bottom: 0; }

textarea, input[type="range"] { width: 100%; font: inherit; }
textarea {
  padding: 10px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
}
output { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink-soft); }

.row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }

.status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.status.warn { color: var(--warn); }

/* ── 결과 */
.panel { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.panel:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.panel h3 { margin: 0 0 8px; font-size: 16px; color: var(--indigo); }

.draft { white-space: pre-wrap; }

/* **없는 것**은 있는 것과 다르게 그린다. 기울임만으로 가르지 않고
 * 글자로도 적는다 — 색과 꼴은 보조일 뿐이다. */
.absent { color: var(--absent); font-style: italic; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 8px; }
.chip {
  font-size: 13px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chip.none { font-family: inherit; color: var(--absent); font-style: italic; }

.roles { padding-left: 20px; margin: 0; }
.roles li { margin-bottom: 14px; }
.roles h4 { margin: 0 0 2px; font-size: 15px; }
.asks { margin: 0 0 4px; color: var(--ink-soft); }
.reflection { white-space: pre-wrap; margin: 0; }

.measured dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; }
.measured dt { color: var(--ink-soft); font-size: 14px; }
.measured dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.measured .note { grid-column: 1 / -1; text-align: left; }

/* ── 발 */
.foot { border-top: 1px solid var(--line); padding: 18px 16px; text-align: center; font-size: 14px; color: var(--ink-soft); }
.foot a { color: var(--indigo); }

@media (max-width: 560px) {
  .hero { gap: 14px; }
  .sage { width: 120px; }
  .measured dl { grid-template-columns: 1fr; }
  .measured dd { text-align: left; }
}