/* ── 게임 RPG ────────────────────────────────────────────────────────────
   귀엽게, 그러나 읽히게. 숫자가 커서 한눈에 들어와야 한다.
   ⚠️ 이름을 rp- 로 못박는다. 예전에 .bar 를 그냥 썼다가 「가치맵」 글자가
      통째로 사라진 적이 있다(2026-08-22). 짧은 이름은 반드시 부딪힌다. */

.rp-hud {
  background: linear-gradient(135deg, #3d5a80, #2b4162);
  border-radius: 12px;
  color: #fff;
  margin: 0 0 10px;
  padding: 12px 13px 10px;
}
.rp-broke {
  background: linear-gradient(135deg, #8c3b3b, #6b2b2b);
}
.rp-who {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rp-lv {
  background: #ffd873;
  border-radius: 5px;
  color: #4a3a10;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
}
.rp-title {
  font-size: 12px;
  opacity: 0.85;
}
.rp-nick {
  font-size: 15px;
}
.rp-streak {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  font-size: 11px;
  margin-left: auto;
  padding: 2px 8px;
}
.rp-bar {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  height: 5px;
  margin: 8px 0 10px;
  overflow: hidden;
}
.rp-bar i {
  background: #ffd873;
  display: block;
  height: 100%;
}
.rp-stats {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
}
.rp-st {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 4px;
  text-align: center;
}
.rp-st i {
  display: block;
  font-size: 15px;
  font-style: normal;
}
.rp-st em {
  display: block;
  font-size: 10px;
  font-style: normal;
  opacity: 0.75;
}
.rp-st b {
  display: block;
  font-size: 13.5px;
  margin-top: 1px;
}
.rp-st b.dn {
  color: #ffb3b3;
}
.rp-today {
  display: flex;
  font-size: 11.5px;
  gap: 12px;
  margin-top: 9px;
  opacity: 0.92;
}
.rp-today b.up {
  color: #a8e6a1;
}
.rp-today b.dn {
  color: #ffb3b3;
}
.rp-alert {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font-size: 12px;
  margin-top: 9px;
  padding: 8px 10px;
}
.rp-alert button {
  background: #ffd873;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  margin-left: 6px;
  padding: 4px 10px;
}

/* 이름 정하기 */
.rp-login {
  padding: 26px 16px;
  text-align: center;
}
.rp-logo {
  font-size: 46px;
}
.rp-login h2 {
  font-size: 19px;
  margin: 8px 0 6px;
}
.rp-login p {
  color: var(--steel);
  font-size: 13px;
  line-height: 1.75;
}
.rp-form {
  display: flex;
  gap: 6px;
  margin: 16px 0 12px;
}
.rp-form input {
  border: 1px solid #cfd6dc;
  border-radius: 7px;
  flex: 1;
  font-size: 14px;
  padding: 10px;
}
.rp-form button {
  background: #3d5a80;
  border: 0;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
}
.rp-fine {
  /* ⚠️ 10.5px · #8a929a 였다. 「작고 흐리고 잘 안 보인다」(사장님 2026-08-26).
     설명글은 읽으라고 있는 것이지 구색이 아니다. 키우고 진하게 한다. */
  color: #5c646c;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: left;
}
.rp-foot {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 9px;
}

/* 필지 카드 */
.rp-plot {
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
}
.rp-plot h3 {
  font-size: 15px;
  margin: 6px 0 5px;
}
.rp-badge {
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
}
.rp-gift {
  background: #ffe9b0;
  color: #7a5a10;
}
.rp-mine {
  background: #d8ecd9;
  color: #22592f;
}
.rp-other {
  background: #e6ddf5;
  color: #503b7a;
}
.rp-free {
  background: #e2edf5;
  color: #2f5578;
}
.rp-hint {
  color: #37414a;
  font-size: 13px;
  margin: 0;
}
.rp-hint2 {
  color: var(--steel);
  font-size: 12px;
  margin: 3px 0 0;
}
.rp-secret {
  background: #fff7e0;
  border-radius: 6px;
  color: #7a5a10;
  font-size: 11.5px;
  margin: 8px 0 0;
  padding: 6px 9px;
}
.rp-rent {
  background: #f4f0fb;
  border-radius: 8px;
  color: #503b7a;
  font-size: 12px;
  line-height: 1.7;
  margin: 8px 0 0;
  padding: 9px 11px;
}
.rp-q {
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0 9px;
}

/* 고르기 */
.rp-pick {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, 1fr);
}
.rp-pick button {
  background: #fff;
  border: 1.5px solid #d7dee4;
  border-radius: 10px;
  cursor: pointer;
  padding: 11px 8px;
  text-align: center;
  transition: 0.12s;
}
.rp-pick button:hover {
  background: #f3f8fd;
  border-color: #3d5a80;
  transform: translateY(-1px);
}
.rp-pick button i {
  display: block;
  font-size: 21px;
  font-style: normal;
}
.rp-pick button b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-top: 3px;
}
.rp-pick button em {
  color: #4e565e;
  display: block;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.5;
}
.rp-biz {
  grid-template-columns: repeat(3, 1fr);
}
/* ── 「이 건물에 있는 가게」 (2026-08-26) ─────────────────────────────
   층이 왼쪽에 줄 맞춰 서야 「1층에 뭐가 있나」가 한눈에 들어온다. */
.rp-shops {
  background: #fbfcfd;
  border: 1px solid #e3e9ee;
  border-radius: 10px;
  margin-top: 8px;
  padding: 9px 11px 7px;
}
.rp-shops-h {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 7px;
}
.rp-shops ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rp-shops li {
  display: grid;
  font-size: 13.5px;
  gap: 9px;
  grid-template-columns: 52px 1fr;
  line-height: 1.8;
}
.rp-shops li + li {
  border-top: 1px dotted #e8edf1;
}
.rp-shops .fl {
  color: #5c646c;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}
.rp-shops .br {
  color: #3d5a80;
}
.rp-shops .cnt {
  color: var(--steel);
  font-size: 10.5px;
  font-style: normal;
}

/* ── 「무엇을 지을까」 (2026-08-26) ────────────────────────────────────
   후보마다 방식·연면적·순수익이 두 줄로 붙어 두 칸에 넣으면 글자가 뭉갠다.
   한 줄에 하나씩 놓고 왼쪽 정렬한다 — 견주는 화면이라 줄이 맞아야 읽힌다. */
.rp-use {
  grid-template-columns: 1fr;
}
/* ⚠️ 단추 안에는 i·b·em 셋이 들어 있다. 2열 격자에 그대로 두면 **em 이
   첫 칸(30px)으로 떨어져** 글자가 한 자씩 세로로 쏟아진다(2026-08-26 실측).
   그림글자는 두 줄을 세로로 걸치고, 이름과 설명은 **둘 다 둘째 칸**에 둔다. */
.rp-use button {
  display: grid;
  gap: 2px 11px;
  grid-template-columns: 34px 1fr;
  text-align: left;
}
.rp-use button i {
  align-self: center;
  font-size: 25px;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.rp-use button b {
  font-size: 15px;
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
}
.rp-use button em {
  color: #47515a;
  font-size: 13px;
  font-weight: 500;
  grid-column: 2;
  grid-row: 2;
  line-height: 1.55;
  margin-top: 0;
}
.rp-use button.rp-best {
  background: #f4f9ff;
  border-color: #3d5a80;
}
.rp-usepick {
  background: #f3f8fd;
  border: 1px solid #d7dee4;
  border-radius: 9px;
  font-size: 12.5px;
  margin: 10px 0 2px;
  padding: 8px 10px;
}
.rp-usepick button {
  background: #fff;
  border: 1px solid #d7dee4;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11.5px;
  margin-left: 6px;
  padding: 3px 8px;
}
.rp-biz button b {
  font-size: 12px;
}
.rp-back,
.rp-next button {
  grid-column: 1 / -1;
  font-size: 13px;
}

/* 뚝딱뚝딱 */
.rp-build {
  padding: 34px 10px;
  text-align: center;
}
.rp-hammer {
  animation: rp-tap 0.5s infinite;
  font-size: 44px;
}
@keyframes rp-tap {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(18deg);
  }
}
.rp-build p {
  color: var(--steel);
  font-size: 13px;
  margin: 6px 0 0;
}

/* 결과 */
.rp-res {
  border: 2px solid #cfd6dc;
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
}
.rp-res.ok {
  border-color: #6fae63;
}
.rp-res.bad {
  border-color: #c97a7a;
}
.rp-res-top {
  background: #eef6ec;
  font-size: 15px;
  font-weight: 800;
  padding: 10px 12px;
}
.rp-res.bad .rp-res-top {
  background: #fbecec;
}
.rp-tab {
  border-collapse: collapse;
  font-size: 12.5px;
  width: 100%;
}
.rp-tab th,
.rp-tab td {
  border-bottom: 1px solid #eef1f4;
  padding: 7px 12px;
  text-align: left;
}
.rp-tab td {
  text-align: right;
}
.rp-tab th {
  color: #4a545e;
  font-weight: 500;
}
.rp-sum th,
.rp-sum td {
  background: #f7f9fb;
  font-size: 15px;
  font-weight: 800;
}
.rp-tab td.up {
  color: #1f6b33;
}
.rp-tab td.dn {
  color: #9b2c2c;
}
.rp-sense {
  background: #eef2f8;
  font-size: 13px;
  padding: 9px 12px;
}
.rp-sense b {
  color: #2b4162;
  font-size: 15px;
}
.rp-sense span {
  color: var(--steel);
  display: block;
  font-size: 11.5px;
  margin-top: 2px;
}
.rp-why {
  background: #f6f9f6;
  color: #2f4a34;
  font-size: 12.5px;
  line-height: 1.75;
  padding: 10px 12px;
}
.rp-art {
  margin: 0;
  padding: 10px 12px 12px;
}
.rp-art svg {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
}
.rp-art figcaption {
  color: #8a929a;
  font-size: 10.5px;
  margin-top: 4px;
  text-align: center;
}
.rp-levelup {
  background: #fff4d0;
  color: #7a5a10;
  font-size: 13px;
  padding: 9px 12px;
}
.rp-next {
  margin-top: 9px;
}
.rp-fail {
  background: #fbecec;
  border-radius: 8px;
  color: #9b2c2c;
  font-size: 13px;
  margin: 10px 0;
  padding: 12px;
}

/* 사기·되팔기 */
.rp-buy {
  align-items: center;
  background: #f2f7fb;
  border-radius: 9px;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
}
.rp-buy span {
  flex: 1;
}
.rp-buy button {
  background: #3d5a80;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 14px;
}
.rp-no {
  color: #9b2c2c;
  flex: 0 !important;
  font-size: 11.5px;
  white-space: nowrap;
}

/* 내 방 */
.rp-list th {
  font-weight: 600;
}
.rp-list button {
  background: #fff;
  border: 1px solid #cfd6dc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 9px;
}
.rp-empty {
  color: var(--steel);
  font-size: 12.5px;
  padding: 10px 0;
}
.rp-coll {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rp-coll span {
  background: #f2f4f6;
  border-radius: 12px;
  color: #aab2b9;
  font-size: 11.5px;
  padding: 3px 9px;
}
.rp-coll span.on {
  background: #d8ecd9;
  color: #22592f;
  font-weight: 700;
}

/* 지도 말풍선 — 게임에서는 수익을 안 보여 준다 */
.mgame {
  min-width: 132px;
  text-align: center;
}
.mg-ico {
  font-size: 26px;
  line-height: 1.1;
}
.mg-own {
  color: #3d5a80;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 2px;
}
.mg-go {
  color: #8a929a;
  font-size: 10.5px;
  margin-top: 3px;
}

/* ── 사이트 전환 탭 (맨 위) ──────────────────────────────────────────────
   가치맵 ↔ 건물주. 같은 도메인의 다른 페이지라 카카오 도메인을 더 넣지
   않아도 된다(/ 와 /game/).
   ⚠️ 폰에서는 검색칸이 자리를 다 먹으므로 줄바꿈을 허용하고 글자를 줄인다. */
.sitenav {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 3px;
}
.sitenav a {
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.sitenav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.sitenav a.on {
  background: var(--orange, #f36f21);
  color: #fff;
}
@media (max-width: 720px) {
  .bar .tag {
    display: none;
  }
  .sitenav a {
    font-size: 11.5px;
    padding: 5px 9px;
  }
}
@media (max-width: 480px) {
  .bar {
    gap: 6px;
    padding: 0 8px;
  }
  .sitenav a {
    font-size: 11px;
    padding: 4px 7px;
  }
}

/* ── 시작화면 ────────────────────────────────────────────────────────────
   건물주는 열자마자 게임이다. 지도보다 이게 먼저 덮는다. */
/* ═══ 시작화면 배경 — 밤의 서울, 통유리, 그리고 그것을 내려다보는 사람 ═══
   사장님 2026-08-28: 「처음 로그인 화면에 전면에 꽉차게. 한번씩 번갈아」
   그림 두 장(남자/여자)을 들어올 때마다 갈아 낀다 — 고르는 일은 rpgui.js.

   ⚠️ 그림은 **--gs-shot** 으로 들어온다. 값이 없어도 화면은 뜬다(아래
      background-color 가 받친다). 그림이 늦게 와도 글씨가 안 깨진다.
   ⚠️ cover 라 화면 비율에 따라 잘린다. 가운데(50%)로 자르면 세로 화면에서
      사람이 잘려 나간다 — 사람이 왼쪽에 있으니 **38%** 를 축으로 잡는다. */
#gameStart {
  align-items: center;
  background-color: #070b12;
  background-image: var(--gs-shot, none);
  background-position: 38% center;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  padding: 20px 16px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 200;
}
/* 글씨가 얹힐 자리만 어둡게 눌러 준다. 사진 전체를 덮으면 사진을 쓴 뜻이
   없어진다 — 가운데는 진하게, 가장자리로 갈수록 옅게. */
#gameStart::before {
  background:
    radial-gradient(
      ellipse 44% 62% at 50% 50%,
      rgba(4, 8, 15, 0.72) 0%,
      rgba(4, 8, 15, 0.44) 45%,
      rgba(4, 8, 15, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 8, 15, 0.5) 0%,
      rgba(4, 8, 15, 0.12) 38%,
      rgba(4, 8, 15, 0.62) 100%
    );
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
/* 그림이 다 받아지면 살짝 떠오르게 — 툭 나타나면 싸구려로 보인다 */
#gameStart.gs-shot-on {
  animation: gs-shot-in 0.9s ease-out;
}
@keyframes gs-shot-in {
  from {
    background-color: #070b12;
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #gameStart.gs-shot-on {
    animation: none;
  }
}
/* 세로 화면(폰)에서는 자를 자리를 옮긴다.
   가로 그림을 세로로 자르면 폭의 4분의 1만 남는다. 38% 로 자르면 그 자리가
   **사람 뒤통수**라 화면 한가운데가 검은 덩어리가 된다(실제로 그랬다).
   58% 로 옮기면 타워가 서고 왼쪽 아래에 사람 실루엣이 남는다. */
@media (max-aspect-ratio: 1/1) {
  #gameStart {
    background-position: 58% center;
  }
}
#gameStart[hidden] {
  display: none;
}
.gs-box {
  color: #fff;
  max-width: 420px;
  text-align: center;
  width: 100%;
  /* 사진 위에 얹히므로 덮개(::before)보다 위로 올린다 */
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
}
.gs-logo {
  font-size: 62px;
  line-height: 1;
}
.gs-box h1 {
  font-size: 24px;
  letter-spacing: -0.4px;
  margin: 10px 0 8px;
}
.gs-sub {
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
  opacity: 0.88;
}
.gs-steps {
  display: flex;
  gap: 8px;
  margin: 20px 0 6px;
}
.gs-steps span {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  flex: 1;
  font-size: 22px;
  padding: 12px 4px;
}
.gs-steps em {
  display: block;
  font-size: 11px;
  font-style: normal;
  margin-top: 4px;
  opacity: 0.82;
}
.gs-form {
  margin: 16px 0 10px;
}
.gs-form input {
  border: 0;
  font-size: 15px;
  padding: 13px;
}
.gs-form button {
  background: #ffd873;
  color: #3a2e08;
  font-size: 15px;
  padding: 13px 20px;
}
.gs-form button:hover {
  background: #ffe49a;
}
.gs-go {
  width: 100%;
}
.gs-fine {
  font-size: 10.5px;
  line-height: 1.7;
  opacity: 0.62;
  text-align: left;
}
.gs-alt,
.gs-links a {
  color: rgba(255, 255, 255, 0.66);
  display: inline-block;
  font-size: 12px;
  margin-top: 12px;
  text-decoration: none;
}
.gs-alt:hover,
.gs-links a:hover {
  color: #fff;
  text-decoration: underline;
}
.gs-links {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.gs-back {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, 1fr);
  margin: 16px 0 4px;
}
.gs-back span {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 4px;
}
.gs-back i {
  display: block;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
}
.gs-back em {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  margin-top: 2px;
  opacity: 0.78;
}
.gs-streak {
  color: #ffd873;
  font-size: 12.5px;
  margin: 10px 0 0;
}

/* 지도 위에 늘 떠 있는 HUD 띠 */
#hudBar {
  left: 10px;
  max-width: 460px;
  position: fixed;
  right: 10px;
  top: calc(var(--bar-h) + 8px);
  z-index: 25;
}
#hudBar[hidden] {
  display: none;
}
#hudBar .rp-hud {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  margin: 0;
}
@media (max-width: 720px) {
  #hudBar {
    max-width: none;
  }
  #hudBar .rp-st em {
    font-size: 9.5px;
  }
  #hudBar .rp-st b {
    font-size: 12.5px;
  }
}

