/* 식민지 모드 (가로 전용) — 반투명 우주 HUD */
#col { position: fixed; inset: 0; z-index: 6; pointer-events: none; font-family: var(--kp-font, 'KekeFont'), system-ui, sans-serif; color: #e9f6ff; }
#col > * { pointer-events: auto; }
#col svg { width: 100%; height: 100%; fill: currentColor; display: block; }
#col i { display: inline-block; width: 16px; height: 16px; flex: none; }
#col button { font: inherit; color: inherit; }
.ic2 { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 7px 0 6px; background: linear-gradient(135deg, rgba(10, 34, 64, .55), rgba(4, 10, 26, .4)); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .3); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); color: #6fe3ff; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ic2 i { width: 22px !important; height: 22px !important; }
.ic2 span { font-size: 13px; font-weight: 500; color: #e9f6ff; white-space: nowrap; }

/* 자원 줄 */
#cTop { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(8px + var(--safe-t)); display: flex; gap: 4px; max-width: calc(100% - 330px); flex-wrap: wrap; }
#cTop .rs { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: rgba(4, 14, 30, .55); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .22); border-radius: 4px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#cTop .rs i { color: #6fe3ff; width: 17px; height: 17px; }
#cTop .rs b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
#cTop .rs em { font-style: normal; font-size: 13px; opacity: .65; font-variant-numeric: tabular-nums; }
#cTop .rs[data-k="water"] i { color: #7cc8ff; } #cTop .rs[data-k="o2"] i { color: #b6f0ff; } #cTop .rs[data-k="food"] i { color: #8ee08e; }
#cTop .rs[data-k="power"] i, #cTop .rs[data-k="cr"] i { color: #ffd166; } #cTop .rs[data-k="happy"] i { color: #ff8fa3; }
#cTop .rs.bad { box-shadow: inset 0 0 0 1px #ff5d6c, 0 0 12px rgba(255, 93, 108, .45); animation: cbad 1s ease-in-out infinite alternate; }
#cTop .rs.bad b { color: #ff9aa5; }
@keyframes cbad { to { background: rgba(80, 10, 20, .6); } }

/* 시계 */
#cClock { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(8px + var(--safe-t)); display: flex; align-items: center; gap: 6px; }
.cDate { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; line-height: 1.25; padding: 4px 8px; background: rgba(4, 14, 30, .55); border-radius: 4px; }
.cDate span:first-child { font-weight: 700; font-size: 15px; }
.cDate span { display: flex; align-items: center; gap: 4px; }
.cDate .dy { color: #ffd166; } .cDate .nt { color: #9fb5ff; }
.cDate i { width: 14px !important; height: 14px !important; }
.cSpd { display: flex; background: rgba(4, 14, 30, .55); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .22); }
.cSpd button { width: 38px; height: 38px; padding: 9px; color: #9fb5ff; }
.cSpd button.on { color: #04101e; background: #6fe3ff; }
.cRk { width: auto !important; flex-direction: row !important; gap: 4px !important; padding: 8px 10px !important; }
.cRk b { font-size: 15px; color: #e9f6ff; }

/* 미션 */
#cMis { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(54px + var(--safe-t)); width: 250px; padding: 9px 12px 10px; }
#cMis b { display: block; font-size: 17px; font-weight: 700; margin: 4px 0 6px; text-shadow: 0 0 10px rgba(111, 227, 255, .35); }
#cMis .mb { height: 5px; background: rgba(111, 227, 255, .15); } #cMis .mb i { display: block; height: 100%; width: 0; background: #6fe3ff; box-shadow: 0 0 8px #6fe3ff; transition: width .3s; }
#cMis .mp { font-size: 13px; font-weight: 700; margin-top: 4px; display: inline-block; font-variant-numeric: tabular-nums; }
#cMis .rw { float: right; font-size: 13px; color: #ffd166; display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; }
#cMis .rw i { width: 13px; height: 13px; }
#cAlerts { position: absolute; left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(150px + var(--safe-t)); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; pointer-events: none !important; }
#cAlerts span { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 4px 8px 4px 6px; background: rgba(40, 24, 4, .6); color: #ffd166; border-left: 3px solid #ffb54d; }
#cAlerts span.bad { background: rgba(60, 6, 14, .66); color: #ffb3bb; border-color: #ff5d6c; }

/* 오른쪽 버튼 */
#cSide { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(58px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; }

/* 건설 막대 */
#cBuild { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: calc(100% - 20px); }
#cCats { display: flex; align-items: stretch; gap: 3px; padding: 4px; background: rgba(4, 12, 26, .62); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .25); border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
#cCats::-webkit-scrollbar { display: none; }
#cCats button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; padding: 6px 6px 5px; border-radius: 4px; color: #9fd8ff; }
#cCats button i { width: 22px; height: 22px; }
#cCats button span { font-size: 13px; color: #e9f6ff; white-space: nowrap; }
#cCats button.on { background: #6fe3ff; color: #04101e; } #cCats button.on span { color: #04101e; }
#cCats .tool.on { background: #ffb54d; }
#cCats .sep { width: 1px; background: rgba(111, 227, 255, .25); margin: 4px 2px; } #cCats .sep.big { margin: 4px 5px; min-width: 1px; width: 1px; padding: 0; }
#cRow { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 2px; scrollbar-width: none; }
#cRow::-webkit-scrollbar { display: none; }
#cRow .bc { position: relative; flex: none; width: 118px; padding: 8px 8px 7px; text-align: left; background: rgba(4, 14, 30, .72); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .25); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#cRow .bc > i { width: 24px; height: 24px; color: #6fe3ff; float: right; }
#cRow .bc b { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; min-height: 34px; padding-right: 2px; }
#cRow .bc em { display: flex; align-items: center; gap: 2px; font-style: normal; font-size: 13px; color: #ffd166; font-variant-numeric: tabular-nums; }
#cRow .bc em i { width: 13px; height: 13px; } #cRow .bc em i + i, #cRow .bc em i:nth-of-type(2) { margin-left: 6px; }
#cRow .bc small { display: block; font-size: 13px; opacity: .55; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cRow .bc.on { background: rgba(20, 70, 110, .85); box-shadow: inset 0 0 0 2px #6fe3ff, 0 0 14px rgba(111, 227, 255, .4); }
#cRow .bc.poor em { color: #ff8a96; }
#cRow .bc.locked { opacity: .55; } #cRow .bc.locked em { color: #c0c8d8; } #cRow .bc em.lk { font-size: 13px; }

/* 확인 버튼 (터치) */
#cOk { position: absolute; width: 58px; height: 58px; padding: 13px; border-radius: 50%; background: #6fe3ff; color: #04101e; box-shadow: 0 0 0 6px rgba(111, 227, 255, .25), 0 6px 18px rgba(0, 0, 0, .5); z-index: 3; }
#cOk i { width: 32px !important; height: 32px !important; }

/* 고른 건물 */
#cSel { position: absolute; right: calc(84px + env(safe-area-inset-right, 0px)); top: calc(58px + var(--safe-t)); width: 260px; padding: 10px 12px 12px; }
#cSel .sh { display: flex; align-items: center; gap: 8px; } #cSel .sh i { width: 24px; height: 24px; color: #6fe3ff; }
#cSel .sh b { font-size: 17px; font-weight: 700; flex: 1; }
.cX { width: 32px; height: 32px; padding: 6px; color: #9fb5ff; }
#cSel .chips, .kv, .hf, .req { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
#cSel .chips span, .kv span, .hf span, .req span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 7px; background: rgba(111, 227, 255, .08); border-radius: 3px; font-variant-numeric: tabular-nums; }
#cSel .chips i, .kv i, .hf i, .req i { width: 14px; height: 14px; color: #6fe3ff; }
.p { color: #9ff0b0; } .n { color: #ff9aa5; } .w { color: #ffd166; }
#cSel .dem { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 7px 12px; background: rgba(255, 93, 108, .16); color: #ffb3bb; border-radius: 4px; }

/* 패널 */
#cPanel { position: absolute; right: calc(84px + env(safe-area-inset-right, 0px)); top: calc(54px + var(--safe-t)); bottom: calc(84px + var(--safe-b)); width: min(420px, calc(100% - 120px)); padding: 12px 12px 12px 14px; z-index: 4; background: linear-gradient(135deg, rgba(8, 26, 52, .95), rgba(3, 8, 22, .93)); }
#cPanel > .cX { position: absolute; right: 6px; top: 6px; z-index: 2; }
#cPanel .cBody { height: 100%; overflow-y: auto; padding-right: 4px; }
#cPanel h3 { display: flex; align-items: center; gap: 8px; margin: 2px 36px 8px 0; font-size: 19px; font-weight: 700; }
#cPanel h3 i { width: 22px; height: 22px; color: #6fe3ff; } #cPanel h3 b { color: #6fe3ff; } #cPanel h3 small { font-size: 13px; opacity: .7; font-weight: 500; }
#cPanel h4 { margin: 14px 0 4px; font-size: 14px; font-weight: 700; color: #6fe3ff; letter-spacing: .06em; }
#cPanel h4 b { color: #e9f6ff; }
.stages { display: flex; align-items: center; gap: 4px; font-size: 13px; flex-wrap: wrap; }
.stages span { padding: 4px 7px; background: rgba(255, 255, 255, .06); border-radius: 3px; opacity: .6; } .stages span.on { opacity: 1; background: rgba(111, 227, 255, .2); color: #6fe3ff; font-weight: 700; }
.stages em { width: 10px; height: 1px; background: rgba(111, 227, 255, .4); }
.req small { width: 100%; font-size: 13px; opacity: .7; } .req span { color: #ff9aa5; } .req span.ok { color: #9ff0b0; }
.big { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; font-size: 16px; font-weight: 700; background: #ff7a8a; color: #1a0408; border-radius: 4px; }
.big[disabled] { opacity: .35; } .big i { width: 20px; height: 20px; }
.fac { display: grid; grid-template-columns: 92px 1fr 40px 54px; align-items: center; gap: 6px; font-size: 14px; margin: 5px 0; }
.fac .bar, .taxr .bar { height: 7px; background: rgba(255, 255, 255, .08); } .fac .bar i, .taxr .bar i { display: block; height: 100%; }
.fac em { font-style: normal; font-size: 13px; text-align: right; } .fac .op { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; } .fac .op i { width: 13px; height: 13px; color: #ff8fa3; }
.taxr { display: flex; align-items: center; gap: 8px; } .taxr button { width: 34px; height: 34px; padding: 7px; background: rgba(111, 227, 255, .12); border-radius: 4px; } .taxr .bar { flex: 1; } .taxr .bar i { background: #ffd166; }
.taxr em { font-style: normal; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; color: #ffd166; } .taxr em i { width: 13px; height: 13px; }
.pols, .techs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pol, .tech { text-align: left; padding: 8px 9px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .14); border-radius: 4px; }
.pol b, .tech b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.pol div { display: flex; flex-wrap: wrap; gap: 3px 6px; font-size: 13px; margin-top: 2px; } .pol div span { display: inline-flex; align-items: center; gap: 2px; } .pol div i { width: 12px; height: 12px; }
.pol .dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 3px; }
.pol.on { background: rgba(111, 227, 255, .18); box-shadow: inset 0 0 0 2px #6fe3ff; }
.tech span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #6fe3ff; } .tech span i { width: 13px; height: 13px; }
.tech small.fx { display: flex; align-items: center; gap: 3px; } .tech small.fx i { width: 13px; height: 13px; }
.tech small { display: block; font-size: 13px; opacity: .6; margin-top: 3px; }
.tech.done { opacity: .55; } .tech.done span { color: #9ff0b0; } .tech.cur { box-shadow: inset 0 0 0 2px #6fe3ff; background: rgba(111, 227, 255, .14); }
.tech .mb { height: 4px; margin-top: 5px; background: rgba(111, 227, 255, .15); } .tech .mb i { display: block; height: 100%; background: #6fe3ff; }
.hint { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #ffd166; } .hint i { width: 16px; height: 16px; }
.ord { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.or { display: grid; grid-template-columns: 22px 1fr 60px 38px 54px 38px; align-items: center; gap: 6px; font-size: 15px; padding: 6px 8px; background: rgba(255, 255, 255, .05); border-radius: 4px; }
.or > i { width: 20px; height: 20px; color: #6fe3ff; } .or em { font-style: normal; font-size: 13px; color: #ffd166; display: inline-flex; align-items: center; gap: 2px; } .or em i { width: 12px; height: 12px; }
.or button { width: 38px; height: 34px; padding: 7px 9px; background: rgba(111, 227, 255, .14); border-radius: 4px; } .or span { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 110px; margin-top: 8px; background: rgba(255, 255, 255, .03); }
.leg { display: flex; gap: 12px; font-size: 13px; } .leg span::before { content: ''; display: inline-block; width: 12px; height: 3px; background: var(--c); margin-right: 5px; vertical-align: middle; }

/* 알림 */
#cToasts { position: absolute; left: 50%; transform: translateX(-50%); top: calc(56px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none !important; }
.ct { display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; font-size: 14px; background: rgba(4, 18, 36, .78); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .3); border-radius: 4px; animation: ctin .3s ease-out; transition: opacity .5s, transform .5s; white-space: nowrap; }
.ct i { width: 17px !important; height: 17px !important; color: #6fe3ff; } .ct b { font-weight: 700; } .ct span { color: #ffd166; font-variant-numeric: tabular-nums; }
.ct.bad { box-shadow: inset 0 0 0 1px #ff5d6c; } .ct.bad i { color: #ff8a96; } .ct.bad span { color: #ff9aa5; }
.ct.out { opacity: 0; transform: translateY(-8px); }
@keyframes ctin { from { opacity: 0; transform: translateY(-10px); } }
#cBanner { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 34px 18px; background: linear-gradient(135deg, rgba(10, 40, 70, .9), rgba(4, 12, 30, .88)); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); box-shadow: inset 0 0 0 2px #6fe3ff; animation: ban .5s cubic-bezier(.2, 1.4, .4, 1); pointer-events: none !important; text-align: center; }
#cBanner i { width: 34px !important; height: 34px !important; color: #6fe3ff; } #cBanner b { font-size: 26px; font-weight: 700; } #cBanner span { font-size: 15px; color: #ffd166; }
#cBanner.bad { box-shadow: inset 0 0 0 2px #ff5d6c; } #cBanner.bad i { color: #ff5d6c; }
@keyframes ban { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }

/* 온보딩 */
#cOnb { position: absolute; inset: 0; z-index: 10; background: rgba(0, 4, 14, .45); }
#cOnb .ob { position: absolute; left: 16px; right: 16px; top: 38%; text-align: center; text-shadow: 0 2px 10px #000; }
#cOnb .ob b { display: block; font-size: 22px; font-weight: 700; }
#cOnb .dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 8px; } #cOnb .dots i { width: 8px; height: 8px; transform: rotate(45deg); background: rgba(255, 255, 255, .3); } #cOnb .dots i.on { background: #6fe3ff; }
#cOnb small { font-size: 13px; opacity: .7; }
#cFinger { position: absolute; width: 50px; height: 50px; margin: -8px 0 0 -12px; border-radius: 50% 50% 50% 8px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 6px 18px rgba(0, 0, 0, .5); animation: ctap 1s ease-in-out infinite; }
@keyframes ctap { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }

/* 우주 화면: 식민지 고르기·착륙 버튼 */
#btnLand { position: fixed; left: 50%; top: 62%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 14px 34px; font-size: 22px; font-weight: 700; color: #04101e; background: #ffb54d; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 0 30px rgba(255, 181, 77, .6); animation: landp 1.2s ease-in-out infinite alternate; }
#btnLand i { width: 26px; height: 26px; display: block; } #btnLand svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes landp { to { filter: brightness(1.18); } }
#colPick { position: fixed; inset: 0; z-index: 30; background: rgba(0, 4, 14, .6); display: grid; place-items: center; }
#colPick .cp { position: relative; display: flex; gap: 14px; padding: 16px; }
#colPick .cpc { position: relative; width: min(300px, 40vw); height: min(190px, 46vh); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 14px; color: #fff; text-align: left; background: var(--bg) center / cover, linear-gradient(160deg, #2a3446, #0a0f1a); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: inset 0 0 0 2px rgba(111, 227, 255, .5); }
#colPick .cpc[data-s="mars"] { background: var(--bg) center / cover, linear-gradient(160deg, #6a3a24, #1a0c08); }
#colPick .cpc b { font-size: 22px; font-weight: 700; text-shadow: 0 2px 8px #000; } #colPick .cpc span { font-size: 14px; color: #ffd166; text-shadow: 0 2px 6px #000; }
#colPick .cpc.lock { filter: grayscale(.8) brightness(.6); } #colPick .cpc .lk { position: absolute; right: 14px; top: 14px; width: 28px; height: 28px; }
#colPick .cpx { position: absolute; right: -6px; top: -10px; }
@media (max-height: 520px) {
  #cMis { width: 220px; padding: 7px 10px 8px; top: calc(48px + var(--safe-t)); } #cMis b { font-size: 15px; margin: 2px 0 4px; }
  #cAlerts { top: calc(128px + var(--safe-t)); }
  #cTop { gap: 2px; max-width: calc(100% - 290px); flex-wrap: nowrap; } #cTop .rs { padding: 4px 5px; gap: 3px; } #cTop .rs b { font-size: 13px; } #cTop .rs em { display: none; } #cTop .rs i { width: 14px; height: 14px; }
  .cSpd button { width: 32px; height: 34px; padding: 8px; } .cRk small { display: none; } .cDate { padding: 3px 6px; }
  .ic2 { width: 54px; padding: 5px 0 4px; } .ic2 span { font-size: 13px; }
  #cSide { top: calc(50px + var(--safe-t)); gap: 4px; }
  #cRow .bc { width: 108px; padding: 6px 7px; } #cRow .bc b { min-height: 30px; font-size: 13px; }
  #cCats button { min-width: 50px; padding: 4px 4px 3px; } #cCats button i { width: 19px; height: 19px; }
  #cPanel, #cSel { top: calc(48px + var(--safe-t)); right: calc(72px + env(safe-area-inset-right, 0px)); }
}

/* 지구 패널 */
.cRk small { font-size: 13px; color: #9fb5ff; white-space: nowrap; }
#cPanel h4 { display: flex; align-items: center; gap: 6px; } #cPanel h4 > i { width: 16px; height: 16px; } #cPanel h4 small { margin-left: auto; font-size: 13px; font-weight: 500; color: #e9f6ff; opacity: .8; }
.route { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.route .ep { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; white-space: nowrap; } .route .ep i { width: 18px; height: 18px; color: #c9d4e4; } .route .ep.earth i { color: #6fb8ff; }
.route .rl { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(111, 227, 255, .55) 0 6px, transparent 6px 11px); }
.route .rl .sh { position: absolute; top: -11px; width: 22px; height: 22px; margin-left: -11px; color: #ffb54d; transform: rotate(90deg); filter: drop-shadow(0 0 6px #ffb54d); transition: left .4s; } .route .rl .sh.back { transform: rotate(-90deg); }
.cons { display: flex; flex-direction: column; gap: 5px; }
.con { display: grid; grid-template-columns: 18px 64px 1fr 66px auto auto auto; align-items: center; gap: 6px; font-size: 13px; padding: 6px 8px; background: rgba(255, 181, 77, .07); box-shadow: inset 0 0 0 1px rgba(255, 181, 77, .25); border-radius: 4px; }
.con.empty { display: block; opacity: .5; } .con > i { width: 16px; height: 16px; color: #ffd166; } .con b { font-weight: 700; } .con em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.con .cb { height: 5px; background: rgba(255, 255, 255, .1); } .con .cb i { display: block; height: 100%; background: #ffd166; }
.con span { display: inline-flex; align-items: center; gap: 2px; } .con span i { width: 12px; height: 12px; }
.con .snd { width: 30px; height: 28px; padding: 5px; background: rgba(111, 227, 255, .18); border-radius: 4px; color: #6fe3ff; } .con .snd[disabled] { opacity: .35; }
.or.ex { grid-template-columns: 22px 1fr 54px 38px 54px 38px; } .or.ex small { grid-column: 2 / -1; font-size: 13px; opacity: .55; margin-top: -4px; }
.dsend { background: #6fe3ff; color: #04101e; font-size: 15px; } .dsend i { width: 18px; height: 18px; }
.msgs { display: flex; flex-direction: column; gap: 3px; }
.msg { display: grid; grid-template-columns: 54px 18px auto 1fr; align-items: center; gap: 6px; font-size: 13px; padding: 5px 6px; border-left: 2px solid rgba(111, 227, 255, .35); background: rgba(255, 255, 255, .03); }
.msg em { font-style: normal; opacity: .55; font-variant-numeric: tabular-nums; } .msg > i { width: 16px; height: 16px; color: #6fe3ff; } .msg b { font-weight: 700; white-space: nowrap; }
.msg span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; justify-content: flex-end; color: #ffd166; } .msg span i { width: 12px; height: 12px; color: #c9d4e4; }
.msg.k-cdone { border-color: #9ff0b0; } .msg.k-cfail, .msg.k-flare, .msg.k-budget { border-color: #ff5d6c; } .msg.k-family { border-color: #ff8fa3; } .msg.k-contract { border-color: #ffb54d; }

#cMis .tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .08em; }
@media (max-height: 520px) {
  #col.pOpen #cBuild, #col.pOpen #cMis, #col.pOpen #cAlerts { display: none; }
  #cPanel { bottom: calc(8px + var(--safe-b)); left: calc(10px + env(safe-area-inset-left, 0px)); width: auto; }
}

/* 말풍선 */
#cBubbles { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.bub { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; max-width: 220px; padding: 7px 11px; font-size: 14px; font-weight: 500; line-height: 1.3; color: #0b1626; background: #f4f8ff; border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); transition: opacity .2s; white-space: normal; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #f4f8ff; }
.bub i { width: 16px !important; height: 16px !important; color: #2a7bd8; flex: none; }
.bub.k-o2, .bub.k-water, .bub.k-food, .bub.k-power, .bub.k-homeless, .bub.k-link, .bub.k-dmg, .bub.k-flare, .bub.k-sad { background: #fff1f2; } .bub.k-o2::after, .bub.k-water::after, .bub.k-food::after, .bub.k-power::after, .bub.k-homeless::after, .bub.k-link::after, .bub.k-dmg::after, .bub.k-flare::after, .bub.k-sad::after { border-top-color: #fff1f2; }
.bub.k-o2 i, .bub.k-water i, .bub.k-food i, .bub.k-power i, .bub.k-homeless i, .bub.k-link i, .bub.k-dmg i, .bub.k-flare i { color: #e0384b; }
/* 확대·축소 */
#cZoom { position: absolute; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(90px + var(--safe-b)); display: flex; flex-direction: column; gap: 6px; }
#cZoom button { width: 44px; height: 44px; padding: 11px; color: #6fe3ff; background: rgba(4, 14, 30, .6); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .3); border-radius: 6px; }
@media (max-height: 520px) { #cZoom { bottom: auto; top: calc(50px + var(--safe-t)); right: calc(72px + env(safe-area-inset-right, 0px)); flex-direction: row; } #cZoom button { width: 38px; height: 38px; padding: 9px; } #col.pOpen #cZoom { display: none; } }

#colPick .cpw { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
#colPick .cpr { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; font-size: 14px; font-weight: 700; color: #ffd166; background: rgba(4, 14, 30, .8); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .45); border-radius: 6px; }
#colPick .cpr svg { width: 16px; height: 16px; fill: currentColor; }
#colPick .cpr.sure { color: #1a0408; background: #ff7a8a; box-shadow: none; }

#cTip { position: fixed; z-index: 7; pointer-events: none !important; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; font-size: 13px; background: rgba(4, 14, 30, .85); box-shadow: inset 0 0 0 1px rgba(111, 227, 255, .4); border-radius: 4px; white-space: nowrap; }
#cTip i { width: 15px !important; height: 15px !important; color: #6fe3ff; } #cTip b { font-weight: 700; } #cTip span { color: #9ff0b0; display: inline-flex; } #cTip .n { color: #ff8a96; } #cTip .w { color: #ffd166; }

/* 미션 안내·설명 */
#cMis { cursor: pointer; }
#cMis .mh { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #ffd166; margin: -2px 0 6px; } #cMis .mh i { width: 14px; height: 14px; }
.guide { position: relative; animation: guide 1.1s ease-in-out infinite; }
@keyframes guide { 0%, 100% { box-shadow: 0 0 0 2px #ffd166, 0 0 6px 2px rgba(255, 209, 102, .5); } 50% { box-shadow: 0 0 0 3px #ffd166, 0 0 22px 8px rgba(255, 209, 102, .75); } }
#cCats button.guide, #cSide .guide, #cRow .bc.guide { box-shadow: 0 0 0 2px #ffd166; }
#cRow .bc.guide { clip-path: none; border-radius: 6px; }
#cSide .ic2.guide { clip-path: none; border-radius: 6px; }
.md { font-size: 15px; line-height: 1.55; margin: 10px 0; color: #dfeaff; }
.mb.big { height: 8px; background: rgba(111, 227, 255, .15); margin: 6px 0; } .mb.big i { display: block; height: 100%; background: #6fe3ff; box-shadow: 0 0 8px #6fe3ff; }
.big.go { background: #ffd166; color: #1a1204; }
.mlist { display: flex; flex-direction: column; gap: 3px; }
.mi { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 5px 7px; background: rgba(255, 255, 255, .04); border-radius: 3px; opacity: .55; }
.mi i { width: 14px; height: 14px; } .mi span { display: inline-flex; align-items: center; gap: 2px; color: #ffd166; } .mi span i { width: 12px; height: 12px; }
.mi.done { opacity: .75; } .mi.done > i { color: #9ff0b0; } .mi.cur { opacity: 1; background: rgba(255, 209, 102, .14); box-shadow: inset 0 0 0 1px #ffd166; }
.how { display: flex; flex-direction: column; gap: 5px; }
.how button { display: flex; align-items: center; gap: 8px; justify-content: space-between; text-align: left; font-size: 14px; line-height: 1.4; padding: 8px 10px; background: rgba(111, 227, 255, .08); border-radius: 4px; }
.how button i { width: 16px; height: 16px; color: #ffd166; flex: none; }
#cRow .bc[disabled] { opacity: .45; filter: grayscale(.7); cursor: not-allowed; }
#cRow .bc em.lk.n { color: #ff8a96; font-weight: 700; }

.md.sm { font-size: 13px; opacity: .85; margin: 2px 0 8px; } .md.shipst { margin: 4px 0 6px; } .big.launch { margin: 4px 0 6px; }
.or.ex small b { color: #ffd166; }

/* 업그레이드 */
.upg { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(111, 227, 255, .2); }
.upg .lvb { display: flex; align-items: center; gap: 3px; } .upg .lvb i { width: 16px; height: 16px; color: rgba(255, 255, 255, .2); } .upg .lvb i.on { color: #ffc04d; } .upg .lvb b { margin-left: 6px; font-size: 14px; }
.upg .big.upb { margin-top: 8px; padding: 9px; font-size: 14px; background: #6fe3ff; color: #04101e; } .upg .big.upb em { font-style: normal; display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 500; } .upg .big.upb em i { width: 13px; height: 13px; }
.upg small { display: block; margin-top: 4px; font-size: 13px; }
#cSel { max-height: calc(100% - 160px); overflow-y: auto; }

/* ═════════════ HUD v2 (PC 전용, 2026-11-10) ═════════════ */
#col { --hc: #5ff3ff; --ha: #ffb648; --hg: linear-gradient(180deg, rgba(10, 26, 48, .78), rgba(4, 10, 24, .72)); --hb: rgba(95, 243, 255, .28); }
#col .hud-glass, #cTop, #cClock, #cMis, #cSide, #cCats, #cMap, #cSel, #cPanel { background: var(--hg) !important; backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--hb), inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .45) !important; }
/* 위: 자원 막대 */
#cTop { left: 12px; top: 10px; right: auto; max-width: none !important; gap: 0; padding: 6px 8px; border-radius: 4px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); flex-wrap: nowrap !important; }
#cTop .rs { position: relative; display: grid !important; grid-template-columns: 30px auto; align-items: center; gap: 2px 8px; min-width: 104px; padding: 4px 14px 8px 8px !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
#cTop .rs + .rs::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(transparent, var(--hb), transparent); }
#cTop .rs > i { width: 30px !important; height: 30px !important; padding: 6px; border-radius: 8px; background: rgba(95, 243, 255, .1); box-shadow: inset 0 0 0 1px rgba(95, 243, 255, .25); grid-row: span 2; }
#cTop .rs .rv { display: flex; flex-direction: column; line-height: 1.05; }
#cTop .rs b { font-size: 19px !important; letter-spacing: .01em; text-shadow: 0 0 12px rgba(95, 243, 255, .25); }
#cTop .rs em { display: block !important; font-size: 13px !important; opacity: .7; margin-top: 2px; }
#cTop .rs s { position: absolute; left: 46px; right: 14px; bottom: 4px; height: 3px; background: rgba(255, 255, 255, .08); border-radius: 2px; text-decoration: none; overflow: hidden; }
#cTop .rs s u { display: block; height: 100%; width: 0; background: var(--hc); box-shadow: 0 0 8px var(--hc); transition: width .4s; }
#cTop .rs[data-k="water"] s u { background: #6fb8ff; } #cTop .rs[data-k="o2"] s u { background: #b6f0ff; } #cTop .rs[data-k="food"] s u { background: #8ee08e; } #cTop .rs[data-k="power"] s u { background: #ffd166; } #cTop .rs[data-k="happy"] s u { background: #ff8fa3; } #cTop .rs[data-k="mat"] s u { background: #c9d4e4; } #cTop .rs[data-k="pop"] s u { background: #ffd9a0; }
#cTop .rs[data-k="water"] > i { background: rgba(111, 184, 255, .14); } #cTop .rs[data-k="food"] > i { background: rgba(142, 224, 142, .14); } #cTop .rs[data-k="power"] > i, #cTop .rs[data-k="cr"] > i { background: rgba(255, 209, 102, .14); } #cTop .rs[data-k="happy"] > i { background: rgba(255, 143, 163, .14); }
#cTop .rs.bad { animation: none !important; } #cTop .rs.bad > i { background: rgba(255, 93, 108, .3) !important; color: #ff8a96 !important; box-shadow: inset 0 0 0 1px #ff5d6c, 0 0 14px rgba(255, 93, 108, .6); animation: cbad2 1s ease-in-out infinite alternate; } #cTop .rs.bad s u { background: #ff5d6c !important; }
@keyframes cbad2 { to { box-shadow: inset 0 0 0 1px #ff5d6c, 0 0 22px rgba(255, 93, 108, .9); } }
#cTop .rs:hover { background: rgba(95, 243, 255, .06) !important; }
/* 오른쪽 위: 시계 */
#cClock { right: 12px; top: 10px; padding: 6px 8px 6px 6px; gap: 8px !important; border-radius: 4px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
.cDate { background: none !important; flex-direction: row !important; align-items: center !important; gap: 8px; padding: 0 4px 0 12px !important; }
#col .cDate .dial { width: 40px !important; height: 40px !important; flex: none; } .dial .dd { fill: none; stroke: rgba(159, 181, 255, .35); stroke-width: 3; } .dial .dl { fill: none; stroke: #ffd166; stroke-width: 3; filter: drop-shadow(0 0 3px #ffd166); } .dial .dp { fill: #fff; filter: drop-shadow(0 0 4px #fff); }
.cDate span:first-of-type { font-size: 17px !important; white-space: nowrap; } .cDate span { white-space: nowrap; }
.cSpd { background: rgba(0, 0, 0, .25) !important; border-radius: 6px !important; box-shadow: inset 0 0 0 1px var(--hb) !important; overflow: hidden; }
.cSpd button { width: 40px !important; height: 40px !important; } .cSpd button.on { background: linear-gradient(180deg, #8ff7ff, #39c9e6) !important; box-shadow: 0 0 14px rgba(95, 243, 255, .6); }
.cRk { background: rgba(255, 182, 72, .12) !important; box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .4) !important; clip-path: none !important; border-radius: 6px; color: var(--ha) !important; }
.cRk small { display: inline !important; }
/* 왼쪽: 미션 홀로 카드 */
#cMis { left: 12px; top: 78px; width: 320px !important; padding: 12px 16px 12px 18px !important; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) !important; overflow: hidden; }
#cMis::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--ha), var(--hc)); box-shadow: 0 0 12px var(--ha); border: 0; clip-path: none; inset: 0 auto 0 0; }
#cMis::after { content: ''; position: absolute; inset: 0; border: 0; width: auto; height: auto; filter: none; clip-path: none; background: linear-gradient(100deg, transparent 30%, rgba(95, 243, 255, .08) 45%, transparent 60%); background-size: 250% 100%; animation: sheen 5s linear infinite; pointer-events: none; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
#cMis b { font-size: 20px !important; } #cMis .tag { color: var(--ha) !important; }
#cMis .mb { height: 6px !important; border-radius: 3px; overflow: hidden; } #cMis .mb i { background: linear-gradient(90deg, var(--hc), #b6fbff) !important; }
#cMis:hover { box-shadow: inset 0 0 0 1px rgba(255, 182, 72, .6), 0 10px 30px rgba(0, 0, 0, .45) !important; }
#cAlerts { top: 214px !important; left: 12px !important; }
#cAlerts span { border-radius: 0 4px 4px 0; backdrop-filter: blur(6px); font-size: 14px !important; padding: 6px 12px 6px 9px !important; }
/* 오른쪽: 명령 도크 */
#cSide { right: 12px; top: 50% !important; transform: translateY(-50%); padding: 8px; gap: 6px !important; border-radius: 6px; }
#cSide .ic2 { position: relative; width: 74px !important; padding: 10px 0 8px !important; background: rgba(95, 243, 255, .04) !important; box-shadow: inset 0 0 0 1px rgba(95, 243, 255, .16) !important; clip-path: none !important; border-radius: 6px; backdrop-filter: none; transition: background .15s, box-shadow .15s, transform .15s; }
#cSide .ic2:hover { background: rgba(95, 243, 255, .14) !important; box-shadow: inset 0 0 0 1px var(--hc), 0 0 16px rgba(95, 243, 255, .35) !important; transform: translateX(-2px); }
#cSide .ic2 i { width: 26px !important; height: 26px !important; }
#col kbd { position: absolute; right: 4px; top: 3px; font: 700 13px/1 var(--kp-font, 'KekeFont'); color: rgba(233, 246, 255, .55); padding: 2px 4px; border-radius: 3px; background: rgba(0, 0, 0, .35); }
#cSide .ic2.guide { box-shadow: 0 0 0 2px #ffd166, 0 0 20px rgba(255, 209, 102, .6) !important; }
/* 아래: 건설 도크 */
#cBuild { bottom: 12px !important; gap: 8px !important; }
#cCats { padding: 6px !important; gap: 4px !important; border-radius: 8px !important; }
#cCats button { min-width: 74px !important; padding: 8px 8px 7px !important; border-radius: 6px !important; transition: background .15s; }
#cCats button:hover { background: rgba(95, 243, 255, .1); } #cCats button i { width: 24px !important; height: 24px !important; }
#cCats button.on { background: linear-gradient(180deg, #8ff7ff, #35c2e0) !important; box-shadow: 0 0 16px rgba(95, 243, 255, .5); } #cCats .tool.on { background: linear-gradient(180deg, #ffd27a, #ff9f2e) !important; box-shadow: 0 0 16px rgba(255, 182, 72, .5); }
#cRow { gap: 8px !important; padding: 4px !important; }
#cRow .bc { width: 164px !important; padding: 0 0 9px !important; background: var(--hg) !important; backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--hb), 0 8px 24px rgba(0, 0, 0, .45) !important; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) !important; transition: transform .15s, box-shadow .15s; overflow: hidden; }
#cRow .bc:not([disabled]):hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--hc), 0 0 20px rgba(95, 243, 255, .35), 0 10px 26px rgba(0, 0, 0, .5) !important; }
#cRow .bc img { display: block; width: 100%; height: 96px; object-fit: contain; background: radial-gradient(ellipse at 50% 80%, rgba(95, 243, 255, .16), transparent 70%); border-bottom: 1px solid var(--hb); margin-bottom: 7px; }
#cRow .bc.th > i { position: absolute; right: 8px; top: 8px; width: 20px !important; height: 20px !important; opacity: .8; }
#cRow .bc:not(.th) { padding-top: 9px !important; }
#cRow .bc b, #cRow .bc em, #cRow .bc small { padding: 0 10px; } #cRow .bc b { min-height: 0 !important; font-size: 15px !important; margin-bottom: 3px; } #cRow .bc em.lk.n { position: absolute; left: 8px; top: 8px; padding: 3px 6px; background: rgba(60, 6, 14, .85); border-radius: 3px; }
#cRow .bc.on { box-shadow: inset 0 0 0 2px var(--hc), 0 0 22px rgba(95, 243, 255, .5) !important; }
/* 왼쪽 아래: 미니맵 */
#cMap { position: absolute; left: 12px; bottom: 12px; padding: 8px; border-radius: 6px; }
#cMap canvas { display: block; width: 220px; height: 220px; border-radius: 3px; cursor: crosshair; image-rendering: pixelated; box-shadow: inset 0 0 0 1px var(--hb); }
#cMap::after { content: ''; position: absolute; inset: 4px; border: 1px solid transparent; border-image: linear-gradient(135deg, var(--hc), transparent 30%, transparent 70%, var(--hc)) 1; pointer-events: none; }
/* 패널·건물 정보 */
#cPanel { top: 78px !important; right: 102px !important; bottom: 104px !important; border-radius: 6px; clip-path: none !important; width: 440px !important; }
#cPanel h3 { font-size: 21px !important; padding-bottom: 8px; border-bottom: 1px solid var(--hb); }
#cSel { top: 78px !important; right: 102px !important; width: 300px !important; border-radius: 6px; clip-path: none !important; }
#cToasts { top: 84px !important; }
.ct { backdrop-filter: blur(8px); border-radius: 6px !important; padding: 8px 14px 8px 10px !important; font-size: 15px !important; }
#cBanner { backdrop-filter: blur(10px); }
#cZoom { right: 12px !important; bottom: 12px !important; top: auto !important; flex-direction: column !important; }
#cZoom button { backdrop-filter: blur(8px); }
/* 화면 가장자리 테두리 (조종석 HUD 느낌) */
#col::before { content: ''; position: fixed; inset: 6px; pointer-events: none; border: 1px solid rgba(95, 243, 255, .08); border-radius: 10px; mask: linear-gradient(#000, #000) top left / 60px 60px no-repeat, linear-gradient(#000, #000) top right / 60px 60px no-repeat, linear-gradient(#000, #000) bottom left / 60px 60px no-repeat, linear-gradient(#000, #000) bottom right / 60px 60px no-repeat; -webkit-mask: linear-gradient(#000, #000) top left / 60px 60px no-repeat, linear-gradient(#000, #000) top right / 60px 60px no-repeat, linear-gradient(#000, #000) bottom left / 60px 60px no-repeat, linear-gradient(#000, #000) bottom right / 60px 60px no-repeat; border-color: rgba(95, 243, 255, .35); }

/* 시장·창고 */
.mkt, .sto { display: flex; flex-direction: column; gap: 4px; }
.mr { display: grid; grid-template-columns: 20px 78px 14px 54px 56px 36px 54px 56px 36px 1fr; align-items: center; gap: 4px; font-size: 13px; padding: 5px 6px; background: rgba(255, 255, 255, .04); border-radius: 4px; }
.mr > i { width: 18px; height: 18px; color: #6fe3ff; } .mr b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mr em { font-style: normal; font-size: 13px; }
.mr span { display: inline-flex; align-items: center; gap: 2px; color: #ffd166; } .mr span i { width: 12px; height: 12px; } .mr .ps { color: #9ff0b0; }
.mr button { padding: 5px 4px; border-radius: 4px; font-size: 13px; background: rgba(111, 227, 255, .14); white-space: nowrap; } .mr button[data-sell] { background: rgba(159, 240, 176, .14); } .mr button[disabled] { opacity: .3; }
.mr small { text-align: right; opacity: .7; }
#cPanel[data-p="market"] { width: 640px !important; }
.sr { display: grid; grid-template-columns: 20px 90px 1fr 110px 70px; align-items: center; gap: 8px; font-size: 14px; padding: 6px 8px; background: rgba(255, 255, 255, .04); border-radius: 4px; }
.sr > i { width: 18px; height: 18px; color: #6fe3ff; } .sr .bar { height: 6px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; } .sr .bar i { display: block; height: 100%; background: #6fe3ff; }
.sr em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; } .sr span { text-align: right; font-size: 13px; }

/* 만족도 원인 */
.hl { display: flex; flex-direction: column; gap: 5px; }
.hr { display: grid; grid-template-columns: 22px 92px 44px 1fr 34px; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; background: rgba(255, 255, 255, .04); font-size: 14px; }
.hr > i { width: 18px; height: 18px; } .hr.neg > i, .hr.neg em { color: #ff8a96; } .hr.pos > i, .hr.pos em { color: #9ff0b0; } .hr em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.hr span { font-size: 13px; line-height: 1.4; color: #dfeaff; } .hr span small { color: #ffd166; font-size: 13px; }
.hr button { width: 32px; height: 32px; padding: 7px; border-radius: 4px; background: rgba(255, 209, 102, .18); color: #ffd166; }
.hr.neg { box-shadow: inset 3px 0 0 #ff5d6c; }

/* 구역 카드·수요 */
#cRow .bc.zc { width: 150px !important; padding: 10px 10px 9px !important; }
#cRow .bc.zc .zsw { display: block; width: 100%; height: 34px; border-radius: 4px; margin-bottom: 7px; background: repeating-linear-gradient(45deg, var(--zc) 0 6px, transparent 6px 12px); opacity: .8; box-shadow: inset 0 0 0 2px var(--zc); float: none !important; }
#cRow .bc.zc em { display: flex; align-items: center; gap: 5px; color: #e9f6ff !important; }
.dmb { position: relative; display: inline-block; width: 8px; height: 22px; background: rgba(255, 255, 255, .08); border-radius: 2px; } .dmb i { position: absolute; left: 0; right: 0; border-radius: 2px; }
.zhelp { align-self: center; max-width: 300px; font-size: 13px; line-height: 1.45; color: #dfeaff; padding: 8px 12px; background: var(--hg); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hb); }
/* 탐사 */
.exg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.ex { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .3); font-size: 13px; }
.ex svg { width: 26px !important; height: 26px !important; } .ex.op { background: rgba(95, 243, 255, .14); color: #6fe3ff; }
.ex.can { background: rgba(255, 209, 102, .12); box-shadow: inset 0 0 0 1px #ffd166; color: #ffd166; cursor: pointer; } .ex.can:hover { background: rgba(255, 209, 102, .25); }
.ex span { line-height: 1.5; text-align: left; } .ex span i { width: 12px !important; height: 12px !important; display: inline-block; vertical-align: -1px; } .ex span svg { width: 12px !important; height: 12px !important; }
.ex.busy { background: rgba(255, 209, 102, .3); color: #fff; animation: guide 1.1s infinite; } .ex.sel { box-shadow: inset 0 0 0 2px #fff; }

/* 완공 숫자 */
.gain { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: linear-gradient(180deg, rgba(20, 60, 100, .9), rgba(6, 18, 36, .9)); box-shadow: 0 0 0 1px #6fe3ff, 0 0 24px rgba(111, 227, 255, .55); white-space: nowrap; pointer-events: none; transform-origin: 50% 100%; }
.gain b { font-size: 15px; font-weight: 700; color: #fff; } .gain span { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; font-weight: 700; color: #9ff0b0; text-shadow: 0 0 8px rgba(159, 240, 176, .6); } .gain i { width: 16px !important; height: 16px !important; color: #9ff0b0; }