/* qiangruo.css — 「五行 × 強弱從」子頁（定位／避坑／補運／借力使力）專用元件。
   繼承 shenqiang.css 的暖象牙 token 與 sq-* 共用件（sq-sub / sq-table / sq-note）；
   本檔只補：喜忌定位條、三色步驟卡（避坑=緋、補運=綠、借力=藍）。
   載入順序：style.css → article.css → shenqiang.css → qiangruo.css。 */

:root {
  --radius: 14px;
  --sup: #4f8c5f;   /* 補運・喜（洩剋耗）綠 */
  --dra: #b45c3f;   /* 避坑・忌（旺上加旺）緋 */
  --bal: #5a7fb0;   /* 借力・時機 藍 */
  --lux-serif: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --lux-sans: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}

/* 喜忌定位條：這型人的用神方向一眼看完 */
.qr-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.qr-tags .qr-pill {
  font-size: 0.78rem; letter-spacing: 0.06em; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text-dim);
}
.qr-tags .qr-pill b { font-weight: 600; }
.qr-tags .qr-pill.xi { color: var(--sup); border-color: var(--sup); }
.qr-tags .qr-pill.ji { color: var(--dra); border-color: var(--dra); }

/* 三色步驟卡：避坑 / 補運 / 借力 */
.qr-block {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); border-top: 3px solid var(--acc, var(--gold));
  padding: 4px 18px 6px; margin: 6px 0 10px;
}
.qr-block.avoid { --acc: var(--dra); }
.qr-block.boost { --acc: var(--sup); }
.qr-block.lever { --acc: var(--bal); }

.qr-row {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.qr-row:last-child { border-bottom: none; }
.qr-key {
  font-family: var(--lux-serif); font-weight: 600; font-size: 1.04rem;
  color: var(--acc, var(--gold)); line-height: 1.5;
}
.qr-key small { display: block; font-family: var(--lux-sans); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--text-dim); margin-top: 3px; font-weight: 400; }
.qr-val { color: var(--text); font-size: 0.95rem; line-height: 1.9; margin: 0; }
.qr-val b { color: var(--gold); font-weight: 600; }
.qr-val .fix { color: var(--sup); font-weight: 600; }

@media (max-width: 480px) {
  .qr-row { grid-template-columns: 1fr; gap: 6px; }
  .qr-key { font-size: 1.08rem; }
}