/* ── HUD 띠는 **터치를 통과시킨다** ──────────────────────────────────────
   ⚠️ 폰에서 설명창이 열리면 남는 지도가 얼마 안 되는데, 그 위를 HUD 가
      덮어서 **끌 자리가 없어졌다**(2026-08-22 사장님 신고: 「지도가 안 움직여」).
      HUD 는 보여 주기만 하는 띠다. 단추만 눌리게 하고 나머지는 지도로 넘긴다. */
#hudBar,
#hudBar .rp-hud,
#hudBar .rp-who,
#hudBar .rp-stats,
#hudBar .rp-today,
#hudBar .rp-bar {
  pointer-events: none;
}
#hudBar button,
#hudBar .rp-alert {
  pointer-events: auto;
}

/* 폰에서는 더 낮게 — 지도를 덜 가린다 */
@media (max-width: 720px) {
  #hudBar {
    left: 6px;
    right: 6px;
    top: calc(var(--bar-h) + 5px);
  }
  #hudBar .rp-hud {
    border-radius: 10px;
    padding: 7px 9px 6px;
  }
  #hudBar .rp-bar {
    margin: 5px 0 6px;
  }
  #hudBar .rp-stats {
    gap: 4px;
  }
  #hudBar .rp-st {
    padding: 4px 2px;
  }
  #hudBar .rp-st i {
    display: none;
  }
  #hudBar .rp-st em {
    font-size: 9px;
  }
  #hudBar .rp-st b {
    font-size: 12px;
  }
  #hudBar .rp-today {
    font-size: 10.5px;
    gap: 8px;
    margin-top: 6px;
  }
  #hudBar .rp-title {
    display: none;
  }
}

/* ── 2층: 운영 ──────────────────────────────────────────────────────────
   차려 둔 가게가 날마다 쌓인다. 「비운 사이 이런 일이 있었습니다」가 핵심. */
.rp-daily th,
.rp-daily td {
  background: #f2f7fb;
  color: #2f5578;
  font-weight: 700;
}
.rp-daily em {
  color: var(--steel);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}
.rp-open {
  background: #eef6ec;
  color: #2f4a34;
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  padding: 9px 12px;
}
.rp-oper {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 10px;
}
.rp-oper span {
  background: #f2f4f6;
  border-radius: 9px;
  display: block;
  padding: 8px 4px;
  text-align: center;
}
.rp-oper i {
  display: block;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}
.rp-oper i.up {
  color: #1f6b33;
}
.rp-oper i.dn {
  color: #9b2c2c;
}
.rp-oper em {
  color: var(--steel);
  display: block;
  font-size: 10px;
  font-style: normal;
  margin-top: 2px;
}
.rp-sub {
  color: #9aa1a9;
  font-size: 10.5px;
  font-weight: 400;
}
.rp-own {
  color: #503b7a;
  font-size: 10.5px;
  font-style: normal;
}
.rp-list td {
  vertical-align: top;
}

/* 그동안의 소식 */
.rp-news {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin: 16px 0 4px;
  overflow: hidden;
  text-align: left;
}
.rp-news-top {
  background: rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
}
.rp-news-sum {
  font-size: 26px;
  font-weight: 800;
  padding: 10px 12px 4px;
  text-align: center;
}
.rp-news-sum.up {
  color: #a8e6a1;
}
.rp-news-sum.dn {
  color: #ffb3b3;
}
.rp-news-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  padding: 8px 12px;
}
.rp-news-row b {
  display: inline-block;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.rp-news-row span {
  float: right;
  font-weight: 700;
}
.rp-news-row span.up {
  color: #a8e6a1;
}
.rp-news-row span.dn {
  color: #ffb3b3;
}
.rp-news-why {
  clear: both;
  display: block;
  font-size: 11px;
  font-style: normal;
  opacity: 0.72;
  padding-top: 3px;
}

/* 업종 갈래 머리 — 52가지를 늘어놓으면 못 읽는다 */
.rp-gp {
  color: var(--steel);
  font-size: 11.5px;
  font-weight: 700;
  margin: 10px 0 4px;
}
.rp-biz button b {
  font-size: 11.5px;
  line-height: 1.3;
}
.rp-biz button {
  padding: 9px 4px;
}
.rp-biz button i {
  font-size: 19px;
}
.rp-fine2 {
  color: #9aa1a9 !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  padding-top: 0 !important;
}

/* 판(build) 딱지 — 폰에서 옛 화면인지 눈으로 바로 알게 */
#vpBuild {
  background: rgba(0, 0, 0, 0.42);
  border: 0;
  border-radius: 999px;
  bottom: 4px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 10px;
  left: 4px;
  padding: 3px 9px;
  position: fixed;
  z-index: 300;
}
#vpBuild.old {
  animation: vp-blink 1.1s infinite;
  background: #d9480f;
  color: #fff;
  font-weight: 700;
}
@keyframes vp-blink {
  50% {
    opacity: 0.45;
  }
}

/* ── 개발 전 / 개발 후 ───────────────────────────────────────────────────
   사장님 지시(2026-08-22): 개발 전은 로드뷰와 지금 건물, 개발 후는
   상상도와 지으면 될 건물. 「감으로 고르십시오」 안내는 뺐다. */
.rp-ba {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 8px 0 0;
  padding: 26px 9px 9px;
  position: relative;
}
.rp-ba-lab {
  background: #55606b;
  border-radius: 0 0 6px 0;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  left: 0;
  padding: 3px 10px;
  position: absolute;
  top: 0;
}
.rp-ba-after {
  background: #2f7d4f;
}
.rp-mass {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 210px;
  margin-top: 8px;
  overflow: hidden;
  touch-action: none;
}
.rp-ba-cap {
  color: var(--steel);
  font-size: 11.5px;
  line-height: 1.6;
  margin: 6px 0 0;
  text-align: center;
}
.rp-ba-cap em {
  color: #9aa1a9;
  font-size: 10.5px;
  font-style: normal;
}

/* ── 지역 고르기 줄 ──────────────────────────────────────────────────────
   남한 전체에서 시작해서 한 번에 그 지역으로 날아간다.
   ⚠️ 폰에서는 옆으로 미는 줄이다. 줄바꿈하면 지도를 너무 많이 가린다. */
