/* 루어낚시 시뮬레이터 (topic-lure-simulator.html 전용) — 색은 doc.css 의 :root 변수만 쓴다 */

.sim { margin-top:0.9rem; }
.sim p { margin:0; }
.sim-noscript { font-size:13.5px; }

/* ── 조건 선택 ── */
.sim-group {
  border:0.5px solid var(--border); border-radius:var(--radius-md);
  padding:0.8rem 1rem 1rem; margin:0 0 0.75rem;
}
.sim-group legend { font-size:13px; font-weight:600; color:var(--text); padding:0 0.35rem; }
.sim-field + .sim-field { margin-top:0.7rem; }
.doc .sim-label { font-size:11.5px; color:var(--muted); line-height:1.4; margin-bottom:0.35rem; }
.sim-chips { display:flex; flex-wrap:wrap; gap:6px; }
.sim-chip {
  font:inherit; font-size:12.5px; line-height:1.2; cursor:pointer;
  padding:7px 12px; border-radius:999px;
  background:var(--bg); color:var(--text); border:0.5px solid var(--border);
  transition:border-color 0.12s, background 0.12s;
}
.sim-chip:hover { border-color:var(--p400); }
.sim-chip[aria-pressed="true"] { background:var(--p600); border-color:var(--p600); color:#fff; }
.sim-chip.is-dim { opacity:0.45; }
.sim-chip:focus-visible, .sim-run:focus-visible, .sim-suggest:focus-visible, .sim-again:focus-visible {
  outline:2px solid var(--p400); outline-offset:2px;
}
.sim-select {
  font:inherit; font-size:13px; color:var(--text); background:var(--bg);
  border:0.5px solid var(--border); border-radius:var(--radius-sm); padding:7px 10px;
}

.sim-run {
  display:block; width:100%; margin:0.4rem 0 1rem;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  color:#fff; background:var(--p600); border:0; border-radius:var(--radius-md);
  padding:13px 16px;
}
.sim-run:hover { background:var(--p800); }

/* ── 결과 ── */
.sim-result { scroll-margin-top:1rem; }
.sim-card {
  background:var(--bg2); border:0.5px solid var(--border2); border-radius:var(--radius-md);
  padding:0.9rem 1rem; margin-bottom:0.75rem;
}
.doc .sim-card-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:0.55rem; }
.sim-step { display:flex; gap:8px; font-size:13.5px; color:var(--text); line-height:1.6; }
.sim-step-icon { width:1.4em; text-align:center; flex-shrink:0; }

.sim-score { display:flex; gap:1.1rem; align-items:flex-end; flex-wrap:wrap; }
.sim-score-num strong { display:block; font-size:40px; line-height:1; font-weight:600; color:var(--p600); }
.sim-score-num span { font-size:11px; color:var(--muted); }
@media (prefers-color-scheme: dark) { .sim-score-num strong { color:var(--p400); } }
.sim-stats {
  flex:1; min-width:200px; margin:0;
  display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px;
}
.sim-stats dt { color:var(--muted); }
.sim-stats dd { margin:0; text-align:right; color:var(--text); font-weight:500; }

.sim-bars { margin-top:0.85rem; display:grid; gap:6px; }
.sim-bar { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); }
.sim-bar-label { width:6.2em; flex-shrink:0; }
.sim-bar-track { flex:1; height:7px; border-radius:999px; background:var(--bg3); overflow:hidden; }
.sim-bar-fill { display:block; height:100%; border-radius:999px; background:var(--p600); }
.sim-bar-val { width:2.2em; text-align:right; font-variant-numeric:tabular-nums; }
.sim-bar.is-weak .sim-bar-label { color:#c0392b; font-weight:600; }
.sim-bar.is-weak .sim-bar-fill { background:#d9534f; }
.doc .sim-note { font-size:12.5px; margin-top:0.6rem; line-height:1.55; }
.doc .sim-note.is-weak { color:#c0392b; }
@media (prefers-color-scheme: dark) {
  .sim-bar-fill { background:var(--p400); }
  .sim-bar.is-weak .sim-bar-label, .doc .sim-note.is-weak { color:#ff8a80; }
}

/* 결과 비율 — 색은 결과 종류를 구분하는 용도라 고정값을 쓴다 */
.sim-stack { display:flex; height:10px; border-radius:999px; overflow:hidden; background:var(--bg3); }
.sim-stack span { display:block; height:100%; }
.sim-legend { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; margin-top:0.6rem; font-size:12px; color:var(--text); }
.sim-legend-item { display:flex; align-items:center; gap:6px; }
.sim-legend-item i { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.sim-legend-item span { flex:1; }
.sim-legend-item b { font-weight:500; font-variant-numeric:tabular-nums; }
.o-landed { background:var(--p600); }
.o-unhooked { background:#f0b429; }
.o-broke { background:#d9534f; }
.o-missed { background:#f08c3a; }
.o-chased { background:#9aa0ab; }
.o-ignored { background:#cfd3da; }
@media (prefers-color-scheme: dark) {
  .o-landed { background:var(--p400); }
  .o-ignored { background:#4a4d5c; }
}

.sim-suggest {
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  background:var(--bg); color:var(--text); border:0.5px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 12px;
}
.sim-suggest + .sim-suggest { margin-top:6px; }
.sim-suggest:hover { border-color:var(--p400); }
.sim-suggest strong { display:block; font-size:13px; font-weight:600; }
.sim-suggest span { display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }

.sim-warn {
  background:#fff7e6; border:0.5px solid #f3d9a4; border-radius:var(--radius-sm);
  padding:0.6rem 0.8rem; margin-bottom:0.75rem;
}
.doc .sim-warn p { font-size:12.5px; color:#7a5300; line-height:1.55; }
@media (prefers-color-scheme: dark) {
  .sim-warn { background:rgba(240,180,41,0.12); border-color:rgba(240,180,41,0.3); }
  .doc .sim-warn p { color:#f3d08a; }
}

.sim-again {
  display:block; width:100%; cursor:pointer; font:inherit; font-size:13px; font-weight:500;
  color:var(--p600); background:transparent; border:0.5px solid var(--p400);
  border-radius:var(--radius-md); padding:10px 14px;
}
@media (prefers-color-scheme: dark) { .sim-again { color:var(--p200); } }