/* 「눈높이」 — 금융상품 설명 화면
 *
 * 톤 규칙: 진중함. 마스코트·게임화·감탄사 없음. 존댓말 유지.
 * 쉬운 설명과 가벼운 태도는 다르다 — 어휘 난이도만 조절하고 태도는 유지한다.
 *
 * 색 사용은 감독규정 제13조 제1항 제3호("중요한 내용은 부호, 색채, 굵고 큰 글자 등으로
 * 명확하게 표시")를 이행하는 수단이다. 장식이 아니므로 위험 표시 외에는 절제한다.
 */

:root {
  --bg: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eef1f5;
  --border: #d8dde5;
  --text: #1a1d23;
  --text-dim: #5a6472;
  --accent: #1b4d8f;
  --accent-soft: #e8f0fa;
  --warn: #8f3a1b;
  --warn-soft: #fdf0ea;
  --ok: #1d6b3f;
  --ok-soft: #e9f5ee;
  --radius: 10px;
  --maxw: 760px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1c2027;
    --surface-2: #242932;
    --border: #333a45;
    --text: #e8ebf0;
    --text-dim: #9aa4b2;
    --accent: #7aa9e0;
    --accent-soft: #1c2836;
    --warn: #e09a7a;
    --warn-soft: #2e2119;
    --ok: #7fc79d;
    --ok-soft: #16281d;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 5rem;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.75;
  word-break: keep-all;       /* 한글 단어 중간에서 끊지 않는다 */
  overflow-wrap: break-word;
}

.wrap { max-width: var(--maxw); margin: 0 auto; }

/* ---- 헤더 ---- */
header {
  padding: 1.75rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
h1 { font-size: 1.5rem; margin: 0 0 .35rem; letter-spacing: -.02em; }
.sub { color: var(--text-dim); font-size: .9rem; margin: 0; }

.notice {
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ---- 단계 표시 ---- */
.steps {
  display: flex;
  gap: .4rem;
  margin-bottom: 1.5rem;
  font-size: .8rem;
  flex-wrap: wrap;
}
.step {
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.step[data-state="active"] {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.step[data-state="done"] { color: var(--ok); border-color: var(--ok); }

/* ---- 카드 ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card h2 { font-size: 1.1rem; margin: 0 0 .8rem; letter-spacing: -.01em; }
.card h3 { font-size: .95rem; margin: 0 0 .5rem; }

/* 감독규정 제13조1항5호 — 중요사항 요약을 맨 앞에 */
.summary-first {
  border-left: 4px solid var(--warn);
  background: var(--warn-soft);
}
.summary-first h2 { color: var(--warn); }

/* ---- 문항 ---- */
.q { margin-bottom: 1.5rem; }
.q:last-child { margin-bottom: 0; }
.q-text { font-weight: 600; margin-bottom: .6rem; display: block; }
.opts { display: flex; flex-direction: column; gap: .45rem; }

.opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--accent); }
.opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.opt[data-selected="1"] { background: var(--accent-soft); border-color: var(--accent); }

/* ---- 버튼 ---- */
button {
  font: inherit;
  font-size: .95rem;
  padding: .65rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  button.primary { color: #10161f; }
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---- 위험 항목 목록 ---- */
.risk-list { display: flex; flex-direction: column; gap: .6rem; }

.risk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  text-align: left;
  padding: .9rem 1rem;
}
.risk-label { font-weight: 600; }
.risk-meta { font-size: .8rem; color: var(--text-dim); margin-top: .15rem; }
/* 모바일에는 hover가 없다. 클릭 가능함을 정적으로도 알린다. */
.risk-go { color: var(--accent); font-size: 1.1rem; flex: none; }
.risk[data-done="1"] .risk-go { color: var(--ok); }

/* ---- 설명 ---- */
.level-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  font-size: .82rem;
  color: var(--text-dim);
  padding-bottom: .7rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.level-tag {
  background: var(--accent-soft);
  color: var(--accent);
  padding: .2rem .6rem;
  border-radius: 999px;
  font-weight: 600;
}

.explanation { font-size: 1.02rem; line-height: 1.85; white-space: pre-wrap; }

.terms { margin-top: 1rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.terms-label { font-size: .8rem; color: var(--text-dim); }
.term {
  font-size: .82rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
}
.term:hover { border-color: var(--accent); color: var(--accent); }
.term[data-seen="1"] { border-style: solid; color: var(--accent); }

/* 원문 대조 — 항상 접근 가능해야 한다(쉬운 설명은 원문의 보조일 뿐) */
details.source {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
details.source > summary {
  padding: .65rem .9rem;
  cursor: pointer;
  font-size: .88rem;
  color: var(--text-dim);
  list-style: none;
}
details.source > summary::-webkit-details-marker { display: none; }
details.source > summary::before { content: "▸ "; color: var(--accent); }
details.source[open] > summary::before { content: "▾ "; }
.source-body {
  padding: 0 .9rem .9rem;
  font-size: .88rem;
  color: var(--text-dim);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 22rem;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}
.source-note {
  font-size: .78rem;
  color: var(--text-dim);
  margin: .6rem .9rem .9rem;
  padding-top: .5rem;
}

/* ---- 이해 확인 ---- */
textarea {
  width: 100%;
  min-height: 7rem;
  font: inherit;
  font-size: .98rem;
  line-height: 1.7;
  padding: .8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.result { margin-top: 1rem; padding: .9rem 1rem; border-radius: 8px; font-size: .95rem; }
.result[data-pass="1"] { background: var(--ok-soft); border: 1px solid var(--ok); }
.result[data-pass="0"] { background: var(--warn-soft); border: 1px solid var(--warn); }
.result strong { display: block; margin-bottom: .3rem; }

/* ---- 증적 ---- */
.ledger-row {
  display: flex;
  gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .87rem;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-time { color: var(--text-dim); flex: none; font-variant-numeric: tabular-nums; }
.ledger-kind { font-weight: 600; flex: none; min-width: 7.5rem; }
.ledger-detail { color: var(--text-dim); }

.integrity {
  padding: .7rem .9rem;
  border-radius: 8px;
  font-size: .87rem;
  margin-bottom: 1rem;
}
.integrity[data-ok="1"] { background: var(--ok-soft); border: 1px solid var(--ok); }
.integrity[data-ok="0"] { background: var(--warn-soft); border: 1px solid var(--warn); }

.legal-ref {
  font-size: .78rem;
  color: var(--text-dim);
  margin-top: .4rem;
  padding-left: .6rem;
  border-left: 2px solid var(--border);
}

.muted { color: var(--text-dim); font-size: .88rem; }
.hidden { display: none !important; }

.spinner { color: var(--text-dim); font-size: .9rem; padding: 1rem 0; }

table.overview { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.overview th, table.overview td {
  text-align: left;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.overview th { color: var(--text-dim); font-weight: 500; width: 8rem; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .ledger-row { flex-wrap: wrap; gap: .3rem .8rem; }
  .ledger-kind { min-width: 0; }
}