#regionBar {
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 5px;
  left: 0;
  overflow-x: auto;
  padding: 6px 8px;
  position: fixed;
  right: 0;
  scrollbar-width: none;
  top: var(--bar-h);
  z-index: 26;
}
#regionBar::-webkit-scrollbar {
  display: none;
}
#regionBar button {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  white-space: nowrap;
}
#regionBar button:hover {
  background: #fff;
}
#regionBar button.on {
  background: var(--orange, #f36f21);
  border-color: var(--orange, #f36f21);
  color: #fff;
}
/* 지역 줄이 생기면 HUD 띠를 그만큼 내린다 */
#regionBar ~ #hudBar,
#hudBar {
  top: calc(var(--bar-h) + 44px);
}
@media (max-width: 720px) {
  #regionBar {
    padding: 5px 6px;
  }
  #regionBar button {
    font-size: 11.5px;
    padding: 5px 10px;
  }
  #hudBar {
    top: calc(var(--bar-h) + 40px);
  }
}

/* 미리 그려 둔 「개발 후」 그림 */
.rp-tile {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  height: auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 자랑하기 · 오늘의 필지  (2026-08-23)
 *   쇼츠로 데려온 사람을 새지 않게 붙잡는 장치들이다.
 * ═══════════════════════════════════════════════════════════════════ */
.rp-share {
  display: flex;
  gap: 8px;
  margin: 14px 0 4px;
}
.rp-share button {
  flex: 1;
  padding: 12px 8px;
  border: 0;
  border-radius: 12px;
  background: #2b2b2b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.08s,
    background 0.15s;
}
.rp-share button:hover {
  background: #444;
}
.rp-share button:active {
  transform: scale(0.97);
}
.rp-share-tip {
  margin: 0 0 6px;
  font-size: 12px;
  color: #8a7a5e;
  text-align: center;
}

/* 잠깐 뜨는 알림 */
.rp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(28, 28, 28, 0.94);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9000;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.rp-toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 지역줄 맨 앞의 「오늘의 필지」 */
#regionBar .rb-today {
  background: linear-gradient(135deg, #ffd24a, #ff9a3c);
  color: #3a2600;
  font-weight: 800;
  border: 0;
  box-shadow: 0 2px 8px rgba(255, 154, 60, 0.4);
}
#regionBar .rb-today:hover {
  filter: brightness(1.06);
}
#regionBar .rb-today.done {
  background: #e8e2d6;
  color: #8a7a5e;
  box-shadow: none;
}

/* 시작화면의 오늘의 필지 칸 */
.gs-today {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff3d6, #ffe3bd);
  text-align: left;
}
.gs-today b {
  font-size: 15px;
}
.gs-today .gs-today-addr {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #6b5a3e;
}
.gs-today .gs-today-done {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #2a9d5c;
  font-weight: 700;
}

/* ── 법 근거 · 게임장치 알림  (2026-08-23) ─────────────────────────────
   ⚠️ 「숏」처럼 실제 부동산에 없는 것은 반드시 눈에 띄게 밝힌다. */
.rp-law {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f1f4f8;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4a5568;
}
.rp-warn {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4e0;
  border: 1px solid #ffd9a0;
  font-size: 13px;
  line-height: 1.6;
  color: #8a5a00;
  font-weight: 600;
}
.rp-tile-now {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 바깥 세상 띠 — 환율·금리·코스피 + 흐르는 부동산 뉴스  (2026-08-23)
 *
 * ⚠️ HUD 를 절반으로 줄여 만든 자리다. HUD 를 다시 늘리면 이게 지도를 덮는다.
 * ⚠️ 지도를 끌 수 있어야 하므로 **띠 바깥은 터치를 통과**시킨다.
 *    (2026-08-22 「지도가 안 움직여」와 같은 함정)
 * ═══════════════════════════════════════════════════════════════════ */
#macroBar {
  position: fixed;
  left: 10px;
  right: 10px;
  max-width: 460px;
  /* 첫 그림용 자리. 실제 자리는 macro.js 의 자리잡기() 가 재서 정한다. */
  top: calc(var(--bar-h) + 8px + 120px);
  z-index: 24;
  pointer-events: none;
}
#macroBar > * {
  pointer-events: auto;
}
#macroBar:empty {
  display: none;
}

.mc-vals {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: rgba(28, 28, 30, 0.9);
  border-radius: 10px 10px 0 0;
  padding: 5px 6px;
  backdrop-filter: blur(6px);
}
.mc-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  padding: 2px 3px;
  cursor: default;
  min-width: 0;
}
.mc-cell[data-mc] {
  cursor: pointer;
}
.mc-cell i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}
.mc-cell em {
  font-style: normal;
  font-size: 9px;
  opacity: 0.62;
  white-space: nowrap;
}
.mc-cell i b {
  font-size: 9.5px;
  font-weight: 700;
}
.mc-cell .up,
#macroBar .up {
  color: #ff7b7b;
}
.mc-cell .dn,
#macroBar .dn {
  color: #7bb7ff;
}

.mc-phase {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.mc-ease {
  background: #2a9d5c;
  color: #fff;
}
.mc-mid {
  background: #4a5568;
  color: #fff;
}
.mc-tight {
  background: #d97706;
  color: #fff;
}
.mc-shock {
  background: #d1495b;
  color: #fff;
}

.mc-sfx {
  border: 0;
  background: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.8;
}
.mc-sfx:hover {
  opacity: 1;
}

/* ── 흐르는 뉴스 ────────────────────────────────────────────────────── */
.mc-news {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 0 0 10px 10px;
  padding: 5px 8px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.mc-lab {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a7a5e;
  white-space: nowrap;
}
.mc-track {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.mc-roll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  animation: mc-slide 60s linear infinite;
  will-change: transform;
}
.mc-news:hover .mc-roll {
  animation-play-state: paused;
}
@keyframes mc-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.mc-roll a {
  font-size: 11.5px;
  color: #2b2b2b;
  text-decoration: none;
  white-space: nowrap;
}
.mc-roll a:hover {
  text-decoration: underline;
}
.mc-roll a i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: #8a7a5e;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 4px;
}
.mc-roll .mc-none {
  color: #a09480;
}
.mc-dot {
  color: #d8d0c0;
}

/* ⚠️ 움직임을 싫어하는 사람이 있다 — 시스템 설정을 따른다 */
@media (prefers-reduced-motion: reduce) {
  .mc-roll {
    animation: none;
  }
  .mc-track {
    overflow-x: auto;
  }
}

/* ── 절반으로 줄인 HUD ─────────────────────────────────────────────── */
.rp-hud.rp-slim {
  padding: 7px 9px;
}
.rp-slim .rp-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.rp-slim .rp-lv {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  background: #2b2b2b;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
}
.rp-slim .rp-nick {
  font-size: 12.5px;
  flex: none;
}
.rp-slim .rp-title {
  font-size: 10px;
  color: #8a7a5e;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.rp-slim .rp-bar {
  flex: 1;
  height: 5px;
  min-width: 30px;
  background: #eee6d8;
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.rp-slim .rp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd24a, #ff9a3c);
}
.rp-slim .rp-streak {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
}
.rp-stats4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.rp-debt {
  margin-top: 5px;
  font-size: 11.5px;
  color: #b03a2e;
  font-weight: 700;
}

/* ── 은행 ─────────────────────────────────────────────────────────────── */
.rp-loan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.rp-loan button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
tr.rp-late th {
  color: #b03a2e;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 설명창이 열리면 위쪽 띠들도 그 폭만큼 물러난다  (2026-08-23)
 *
 * ⚠️ 지역줄·HUD·시세띠가 `right: 0` 이라 **설명창 밑으로 파고들었다.**
 *    실측(1280×900, 보령 신흑동): 광주~제주 단추가 창에 가려 안 눌렸다.
 *    셋 다 같은 함정이라 여기서 한꺼번에 물린다.
 * ⚠️ 폰에서는 설명창이 아래에서 올라오므로(--pn-w:100%) 물리면 안 된다.
 *    그래서 720px 위에서만 건다.
 * ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) {
  body.panel-on #regionBar,
  body.panel-on #hudBar,
  body.panel-on #macroBar {
    right: calc(var(--pn-w) + 10px);
  }
  /* HUD·시세띠는 폭이 정해져 있어 오른쪽만 물리면 자리가 어긋난다.
     설명창이 열리면 남는 자리 안쪽으로 다시 잡아 준다. */
  body.panel-on #hudBar,
  body.panel-on #macroBar {
    max-width: min(460px, calc(100vw - var(--pn-w) - 30px));
  }
}

/* 지역줄은 한 줄로만 흐른다 — 감기면 아래 띠들을 다 밀어낸다 */
#regionBar {
  flex-wrap: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 겨루기 (랭킹)  (2026-08-23)
 * ═══════════════════════════════════════════════════════════════════ */
.rk-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.rk-tabs button {
  padding: 9px 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #f6f3ec;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.rk-tabs button.on {
  background: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}
.rk-list .rk-no {
  width: 34px;
  text-align: center;
  font-size: 15px;
}
.rk-list tr.rk-me {
  background: #fff3d6;
}
.rk-list tr.rk-me th,
.rk-list tr.rk-me td {
  font-weight: 800;
}
.rk-mine {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f1f4f8;
  font-size: 13px;
  color: #4a5568;
  text-align: center;
}
.rk-mine b {
  color: #2b2b2b;
}

/* 지도가 막혔을 때의 안내 — 무엇을 등록해야 하는지 그대로 보여 준다 */
#nokey .nk-origin {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
#nokey .nk-origin code {
  background: #2b2b2b;
  color: #ffd24a;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  word-break: break-all;
}
#nokey #nkCopy {
  border: 0;
  background: #f36f21;
  color: #fff;
  font-weight: 800;
  padding: 7px 13px;
  border-radius: 8px;
  cursor: pointer;
}
#nokey .nk-fine {
  font-size: 12.5px;
  opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 지도 위의 띠들은 **틈으로 손이 통과**해야 한다  (2026-08-23)
 *
 * ⚠️ 2026-08-22 에 사장님이 「지도가 안 움직여」 하셨고 HUD 가 범인이었다.
 *    그 뒤 시세띠·지역줄이 새로 올라갔는데 **같은 함정을 또 팠다** —
 *    띠 전체가 손을 먹으면 태블릿처럼 화면이 큰 기기에서 끌 자리가 준다.
 *    규칙은 하나다: **바탕은 통과시키고, 누를 것만 받는다.**
 * ⚠️ 폰 규칙(max-width:720px)에 넣지 **않는다.** 태블릿은 그 규칙을 안 받아서
 *    폰에서만 고치면 태블릿이 그대로 남는다. 바로 그 함정에 걸렸다.
 * ═══════════════════════════════════════════════════════════════════ */
#macroBar,
#macroBar .mc-vals,
#macroBar .mc-news,
#macroBar .mc-track,
#macroBar .mc-roll,
#macroBar .mc-lab,
#macroBar .mc-cell,
#macroBar .mc-dot,
#regionBar {
  pointer-events: none;
}
/* 누를 것만 받는다 */
#macroBar button,
#macroBar .mc-roll a,
#regionBar button {
  pointer-events: auto;
}

/* 새로 만든 HUD 속살도 통과시킨다 — 목록에 안 적으면 그것만 손을 먹는다 */
#hudBar .rp-line1,
#hudBar .rp-stats4,
#hudBar .rp-debt,
#hudBar .rp-lv,
#hudBar .rp-nick,
#hudBar .rp-title,
#hudBar .rp-streak {
  pointer-events: none;
}

/* ⚠️ 여기에 `#map * { pointer-events: auto }` 를 넣었다가 **뺐다**(2026-08-23).
   카카오 지도는 속에 여러 겹(타일·오버레이·이벤트 받는 겹)을 쌓아 두고,
   그 가운데 몇 겹은 **일부러 pointer-events:none** 이다 — 그래야 끌기가
   밑의 겹까지 내려간다. 그것을 통째로 auto 로 덮으면 **지도가 제 손을
   제가 가로챈다.** 지도 속은 카카오가 알아서 하게 둔다. */
