/* ============================================================
   대륙 정세 펼침(장부 안) + 신문의 ❓ 소문 뱃지 — js/ui/WorldView.js · NewsManager 의 rumor
   양피지(.book)의 잉크색 변수(--bk-ink 등)를 그대로 쓴다. 스크롤 없음 — 넘치면 flowBook 이 다음 쪽으로 넘긴다.
   ============================================================ */

/* ── 신문: ❓ 소문 뱃지 (✔ 붉은 원과 구분되는 청회색 원) ── */
.gz-rum { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: 6px; border-radius: 50%; vertical-align: -.25em;
  background: #5d7186; color: #f2eee2; font-size: 14px; line-height: 1; font-weight: 900; font-style: normal;
  box-shadow: 0 0 0 2px rgba(93, 113, 134, .3), 0 1px 0 rgba(0, 0, 0, .3); }
.gz-legend.rum { color: #3f5062; margin-left: 10px; }
.gz-legend.rum .gz-rum { width: 1.5em; height: 1.5em; }
/* 소문 기사: 형광펜 대신 청회색 밑줄 띠 · 글씨는 흐리지 않게 */
li.rum, .gz-head.rum, .gz-drop.rum { background: linear-gradient(transparent 62%, rgba(93, 113, 134, .22) 62%); }
li.rum, .gz-head.rum { font-style: italic; }
li.rum .gz-kick, .gz-kicker .gz-rum + * { color: #3f5062; }
.news .rum-q { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 3px; border-radius: 50%; background: #5d7186; color: #f2eee2; font-size: 11px; font-weight: 900; font-style: normal; vertical-align: 1px; }

/* ── 왼쪽 쪽: 세력 현황 ── */
.wl-list { margin: 0; padding: 0; list-style: none; }
.wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name rel word" "bar bar bar"; gap: 1px 8px; align-items: center;
  padding: 5px 2px 6px; border-bottom: 1px dotted var(--bk-rule); font-size: calc(14px * var(--ui, 1)); line-height: 1.3; }
.wl-name { grid-area: name; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-ico { flex: 0 0 auto; font-style: normal; font-size: 1.05em; width: 1.4em; text-align: center; }
.wl-rel { grid-area: rel; padding: 0 6px; border: 1px solid currentColor; border-radius: 9px; font-family: var(--btn-font); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--bk-dim); background: rgba(255, 250, 230, .35); white-space: nowrap; }
.wl-rel.none { border: 0; background: none; padding: 0; }
.wl-rel.tone-hostile { color: #a3261a; } .wl-rel.tone-cold { color: #56697f; } .wl-rel.tone-neutral { color: #7d6636; }
.wl-rel.tone-warm { color: #3f7a30; } .wl-rel.tone-bond { color: #9a6d0a; border-width: 1.5px; }
.wl-word { grid-area: word; min-width: 3.6em; text-align: right; font-family: var(--btn-font); font-weight: 700; color: var(--bk-ink); white-space: nowrap; }
.wl-arw { display: inline-block; width: 1.1em; text-align: center; font-size: .85em; }
.wl-arw.up { color: #9a2a1a; } .wl-arw.down { color: #3d5f86; } .wl-arw.flat { color: var(--bk-dim); }
.wl-bar { grid-area: bar; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; height: 8px; }
.wl-bar i { display: block; border: 1px solid var(--bk-rule); background: rgba(106, 74, 34, .12); }
.wl-bar i.on { border-color: rgba(42, 28, 16, .55); background: var(--fc, #a8742a); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.wl-row.blur .wl-name, .wl-row.blur .wl-word { filter: blur(1.3px); opacity: .7; }
.wl-row.blur .wl-bar i { background: repeating-linear-gradient(45deg, rgba(106, 74, 34, .2) 0 3px, transparent 3px 6px); filter: blur(.6px); }
.wl-unk { opacity: .6; border-bottom-style: dashed; }
.wl-unk .wl-name { font-weight: 400; font-style: italic; color: var(--bk-dim); }
.wl-unk .wl-word { color: var(--bk-dim); letter-spacing: .12em; }
.wl-unk .wl-bar i { border-style: dashed; background: none; }

/* ── 오른쪽 쪽: 지도 · 최근 사건 · 소문 장부 ── */
.wr-blk { margin: 0 0 4px; }
.wr-blk .bk-h { margin-top: 8px; }
.wm { display: block; width: 100%; height: clamp(150px, 30vh, 260px); margin: 4px 0 2px; }
.wm-frame { fill: rgba(255, 246, 214, .28); stroke: #2a1c10; stroke-width: 1.4; stroke-dasharray: 1 0; opacity: .8; }
.wm-place text { font-family: var(--serif); paint-order: stroke; stroke: rgba(230, 214, 174, .9); stroke-width: 2.6px; stroke-linejoin: round; }
.wm-glyph { font-size: 11.5px; font-weight: 900; fill: #fff6e0; stroke: rgba(42, 28, 16, .55) !important; stroke-width: .8px !important; }
.wm-name { font-size: 9.5px; font-weight: 800; fill: #2a1c10; }
.wm-tag { font-family: var(--serif); font-size: 9px; font-weight: 800; paint-order: stroke; stroke: rgba(230, 214, 174, .9); stroke-width: 2.4px; }
.wm-place.unk circle { fill: rgba(255, 246, 214, .3); stroke: #6a4a22; stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .7; }
.wm-q { font-size: 12px; font-weight: 800; fill: #6a4a22; opacity: .8; }
.wm-front line { stroke-width: 3.2; stroke-linecap: round; }
.wm-front.hot line { stroke: #a3261a; }
.wm-front.warn line { stroke: #b7791a; stroke-dasharray: 6 4; stroke-width: 2.6; }
.wm-flabel { font-family: var(--serif); font-size: 9.5px; font-weight: 900; fill: #7a1a10; paint-order: stroke; stroke: rgba(230, 214, 174, .95); stroke-width: 3px; }
.wm-front.warn .wm-flabel { fill: #7a5210; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; justify-content: center; font-family: var(--btn-font); font-size: 11.5px; font-weight: 700; color: var(--bk-dim); }
.wm-legend i { display: inline-block; width: .8em; height: .8em; margin-right: 4px; border-radius: 50%; border: 1px solid #2a1c10; vertical-align: -.05em; }
.wm-legend .wm-l-unk i { background: none; border-style: dashed; }
.wm-fronts { margin: 4px 0 0; padding: 0; list-style: none; font-size: calc(13.5px * var(--ui, 1)); font-weight: 800; text-align: center; }
.wm-fronts li.hot { color: #a3261a; } .wm-fronts li.warn { color: #7a5210; }
.wm-quiet { margin: 4px 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--bk-dim); }

.wc-list { margin: 0; padding: 0; list-style: none; }
.wc-list li { display: grid; grid-template-columns: 2.9em minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 4px 2px; border-bottom: 1px dotted var(--bk-rule); font-size: calc(13.5px * var(--ui, 1)); line-height: 1.35; }
.wc-list b { font-family: var(--btn-font); font-size: .9em; color: var(--bk-dim); }
.wc-list li.big span { font-weight: 800; }
.wc-list li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.wr-list { margin: 0; padding: 0; list-style: none; }.wr-list li { display: grid; grid-template-columns: 1.7em minmax(0, 1fr); gap: 6px; align-items: start; padding: 4px 2px; border-bottom: 1px dotted var(--bk-rule); font-size: calc(13.5px * var(--ui, 1)); line-height: 1.35; }
.wr-mk { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-top: 1px; border-radius: 50%; font-style: normal; font-size: 11.5px; font-weight: 900; line-height: 1; color: #f6f0dc; }
.wr-mk.open { background: #5d7186; }
.wr-mk.true { background: #3f7a30; }
.wr-mk.false { background: #a3261a; }
.wr-tx { display: block; max-height: 2.75em; overflow: hidden; }
.wr-tx small { margin-left: 6px; font-family: var(--btn-font); font-size: 11px; font-weight: 700; color: var(--bk-dim); white-space: nowrap; }
.wr-list li.true small { color: #3f7a30; } .wr-list li.false small { color: #a3261a; }

/* 정세 읽는 법 (빈 쪽에만) */

@media (max-width: 759px), (max-aspect-ratio: 1/1) {
  .wm { height: clamp(150px, 30vh, 230px); }
  .wl-row { padding: 4px 2px 5px; }
}