/* ── 게임 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 {
  color: #8a929a;
  font-size: 10.5px;
  line-height: 1.7;
  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: 14px;
  margin: 14px 0 8px;
}

/* 고르기 */
.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: 13.5px;
  margin-top: 3px;
}
.rp-pick button em {
  color: var(--steel);
  display: block;
  font-size: 10.5px;
  font-style: normal;
}
.rp-biz {
  grid-template-columns: repeat(3, 1fr);
}
.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;
  }
}

/* ── 시작화면 ────────────────────────────────────────────────────────────
   게임맵은 열자마자 게임이다. 지도보다 이게 먼저 덮는다. */
#gameStart {
  align-items: center;
  background: linear-gradient(160deg, #3d5a80 0%, #2b4162 55%, #1f2f47 100%);
  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[hidden] {
  display: none;
}
.gs-box {
  color: #fff;
  max-width: 420px;
  text-align: center;
  width: 100%;
}
.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%;
}