#map {
  pointer-events: auto;
}

/* 지도 점검 창 (?점검=1) — 태블릿에서 찍어 보내 주시면 그것으로 고친다 */
#mapCheck {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 9999;
  max-width: calc(100vw - 16px);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(20, 20, 24, 0.92);
  color: #7dffb0;
  font:
    12px/1.7 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  pointer-events: none;
}
#mapCheck b {
  color: #ffd24a;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 안드로이드에서만 나는 손짓 도둑 막기  (2026-08-23)
 *
 * 갤럭시탭에서 지도가 안 끌린다는 신고가 이어졌다. 헤드리스 브라우저로는
 * **절대 안 보이는** 것들이라 원인을 두 가지로 좁혀 둘 다 막는다.
 *
 * ① 크롬의 **당겨서 새로고침**(pull-to-refresh)
 *    지도를 아래로 끌면 브라우저가 그 손짓을 가로채 새로고침을 준비한다.
 *    지도는 한 뼘도 안 움직이고 화면만 살짝 늘어난다.
 *    → overscroll-behavior: none
 *
 * ② 브라우저의 **스크롤 판정**
 *    손가락이 세로로 움직이면 브라우저가 「이건 스크롤이군」 하고
 *    touchcancel 을 던져 지도에서 손을 빼앗는다. 지도 라이브러리들이
 *    하나같이 touch-action:none 을 거는 까닭이 이것이다.
 *    카카오는 제 겉 div 에만 걸어 두는데, 그 위에 얹힌 **SVG 겹**에는
 *    없다 — 실측에서 손이 닿는 것이 바로 그 svg 였다.
 *    → #map 과 그 속 전부에 touch-action: none
 *
 * ⚠️ touch-action 은 **물려받지 않는다.** 그래서 `#map *` 까지 적어야 한다.
 *    (pointer-events 와 헷갈리지 말 것 — 그건 절대 `#map *` 로 덮으면 안 된다)
 * ⚠️ touch-action:none 이어도 **누르기(탭)는 그대로 된다.** 막는 것은
 *    스크롤·확대 같은 브라우저 기본 손짓뿐이다.
 * ═══════════════════════════════════════════════════════════════════ */
html,
body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}
#map,
#map * {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#mapCheck .mc-bad {
  color: #ff8a8a;
  display: block;
  margin-bottom: 4px;
}
#mapCheck .mc-ok {
  color: #7dffb0;
  display: block;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 빈집 챌린지 — 동그라미 모양은 **gam119 의 것을 그대로** 따랐다
 *   (gam119-tools/public/assets/map.css 의 .gmk)
 *   24px 동그라미 · 흰 테두리 2px · 한 글자 · 올리면 작은 설명
 *   색은 신축 주황·대수선 파랑·철거 검정과 겹치지 않게 **보라**로 골랐다.
 * ═══════════════════════════════════════════════════════════════════ */
.gmk {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.gmk > b {
  font-size: inherit;
}
.gmk.k-binjib {
  background: #7048e8;
}
/* 많을수록 진하게 — 색이 아니라 명암으로만 나눈다(gam119 규칙) */
.gmk.k-binjib.b0 {
  background: #b197fc;
}
.gmk.k-binjib.b1 {
  background: #9775fa;
}
.gmk.k-binjib.b2 {
  background: #7048e8;
}
.gmk.k-binjib.b3 {
  background: #4c2fb5;
}
.gmk:hover {
  transform: scale(1.15);
}

.gtip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 5;
  max-width: 220px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(27, 29, 33, 0.95);
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.gmk:hover .gtip {
  display: block;
}
.gtip em {
  display: block;
  font-style: normal;
  font-weight: 800;
}
.gtip i {
  display: block;
  font-style: normal;
  opacity: 0.7;
  margin-top: 2px;
}

#regionBar .rb-binjib {
  background: linear-gradient(135deg, #b197fc, #7048e8);
  color: #fff;
  font-weight: 800;
  border: 0;
  box-shadow: 0 2px 8px rgba(112, 72, 232, 0.4);
}
#regionBar .rb-binjib.on {
  background: #4c2fb5;
  box-shadow:
    0 0 0 2px #fff,
    0 2px 8px rgba(76, 47, 181, 0.5);
}

/* ── 빈집 매물 딱지 ─────────────────────────────────────────────────────
   ⚠️ 「진짜 매물」과 「게임 셈」을 눈으로 갈라 보이게 한다. 섞이면 안 된다. */
.bj-card {
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ede7ff, #e0d5ff);
  border: 1px solid #c4b0ff;
}
.bj-card img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  background: #d8ccff;
}
.bj-body {
  min-width: 0;
}
.bj-body b {
  font-size: 13.5px;
  color: #4c2fb5;
}
.bj-body p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #3a2a5e;
}
.bj-num {
  font-weight: 700;
}
.bj-say {
  color: #5b4a80;
}
.bj-src {
  font-size: 11px !important;
  color: #7a6a9a !important;
  margin-top: 6px !important;
}
.bj-src a {
  color: #4c2fb5;
  font-weight: 700;
}

