/* ── 경제 탭(t22) 금융 리터러시 공용 스타일 (라이트) ── */
.fin-wrap {
  max-width: 760px;
  margin: 10px auto 40px;
  padding: 0 16px;
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  color: #1f2733;
}
.fin-lead {
  font-size: 0.9rem; color: #6b7684; line-height: 1.7;
  margin: 2px 0 18px;
}
.fin-panel {
  background: #fff; border: 1px solid #e3e7ee; border-radius: 16px;
  padding: 20px; box-shadow: 0 2px 12px rgba(20,30,50,0.05);
  margin-bottom: 16px;
}
.fin-panel h2 {
  font-size: 1rem; font-weight: 800; margin: 0 0 14px; color: #1a237e;
}

/* 입력 */
.fin-inputs { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .fin-inputs.c2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .fin-inputs.c3 { grid-template-columns: repeat(3, 1fr); } }
.fin-in { display: flex; flex-direction: column; gap: 5px; }
.fin-in label {
  font-size: 0.78rem; color: #6b7684; font-weight: 700;
  display: flex; justify-content: space-between; align-items: baseline;
}
.fin-in label b { color: #1e88e5; font-family: 'Courier New', monospace; font-size: 0.9rem; }
.fin-in input[type=number], .fin-in select {
  border: 1px solid #ccd3dd; border-radius: 9px; padding: 9px 11px;
  font-size: 0.95rem; font-family: 'Courier New', monospace; color: #1f2733;
  background: #fafbfc; width: 100%;
}
.fin-in input[type=range] { width: 100%; accent-color: #1e88e5; margin-top: 4px; }
.fin-in .fin-seg { display: flex; gap: 4px; background: #eef1f5; border-radius: 9px; padding: 4px; }
.fin-in .fin-seg button {
  flex: 1; border: none; background: transparent; border-radius: 7px; padding: 8px 4px;
  font-size: 0.82rem; font-weight: 700; color: #7b8695; cursor: pointer; transition: all .15s;
}
.fin-in .fin-seg button.active { background: #1a237e; color: #fff; }

/* 결과 지표 */
.fin-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .fin-metrics.m3 { grid-template-columns: repeat(3, 1fr); } }
.fin-metric {
  background: #f7f9fc; border: 1px solid #e6eaf1; border-radius: 12px;
  padding: 12px 14px; text-align: center;
}
.fin-metric .l { font-size: 0.7rem; color: #8894a5; font-weight: 700; }
.fin-metric .v { font-size: 1.15rem; font-weight: 800; color: #16203a; font-family: 'Courier New', monospace; margin-top: 3px; }
.fin-metric .v.pos { color: #e53935; }
.fin-metric .v.neg { color: #1e88e5; }
.fin-metric .h { font-size: 0.66rem; color: #a4aeba; margin-top: 2px; }

.fin-note {
  margin-top: 14px; font-size: 0.88rem; font-weight: 700; text-align: center;
  border-radius: 10px; padding: 12px; border: 1px solid;
}
.fin-note.ok   { color: #1b7a4b; background: #e8f6ee; border-color: #b7e0c7; }
.fin-note.warn { color: #a8710a; background: #fdf3e2; border-color: #f0d9ac; }
.fin-note.bad  { color: #c62828; background: #fdeaea; border-color: #f2c3c3; }
.fin-note.info { color: #1a237e; background: #eaeefb; border-color: #c3ccef; }

/* 차트 */
.fin-chart { position: relative; height: 300px; margin-top: 16px; }
@media (max-width: 560px) { .fin-chart { height: 240px; } }

/* 표 */
.fin-table-wrap { overflow-x: auto; margin-top: 14px; }
table.fin-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.fin-tbl th, table.fin-tbl td { border: 1px solid #e3e7ee; padding: 7px 9px; text-align: right; white-space: nowrap; }
table.fin-tbl th { background: #f2f4f8; color: #1a237e; font-weight: 700; text-align: center; }
table.fin-tbl td.l { text-align: left; }
table.fin-tbl tr.hl td { background: #eef3ff; font-weight: 700; }

/* 막대(예산 등) */
.fin-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fin-bar-row { display: grid; grid-template-columns: 100px 1fr 92px; align-items: center; gap: 8px; font-size: 0.82rem; }
.fin-bar-track { background: #eef1f5; border-radius: 6px; height: 20px; overflow: hidden; }
.fin-bar-fill { height: 100%; border-radius: 6px; }
.fin-bar-row .amt { text-align: right; font-family: 'Courier New', monospace; font-weight: 700; }

/* 퀴즈 */
.fin-quiz-q { font-size: 1rem; font-weight: 700; line-height: 1.6; margin-bottom: 14px; min-height: 3em; }
.fin-quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.fin-quiz-opts button {
  text-align: left; border: 1px solid #ccd3dd; background: #fafbfc; border-radius: 10px;
  padding: 11px 14px; font-size: 0.9rem; color: #1f2733; cursor: pointer; transition: all .15s;
}
.fin-quiz-opts button:hover:not(:disabled) { border-color: #1e88e5; background: #f2f8ff; }
.fin-quiz-opts button.correct { border-color: #1b7a4b; background: #e8f6ee; color: #1b7a4b; font-weight: 700; }
.fin-quiz-opts button.wrong { border-color: #c62828; background: #fdeaea; color: #c62828; }
.fin-quiz-exp { margin-top: 14px; font-size: 0.88rem; line-height: 1.7; color: #46505f; background: #f7f9fc; border-radius: 10px; padding: 12px 14px; border: 1px solid #e6eaf1; }
.fin-quiz-bar { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.fin-quiz-bar button { border: 1px solid #ccd3dd; background: #fff; border-radius: 9px; padding: 8px 16px; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.fin-quiz-score { margin-left: auto; font-size: 0.85rem; color: #6b7684; font-weight: 700; }

/* 안내 박스 / 링크 */
.fin-callout {
  background: linear-gradient(180deg, #eef4ff, #f4f8ff); border: 1px solid #d5e0f5;
  border-radius: 12px; padding: 14px 16px; font-size: 0.86rem; line-height: 1.7; color: #33405a; margin-top: 16px;
}
.fin-callout b { color: #1a237e; }
.fin-links { margin-top: 12px; font-size: 0.84rem; color: #6b7684; }
.fin-links a { color: #1e88e5; text-decoration: none; font-weight: 700; }
.fin-disclaimer { margin-top: 10px; font-size: 0.76rem; color: #9aa3b0; text-align: center; }