/* ============================================================
   v1.3.54 — 제목을 크게, 줄마다 구분되게

   사용자가 '재고 현황' 화면을 스샷으로 보내며 이렇게 바꿔 달라고 했다.
   두 가지였다.

     1) 제목이 잘 보여야 한다 — "제목들은 특히 이런식으로해야 잘보여"
     2) 줄마다 구분돼야 한다 — 유외상품 줄처럼 색 띠와 옅은 배경.
        유외상품만이 아니라 전부에 적용.

   그래서 색은 앞선 판들의 언어를 그대로 쓰고(파랑 기본 · 초록 정상 ·
   노랑 주의 · 빨강 부족), 유종은 소장들이 쓰는 마감일지 색을 따른다
   (고급휘발유 주황 · 무연 금색 · 경유 파랑 · 요소수 초록).
   같은 색을 종이와 화면에서 같이 쓰면 눈이 덜 헷갈린다.

   글자 크기는 제목만 키운다. 본문 크기는 건드리지 않는다.
   ============================================================ */

/* ── 1. 제목 ────────────────────────────────────────────────────
   칸 제목 왼쪽에 색 띠를 세우고 크기를 키운다. 스샷의 '재고 현황' 이 기준. */
.panel > .station-head h2,
.analysis-columns .panel > .station-head h2 {
  position: relative;
  margin: 0;
  padding-left: 13px;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -.035em;
  word-break: keep-all;
  text-wrap: balance;
}
.panel > .station-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 4px;
  border-radius: 3px;
  background: #4a9ef0;
}
.panel > .station-head small {
  display: block;
  margin-top: 4px;
  padding-left: 13px;
  font-size: .82rem;
  line-height: 1.45;
  opacity: .82;
}
.page-title h1 {
  font-size: 1.62rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.04em;
  word-break: keep-all;
}
p.section-label {
  position: relative;
  margin: 22px 0 10px;
  padding-left: 13px;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.03em;
}
p.section-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: .14em;
  bottom: .14em;
  width: 4px;
  border-radius: 3px;
  background: #7a5fd0;
}
p.section-label > small.form-help {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  font-weight: 700;
}
/* 재고 카드 안쪽 제목 — 한 단계 작게, 같은 꼴 */
.profit-stock-card > header h3 {
  position: relative;
  padding-left: 11px;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.profit-stock-card > header h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 3px;
  background: #4a9ef0;
}
.profit-stock-card:nth-of-type(2) > header h3::before { background: #2fb37c; }
.profit-stock-card > header small {
  font-size: .79rem;
  line-height: 1.45;
}

/* ── 2. 줄 — 색 띠 + 옅은 배경을 언제나 ─────────────────────────
   앞판에서는 주의·부족일 때만 배경을 깔았다. 그래서 정상인 줄은
   흰 바탕에 막대만 떠서, 유외상품 칸만 구분되어 보였다. */
.profit-stock-row {
  position: relative;
  padding-left: 13px;
  border: 1px solid transparent;
  transition: background-color .12s ease;
}
.profit-stock-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 3px;
  background: #8fbce6;
}
.profit-stock-row.ok::before   { background: #2fb37c; }
.profit-stock-row.warn::before { background: #e0a020; }
.profit-stock-row.bad::before  { background: #e0564f; }
.profit-stock-row.ok    { background: rgba(47, 179, 124, .07); }
.profit-stock-row.warn  { background: rgba(224, 160, 32, .12); }
.profit-stock-row.bad   { background: rgba(224, 86, 79, .12); }
.profit-stock-row.warn > .psr-name  { color: #96661a; }
.profit-stock-row.bad  > .psr-name  { color: #b3302a; }
.profit-stock-row.warn > .psr-value { color: #96661a; }

/* 유종별 색 — 마감일지에서 쓰는 색과 같게 맞춘다 */
.profit-stock-row.fuel-premium::before { background: #e2711d; }
.profit-stock-row.fuel-regular::before { background: #c9a227; }
.profit-stock-row.fuel-diesel::before  { background: #3e8ed0; }
.profit-stock-row.fuel-urea::before    { background: #2fb37c; }
.profit-stock-row.fuel-etc::before     { background: #6f8ea8; }
.profit-stock-row.fuel-premium { background: rgba(226, 113, 29, .07); }
.profit-stock-row.fuel-regular { background: rgba(201, 162, 39, .08); }
.profit-stock-row.fuel-diesel  { background: rgba(62, 142, 208, .07); }
.profit-stock-row.fuel-urea    { background: rgba(47, 179, 124, .07); }
.profit-stock-row.fuel-etc     { background: rgba(111, 142, 168, .07); }
.profit-stock-row.fuel-premium > .psr-track > em { background: #e2711d; }
.profit-stock-row.fuel-regular > .psr-track > em { background: #c9a227; }
.profit-stock-row.fuel-diesel  > .psr-track > em { background: #3e8ed0; }
.profit-stock-row.fuel-urea    > .psr-track > em { background: #2fb37c; }
.profit-stock-row.fuel-etc     > .psr-track > em { background: #6f8ea8; }

/* 이름이 잘리지 않게 — 주유소명 + 유종이 함께 들어간다 */
.psr-name {
  font-size: .86rem;
  font-weight: 800;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.28;
  overflow: visible;
  text-overflow: clip;
}
.psr-value { font-size: .95rem; }
.psr-note  { font-size: .76rem; }

/* ── 3. 요약 카드 — 제목이 커진 만큼 숫자도 같이 ────────────────── */
#profitSummary > .metric > span   { font-size: .84rem; }
#profitSummary > .metric > strong { font-size: 1.62rem; }

/* ── 4. PC 밝은 화면 ────────────────────────────────────────────── */
@media (min-width: 960px) {
  html:not([data-theme="dark"]) .panel > .station-head h2 { color: #0e3b68 !important; }
  html:not([data-theme="dark"]) .page-title h1 { color: #0b3157 !important; }
  html:not([data-theme="dark"]) p.section-label { color: #0e3b68 !important; }
  html:not([data-theme="dark"]) .profit-stock-card > header h3 { color: #12466f !important; }
  /* 정상 줄도 바탕을 아주 옅게 깔아 줄끼리 구분되게 */
  html:not([data-theme="dark"]) .profit-stock-row { border-color: rgba(120, 150, 180, .14) !important; }
  html:not([data-theme="dark"]) .profit-stock-row.ok { background: #f4fbf7 !important; }
  html:not([data-theme="dark"]) .profit-stock-row.warn { background: #fdf6e7 !important; }
  html:not([data-theme="dark"]) .profit-stock-row.bad { background: #fdf2f1 !important; }
  html:not([data-theme="dark"]) .profit-stock-row.fuel-premium { background: #fdf5ee !important; }
  html:not([data-theme="dark"]) .profit-stock-row.fuel-regular { background: #fcf9ec !important; }
  html:not([data-theme="dark"]) .profit-stock-row.fuel-diesel  { background: #f2f8fd !important; }
  html:not([data-theme="dark"]) .profit-stock-row.fuel-urea    { background: #f3fbf7 !important; }
  html:not([data-theme="dark"]) .profit-stock-row.fuel-etc     { background: #f6f8fa !important; }
}

html[data-theme="dark"] .profit-stock-row { border-color: rgba(120, 160, 200, .18); }
html[data-theme="dark"] .profit-stock-row.ok { background: rgba(47, 179, 124, .10); }
html[data-theme="dark"] .profit-stock-row.warn > .psr-name,
html[data-theme="dark"] .profit-stock-row.warn > .psr-value { color: #e8b657; }
html[data-theme="dark"] .profit-stock-row.bad > .psr-name { color: #f0938c; }

/* ── 5. 폰 ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .panel > .station-head h2 { font-size: 1.18rem; }
  .page-title h1 { font-size: 1.38rem; }
  p.section-label { font-size: 1.04rem; }
  .profit-stock-card > header h3 { font-size: 1.02rem; }
  #profitSummary > .metric > strong { font-size: 1.42rem; }
}