/* ── 실제 소유자 창구 ─────────────────────────────────────────────────── */
.rp-owner-out {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f3ec;
  font-size: 12.5px;
  line-height: 1.7;
  color: #6b5a3e;
  text-align: center;
}
.rp-owner-out button {
  border: 0;
  background: #8a7a5e;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.rp-owner-out button:hover {
  background: #6b5a3e;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 짓는 장면 팝업  (2026-08-23)
 *   사장님: 「Cities: Skylines 처럼 애니메이션 효과 가능해?」
 *   → 3D 엔진 없이, 그 필지의 진짜 외곽선으로 층을 한 장씩 쌓는다.
 * ═══════════════════════════════════════════════════════════════════ */
.bd-wrap {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 20, 26, 0.72);
  backdrop-filter: blur(3px);
  animation: bd-in 0.18s ease-out;
}
@keyframes bd-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bd-box {
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.bd-x {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.bd-head {
  padding: 14px 44px 10px 16px;
  background: linear-gradient(135deg, #ffd24a, #ff9a3c);
  color: #3a2600;
}
.bd-head b {
  font-size: 16px;
  display: block;
}
.bd-head span {
  font-size: 12.5px;
  opacity: 0.85;
}

/* 공사장 */
.bd-stage {
  position: relative;
  background: linear-gradient(180deg, #eaf3fb 0%, #f6f1e6 72%);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.bd-mass {
  width: 100%;
}
.bd-mass svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 크레인 — 공사 중에만 흔들린다 */
.bd-crane {
  position: absolute;
  right: 14%;
  top: 10%;
  width: 2px;
  height: 62%;
  background: #c9a227;
  opacity: 0;
  transition: opacity 0.25s;
}
.bd-crane::before {
  content: "";
  position: absolute;
  left: -46px;
  top: 6px;
  width: 92px;
  height: 2px;
  background: #c9a227;
}
.bd-crane::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 1px;
  height: 26px;
  background: #b08d1a;
  transform-origin: top center;
  animation: bd-swing 2.2s ease-in-out infinite;
}
.bd-site ~ .bd-crane,
.bd-stage:has(.bd-site) .bd-crane {
  opacity: 1;
}
@keyframes bd-swing {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

/* 먼지 */
.bd-dust {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  display: flex;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  transition: opacity 0.3s;
}
.bd-stage:has(.bd-site) .bd-dust {
  opacity: 1;
}
.bd-dust i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(180, 168, 148, 0.5);
  animation: bd-puff 1.5s ease-out infinite;
}
.bd-dust i:nth-child(2) {
  animation-delay: 0.5s;
}
.bd-dust i:nth-child(3) {
  animation-delay: 1s;
}
@keyframes bd-puff {
  0% {
    transform: translateY(0) scale(0.4);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-40px) scale(1.5);
    opacity: 0;
  }
}

/* 완성 순간 반짝 */
.bd-done {
  animation: bd-flash 0.6s ease-out;
}
@keyframes bd-flash {
  0% {
    filter: brightness(1.9);
  }
  100% {
    filter: brightness(1);
  }
}
.bd-art {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34%;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  animation: bd-pop 0.4s ease-out;
}
@keyframes bd-pop {
  from {
    transform: scale(0.6) translateY(20px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.bd-foot {
  padding: 10px 16px 14px;
}
.bd-cap {
  font-size: 11.5px;
  color: #8a7a5e;
}

@media (prefers-reduced-motion: reduce) {
  .bd-wrap,
  .bd-done,
  .bd-art {
    animation: none;
  }
  .bd-crane::after,
  .bd-dust i {
    animation: none;
  }
  .bd-dust {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 돈 결과 발표  (2026-08-23)
 *   사장님: 「돈 결과도 팝업으로 애니메이션 효과로 충격적이게」
 *   ① 숫자가 굴러 올라간다  ② 한 줄씩 쾅쾅  ③ 잃으면 흔들림, 벌면 동전비
 *   ④ 등수는 도장처럼 찍힌다
 * ═══════════════════════════════════════════════════════════════════ */
.bd-result .bd-stage {
  min-height: 170px;
}
.bd-money {
  position: relative;
  padding: 14px 16px 18px;
  background: #16181d;
  color: #fff;
  overflow: hidden;
}
.bd-money.up {
  background: linear-gradient(180deg, #1d2a1f, #16181d);
}
.bd-money.dn {
  background: linear-gradient(180deg, #2a1d1d, #16181d);
}

/* 쾅! 제목 */
.bd-slam {
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  animation: bd-slam 0.42s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes bd-slam {
  0% {
    transform: scale(2.4);
    opacity: 0;
    filter: blur(6px);
  }
  60% {
    transform: scale(0.92);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
  }
}

/* 줄 — 왼쪽에서 밀려 들어온다 */
.bd-rows {
  width: 100%;
  border-collapse: collapse;
}
.bd-rows tr {
  animation: bd-row 0.34s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes bd-row {
  from {
    transform: translateX(-28px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.bd-rows th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: #a9b0bd;
  padding: 5px 0;
}
.bd-rows td {
  text-align: right;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 5px 0;
}
.bd-money .up {
  color: #ff8787;
}
.bd-money .dn {
  color: #74c0fc;
}

/* 절정 — 가장 큰 수 */
.bd-big {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  text-align: center;
  animation: bd-row 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.bd-big span {
  display: block;
  font-size: 12.5px;
  color: #a9b0bd;
}
.bd-big b {
  display: block;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

/* 등수 도장 — 비스듬히 찍힌다 */
.bd-stamp {
  margin: 12px auto 0;
  width: fit-content;
  padding: 6px 14px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(-6deg);
  animation: bd-stamp 0.34s cubic-bezier(0.2, 1.8, 0.4, 1) both;
}
.bd-stamp b {
  color: #ffd24a;
  font-size: 15px;
}
@keyframes bd-stamp {
  0% {
    transform: rotate(-6deg) scale(3.2);
    opacity: 0;
  }
  70% {
    transform: rotate(-6deg) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: rotate(-6deg) scale(1);
  }
}

/* 크게 잃으면 흔들린다 — 한 번, 0.5초만 */
.bd-shake {
  animation: bd-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes bd-shake {
  10%,
  90% {
    transform: translateX(-3px);
  }
  20%,
  80% {
    transform: translateX(6px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }
  40%,
  60% {
    transform: translateX(10px);
  }
}

/* 동전 비 — 잘됐을 때만 */
.bd-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bd-rain i {
  position: absolute;
  top: -28px;
  font-size: 20px;
  font-style: normal;
  animation: bd-fall linear forwards;
}
@keyframes bd-fall {
  from {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(320px) rotate(420deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-slam,
  .bd-rows tr,
  .bd-big,
  .bd-stamp {
    animation: none;
  }
  .bd-shake {
    animation: none;
  }
  .bd-rain {
    display: none;
  }
}
.bd-head.ok {
  background: linear-gradient(135deg, #8ce99a, #2f9e44);
  color: #06301a;
}
.bd-head.bad {
  background: linear-gradient(135deg, #ffc9c9, #e03131);
  color: #4a0505;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 「나는 골랐다. 너라면?」 대결  (2026-08-23)
 * ═══════════════════════════════════════════════════════════════════ */
.dl-band {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1f2a44, #2b4162);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.dl-band span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.86;
}
.dl-band.done {
  background: linear-gradient(135deg, #495057, #343a40);
}

/* 동시 공개 */
.dl-vs {
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 16px;
  background: #16181d;
  color: #fff;
  animation: dl-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes dl-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.dl-vs-top {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #ffd24a;
}
.dl-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.dl-side {
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  min-width: 0;
}
.dl-side.win {
  background: rgba(255, 210, 74, 0.16);
  box-shadow: inset 0 0 0 2px #ffd24a;
}
.dl-side.me {
  outline: 1px dashed rgba(255, 255, 255, 0.35);
}
.dl-who {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-pick {
  font-size: 11.5px;
  opacity: 0.8;
  margin: 3px 0 6px;
  min-height: 2.6em;
  line-height: 1.3;
}
.dl-sense {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dl-sense.up {
  color: #ff8787;
}
.dl-sense.dn {
  color: #74c0fc;
}
.dl-sub {
  font-size: 10.5px;
  opacity: 0.6;
}
.dl-rank {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 4px;
}
.dl-rank b {
  color: #ffd24a;
}
.dl-money {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.dl-mid {
  font-size: 15px;
  font-weight: 900;
  opacity: 0.5;
}
.dl-say {
  text-align: center;
  margin-top: 10px;
  font-size: 13.5px;
}
.dl-say b {
  color: #ffd24a;
}
.dl-vs .rp-fine {
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin-top: 8px;
}

.rp-share {
  flex-wrap: wrap;
}
.rp-share button[data-rp="duel"] {
  background: linear-gradient(135deg, #f4581c, #d1495b);
  flex: 1 1 100%;
}
@media (prefers-reduced-motion: reduce) {
  .dl-vs {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 대박 · 쪽박 — 화면 전체를 덮는 한 방  (2026-08-23)
 *   사장님: 「돈 많이 벌면 대박, 돈 잃으면 쪽박. 팝업효과 애니메이션까지.」
 * ⚠️ 자주 나면 안 되는 것이라, 날 때는 확실히 난다.
 * ⚠️ 누르면 바로 사라진다 — 기다리게 하면 성가시다.
 * ═══════════════════════════════════════════════════════════════════ */
.bd-boom {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  animation: bd-boom-in 0.22s ease-out both;
}
.bd-boom.out {
  animation: bd-boom-out 0.4s ease-in both;
}
@keyframes bd-boom-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bd-boom-out {
  to {
    opacity: 0;
  }
}

.bd-boom.jackpot {
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 214, 102, 0.96) 0%,
    rgba(255, 154, 60, 0.92) 40%,
    rgba(120, 60, 0, 0.9) 100%
  );
}
.bd-boom.bust {
  background: radial-gradient(
    circle at 50% 45%,
    rgba(60, 64, 72, 0.95) 0%,
    rgba(28, 30, 36, 0.96) 45%,
    rgba(10, 10, 14, 0.97) 100%
  );
}

/* 글자 — 아주 크게, 튀어나왔다 착지 */
.bd-boom-word {
  font-size: clamp(64px, 22vw, 168px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  animation: bd-word 0.55s cubic-bezier(0.2, 1.7, 0.35, 1) both;
}
.bd-boom.jackpot .bd-boom-word {
  color: #fff;
  text-shadow:
    0 0 30px rgba(255, 255, 255, 0.7),
    0 8px 0 #c9700e,
    0 14px 34px rgba(0, 0, 0, 0.4);
}
.bd-boom.bust .bd-boom-word {
  color: #ff6b6b;
  text-shadow:
    0 0 26px rgba(255, 60, 60, 0.5),
    0 6px 0 #5b1414;
  animation: bd-word-drop 0.6s cubic-bezier(0.7, -0.3, 0.9, 0.6) both;
}
@keyframes bd-word {
  0% {
    transform: scale(3.6) rotate(-8deg);
    opacity: 0;
    filter: blur(14px);
  }
  55% {
    transform: scale(0.88) rotate(2deg);
    opacity: 1;
    filter: blur(0);
  }
  75% {
    transform: scale(1.06) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes bd-word-drop {
  0% {
    transform: translateY(-140px) scale(1.5) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: translateY(10px) scale(1) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
.bd-boom-sub {
  margin-top: 10px;
  font-size: clamp(14px, 4vw, 20px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  animation: bd-row 0.4s 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.bd-boom.bust .bd-boom-sub {
  color: rgba(255, 200, 200, 0.85);
}

/* 대박 — 돈이 쏟아진다 */
.bd-boom-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bd-boom-rain i {
  position: absolute;
  top: -40px;
  font-style: normal;
  animation: bd-bigfall linear forwards;
}
@keyframes bd-bigfall {
  from {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateY(110vh) rotate(540deg);
    opacity: 0.9;
  }
}

/* 쪽박 — 화면에 금이 간다 */
.bd-crack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      103deg,
      transparent 49.7%,
      rgba(255, 90, 90, 0.5) 49.9%,
      transparent 50.2%
    ),
    linear-gradient(
      72deg,
      transparent 39.7%,
      rgba(255, 90, 90, 0.35) 39.9%,
      transparent 40.2%
    ),
    linear-gradient(
      126deg,
      transparent 62.7%,
      rgba(255, 90, 90, 0.3) 62.9%,
      transparent 63.2%
    );
  animation: bd-crack 0.5s 0.25s steps(3) both;
}
@keyframes bd-crack {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 쪽박이면 온 화면이 한 번 흔들린다 */
body.bd-quake {
  animation: bd-quake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes bd-quake {
  10%,
  90% {
    transform: translate(-2px, 1px);
  }
  20%,
  80% {
    transform: translate(4px, -2px);
  }
  30%,
  50%,
  70% {
    transform: translate(-7px, 3px);
  }
  40%,
  60% {
    transform: translate(7px, -3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bd-boom,
  .bd-boom-word,
  .bd-boom-sub,
  .bd-crack {
    animation: none;
  }
  .bd-boom-rain {
    display: none;
  }
  body.bd-quake {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 머리띠 — 뉴스(윗줄) + 금리·환율·코스피(아랫줄)   (2026-08-24)
 *   사장님: 「뉴스는 맨 위 시험운영 옆자리에서 스크롤, 그 밑에 금리·환율·코스피」
 * ⚠️ 지도 위에 떠 있던 #macroBar 를 걷고 여기로 올렸다. 지도를 안 가린다.
 * ═══════════════════════════════════════════════════════════════════ */
#tickerBar {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 10px;
  overflow: hidden;
}
#tickerBar:empty {
  display: none;
}

.tk-news {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.tk-track {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.tk-roll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  animation: tk-slide 90s linear infinite;
  will-change: transform;
}
.tk-news:hover .tk-roll {
  animation-play-state: paused;
}
@keyframes tk-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.tk-roll a {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  white-space: nowrap;
}
.tk-roll a:hover {
  color: #fff;
  text-decoration: underline;
}
.tk-roll a i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  color: #1a1a1a;
  background: #ffd24a;
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 4px;
}
.tk-roll .tk-none {
  color: rgba(255, 255, 255, 0.5);
}
.tk-dot {
  color: rgba(255, 255, 255, 0.3);
}

.tk-vals {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tk-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  padding: 0;
  white-space: nowrap;
}
.tk-cell[data-mc] {
  cursor: pointer;
}
.tk-cell em {
  font-style: normal;
  font-size: 9.5px;
  opacity: 0.55;
}
.tk-cell i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
}
.tk-cell b {
  font-size: 9.5px;
  font-weight: 700;
  margin-left: 1px;
}
.tk-cell .up,
#tickerBar .up {
  color: #ff8787;
}
.tk-cell .dn,
#tickerBar .dn {
  color: #74c0fc;
}
.tk-sfx {
  border: 0;
  background: none;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.75;
}
.tk-sfx:hover {
  opacity: 1;
}
.mc-phase,
#tickerBar .mc-phase {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}

/* 좁으면 뉴스는 접고 **시세는 남긴다**.
   ⚠️ `flex: 0 0 auto` 로 두었더니 자리가 없어 통째로 사라졌다(폰 실측 0px).
      시세는 한 줄짜리라 자리를 조금만 주면 된다. */
@media (max-width: 900px) {
  #tickerBar .tk-news {
    display: none;
  }
  #tickerBar {
    flex: 0 1 auto;
    min-width: 150px;
  }
  #tickerBar .tk-vals {
    gap: 7px;
  }
  #tickerBar .tk-cell em {
    display: none;
  }
}
@media (max-width: 620px) {
  .bar .sitenav a:not(.on) {
    display: none;
  }
  #tickerBar {
    min-width: 120px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-roll {
    animation: none;
  }
  .tk-track {
    overflow-x: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * HUD — 한 줄 알약. 오른쪽 위 지역 단추 옆에 고정  (2026-08-24)
 *   사장님: 「버튼이 너무 크고 화면을 너무 가린다」
 * ⚠️ 다시 키우지 말 것. 키우면 지도가 또 가려진다.
 * ═══════════════════════════════════════════════════════════════════ */
#hudBar {
  position: fixed;
  right: 10px;
  left: auto;
  top: calc(var(--bar-h) + 6px);
  max-width: none;
  width: auto;
  z-index: 27;
  pointer-events: none;
}
#hudBar[hidden] {
  display: none;
}
.rp-hud.hp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  color: #fff;
  white-space: nowrap;
  margin: 0;
}
.rp-hud.hp.rp-broke {
  background: rgba(120, 24, 24, 0.94);
}
.hp-lv {
  font-size: 10px;
  font-weight: 800;
  background: #ffd24a;
  color: #3a2600;
  border-radius: 999px;
  padding: 1px 6px;
}
.hp-nick {
  font-size: 11.5px;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-i {
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.hp-i i {
  font-style: normal;
  font-size: 11px;
  opacity: 0.9;
}
.hp-i.up {
  color: #ff8787;
}
.hp-i.dn {
  color: #74c0fc;
}
.hp-revive {
  pointer-events: auto;
  border: 0;
  background: #ffd24a;
  color: #3a2600;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
}
/* ⚠️ 지역 줄은 **가로로 스크롤**된다. 그래서 `padding-right` 로는 못 막는다 —
   단추가 그 여백을 지나 HUD 밑으로 굴러 들어간다(2026-08-24 실측).
   **줄 자체를 짧게** 끝내야 한다. 폭은 rpgui.js 가 재서 알려 준다. */
#regionBar {
  right: var(--hud-w, 0px);
  padding-right: 6px;
}
@media (max-width: 720px) {
  .rp-hud.hp {
    gap: 6px;
    padding: 4px 8px;
  }
  .hp-nick {
    display: none;
  }
  .hp-i {
    font-size: 10.5px;
  }
}

/* ═══ 설명창 탭 두 줄 — 윗줄 물건, 아랫줄 게임 (2026-08-24) ═══ */
#pnTabs.pn-tabs2 {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
}
.pn-tabs2 .pn-row {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.pn-tabs2 .pn-row::-webkit-scrollbar {
  display: none;
}
.pn-tabs2 .pn-row-game {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(243, 111, 33, 0.06);
}
.pn-tabs2 .pn-row-game button {
  font-weight: 800;
}

/* ⚠️ 머리띠를 넣으면서 **검색창이 찌그러졌다**(2026-08-24 실측).
   `.bar .find { flex:1 }` 과 `#tickerBar { flex:1 }` 이 자리를 다퉜다.
   검색창은 **줄이되 없어지지는 않게** 바닥을 깔고, 남는 자리를 띠가 갖는다.
   좁은 화면에서는 뉴스를 접는다(위 미디어쿼리). */
.bar .find {
  flex: 0 1 300px;
  min-width: 150px;
}
#tickerBar {
  flex: 1 1 0;
}
.bar .sitenav,
.bar .tag {
  flex: none;
}
@media (max-width: 1100px) {
  .bar .tag {
    display: none;
  }
}
@media (max-width: 760px) {
  .bar .find {
    flex: 1 1 auto;
    min-width: 90px;
  }
}

/* 말풍선 다섯 줄 (2026-08-24) */
.mgame .mg-val {
  font-size: 15px;
  font-weight: 900;
  color: #ffd24a;
  margin: 2px 0 4px;
}
.mgame .mg-line {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.mlabel.mgame {
  max-width: 300px;
}

/* 필지선 단추 (2026-08-24) */
#regionBar .rb-lots {
  background: linear-gradient(135deg, #74c0fc, #1c7ed6);
  color: #fff;
  font-weight: 800;
  border: 0;
  box-shadow: 0 2px 8px rgba(28, 126, 214, 0.35);
}
#regionBar .rb-lots.on {
  background: #1864ab;
  box-shadow:
    0 0 0 2px #fff,
    0 2px 8px rgba(24, 100, 171, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 자유 표시 (핀) + 왼쪽 목록   (2026-08-24)
 *   사장님: 「매물정보·추억장소·맛집 이런 거 적고 왼쪽에 리스트」
 * ⚠️ 목록은 **접힌 채로** 시작한다. 지도가 이 게임의 얼굴이다.
 * ═══════════════════════════════════════════════════════════════════ */
#pinList {
  position: fixed;
  left: 10px;
  top: calc(var(--bar-h) + 52px);
  bottom: 16px;
  z-index: 26;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
#pinList > * {
  pointer-events: auto;
}
.pl-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.92);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 7px 11px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
.pl-toggle i {
  font-style: normal;
  font-size: 10.5px;
  background: #f36f21;
  border-radius: 999px;
  padding: 0 5px;
}
.pl-box {
  width: min(300px, 78vw);
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  animation: pl-in 0.2s ease-out both;
}
@keyframes pl-in {
  from {
    transform: translateX(-14px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.pl-head {
  padding: 11px 13px 8px;
  font-size: 13.5px;
  font-weight: 800;
}
.pl-head b {
  color: #f36f21;
}
.pl-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 10px 8px;
}
.pl-kinds button {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #f6f3ec;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  cursor: pointer;
}
.pl-kinds button.on {
  background: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}
.pl-add {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd24a, #ff9a3c);
  color: #3a2600;
  font-size: 13px;
  font-weight: 800;
  padding: 9px;
  cursor: pointer;
}
.pl-box ul {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}
.pl-box li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.pl-box li:hover {
  background: #fbf8f2;
}
.pl-ico {
  font-size: 17px;
  flex: none;
}
.pl-body {
  min-width: 0;
  flex: 1;
}
.pl-body b {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
}
.pl-body em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: #6b5a3e;
  margin-top: 2px;
}
.pl-body i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #a09480;
  margin-top: 3px;
}
.pl-act {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pl-act button {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  border-radius: 7px;
  font-size: 10.5px;
  padding: 2px 6px;
  cursor: pointer;
}
.pl-act button:hover {
  background: #f6f3ec;
}
.pl-none {
  color: #a09480;
  font-size: 12.5px;
  text-align: center;
  padding: 22px 12px;
  display: block;
}
.pl-fine {
  font-size: 10.5px;
  color: #a09480;
  padding: 8px 12px 12px;
  margin: 0;
  line-height: 1.6;
}

/* 지도 위의 핀 */
.pn-pin {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #1c7ed6;
}
.pn-pin > b {
  transform: rotate(45deg);
  font-size: 14px;
}
.pn-pin.k-매물 {
  background: #e8590c;
}
.pn-pin.k-추억 {
  background: #7048e8;
}
.pn-pin.k-맛집 {
  background: #e03131;
}
.pn-pin.k-소식 {
  background: #1c7ed6;
}
.pn-pin.k-주의 {
  background: #f08c00;
}
.pn-pin:hover {
  transform: rotate(-45deg) scale(1.14);
  z-index: 9;
}
.pn-tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: rotate(45deg) translateX(-40%);
  max-width: 230px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(27, 29, 33, 0.95);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: normal;
  pointer-events: none;
  z-index: 12;
}
.pn-pin:hover .pn-tip {
  display: block;
}
.pn-tip em {
  display: block;
  font-style: normal;
  font-weight: 800;
  margin-bottom: 2px;
}
.pn-tip i {
  display: block;
  font-style: normal;
  opacity: 0.7;
  margin-top: 3px;
}

/* 자리를 고르는 중 — 지도 커서를 바꾼다 */
body.pin-picking #map {
  cursor: crosshair;
}
body.pin-picking::after {
  content: "🎯 표시할 자리를 눌러 주십시오";
  position: fixed;
  left: 50%;
  top: calc(var(--bar-h) + 100px);
  transform: translateX(-50%);
  z-index: 9000;
  pointer-events: none;
  background: rgba(243, 111, 33, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (max-width: 720px) {
  #pinList {
    top: calc(var(--bar-h) + 46px);
  }
  .pl-box {
    width: min(280px, 82vw);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 지도 위 「내가 지은 건물」 액자 — 사장님 지시(2026-08-24)
 *   「조그만 썸네일 찍어 카카오맵 위에 그려놓고 모두가 볼 수 있게 해줘.」
 * ⚠️ 지도를 가리면 안 된다. 평소에는 **아주 작게**, 누르면 펼친다.
 * ───────────────────────────────────────────────────────────────────────── */
.bm-card {
  width: 92px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 6px 16px #0b2a6a4d;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s;
}
.bm-card:hover {
  transform: translateY(-2px) scale(1.04);
  z-index: 3;
}
.bm-card img {
  width: 100%;
  height: 66px;
  object-fit: cover;
  display: block;
  background: #cfe6f7;
}
.bm-cap {
  padding: 3px 5px 4px;
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  line-height: 1.25;
}
.bm-cap b {
  display: block;
  font-size: 10.5px;
  color: #16233b;
}
.bm-cap i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  color: #6b7b95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 꼬리 — 그 자리를 가리킨다 */
.bm-card:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  filter: drop-shadow(0 2px 1px #0b2a6a33);
}
.bm-more {
  display: none;
}
.bm-card.open {
  width: 190px;
}
.bm-card.open img {
  height: 120px;
}
.bm-card.open .bm-more {
  display: block;
  padding: 6px 7px 8px;
  border-top: 1px solid #e6eefa;
  background: #fff;
}
.bm-more em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #16233b;
  margin-bottom: 3px;
  word-break: keep-all;
}
.bm-more span {
  display: block;
  font-size: 10.5px;
  color: #6b7b95;
  line-height: 1.4;
}
.bm-more button {
  margin: 6px 4px 0 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #dbe6f5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.bm-more button[data-bm="like"] {
  color: #d63b6a;
  border-color: #f6c9d7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 지도 위 HUD — **왼쪽 세로 카드**  (사장님 2026-08-26)
 *   「내 점수 나오는 거 왼쪽으로 세로로 길게. 네모난 버튼 안에 글자 크게.」
 *
 * ⚠️ 폭은 좁게 둔다(112px). 8/24 에 「너무 크고 화면을 가린다」는 말씀이
 *    있었다 — 세로로 세운 것은 글자를 키우려는 것이지 자리를 넓히려는
 *    것이 아니다.
 * ⚠️ 이 규칙이 앞의 `#hudBar` 두 벌보다 **뒤에** 있어야 이긴다. 파일 끝에 둔다.
 * ═══════════════════════════════════════════════════════════════════ */
#hudBar {
  bottom: auto;
  left: 10px;
  max-width: 112px;
  position: fixed;
  right: auto;
  top: calc(var(--bar-h) + 48px);
  width: 112px;
  z-index: 27;
  pointer-events: none;
}
.rp-hud.hv {
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  white-space: normal;
}
.rp-hud.hv .hv-c {
  background: rgba(26, 28, 32, 0.93);
  backdrop-filter: blur(6px);
  border-radius: 13px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
  display: block;
  padding: 9px 8px 10px;
  text-align: center;
}
.rp-hud.hv .hv-c i {
  display: block;
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}
.rp-hud.hv .hv-c em {
  color: #aeb6bf;
  display: block;
  font-size: 11.5px;
  font-style: normal;
  margin-top: 4px;
}
.rp-hud.hv .hv-c b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 3px;
}
.rp-hud.hv .hv-me {
  padding: 8px;
}
.rp-hud.hv .hv-me i {
  color: #ffd24a;
  font-size: 13px;
  font-weight: 800;
}
.rp-hud.hv .hv-me b {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-hud.hv .up b {
  color: #ff8787;
}
.rp-hud.hv .dn b {
  color: #74c0fc;
}
.rp-hud.hv.rp-broke .hv-c {
  background: rgba(120, 24, 24, 0.94);
}
.hv-revive {
  background: #ffd24a;
  border: 0;
  border-radius: 11px;
  color: #3a2600;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 6px;
  pointer-events: auto;
  width: 100%;
}
/* 왼쪽 목록(사람들이 남긴 표시)을 HUD 옆으로 민다 — 겹치면 둘 다 못 읽는다 */
#pinList {
  left: 132px;
}
@media (max-width: 720px) {
  #hudBar {
    max-width: 88px;
    width: 88px;
  }
  .rp-hud.hv .hv-c b {
    font-size: 16px;
  }
  .rp-hud.hv .hv-c em {
    font-size: 10.5px;
  }
  #pinList {
    left: 106px;
  }
}

/* ═══ 알림 띠 — 아래에서 잠깐 떴다 사라진다 ═══ */
.rp-toast {
  background: rgba(26, 28, 32, 0.94);
  border-radius: 999px;
  bottom: 26px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  left: 50%;
  opacity: 0;
  padding: 10px 18px;
  pointer-events: none;
  position: fixed;
  transform: translate(-50%, 12px);
  transition: 0.22s;
  z-index: 60;
}
.rp-toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ═══ 「이 건물에 있는 가게」 머리 — 누르면 팝업 ═══ */
.rp-shops-h {
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 7px;
  padding: 0;
  text-align: left;
  width: 100%;
}
.rp-shops-h i {
  color: #3d5a80;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 「이 건물에 있는 가게」 팝업  (사장님 2026-08-26)
 *   설명창 안에서는 목록이 길면 아래가 잘린다. 화면 가운데에 따로 띄운다.
 * ⚠️ 지도 위 어떤 것보다 앞에 와야 한다 — HUD(27) · 토스트(60) 보다 위.
 * ═══════════════════════════════════════════════════════════════════ */
.sp-wrap {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 80;
}
.sp-wrap.on {
  display: block;
}
.sp-back {
  background: rgba(16, 18, 22, 0.55);
  inset: 0;
  position: absolute;
}
.sp-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: 78vh;
  max-width: 460px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
}
.sp-head {
  align-items: center;
  border-bottom: 1px solid var(--line, #e3e9ee);
  display: flex;
  padding: 14px 16px 11px;
}
.sp-head b {
  font-size: 16px;
}
.sp-x {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  margin-left: auto;
  padding: 0 2px;
}
.sp-addr {
  color: #5c646c;
  font-size: 13px;
  margin: 0;
  padding: 9px 16px 0;
}
.sp-body {
  overflow-y: auto;
  padding: 10px 16px 16px;
}
.sp-wait {
  color: #5c646c;
  font-size: 13.5px;
  padding: 24px 0;
  text-align: center;
}
.sp-n {
  font-size: 13.5px;
  margin-bottom: 8px;
}
.sp-n b {
  font-size: 17px;
}
.sp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-list li {
  align-items: baseline;
  display: grid;
  gap: 10px;
  grid-template-columns: 56px 1fr;
  padding: 8px 0;
}
.sp-list li + li {
  border-top: 1px solid #eef2f5;
}
.sp-list .fl {
  color: #5c646c;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}
.sp-list .nm b {
  font-size: 14.5px;
}
.sp-list .nm em {
  color: #6b737b;
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 1px;
}
.sp-list .br {
  background: #eef4fb;
  border-radius: 5px;
  color: #2f4a6d;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  padding: 1px 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 말풍선 안 「이 건물에 있는 가게」  (사장님 2026-08-26)
 * ⚠️ 여섯 줄까지만 적는다. 말풍선이 길어지면 필지를 덮는다.
 * ═══════════════════════════════════════════════════════════════════ */
.mgame .mg-shops {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 8px;
  padding-top: 7px;
  text-align: left;
}
.mgame .mg-shops-h {
  color: #ffd24a;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 4px;
}
.mgame .mg-shop {
  display: grid;
  font-size: 12px;
  gap: 7px;
  grid-template-columns: 26px 1fr;
  line-height: 1.65;
}
.mgame .mg-shop i {
  color: #b9c0c8;
  font-size: 10.5px;
  font-style: normal;
  text-align: right;
}
.mgame .mg-shop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mgame .mg-shop em {
  color: #9aa3ac;
  font-size: 10.5px;
  font-style: normal;
}
.mgame .mg-shop-more {
  color: #9aa3ac;
  font-size: 10.5px;
  margin-top: 3px;
}

/* 오른쪽 창의 가게 목록은 **자르지 않는다** — 길면 그 칸만 스크롤한다 */
.rp-shops-all {
  max-height: 340px;
  overflow-y: auto;
}
.rp-shops li .nm b {
  font-size: 13.5px;
}
.rp-shops li .nm em {
  color: #6b737b;
  display: block;
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.35;
}
.rp-shops li .br {
  background: #eef4fb;
  border-radius: 5px;
  color: #2f4a6d;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  padding: 1px 5px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 말풍선 — 표와 닫기 단추  (사장님 2026-08-26)
 *   「대지·용도지역 같은 것은 표로 정리해줘. 엑스자 끄기 버튼 하나 만들어 줘.」
 * ═══════════════════════════════════════════════════════════════════ */
.mgame .mg-tbl {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 7px;
  padding-top: 6px;
  text-align: left;
}
.mgame .mg-tbl > div {
  display: grid;
  gap: 8px;
  grid-template-columns: 52px 1fr;
  line-height: 1.75;
}
.mgame .mg-tbl i {
  color: #9aa3ac;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}
.mgame .mg-tbl b {
  font-size: 12.5px;
  font-weight: 600;
}
/* ⚠️ 말풍선 전체는 클릭을 안 받는다(clickable:false). 이 단추만 살린다 —
   그래야 「눌러서 결정하기」도 살고 닫기도 된다. */
.mgame .mg-x {
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 24px;
  line-height: 22px;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  z-index: 3;
}
.mgame .mg-x:hover {
  background: rgba(255, 255, 255, 0.28);
}
.mlabel.mgame {
  position: relative;
}

/* ═══ 행정구역 이름표 — 마우스를 따라다니는 검은 박스 (2026-08-26) ═══ */
.hg-tip {
  background: rgba(26, 28, 32, 0.94);
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 6px 11px;
  pointer-events: none;
  white-space: nowrap;
}

/* ═══ 말풍선 손질  (2026-08-26) ═══
   ① 「이 건물에 있는 가게」 칸은 **검은 바탕이 아니라 따로 뜬 판**으로.
      사장님: 「이 건물에 3곳 화면 배경은 검은색이 아니라 다른색으로.」
   ② 위에 자리가 없으면 아래로 뒤집는다(map.js 가 `.mg-below` 를 붙인다). */
.mgame .mg-shops {
  background: #f4f7fa;
  border: 0;
  border-radius: 10px;
  color: #26303a;
  margin: 8px -4px -2px;
  padding: 8px 10px 9px;
}
.mgame .mg-shops-h {
  color: #2f4a6d;
  font-size: 12px;
}
.mgame .mg-shop i {
  color: #6b737b;
}
.mgame .mg-shop em {
  color: #7a838c;
}
.mgame .mg-shop-more {
  color: #7a838c;
}
.mg-below {
  transform: translateY(calc(100% + 22px));
}

/* ═══ 말풍선 — 필지 **옆**에 세우기 · 새 머리 (2026-08-26) ═══════════════
   ⚠️ 카카오는 anchor 를 나중에 못 바꾼다. 오른쪽으로 세워 두고, 자리가
      없으면 CSS 로 통째로 왼쪽으로 옮긴다(.mg-left). */
.mg-side {
  margin-left: 16px;
}
.mg-left {
  margin-left: 0;
  transform: translateX(calc(-100% - 32px));
}
/* 「건물주의 선택」 — 별표 자리를 대신한다 */
.mgame .mg-title {
  color: #ffd24a;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 3px;
}
/* 「추정시세 : 23억」 */
.mgame .mg-lab {
  color: #b9c0c8;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  margin-right: 6px;
}
.mgame .mg-val b {
  font-size: 21px;
  font-weight: 800;
}
.mgame .mg-nogo {
  color: #b9c0c8;
  font-size: 11.5px;
  margin-top: 8px;
}

/* ═══ 개발할 수 없는 토지 — 정보만 (2026-08-26) ═══ */
.rp-nogame {
  background: #fff7ed;
  border: 1px solid #f2d7b3;
  border-radius: 11px;
  margin-top: 12px;
  padding: 13px 14px;
}
.rp-nogame b {
  display: block;
  font-size: 14.5px;
  margin-bottom: 5px;
}
.rp-nogame p {
  color: #5c646c;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0;
}

/* ═══ 뉴스 띠 — 지역 딱지 · 큰 글씨 (사장님 2026-08-26) ══════════════════
   「금리·환율·코스피 없애버리고 뉴스를 더 큰 글씨로. 뉴스 왼쪽에는 화면이
    나타난 곳의 뉴스를 피드 — 서초동을 보고 있으면 "서초동 뉴스".」
   ⚠️ 세 값 칸이 빠져 자리가 남는다. 그 자리를 뉴스 글씨에 준다. */
#tickerBar {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.tk-where {
  background: #ffd24a;
  border-radius: 6px;
  color: #3a2600;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 4px 10px;
  white-space: nowrap;
}
.tk-news {
  flex: 1 1 auto;
  min-width: 0;
}
.tk-roll a {
  font-size: 14px;
  font-weight: 600;
}
.tk-roll a i {
  font-size: 10.5px;
}
.tk-vals {
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .tk-where {
    font-size: 11.5px;
    padding: 3px 7px;
  }
  .tk-roll a {
    font-size: 12.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 손전화 — 필지를 누르면 **설명창이 화면을 다 쓴다** (사장님 2026-08-26)
 *   「핸드폰 경우 필지 누르면 소개창이 전체창으로 다 뜨게 하고 싶어.」
 *
 *   예전에는 아래에서 62% 만 올라왔다. 표·가게 목록·3D 모형이 들어가면서
 *   62% 로는 늘 스크롤을 해야 했다.
 *
 * ⚠️ 지도는 **뒤에 그대로 둔다**(display:none 을 주지 않는다). 카카오는
 *    숨겼다 되살리면 칸 크기를 잘못 재서 타일이 반만 그려진다.
 * ⚠️ 접기(▶) 단추로 언제든 지도로 돌아갈 수 있다 — 그 길을 막지 않는다.
 * ⚠️ `max-width:900px` 규칙(app.css)보다 **뒤에** 있어야 이긴다.
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #panel {
    top: var(--bar-h);
    bottom: 0;
    height: auto;
    border-top: 0;
  }
  /* 지도는 그대로 두되 설명창이 덮는다 — 다시 재지 않게 */
  body.panel-on #map {
    bottom: 0;
  }
  /* 지도 위 것들은 설명창에 가려 쓸모가 없다 — 잠깐 치운다 */
  body.panel-on #hudBar,
  body.panel-on #pinList,
  body.panel-on #regionBar {
    display: none;
  }
  .pn-body {
    padding-bottom: 28px;
  }
}

/* ═══ 구획 안에 늘 붙는 이름표 (사장님 2026-08-26) ═══
   ⚠️ 카카오 지도에도 지명이 있다. 작고 흐리게 두어 다투지 않는다. */
.hg-name {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(47, 74, 109, 0.35);
  border-radius: 5px;
  color: #2f4a6d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 2px 7px;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hg-name {
    font-size: 11px;
    padding: 1px 5px;
  }
}

/* 가상자산 카드 안의 「오늘 +1.1억」 (사장님 2026-08-26 — 두 칸을 하나로) */
.rp-hud.hv .hv-c u {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px;
  text-decoration: none;
}
.rp-hud.hv .hv-c u.up {
  color: #ff8787;
}
.rp-hud.hv .hv-c u.dn {
  color: #74c0fc;
}

/* ═══ 손전화 — 뉴스는 **상단바 아래 제 줄**에서 흐른다 (사장님 2026-08-26)
   「뉴스가 핸폰에서는 밑에줄에서 흐르게 해줘.」
   상단바에 로고·검색·사이트고르기까지 들어가 뉴스가 눌려 잘렸다.
   ⚠️ 지역줄(#regionBar)은 그만큼 아래로 내려야 겹치지 않는다. ═══ */
@media (max-width: 900px) {
  header.bar {
    flex-wrap: wrap;
    height: auto;
  }
  #tickerBar {
    order: 9;
    flex: 1 0 100%;
    margin: 4px 0 0;
    padding: 4px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  #regionBar,
  #regionBar ~ #hudBar {
    top: calc(var(--bar-h) + 34px);
  }
  #hudBar {
    top: calc(var(--bar-h) + 78px);
  }
}

/* 결과 팝업 — 게임 점수가 왜 작은지 그 자리에서 밝힌다 (2026-08-27) */
.bd-scale {
  animation: bd-pop 0.4s both;
  color: #9aa3ac;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: -4px;
  padding: 0 14px 6px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 「오늘」·「겨루기」 판  (사장님 2026-08-27)
 *   맨 위 줄에서 띄운다. 지도는 뒤에 그대로 두고 덮기만 한다.
 * ═══════════════════════════════════════════════════════════════════ */
.sitenav button {
  background: none;
  border: 0;
  color: #cfd3d8;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.sitenav button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.tp-wrap {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 82;
}
.tp-wrap.on {
  display: block;
}
.tp-back {
  background: rgba(16, 18, 22, 0.55);
  inset: 0;
  position: absolute;
}
.tp-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  left: 50%;
  max-height: 82vh;
  max-width: 520px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 28px);
}
.tp-head {
  align-items: center;
  border-bottom: 1px solid var(--line, #e3e9ee);
  display: flex;
  padding: 14px 16px 11px;
}
.tp-head b {
  font-size: 17px;
}
.tp-x {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  margin-left: auto;
  padding: 0 2px;
}
.tp-body {
  overflow-y: auto;
  padding: 12px 16px 18px;
}
.tp-wait,
.tp-none {
  color: #5c646c;
  font-size: 13.5px;
  line-height: 1.65;
  padding: 12px 0;
}
.tp-sec {
  margin-bottom: 18px;
}
.tp-sec h3 {
  font-size: 14.5px;
  margin: 0 0 8px;
}
.tp-tag {
  background: #eef4fb;
  border-radius: 5px;
  color: #2f4a6d;
  font-size: 11.5px;
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 7px;
}
.tp-today {
  background: #fff7ed;
  border: 1px solid #f2d7b3;
  border-radius: 11px;
  cursor: pointer;
  display: block;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}
.tp-today b {
  display: block;
  font-size: 15px;
}
.tp-today em {
  color: #6b737b;
  display: block;
  font-size: 12.5px;
  font-style: normal;
  margin-top: 3px;
}
.tp-today em.done {
  color: #2f7a3d;
  font-weight: 700;
}
.tp-own {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-own li {
  align-items: baseline;
  border-bottom: 1px solid #eef2f5;
  display: grid;
  gap: 8px;
  grid-template-columns: 84px 1fr auto;
  font-size: 13px;
  padding: 7px 0;
}
.tp-own li b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-own li span {
  color: #5c646c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-own li i {
  color: #2f4a6d;
  font-style: normal;
  font-weight: 700;
}
.tp-mrow {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}
.tp-m {
  background: #f4f7fa;
  border-radius: 10px;
  padding: 9px 8px;
  text-align: center;
}
.tp-m em {
  color: #6b737b;
  display: block;
  font-size: 11.5px;
  font-style: normal;
}
.tp-m b {
  display: block;
  font-size: 17px;
  margin-top: 2px;
}
.tp-m i {
  color: #6b737b;
  display: block;
  font-size: 11px;
  font-style: normal;
}
.tp-news {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-news li {
  border-bottom: 1px solid #eef2f5;
  padding: 8px 0;
}
.tp-news a {
  color: #26303a;
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
}
.tp-news a i {
  background: #ffd24a;
  border-radius: 4px;
  color: #3a2600;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  margin-right: 6px;
  padding: 1px 5px;
}
.tp-fine {
  color: #7a838c;
  font-size: 11.5px;
  line-height: 1.6;
}

/* ═══ 결과 팝업의 「이 숫자는 어떻게 나왔나」 (사장님 2026-08-27) ═══ */
.bd-why {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  margin: 10px 14px 4px;
  padding: 8px 12px 10px;
  text-align: left;
}
.bd-why > summary {
  color: #d7dee4;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  padding: 2px 0;
}
.bd-why > summary::-webkit-details-marker {
  display: none;
}
.bd-why > summary::after {
  content: " ▾";
  color: #9aa3ac;
}
.bd-why[open] > summary::after {
  content: " ▴";
}
.bd-why-warn {
  background: rgba(255, 210, 74, 0.16);
  border-radius: 8px;
  color: #ffd24a;
  font-size: 12px;
  line-height: 1.6;
  margin: 8px 0;
  padding: 8px 10px;
}
.bd-why-tbl > div,
.bd-why-sub > div {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  font-size: 12.5px;
  line-height: 1.9;
}
.bd-why-tbl i,
.bd-why-sub i {
  color: #cfd3d8;
  font-style: normal;
}
.bd-why-tbl b,
.bd-why-sub b {
  color: #fff;
  text-align: right;
}
.bd-why-tbl em,
.bd-why-sub em {
  color: #8f98a1;
  font-size: 11px;
  font-style: normal;
  grid-column: 1 / -1;
  margin-top: -6px;
}
.bd-why-sub {
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  margin-top: 8px;
  padding-top: 8px;
}
.bd-why-no {
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  color: #b9c0c8;
  font-size: 11.5px;
  line-height: 1.65;
  margin-top: 10px;
  padding-top: 8px;
}
.bd-why-no b {
  color: #ffd24a;
}
.bd-why-fine {
  color: #8f98a1;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 8px;
}

/* ═══ 결과 팝업이 길어졌다 — 안에서 굴러가게 (사장님 2026-08-27) ═══
   산정근거가 붙으면서 화면 밖으로 넘쳤다. `overflow:hidden` 이라 아예
   굴릴 수도 없었다(「스크롤 안 되」).
   ⚠️ 둥근 모서리를 살리려면 바깥은 hidden 을 두고 **안쪽만** 굴린다. */
.bd-box {
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bd-x {
  position: sticky;
  float: right;
  margin: 8px 8px -40px 0;
  right: auto;
  top: 8px;
}
/* ═══════════════════════════════════════════════════════════════════════
 * 별도 페이지 — 오늘 · 명예 · 자산  (사장님 2026-08-28)
 *
 *   팝업(.tp-box)이 아니라 **지도 위를 통째로 덮는 페이지**다.
 *   ⚠️ 상단바(var(--bar-h))는 덮지 않는다. 탭이 거기 있어야 오갈 수 있다.
 *   ⚠️ 지도를 지우지 않고 덮기만 한다 — 닫으면 보던 자리가 그대로 있다.
 * ═══════════════════════════════════════════════════════════════════ */
.pg-wrap {
  display: none;
  position: fixed;
  inset: var(--bar-h) 0 0 0;
  z-index: 84;
  background: #f4f6f8;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pg-wrap.on {
  display: block;
}
.pg-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line, #e3e9ee);
}
.pg-back {
  background: #eef2f5;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
}
.pg-back:hover {
  background: #e3e9ee;
}
.pg-title {
  font-size: 17px;
  margin-right: auto;
}
.pg-tabs {
  display: flex;
  gap: 4px;
}
.pg-tabs button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #5d6a75;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
}
.pg-tabs button:hover {
  background: #eef2f5;
}
.pg-tabs button.on {
  background: #1a1d21;
  border-color: #1a1d21;
  color: #fff;
}
.pg-body {
  margin: 0 auto;
  max-width: 620px;
  padding: 14px 14px 60px;
}
/* 맨 위 줄의 탭도 지금 페이지를 표시한다 */
.sitenav button.on {
  background: var(--orange, #f4581c);
  color: #fff;
}
@media (max-width: 520px) {
  .pg-title {
    display: none;
  }
  .pg-tabs {
    width: 100%;
    order: 3;
  }
  .pg-tabs button {
    flex: 1;
    padding: 7px 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 🏅 명예 — 능력치 게이지 · 뱃지 · 숨은 업적
 * ═══════════════════════════════════════════════════════════════════ */
.hn-badge {
  align-items: center;
  background: linear-gradient(135deg, #1a1d21, #2f3944);
  border-radius: 16px;
  color: #fff;
  display: flex;
  gap: 12px;
  padding: 16px 18px;
}
.hn-bi {
  font-size: 38px;
  line-height: 1;
}
.hn-bt {
  margin-right: auto;
}
.hn-bt b {
  display: block;
  font-size: 20px;
}
.hn-lv {
  color: #b9c4cf;
  display: block;
  font-size: 12.5px;
  font-style: normal;
  margin-top: 2px;
}
.hn-bp {
  font-size: 22px;
  font-weight: 800;
}
.hn-bp small {
  color: #b9c4cf;
  font-size: 12px;
  font-weight: 600;
}
.hn-next {
  margin: 10px 0 4px;
}
.hn-next p {
  color: #5d6a75;
  font-size: 13px;
  margin: 6px 2px 0;
}
.hn-bar {
  background: #dde4ea;
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}
.hn-bar span {
  background: linear-gradient(90deg, #f4581c, #ffb01f);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width 0.4s ease;
}
.hn-bar2 span {
  background: linear-gradient(90deg, #2f3944, #6b7c8d);
}
.hn-steps {
  align-items: center;
  display: flex;
  gap: 2px;
  margin: 12px 0;
  overflow-x: auto;
}
.hn-steps span {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 76px;
  opacity: 0.45;
  padding: 8px 4px;
  text-align: center;
}
.hn-steps span.on {
  border-color: #f4581c;
  box-shadow: 0 2px 8px rgba(244, 88, 28, 0.18);
  opacity: 1;
}
.hn-steps span i {
  font-size: 19px;
  font-style: normal;
}
.hn-steps span em {
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.hn-steps u {
  color: #b9c4cf;
  text-decoration: none;
}
.hn-grand {
  background: linear-gradient(135deg, #fff6e0, #ffe9bd);
  border: 1px solid #f0c86a;
  border-radius: 14px;
  font-size: 15px;
  margin: 12px 0;
  padding: 12px 14px;
}
.hn-grand em {
  color: #7a6320;
  display: block;
  font-size: 12.5px;
  font-style: normal;
  margin-top: 3px;
}
.hn-gs {
  display: grid;
  gap: 10px;
}
.hn-g {
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 14px;
  padding: 12px 14px;
}
.hn-g.full {
  border-color: #f0c86a;
  background: linear-gradient(180deg, #fffdf6, #fff);
}
.hn-gtop {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.hn-gi {
  font-size: 18px;
}
.hn-gn {
  font-size: 15px;
}
.hn-gd,
.hn-master {
  font-size: 12px;
  font-style: normal;
  margin-right: auto;
}
.hn-gd {
  color: #8a97a3;
}
.hn-master {
  color: #a5801c;
  font-weight: 700;
}
.hn-gv {
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
}
.hn-gv small {
  color: #a3aeb9;
  font-size: 11px;
  font-weight: 600;
}
.hn-gsub {
  color: #8a97a3;
  font-size: 12px;
  margin-top: 6px;
}
.hn-masters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hn-masters span {
  background: #fff6e0;
  border: 1px solid #f0c86a;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
}
.hn-ach {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.hn-a {
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 12px;
  opacity: 0.55;
  padding: 10px 12px;
}
.hn-a.on {
  border-color: #f4581c;
  opacity: 1;
}
.hn-a i {
  font-size: 20px;
  font-style: normal;
}
.hn-a b {
  display: block;
  font-size: 13.5px;
  margin-top: 2px;
}
.hn-a em {
  color: #8a97a3;
  display: block;
  font-size: 11.5px;
  font-style: normal;
  margin-top: 2px;
}
.hn-a u {
  color: #b9c4cf;
  display: block;
  font-size: 11px;
  margin-top: 4px;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 💰 자산 — 지금 얼마인지, 어떻게 걸어왔는지
 * ═══════════════════════════════════════════════════════════════════ */
.as-now {
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 14px;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
}
.as-now em {
  color: #8a97a3;
  font-size: 13px;
  font-style: normal;
}
.as-now b {
  font-size: 26px;
  margin-right: auto;
}
.as-now.dn b {
  color: #d64545;
}
.as-now i {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.as-graph {
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 14px;
  margin: 10px 0;
  padding: 10px 12px 8px;
}
.as-graph svg {
  display: block;
  height: 110px;
  width: 100%;
}
.as-gax {
  color: #a3aeb9;
  display: flex;
  font-size: 11.5px;
  justify-content: space-between;
  margin-top: 4px;
}
.as-gax b {
  color: #5d6a75;
}
.as-nograph {
  background: #fff;
  border: 1px dashed var(--line, #e3e9ee);
  border-radius: 14px;
  color: #8a97a3;
  font-size: 13px;
  margin: 10px 0;
  padding: 16px;
  text-align: center;
}
.as-debt {
  background: #fff4f4;
  border: 1px solid #f2c9c9;
  border-radius: 12px;
  font-size: 13px;
  margin: 10px 0;
  padding: 10px 12px;
}

/* 결과판 아래 — 이 판이 명예를 얼마나 움직였나 */
.hn-gain {
  background: #fff;
  border: 1px solid var(--line, #e3e9ee);
  border-radius: 12px;
  margin-top: 10px;
  padding: 10px 12px;
}
.hn-gain.dn {
  border-color: #f2c9c9;
}
.hn-gain b {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
}
.hn-gain em {
  color: #8a97a3;
  display: block;
  font-size: 11.5px;
  font-style: normal;
  margin-top: 5px;
}
.hn-why {
  color: #1f9d55;
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 5px;
}
.hn-pop {
  background: linear-gradient(135deg, #fff6e0, #ffe9bd);
  border: 1px solid #f0c86a;
  border-radius: 12px;
  font-size: 13.5px;
  margin-top: 8px;
  padding: 10px 12px;
}
.hn-grandpop {
  background: linear-gradient(135deg, #1a1d21, #4a3b12);
  border-color: #a5801c;
  color: #ffe9bd;
}

/* 왼쪽 세로 HUD 의 「명예」 카드 — 이것만 단추라서 눌러 들어간다 */
.rp-hud.hv .hv-go {
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.rp-hud.hv .hv-go b {
  font-size: 13.5px;
  letter-spacing: -0.02em;
}
.rp-hud.hv .hv-go:hover {
  background: rgba(244, 88, 28, 0.92);
}

/* 폰에서는 게이지 설명을 접는다 — 값(32/100)이 아래로 밀려나는 것을 막는다 */
@media (max-width: 520px) {
  .hn-gd {
    display: none;
  }
  .hn-gtop {
    flex-wrap: nowrap;
  }
  .hn-gn {
    margin-right: auto;
  }
  .hn-master {
    font-size: 11.5px;
  }
}