/* 국민 마음날씨 — '마음'을 드러내는 요소들
 * 기상 정보가 아니라 사회의 마음 상태 리포트로 읽히도록 설계한다.
 */

/* ── 히어로: 숫자보다 문장이 먼저 ── */
.hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, #93b8e8 0%, #b9cfe8 45%, #dfe7f0 100%);
  transition: background 1s ease;
}
.hero-sky.warm { background: linear-gradient(160deg, #f5c98f 0%, #f3d9b8 45%, #f7ece0 100%); }
.hero-sky.cold { background: linear-gradient(160deg, #7f96b8 0%, #a3b3c9 45%, #ccd6e2 100%); }
.hero-sky.heavy { background: linear-gradient(160deg, #6e7d92 0%, #90a0b4 45%, #b8c3d0 100%); }

.hero-in {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  padding: 34px 32px;
}
.hero-icon { width: 132px; height: 132px; flex: none; }
.hero-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  color: #34506f;
  font-weight: 600;
  letter-spacing: .01em;
}
.hero-line {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.34;
  font-weight: 800;
  color: #14243a;
  letter-spacing: -.03em;
  word-break: keep-all;
}
.hero-line em { font-style: normal; color: var(--warm-dark); }
.hero-line i { font-style: normal; color: var(--cool-dark); }
.hero-desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #2c3f56;
  max-width: 62ch;
  word-break: keep-all;
}
.hero-nums { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hn {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  padding: 7px 15px;
  font-size: 14px;
  color: #24384f;
  white-space: nowrap;
}
.hn b { font-size: 19px; font-weight: 800; }
.hn em { font-style: normal; font-size: 12px; opacity: .75; margin-left: 4px; }
.hn.temp b { color: var(--warm-dark); }
.hn.humi b { color: var(--cool-dark); }
.hn.cri b { color: #a3312b; }

/* ── 감정 구성 ── */
.emo-bar {
  display: flex;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.emo-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: flex-grow .5s ease;
  overflow: hidden;
  white-space: nowrap;
}
.emo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
}
.emo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}
.emo-legend i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none;
}
.emo-legend b { color: var(--ink); font-weight: 700; }
.emo-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--ink);
  background: #f2f5fa;
  border-left: 3px solid var(--brand);
  padding: 11px 14px;
  border-radius: 0 8px 8px 0;
  line-height: 1.65;
}

/* ── 오늘의 목소리 ── */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.voice {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fafbfd;
  position: relative;
}
.voice.pos { border-left: 4px solid var(--good); }
.voice.neg { border-left: 4px solid var(--bad); }
.voice.anx { border-left: 4px solid var(--cool); }
.voice .q {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 10px;
  word-break: keep-all;
}
.voice .q::before { content: "“"; opacity: .45; margin-right: 2px; }
.voice .q::after { content: "”"; opacity: .45; margin-left: 2px; }
.voice .meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.voice .tag2 {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
}
.voice.pos .tag2 { background: #e6f4ec; color: var(--good); }
.voice.neg .tag2 { background: #fdecea; color: var(--bad); }
.voice.anx .tag2 { background: #e8f4f9; color: var(--cool-dark); }

/* ── 마음의 거리 ── */
.gap-wrap { display: grid; gap: 18px; }
.gap-row { }
.gap-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; margin-bottom: 8px; gap: 10px; flex-wrap: wrap;
}
.gap-head .who { font-weight: 700; }
.gap-head .val { color: var(--muted); font-size: 12.5px; }
.gap-head .val strong { font-size: 15px; }
.gap-line {
  position: relative;
  height: 42px;
  background: linear-gradient(90deg, #dfe6f0, #eef2f7);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.gap-line .dot {
  position: absolute;
  top: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(20, 35, 70, .25);
  transition: left .6s ease;
}
.gap-line .span {
  position: absolute; top: 50%; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, #98a6ba 0 6px, transparent 6px 12px);
}
.gap-line .lab {
  position: absolute; bottom: 3px; font-size: 10.5px; color: var(--muted);
}
.gap-note { font-size: 12.5px; color: var(--bad); margin: 4px 0 0; }
.gap-badge { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.gap-badge.wide { background: #fdecea; color: var(--bad); }
.gap-badge.mid { background: #fff4e5; color: #8a6414; }
.gap-badge.near { background: #e6f4ec; color: var(--good); }

/* ── 연대의 신호 ── */
.warm-card { background: linear-gradient(160deg, #fff8ec 0%, #fffdf9 60%); border-color: #e8d5a8; }
.solid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.sol {
  background: rgba(255, 255, 255, .8);
  border: 1px solid #e8d5a8;
  border-radius: 12px;
  padding: 15px 17px;
}
.sol .n { font-size: 26px; font-weight: 800; color: #b8791f; line-height: 1.2; }
.sol .t { font-size: 13.5px; font-weight: 700; margin: 2px 0 5px; }
.sol .d { font-size: 12.5px; color: var(--muted); line-height: 1.55; word-break: keep-all; }

/* ── 이슈 격자 ── */
.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.issue-card {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: #fafbfd; display: grid; gap: 8px;
}
.issue-card:hover, .issue-card:focus { border-color: var(--brand); background: var(--brand-light); }
.issue-card .top { display: flex; align-items: center; gap: 10px; }
.issue-card .top svg { width: 34px; height: 34px; flex: none; }
.issue-card .nm { font-weight: 700; font-size: 15px; }
.issue-card .mood { font-size: 12.5px; color: var(--muted); }
.issue-card .chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: #eef2f8; color: var(--muted); white-space: nowrap;
}
.chip.hot { background: #fdecea; color: var(--bad); }
.chip.cool2 { background: #e8f4f9; color: var(--cool-dark); }
.chip.good2 { background: #e6f4ec; color: var(--good); }
.issue-detail {
  margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px;
}
.issue-detail h3 { margin: 0 0 6px; font-size: 16px; }
.issue-detail .kw { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0; }
.issue-detail .kw span {
  background: var(--brand-light); color: var(--brand-dark);
  padding: 4px 11px; border-radius: 20px; font-size: 13px; font-weight: 600;
}

.tbl-details { margin-top: 14px; }
.tbl-details summary { cursor: pointer; font-size: 13.5px; color: var(--brand); font-weight: 600; }

@media (max-width: 760px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; padding: 26px 18px; }
  .hero-icon { margin: 0 auto; width: 104px; height: 104px; }
  .hero-nums { justify-content: center; }
  .hero-desc { margin-left: auto; margin-right: auto; }
}

@media (prefers-color-scheme: dark) {
  .hero-sky { background: linear-gradient(160deg, #26364d 0%, #2f3f57 45%, #3a4a63 100%); }
  .hero-sky.warm { background: linear-gradient(160deg, #4a3a25 0%, #55452f 45%, #5f4f38 100%); }
  .hero-sky.cold { background: linear-gradient(160deg, #222d40 0%, #2b374b 45%, #354257 100%); }
  .hero-sky.heavy { background: linear-gradient(160deg, #1b2432 0%, #232e3e 45%, #2c3849 100%); }
  .hero-eyebrow { color: #a9c0dc; }
  .hero-line { color: #eef3fa; }
  .hero-desc { color: #c2cede; }
  .hn { background: rgba(20, 28, 42, .7); border-color: rgba(255, 255, 255, .14); color: #dce4ef; }
  .hn.temp b { color: #ff9d6b; }
  .hn.humi b { color: #6fd0ee; }
  .hn.cri b { color: #ff8b83; }
  .voice, .issue-card { background: #1e2636; }
  .emo-note { background: #212b3d; }
  .warm-card { background: linear-gradient(160deg, #2a2416 0%, #211d13 60%); border-color: #4d4021; }
  .sol { background: rgba(30, 38, 54, .7); border-color: #4d4021; }
  .sol .n { color: #e8c877; }
  .gap-line { background: linear-gradient(90deg, #232d3f, #2b374b); }
  .chip { background: #262f42; }
}

/* ══════════════════════════════════════════════════════════
   v3 지표 체계 — 마음 기온 · 하늘 상태
   ══════════════════════════════════════════════════════════ */

.hero-sky.cloudy { background: linear-gradient(160deg, #8b9bb0 0%, #b0bccb 45%, #d5dde6 100%); }
.hn.sky2 b { color: var(--cool-dark); font-size: 17px; }
.sample-line {
  margin: 12px 0 0; font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--line); padding-top: 9px;
}

/* ── 특보 ── */
.alerts { margin: 0 0 18px; }
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff6ec; border: 1px solid #f0c9a0; border-left: 5px solid #d97706;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.alert.cold { background: #eef4fb; border-color: #a9c6e6; border-left-color: #3b6fa8; }
.alert-ico { font-size: 26px; line-height: 1; flex: none; }
.alert-h { margin: 0 0 5px; font-size: 15px; }
.alert-h b { color: #92400e; }
.alert-h .lv {
  display: inline-block; margin-left: 7px; padding: 2px 9px; border-radius: 999px;
  background: #d97706; color: #fff; font-size: 12px; font-weight: 700;
}
.alert-h .auto { margin-left: 7px; font-size: 11.5px; color: var(--muted); }
.alert-w { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.alert-b { margin: 0; font-size: 12px; color: var(--muted); }
.alert-note {
  margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6;
}

/* ── 상태 평면 ── */
.plane-wrap { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 22px; align-items: start; }
.plane { position: relative; padding: 0 0 26px 26px; }
.pl-grid {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--card);
}
.pl-q { padding: 10px; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); }
.pl-q b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
.pl-q.q1 { background: rgba(10, 125, 63, .05); }
.pl-q.q2 { background: rgba(217, 119, 6, .06); }
.pl-q.q3 { background: rgba(201, 79, 79, .06); }
.pl-q.q4 { background: rgba(107, 118, 136, .05); }
.pl-dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transform: translate(-50%, 50%); z-index: 2;
}
.pl-dot span {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.pl-ax { position: absolute; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.pl-ax-x { left: 26px; right: 0; bottom: 6px; }
.pl-ax-y {
  left: 0; top: 0; bottom: 26px; width: 20px; flex-direction: column;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.pl-now { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); }
.pl-now.q1 { background: rgba(10, 125, 63, .07); border-color: rgba(10, 125, 63, .3); }
.pl-now.q2 { background: rgba(217, 119, 6, .09); border-color: rgba(217, 119, 6, .35); }
.pl-now.q3 { background: rgba(201, 79, 79, .09); border-color: rgba(201, 79, 79, .35); }
.pl-now.q4 { background: rgba(107, 118, 136, .08); border-color: rgba(107, 118, 136, .3); }
.pl-now-h { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.pl-now-d { margin: 0; font-size: 13.5px; color: var(--ink); }
.pl-why { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.75; }

/* ── 지표 카드 ── */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.metric { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: var(--card); }
.metric.forecast { border-style: dashed; background: rgba(91, 140, 184, .05); }
.m-n { margin: 0 0 3px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.m-v { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--ink); }
.m-d { margin: 7px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.fc-tag {
  margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: #5b8cb8; color: #fff; font-size: 10px; font-weight: 700;
}
.sub-metrics { margin-top: 14px; }

.gauge { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.gauge i { display: block; height: 100%; border-radius: 999px; }

/* ── 기온 단계 띠 ── */
.band-strip { display: flex; gap: 4px; margin: 16px 0 0; flex-wrap: wrap; }
.bd {
  flex: 1 1 90px; text-align: center; padding: 8px 4px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); opacity: .5;
}
.bd i { display: block; font-style: normal; font-size: 17px; }
.bd b { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.bd.on { opacity: 1; border-color: var(--warm); background: rgba(232, 102, 60, .08); }
.bd.on b { color: var(--warm-dark); font-weight: 800; }

.warn-note {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 9px;
  background: rgba(217, 119, 6, .08); border-left: 3px solid #d97706;
  font-size: 13px; line-height: 1.7; color: var(--ink);
}

/* ── 하늘 두 축 ── */
.sky-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sky-col { border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: var(--card); }
.sky-col.driver { border-color: var(--cool); box-shadow: 0 0 0 2px rgba(47, 151, 184, .13); }
.sc-h { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.sc-h b { font-size: 15px; color: var(--ink); margin-right: 5px; }
.sc-h .drv {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--cool); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700;
}
.sc-v { margin: 0 0 8px; font-size: 27px; font-weight: 800; color: var(--ink); }
.sc-v small { font-size: 13px; font-weight: 500; color: var(--muted); }
.sc-d { font-size: 12.5px; font-weight: 700; margin-left: 8px; }
.sc-d.up { color: var(--bad); } .sc-d.dn { color: var(--good); }
.sc-b { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.sc-x { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.65; }
.sky-max {
  grid-column: 1 / -1; margin: 4px 0 0; padding: 10px 13px; border-radius: 9px;
  background: var(--brand-light); font-size: 13.5px; color: var(--ink);
}

/* ── 부담 영역 ── */
.burden { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.bu { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--card); }
.bu-n { margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bu-v { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--cool-dark); text-align: right; }

/* ── 이슈 카드 ── */
.issue { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; }
.issue .i-ico { grid-row: 1 / 3; font-size: 22px; }
.issue .i-n { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.issue .i-t { font-size: 13px; color: var(--warm-dark); font-weight: 700; text-align: right; }
.issue .i-t em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.issue .i-s { font-size: 12.5px; color: var(--cool-dark); }
.issue .i-d { font-size: 11.5px; color: var(--muted); text-align: right; }
.d-q { margin: 0 0 12px; font-size: 14px; }
.d-q b { color: var(--brand-dark); }

/* ── 차트 탭 ── */
.chart-tabs { display: flex; gap: 7px; margin: 0 0 12px; flex-wrap: wrap; }
.ct {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 6px 15px; font-size: 13px; cursor: pointer;
  font-family: inherit; font-weight: 600;
}
.ct.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── 산출식 ── */
.formula-card { background: linear-gradient(180deg, rgba(27, 87, 214, .035), transparent 140px); }
.formulas { display: grid; gap: 10px; }
.fm { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; background: var(--card); }
.fm-n { margin: 0 0 5px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fm-f { margin: 0 0 5px; overflow-x: auto; }
.fm-f code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12.5px; color: var(--brand-dark); background: var(--brand-light);
  padding: 5px 9px; border-radius: 6px; display: inline-block; white-space: nowrap;
}
.fm-d { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.65; }
.fm-note {
  margin: 12px 0 0; padding: 11px 13px; border-radius: 9px; background: var(--bg);
  font-size: 12.5px; color: var(--muted); line-height: 1.75;
}

.strong-warn {
  padding: 11px 13px; border-radius: 9px;
  background: rgba(201, 79, 79, .07); border-left: 3px solid var(--bad);
}
.ft-sample { margin-top: 10px !important; font-size: 12px; opacity: .85; }

@media (max-width: 760px) {
  .plane-wrap { grid-template-columns: 1fr; }
  .sky-two { grid-template-columns: 1fr; }
  .issue { grid-template-columns: auto 1fr; }
  .issue .i-t, .issue .i-d { text-align: left; }
}
/* 히어로 아이콘이 흐린 배경에 묻히지 않게 그림자를 준다 */
.hero-icon svg { filter: drop-shadow(0 3px 8px rgba(20, 35, 70, .28)); }

/* 산출식의 code 는 줄바꿈하지 않으므로 그리드 항목이 통째로 늘어난다.
   항목에 min-width:0 을 주어 넘치는 부분만 가로 스크롤되게 한다. */
.formulas { grid-template-columns: minmax(0, 1fr); }
.fm { min-width: 0; }
.fm-f { max-width: 100%; }

/* ── v4 제안 블록 ── */
.card.proposal {
  border: 1px dashed #6ca8c0; background: linear-gradient(180deg, rgba(74,143,168,.05), transparent 160px);
  position: relative;
}
.prop-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: #4a8fa8; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.hn.feel { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.35); }
.hn.feel b { color: var(--warm-dark); }
.fm.prop { border-style: dashed; border-color: #6ca8c0; background: rgba(74,143,168,.04); }

.quad8 { margin-top: 18px; }
.q8-now { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid rgba(74,143,168,.35); background: rgba(74,143,168,.08); }
.q8-now.risk { border-color: rgba(201,79,79,.4); background: rgba(201,79,79,.08); }
.q8-h { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.q8-d { margin: 0; font-size: 13.5px; color: var(--ink); }
.q8-why { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.q8-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.q8-cell { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--card); }
.q8-cell.on { border-color: #4a8fa8; box-shadow: 0 0 0 2px rgba(74,143,168,.13); }
.q8-n { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.q8-r { margin: 0 0 3px; font-size: 12px; color: var(--muted); }
.q8-r i { display: inline-block; width: 30px; font-style: normal; font-weight: 700;
  color: #4a8fa8; margin-right: 4px; }
.q8-r.hit { color: var(--ink); font-weight: 600; }
.q8-r.hit i { color: var(--bad); }