/* 작은 생활권의 지도와 시설 카드를 데스크톱과 모바일에서 배치한다. */
:root { color-scheme: light; font-family: Pretendard, 'Noto Sans KR', system-ui, sans-serif; color: #283b36; background: #f3f2ed; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 32px; border-bottom: 1px solid #d8ddd5; }
.eyebrow { display: block; font-size: 12px; letter-spacing: .06em; color: #60766b; }
h1 { font-size: 24px; margin: 6px 0 0; }
header a { color: #315e50; font-size: 14px; white-space: nowrap; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 24px 32px; }
.map-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #d7ded4; border-radius: 16px; background: #dce5da; }
#game-map { height: max(580px, calc(100vh - 220px)); min-width: 0; touch-action: none; }
#game-map canvas { display: block; width: 100%; height: 100%; }
.map-caption { position: absolute; left: 20px; top: 20px; padding: 12px 16px; border-radius: 10px; background: #f9faf4ed; pointer-events: none; }
.map-caption strong, .map-caption span { display: block; }
.map-caption span { font-size: 12px; margin-top: 6px; color: #607168; }
.legend { position: absolute; bottom: 20px; left: 20px; display: flex; gap: 16px; background: #f9faf4ed; padding: 10px 14px; border-radius: 8px; font-size: 12px; pointer-events: none; }
.legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.start-dot::before { background: #218266; }.entry-dot::before { background: #c58930; }
aside { min-width: 0; }
h2 { font-size: 25px; margin: 10px 0; }h3 { font-size: 14px; margin: 18px 0 10px; }
p { font-size: 14px; line-height: 1.65; }
.intro p { color: #62736a; }
#game-status { border-left: 3px solid #6e9277; padding: 10px 12px; background: #e7ece1; }
#game-status[data-error='true'] { border-color: #a04432; background: #f5e3db; }
.views { display: flex; gap: 8px; }
button { font: inherit; font-size: 13px; cursor: pointer; color: #315749; border: 1px solid #c7d3c5; background: #fafbf7; border-radius: 8px; padding: 10px 12px; min-height: 44px; }
button:hover { background: #e9efe2; }button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, #game-map:focus-visible { outline: 3px solid #288065; outline-offset: 3px; }
.facility { display: grid; width: 100%; text-align: left; padding: 15px; margin-bottom: 10px; gap: 7px; }
.facility strong { font-size: 15px; }.facility span { color: #748071; font-size: 12px; }
.facility[aria-pressed='true'] { border-color: #60896a; background: #e6eddf; }
.detail { border-top: 1px solid #d7ded4; margin-top: 20px; }.detail p { color: #62736a; }
.scope { font-size: 12px; color: #747e74; }
footer { padding: 0 32px 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; color: #697a70; font-size: 11px; }
@media (max-width: 850px) { header { padding: 20px; }main { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 20px; }#game-map { height: 52vh; min-height: 340px; }.map-caption { left: 12px; top: 12px; }aside { padding: 0 4px; }footer { padding: 0 20px 24px; } }
@media (max-width: 440px) { header { align-items: flex-start; }h1 { font-size: 20px; }header a { font-size: 12px; margin-top: 3px; }.map-caption { padding: 10px; }.legend { left: 12px; bottom: 12px; } }

/* (★중요) 이동·입장 버튼은 좁은 화면에서도 줄을 나누어 조작할 수 있다. */
.movement { padding: 10px 0; }.movement .views { flex-wrap: wrap; margin: 8px 0; }.movement button { flex: 1 1 auto; }#movement-status { font-size: 13px; }

.map-card { align-self: start; }

/* (★중요) 터치 방향은 지도 위에만 두고 화면 스크롤·카메라 드래그와 분리한다. */
#free-controls { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; z-index: 2; touch-action: none; }
#free-controls button { padding: 0; width: 44px; height: 44px; background: #f9faf4e8; touch-action: none; user-select: none; }
#free-controls [data-direction='forward'] { grid-column: 2; }
#free-controls [data-direction='left'] { grid-column: 1; grid-row: 2; }
#free-controls [data-direction='back'] { grid-column: 2; grid-row: 2; }
#free-controls [data-direction='right'] { grid-column: 3; grid-row: 2; }
#sandbox-radar { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 144px; height: 144px; border: 1px solid #728b80; border-radius: 10px; background: #142b29e8; pointer-events: none; }
@media (max-width: 440px) { #free-controls { right: 12px; bottom: 12px; } }
@media (max-width: 440px) { #sandbox-radar { left: 12px; bottom: 12px; } }

/* 저장 생활 정보는 검증 화면과 같은 작은 카드 안에서 표시한다. */
[hidden] { display: none !important; }.life-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.life-values div { background: #e6ecdf; padding: 10px; border-radius: 8px; }.life-values dt { font-size: 12px; }.life-values dd { margin: 5px 0 0; font-weight: 600; }#game-life .views { flex-wrap: wrap; }#save-status, #life-clock, #life-stock, #life-expenses { font-size: 12px; }header nav { text-align: right; }

/* 일거리와 주민 상태는 확정된 생활 정보 옆에서 간단히 표시한다. */
#town-panel p, #town-npcs { font-size: 12px; line-height: 1.6; }#town-npcs { padding: 0; list-style: none; }#town-npcs li { padding: 7px 0; border-bottom: 1px solid #d8ddd5; }#town-panel .views { flex-wrap: wrap; }

/* (★중요) 통합 게임의 선택과 주민 반응은 저장 생활의 수치 카드와 분리해 보여준다. */
#sandbox-panel { border-top: 1px solid #d7ded4; margin-top: 16px; }
#sandbox-panel .views { flex-wrap: wrap; }
#sandbox-panel .views button { flex: 1 1 130px; }
#sandbox-npcs { padding: 0; list-style: none; font-size: 12px; }
#sandbox-npcs li { padding: 7px 0; border-bottom: 1px solid #d8ddd5; }
#sandbox-action, #sandbox-event-status, #sandbox-state, #sandbox-objective, #sandbox-distance, #sandbox-nearby, #sandbox-conversation { font-size: 13px; }
#sandbox-objective { padding: 10px 12px; background: #e7ece1; border-left: 3px solid #6e9277; }
#graphics-panel .views button { flex: 1 1 0; }#graphics-panel [aria-pressed='true'] { border-color: #60896a; background: #e6eddf; }#graphics-notice { font-size: 12px; }#graphics-notice:empty { display: none; }

/* (★중요) 플레이 중에는 월드가 뷰포트 전체를 쓰고 상세 화면은 ESC 메뉴에서만 연다. */
html, body { width: 100%; height: 100%; overflow: hidden; background: #17282a; }
main { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; height: 100dvh; padding: 0; margin: 0; }
.map-card { position: absolute; inset: 0; width: 100%; height: 100%; align-self: auto; border: 0; border-radius: 0; background: #17282a; }
#game-map { width: 100%; height: 100%; min-height: 0; }
.map-caption, .legend { display: none; }
#game-loading { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 12px 18px; border-radius: 8px; background: #112325e8; color: #fff; text-align: center; }
#game-loading[data-error='true'] { border: 1px solid #f0a588; }
#location-hud, #objective-hud, #message-hud, #interaction-hud, #drive-hud, #radar-label, #menu-toggle { position: absolute; z-index: 4; color: #f5f7f6; }
#location-hud { left: 26px; top: 24px; min-width: 210px; padding: 11px 16px; border: 1px solid #a7bec344; border-radius: 10px; background: #0c1a1fbd; transition: opacity .4s, padding .4s; }
#location-hud span { display: block; color: #b7c9c8; font-size: 12px; }
#location-hud strong { display: block; margin-top: 2px; font-size: 17px; letter-spacing: -.02em; }
#location-hud.compact { padding: 7px 11px; opacity: .75; }
#location-hud.compact span { display: none; }
#location-hud.compact strong { font-size: 13px; }
#objective-hud { left: 26px; top: 110px; max-width: 360px; margin: 0; padding: 10px 14px; border-left: 3px solid #72d6b8; border-radius: 3px 8px 8px 3px; background: #0c1a1fc9; font-size: 13px; line-height: 1.4; }
#location-hud.compact + #objective-hud { top: 68px; }
#menu-toggle { top: 24px; right: 26px; min-height: 38px; padding: 7px 13px; border: 1px solid #aec7c855; border-radius: 8px; background: #102126c9; font-size: 13px; }
#menu-toggle:hover { background: #25434acc; }
#message-hud { top: 75px; right: 26px; max-width: 320px; margin: 0; padding: 11px 14px; border-radius: 8px; background: #102126df; font-size: 13px; line-height: 1.5; }
#interaction-hud { left: 50%; bottom: 15%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px; border: 1px solid #ffffff44; border-radius: 8px; background: #111b1fcf; font-size: 15px; white-space: nowrap; }
#interaction-hud kbd { display: inline-grid; place-items: center; min-width: 25px; height: 25px; border: 1px solid #e4eeee99; border-radius: 4px; font: 700 13px Pretendard, sans-serif; }
#drive-hud { right: 26px; bottom: 26px; display: flex; align-items: baseline; gap: 7px; min-width: 155px; padding: 12px 15px; border: 1px solid #aec7c855; border-radius: 14px; background: #0b171de8; font-variant-numeric: tabular-nums; }
#drive-speed { font-size: 42px; font-weight: 700; line-height: 1; }
#drive-hud .speed-unit { font-size: 12px; color: #b6c9cb; }
#drive-gear { margin-left: auto; padding: 3px 7px; border: 1px solid #8fd4dc77; border-radius: 50%; font-size: 16px; }
/* 송도 운전 계기판: 위쪽 회전수 눈금 띠, 차종 이름·사이드브레이크 경고등, 아래 소리 토글. 다른 모드에서는 숨김 상태라 기존 모양 그대로다. */
#drive-hud { flex-wrap: wrap; row-gap: 8px; }
#drive-rpm:not([hidden]) { order: -2; display: block; flex: 1 0 100%; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, #f5f7f61f 0 calc(12.5% - 2px), transparent calc(12.5% - 2px) 12.5%); overflow: hidden; }
#drive-rpm i { display: block; width: 0; height: 100%; border-radius: 3px; background: #8fd4dc; }
#drive-rpm[data-high='true'] i { background: #ff6b5c; }
#drive-vehicle:not([hidden]) { order: -1; flex: 1 0 auto; font-size: 13px; font-weight: 600; color: #cfdcdd; letter-spacing: .01em; }
#drive-handbrake:not([hidden]) { order: -1; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #ff6b5c; border-radius: 50%; color: #ff6b5c; font-size: 11px; line-height: 1; }
#drive-sound:not([hidden]) { order: 5; flex: 1 0 100%; padding: 6px 8px; border: 1px solid #aec7c855; border-radius: 8px; background: transparent; color: #cfdcdd; font: inherit; font-size: 12px; cursor: pointer; }
#drive-sound[aria-pressed='false'] { color: #8c9a9b; }
#drive-sound:hover, #drive-controls button:hover { border-color: #8fd4dc; background: #16252d; color: #f5f7f6; }
#drive-sound:focus-visible, #drive-controls button:focus-visible { outline: 2px solid #8fd4dc; outline-offset: 2px; }
#drive-controls { display: none; }
#sandbox-radar { left: 26px; bottom: 30px; width: 180px; height: 180px; border: 2px solid #b8d5d8aa; border-radius: 50%; background: #0b171ddb; }
#radar-label { left: 27px; bottom: 9px; margin: 0; padding: 2px 7px; border-radius: 5px; background: #0b171dc9; font-size: 11px; }
#free-controls { display: none; }

/* (★중요) 기존 모드·설정·출처의 조작 가능성을 보존하면서 플레이 화면에서는 숨긴다. */
#game-menu { position: fixed; inset: 0; z-index: 20; }
#menu-scrim { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: #071014bb; }
.menu-panel { position: absolute; right: 0; top: 0; width: min(480px, 100vw); height: 100vh; height: 100dvh; overflow-y: auto; padding: 24px; background: #172628; color: #e8f0eb; }
#game-menu header { display: block; padding: 0; border: 0; }
#game-menu header h1 { margin: 3px 0 12px; color: #fff; }
#game-menu header nav { text-align: left; line-height: 2; }
#game-menu header a { color: #b4e2d3; font-size: 13px; }
#menu-close { width: 100%; margin: 16px 0; border-color: #75b9a7; background: #d8f0e5; font-weight: 700; }
#game-menu aside { width: 100%; padding: 0; }
#game-menu h2, #game-menu h3 { color: #f2f7f3; }
#game-menu p, #game-menu .intro p, #game-menu .scope, #game-menu .detail p { color: #c7d7d1; }
#game-menu #game-status, #game-menu #sandbox-objective { border-color: #62b798; background: #27463e; color: #f0faf4; }
#game-menu #game-status[data-error='true'] { border-color: #e59b7c; background: #53382e; }
#game-menu .detail { border-color: #4a625c; }
#game-menu .life-values div { background: #29413c; }
#game-menu .facility span { color: #50615a; }
#game-menu footer { display: flex; padding: 18px 0 26px; color: #b3c2bc; font-size: 11px; }
#game-menu footer a { color: #b4e2d3; }
#debug-toggle { width: 100%; margin-top: 18px; }
.debug-only { display: none; }
body.debug-mode .debug-only { display: block; }

/* (★중요) 가로 휴대폰·태블릿도 터치 조작을 열고 화면 가장자리의 가려진 영역을 피한다. */
@media (max-width: 760px), (pointer: coarse) {
  #location-hud { top: max(12px, env(safe-area-inset-top)); left: 12px; min-width: 0; padding: 7px 10px; }
  #location-hud strong { font-size: 13px; }
  #objective-hud { left: 12px; top: 72px; max-width: calc(100vw - 95px); font-size: 12px; }
  #location-hud.compact + #objective-hud { top: 50px; }
  #menu-toggle { top: max(12px, env(safe-area-inset-top)); right: 12px; }
  #message-hud { top: 105px; right: 12px; max-width: min(280px, 80vw); }
  #sandbox-radar { left: 12px; bottom: max(20px, env(safe-area-inset-bottom)); width: 126px; height: 126px; }
  #radar-label { left: 12px; bottom: 4px; }
  #drive-hud { right: 12px; bottom: 15px; min-width: 120px; padding: 8px 10px; }
  #drive-speed { font-size: 31px; }
  #interaction-hud { bottom: 26%; font-size: 12px; }
  #free-controls:not([hidden]) { display: grid; right: 12px; bottom: 100px; }
  #drive-controls:not([hidden]) { position: absolute; z-index: 4; right: 12px; bottom: 200px; display: flex; flex-direction: column; gap: 4px; }
  #drive-controls button { min-width: 112px; min-height: 44px; padding: 0 12px; border: 1px solid #aec7c855; border-radius: 10px; background: #0b171de8; color: #f5f7f6; touch-action: none; user-select: none; }
  #drive-controls button[aria-pressed='true'] { border-color: #ff6b5c; color: #ff6b5c; }
  /* 송도 계기판은 회전수·차종·소리 줄로 높아지므로 그때만 방향·보조 버튼을 그 위로 올린다. */
  #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #free-controls:not([hidden]) { bottom: 165px; }
  #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #drive-controls:not([hidden]) { bottom: 265px; }
  .menu-panel { padding: 16px; }
}

/* (★중요) 안내는 조작 위로 분리해 작은 화면에서 방향 버튼을 가리지 않는다. */
@media (max-width: 760px), (pointer: coarse) {
  .map-card { --hud-left: max(12px, env(safe-area-inset-left)); --hud-right: max(12px, env(safe-area-inset-right)); --hud-top: max(12px, env(safe-area-inset-top)); --hud-bottom: max(12px, env(safe-area-inset-bottom)); }
  #location-hud { left: var(--hud-left); top: var(--hud-top); max-width: calc(100% - var(--hud-left) - var(--hud-right) - 88px); }
  #menu-toggle { right: var(--hud-right); top: var(--hud-top); min-width: 44px; min-height: 44px; }
  #objective-hud { left: var(--hud-left); top: calc(var(--hud-top) + 60px); max-width: calc(100% - var(--hud-left) - var(--hud-right)); max-height: 96px; overflow: auto; }
  #location-hud.compact + #objective-hud { top: calc(var(--hud-top) + 44px); }
  #message-hud { left: var(--hud-left); right: var(--hud-right); top: calc(var(--hud-top) + 172px); max-width: none; max-height: 72px; overflow: auto; }
  #interaction-hud { bottom: calc(var(--hud-bottom) + 194px); max-width: calc(100% - var(--hud-left) - var(--hud-right)); white-space: normal; pointer-events: none; }
  #free-controls:not([hidden]) { right: var(--hud-right); bottom: calc(var(--hud-bottom) + 88px); }
  #drive-controls:not([hidden]) { right: var(--hud-right); bottom: calc(var(--hud-bottom) + 188px); }
  #drive-hud { right: var(--hud-right); bottom: var(--hud-bottom); }
  #drive-hud:has(#drive-sound:not([hidden])) { width: min(260px, calc(100% - var(--hud-left) - var(--hud-right))); }
  #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #free-controls:not([hidden]) { bottom: calc(var(--hud-bottom) + 153px); }
  #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #drive-controls:not([hidden]) { bottom: calc(var(--hud-bottom) + 253px); }
  .map-card:has(#drive-hud:not([hidden])) #interaction-hud { left: var(--hud-left); transform: none; bottom: calc(var(--hud-bottom) + 168px); max-width: calc(100% - var(--hud-left) - var(--hud-right) - 156px); }
  .map-card:has(#drive-hud:not([hidden])) #message-hud { right: auto; max-width: calc(100% - var(--hud-left) - var(--hud-right) - 132px); }
  .menu-panel { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  #game-menu header nav a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; }
}

/* (★중요) 가로 화면은 계기판·상호작용·방향 조작을 아래 세 구역으로 나눈다. */
@media (max-height: 500px) and (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #objective-hud { max-width: calc(100% - var(--hud-left) - var(--hud-right) - 208px); max-height: 112px; }
  #message-hud, .map-card:has(#drive-hud:not([hidden])) #message-hud { left: auto; right: var(--hud-right); top: calc(var(--hud-top) + 56px); max-width: 172px; }
  #free-controls:not([hidden]), #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #free-controls:not([hidden]) { bottom: var(--hud-bottom); }
  #drive-controls:not([hidden]), #drive-hud:not([hidden]):has(#drive-sound:not([hidden])) ~ #drive-controls:not([hidden]) { bottom: calc(var(--hud-bottom) + 100px); }
  #drive-hud, #drive-hud:has(#drive-sound:not([hidden])) { left: var(--hud-left); right: auto; width: 160px; min-width: 0; }
  #interaction-hud, .map-card:has(#drive-hud:not([hidden])) #interaction-hud { left: 50%; transform: translateX(-50%); bottom: var(--hud-bottom); max-width: min(260px, calc(100% - var(--hud-left) - var(--hud-right) - 336px)); }
  #sandbox-radar { width: 96px; height: 96px; bottom: var(--hud-bottom); }
  .map-card:has(#sandbox-radar:not([hidden])) #drive-hud { left: calc(var(--hud-left) + 108px); }
  .map-card:has(#sandbox-radar:not([hidden])):has(#drive-hud:not([hidden])) #interaction-hud { left: calc(var(--hud-left) + 280px); transform: none; max-width: calc(100% - var(--hud-left) - var(--hud-right) - 436px); }
}

/* open:core start */
/* 송도 자유 생활의 공통 화면 자리와 세계 보관 확인창을 정한다. */
body[data-mode='songdo-open'] {
  --open-panel: #0c1a1fc9;
  --open-panel-strong: #0b171de8;
  --open-line: #aec7c855;
  --open-text: #f5f7f6;
  --open-muted: #b7c9c8;
  --open-mint: #72d6b8;
}
body[data-mode='songdo-open'] .map-card {
  --hud-left: 26px;
  --hud-right: 26px;
  --hud-top: 24px;
  --hud-bottom: 26px;
}
body[data-mode='songdo-open'] ::selection { color: #0b171d; background: var(--open-mint); }
body[data-mode='songdo-open'] :is(button, a):focus-visible { outline: 2px solid var(--open-mint); outline-offset: 3px; }
body[data-mode='songdo-open'] #open-world-panel {
  margin-block: 24px;
  padding: 16px;
  border: 1px solid var(--open-line);
  border-radius: 12px;
  background: var(--open-panel);
  color: var(--open-text);
}
body[data-mode='songdo-open'] #open-world-panel h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
body[data-mode='songdo-open'] #open-world-summary { margin: 0 0 14px; color: var(--open-muted); font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] #open-world-panel button,
body[data-mode='songdo-open'] #open-reset-corrupt {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--open-line);
  border-radius: 8px;
  background: var(--open-panel-strong);
  color: var(--open-text);
  font: 500 13px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif;
  cursor: pointer;
}
body[data-mode='songdo-open'] #open-world-panel button:hover,
body[data-mode='songdo-open'] #open-reset-corrupt:hover { border-color: var(--open-mint); background: #19363d; }
body[data-mode='songdo-open'] #open-world-panel button:disabled,
body[data-mode='songdo-open'] #open-reset-corrupt:disabled { opacity: .6; cursor: wait; }
body[data-mode='songdo-open'] #open-legacy-link { display: flex; align-items: center; min-height: 44px; margin-top: 10px; color: var(--open-mint); font-size: 13px; line-height: 1.5; text-underline-offset: 3px; }
body[data-mode='songdo-open'] #game-menu:has(#open-new-game-confirm:not([hidden])) .menu-panel::before { content: ''; position: fixed; inset: 0; z-index: 30; background: #071014b3; }
body[data-mode='songdo-open'] #open-new-game-confirm {
  position: fixed;
  z-index: 31;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--open-line);
  border-radius: 12px;
  background: var(--open-panel-strong);
  color: var(--open-text);
}
body[data-mode='songdo-open'] #open-new-game-confirm p { margin: 0 0 20px; font-size: 13px; line-height: 1.7; }
body[data-mode='songdo-open'] #open-world-panel #open-new-game-yes { margin-right: 8px; border-color: var(--open-mint); background: var(--open-mint); color: #0b171d; font-weight: 700; }
body[data-mode='songdo-open'] #open-reset-corrupt { position: absolute; z-index: 7; top: calc(50% + 80px); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); }
body[data-mode='songdo-open'] #message-hud { top: var(--hud-top); left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 400px)); }
body[data-mode='songdo-open'] :is(#open-status, #open-activity-panel, #open-minimap, #open-guide-strip, #open-slot-bottom-center, #open-actions, #open-hints, #open-resident-layer) { position: absolute; z-index: 4; color: var(--open-text); }
body[data-mode='songdo-open'] #open-status { top: calc(var(--hud-top) + 72px); left: var(--hud-left); }
body[data-mode='songdo-open'] #open-activity-panel { top: calc(var(--hud-top) + 108px); left: var(--hud-left); }
body[data-mode='songdo-open'] #open-minimap { top: calc(var(--hud-top) + 54px); right: var(--hud-right); width: 200px; height: 200px; }
body[data-mode='songdo-open'] #open-guide-strip { top: calc(var(--hud-top) + 264px); right: var(--hud-right); max-width: 260px; }
body[data-mode='songdo-open'] #open-slot-bottom-center { bottom: var(--hud-bottom); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100% - 48px)); }
body[data-mode='songdo-open'] #open-slot-bottom-center #interaction-hud { position: static; left: auto; right: auto; bottom: auto; transform: none; max-width: 100%; white-space: normal; }
body[data-mode='songdo-open'] #open-slot-bottom-center [data-open-suppressed='true'] { display: none !important; }
body[data-mode='songdo-open'] #open-actions { left: var(--hud-left); bottom: var(--hud-bottom); }
body[data-mode='songdo-open'] #open-hints { left: var(--hud-left); bottom: var(--hud-bottom); }
body[data-mode='songdo-open'] #open-resident-layer { inset: 0; pointer-events: none; }
@media (max-width: 760px), (pointer: coarse) {
  body[data-mode='songdo-open'] .map-card { --hud-left: max(12px, env(safe-area-inset-left)); --hud-right: max(12px, env(safe-area-inset-right)); --hud-top: max(12px, env(safe-area-inset-top)); --hud-bottom: max(12px, env(safe-area-inset-bottom)); }
  body[data-mode='songdo-open'] #location-hud { max-width: calc(100% - var(--hud-left) - var(--hud-right) - 144px); }
  body[data-mode='songdo-open'] #location-hud strong { font-size: 15px; }
  body[data-mode='songdo-open'] #open-status { top: calc(var(--hud-top) + 68px); }
  body[data-mode='songdo-open'] #open-activity-panel { top: calc(var(--hud-top) + 104px); max-width: calc(100% - var(--hud-left) - var(--hud-right) - 144px); }
  body[data-mode='songdo-open'] #open-minimap { top: calc(var(--hud-top) + 54px); width: 132px; height: 132px; }
  body[data-mode='songdo-open'] #open-guide-strip { top: calc(var(--hud-top) + 196px); left: var(--hud-left); right: var(--hud-right); max-width: none; }
  body[data-mode='songdo-open'] #message-hud,
  body[data-mode='songdo-open'] .map-card:has(#drive-hud:not([hidden])) #message-hud { top: calc(var(--hud-top) + 244px); left: var(--hud-left); right: var(--hud-right); transform: none; width: auto; max-width: none; }
  body[data-mode='songdo-open'] #open-slot-bottom-center { bottom: calc(var(--hud-bottom) + 196px); max-width: calc(100% - var(--hud-left) - var(--hud-right)); }
  body[data-mode='songdo-open'] .map-card:has(#drive-hud:not([hidden])) #open-slot-bottom-center { bottom: calc(var(--hud-bottom) + 354px); }
  body[data-mode='songdo-open'] #open-hints { bottom: calc(var(--hud-bottom) + 150px); }
}
@media (max-height: 500px) and (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body[data-mode='songdo-open'] #open-minimap { width: 112px; height: 112px; }
  body[data-mode='songdo-open'] #open-guide-strip { top: calc(var(--hud-top) + 54px); left: auto; right: calc(var(--hud-right) + 124px); max-width: 240px; }
  body[data-mode='songdo-open'] #message-hud,
  body[data-mode='songdo-open'] .map-card:has(#drive-hud:not([hidden])) #message-hud { top: calc(var(--hud-top) + 100px); left: 50%; right: auto; transform: translateX(-50%); max-width: min(360px, calc(100% - 400px)); }
  body[data-mode='songdo-open'] #open-slot-bottom-center,
  body[data-mode='songdo-open'] .map-card:has(#drive-hud:not([hidden])) #open-slot-bottom-center { bottom: var(--hud-bottom); max-width: min(380px, calc(100% - 350px)); }
  body[data-mode='songdo-open'] #open-actions { left: auto; right: calc(var(--hud-right) + 124px); }
  body[data-mode='songdo-open'] #open-hints { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mode='songdo-open'] #open-new-game-confirm { scroll-behavior: auto; }
}
/* open:core end */
/* ---- open 병합 구분 ---- */
/* open:0b start */

body[data-mode='songdo-open'] { --open-warn: #ff6b5c; }
/* (★중요) 기존 시설 요약은 새 상태줄과 같은 자리를 쓰므로 open에서는 메뉴 상세로 남긴다. */
body[data-mode='songdo-open'] #objective-hud { display: none; }
/* (★중요) 도시는 시야 중심에 두고 상태·조작만 승인된 청록 HUD 안에 보인다. */
body[data-mode='songdo-open'] #open-status { max-width: calc(100% - var(--hud-left) - var(--hud-right) - 220px); pointer-events: none; }
body[data-mode='songdo-open'] .open-status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 7px 11px; border: 1px solid var(--open-line); border-radius: 6px; background: var(--open-panel); color: var(--open-text); font: 500 13px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] .open-status-sep { color: var(--open-muted); }
body[data-mode='songdo-open'] .open-status-money { font-weight: 700; }
body[data-mode='songdo-open'] .open-status-chips { display: contents; }
body[data-mode='songdo-open'] .open-status-chip { padding: 1px 6px; border: 1px solid var(--open-warn); border-radius: 4px; color: var(--open-warn); font-size: 12px; white-space: nowrap; }
body[data-mode='songdo-open'] #open-actions { display: none; }
body[data-mode='songdo-open'] #open-hints { max-width: 340px; }
body[data-mode='songdo-open'] .open-hints { padding: 14px 16px 10px; border: 1px solid var(--open-line); border-radius: 8px; background: var(--open-panel-strong); font: 400 13px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif; }
body[data-mode='songdo-open'] .open-hints-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
body[data-mode='songdo-open'] .open-hints-keys { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
body[data-mode='songdo-open'] .open-hints-keys li { display: flex; align-items: center; gap: 4px; }
body[data-mode='songdo-open'] .open-hints-keys li span { margin-left: 6px; color: var(--open-muted); }
body[data-mode='songdo-open'] .open-hints-keys kbd { min-width: 22px; padding: 2px 5px; border: 1px solid var(--open-line); border-radius: 4px; background: var(--open-panel); color: var(--open-text); font: 500 12px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif; text-align: center; }
body[data-mode='songdo-open'] .open-hints-touch, body[data-mode='songdo-open'] .open-hints-summary { display: none; }
body[data-mode='songdo-open'] .open-hints-toggle { min-height: 44px; margin-top: 8px; padding: 6px 0; border: 0; background: transparent; color: var(--open-mint); font: 500 12px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif; text-align: left; cursor: pointer; }
body[data-mode='songdo-open'] .open-hints-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
body[data-mode='songdo-open'] .open-hints[data-state='collapsed'] { padding: 7px 11px; }
body[data-mode='songdo-open'] .open-hints[data-state='collapsed'] :is(.open-hints-title, .open-hints-keys, .open-hints-touch) { display: none; }
body[data-mode='songdo-open'] .open-hints[data-state='collapsed'] .open-hints-summary { display: block; margin: 0; color: var(--open-muted); font-size: 12px; }
body[data-mode='songdo-open'] .open-hints[data-state='collapsed'] .open-hints-toggle { margin-top: 0; }
body[data-mode='songdo-open'] :is(.open-action, .open-hints-toggle):focus-visible { outline: 2px solid var(--open-mint); outline-offset: 3px; }
body[data-mode='songdo-open'] #message-hud:has(.open-edge-text) { display: flex; gap: 10px; align-items: center; white-space: normal; text-align: left; }
body[data-mode='songdo-open'] #message-hud[hidden] { display: none; }
body[data-mode='songdo-open'] .open-edge-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background-color: var(--open-mint); mask: var(--open-edge-shape) center/contain no-repeat; }
body[data-mode='songdo-open'] .open-edge-icon:not([data-reason]) { display: none; }
body[data-mode='songdo-open'] .open-edge-icon[data-reason='district'] { --open-edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 21V3m16 18V3M4 5h16M4 11h16M4 17h16'/%3E%3C/svg%3E"); }
body[data-mode='songdo-open'] .open-edge-icon[data-reason='building'] { --open-edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 21V3h16v18M8 7h2m4 0h2M8 11h2m4 0h2M8 15h2m4 0h2M10 21v-3h4v3'/%3E%3C/svg%3E"); }
body[data-mode='songdo-open'] .open-edge-icon[data-reason='water'] { --open-edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 8q3-4 6 0t6 0t8 0M2 13q3-4 6 0t6 0t8 0M2 18q3-4 6 0t6 0t8 0'/%3E%3C/svg%3E"); }
body[data-mode='songdo-open'] .open-edge-icon[data-reason='car'] { --open-edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='m4 10 2-6h12l2 6M3 10h18v8H3zM5 18v3m14-3v3M6 14h3m6 0h3'/%3E%3C/svg%3E"); }
body[data-mode='songdo-open'] .open-edge-icon[data-reason='curb'] { --open-edge-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 18h20M2 12h7v6m0-6h13M4 15h2m6 0h3m3 0h3'/%3E%3C/svg%3E"); }
@media (max-width: 760px), (pointer: coarse) {
  body[data-mode='songdo-open'] #open-status { max-width: calc(100% - var(--hud-left) - var(--hud-right) - 144px); }
  body[data-mode='songdo-open'] .open-status-line { padding: 6px 8px; gap: 4px; font-size: 12px; }
  body[data-mode='songdo-open'] #open-actions { display: flex; align-items: flex-end; gap: 10px; max-width: calc(100% - var(--hud-left) - var(--hud-right) - 148px); }
  body[data-mode='songdo-open'] .open-action { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 48px; min-height: 48px; width: 48px; padding: 5px; border: 1px solid var(--open-line); border-radius: 50%; background: var(--open-panel-strong); color: var(--open-text); font: 500 11px/1.3 Pretendard, 'Noto Sans KR', system-ui, sans-serif; cursor: pointer; touch-action: manipulation; overflow-wrap: anywhere; }
  body[data-mode='songdo-open'] .open-action--primary { width: 64px; min-height: 64px; border-color: var(--open-mint); font-size: 12px; }
  body[data-mode='songdo-open'] .open-action[aria-pressed='true'] { border: 2px solid var(--open-mint); color: var(--open-mint); }
  body[data-mode='songdo-open'] .open-action:active { background: #19363d; }
  body[data-mode='songdo-open'] .open-action:disabled { opacity: .5; cursor: default; }
  body[data-mode='songdo-open'] .open-action-row { display: grid; grid-template-columns: repeat(2, 48px); gap: 6px; }
  body[data-mode='songdo-open'] .open-action-drawer { position: absolute; bottom: calc(100% + 10px); left: 0; display: flex; flex-wrap: wrap; gap: 6px; max-width: 220px; padding: 8px; border: 1px solid var(--open-line); border-radius: 8px; background: var(--open-panel-strong); }
  body[data-mode='songdo-open'] .open-action-drawer[hidden] { display: none; }
  body[data-mode='songdo-open'] #open-hints { bottom: calc(var(--hud-bottom) + 184px); max-width: min(340px, calc(100% - var(--hud-left) - var(--hud-right))); }
  body[data-mode='songdo-open'] .open-hints-keys { display: none; }
  body[data-mode='songdo-open'] .open-hints-touch { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  body[data-mode='songdo-open'] .open-hints-touch li { display: flex; align-items: center; gap: 10px; }
  body[data-mode='songdo-open'] .open-hints-mark { min-width: 48px; padding: 4px; border: 1px solid var(--open-line); border-radius: 6px; color: var(--open-mint); font-size: 11px; text-align: center; }
}
@media (max-height: 500px) and (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body[data-mode='songdo-open'] #open-actions { max-width: 190px; }
  body[data-mode='songdo-open'] #open-hints { display: none; }
}
body[data-mode='songdo-open'] :is(#open-status, #open-actions, #open-hints)[hidden] { display: none; }
/* open:0b end */
/* ---- open 병합 구분 ---- */
/* open:activities start */
body[data-mode='songdo-open'] .open-activity-card,
body[data-mode='songdo-open'] .open-activity-result,
body[data-mode='songdo-open'] .open-activity-offer {
  --activity-color: #9fd0ff;
  border: 1px solid var(--open-line);
  border-left: 3px solid var(--activity-color);
  border-radius: 8px;
  background: var(--open-panel-strong);
  color: var(--open-text);
  font: 500 13px/1.5 Pretendard, 'Noto Sans KR', system-ui;
  font-variant-numeric: tabular-nums;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
body[data-mode='songdo-open'] [data-activity-kind='taxi'] { --activity-color: #e9ca90; }
body[data-mode='songdo-open'] [data-activity-kind='delivery'] { --activity-color: #8bcab7; }
body[data-mode='songdo-open'] [data-activity-kind='race'] { --activity-color: #c7a6ff; }
body[data-mode='songdo-open'] .open-activity-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 4px 8px;
  width: min(420px, calc(100vw - 48px));
  padding: 10px 12px;
}
body[data-mode='songdo-open'] .open-activity-glyph { display: inline-grid; place-items: center; align-self: start; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; color: var(--activity-color); font-size: 12px; font-weight: 700; }
body[data-mode='songdo-open'] .open-activity-line { align-self: center; min-width: 0; overflow-wrap: anywhere; }
body[data-mode='songdo-open'] .open-activity-amount { align-self: center; color: var(--activity-color); white-space: nowrap; font-size: 12px; }
body[data-mode='songdo-open'] .open-activity-bar { grid-column: 2 / -1; height: 2px; overflow: hidden; background: #aec7c833; }
body[data-mode='songdo-open'] .open-activity-bar i { display: block; height: 100%; width: calc(100% * var(--open-activity-remain, 1)); background: var(--activity-color); }
body[data-mode='songdo-open'] .open-activity-cancel { grid-column: 2 / -1; justify-self: end; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--open-line); border-radius: 6px; background: #0c1a1f; color: var(--open-muted); font: inherit; cursor: pointer; }
body[data-mode='songdo-open'] .open-activity-cancel:hover { color: var(--open-text); background: #1d363b; }
body[data-mode='songdo-open'] .open-activity-cancel:focus-visible { outline: 2px solid var(--open-mint); outline-offset: 3px; }
body[data-mode='songdo-open'] .open-activity-cancel:disabled { opacity: .55; cursor: wait; }
body[data-mode='songdo-open'] .open-activity-result { display: grid; gap: 4px; width: min(420px, calc(100vw - 48px)); padding: 12px 14px; border-left-color: #ff6b5c; }
body[data-mode='songdo-open'] .open-activity-result[data-good='true'] { border-left-color: var(--open-mint); }
body[data-mode='songdo-open'] .open-activity-result-amount { color: var(--open-mint); font-size: 20px; font-weight: 700; }
body[data-mode='songdo-open'] .open-activity-result-notice { color: var(--open-muted); font-size: 11px; font-weight: 400; }
body[data-mode='songdo-open'] .open-activity-offer { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 10px; width: min(520px, calc(100vw - 48px)); padding: 14px; }
body[data-mode='songdo-open'] .open-activity-offer-text { margin: 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
body[data-mode='songdo-open'] .open-activity-offer-reward { grid-column: 2; margin: 0; color: var(--activity-color); font-size: 12px; }
body[data-mode='songdo-open'] .open-activity-offer-actions { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body[data-mode='songdo-open'] .open-activity-offer-actions button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--open-line); border-radius: 6px; background: #0c1a1f; color: var(--open-text); font: inherit; cursor: pointer; }
body[data-mode='songdo-open'] .open-activity-offer-actions .open-activity-accept { border-color: var(--open-mint); color: var(--open-mint); }
body[data-mode='songdo-open'] .open-activity-offer-actions button:hover { background: #1d363b; }
body[data-mode='songdo-open'] .open-activity-offer-actions button:focus-visible { outline: 2px solid var(--open-mint); outline-offset: 3px; }
body[data-mode='songdo-open'] .open-activity-offer-actions button:disabled { opacity: .55; cursor: wait; }
body[data-mode='songdo-open'] .open-activity-offer-timer { margin-left: auto; color: var(--open-muted); font-size: 12px; }
body[data-mode='songdo-open'] .open-activity-offer-bar { grid-column: 2; height: 2px; overflow: hidden; background: #aec7c833; }
body[data-mode='songdo-open'] .open-activity-offer-bar i { display: block; width: calc(100% * var(--open-activity-remain, 1)); height: 100%; background: var(--activity-color); }
body[data-mode='songdo-open'] .open-activity-countdown { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); padding: 10px 24px; border-radius: 8px; background: var(--open-panel-strong); color: var(--open-text); font: 700 42px/1.2 Pretendard, 'Noto Sans KR', system-ui; font-variant-numeric: tabular-nums; text-align: center; pointer-events: none; }
body[data-mode='songdo-open'] .open-activity-log { margin-top: 24px; border-top: 1px solid var(--open-line); padding-top: 20px; color: var(--open-text); font: 400 13px/1.7 Pretendard, 'Noto Sans KR', system-ui; font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] .open-activity-log h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
body[data-mode='songdo-open'] .open-activity-log p { margin: 0 0 8px; }
body[data-mode='songdo-open'] .open-activity-log ol,
body[data-mode='songdo-open'] .open-activity-log ul { padding-left: 20px; margin: 12px 0; }
body[data-mode='songdo-open'] .open-activity-log-recent { color: var(--open-muted); }
body[data-mode='songdo-open'] .open-activity-log-notices { margin-top: 16px; color: var(--open-muted); font-size: 11px; }
body[data-mode='songdo-open'] .open-activity-log ::selection { background: var(--open-mint); color: #0b171d; }
@starting-style {
  body[data-mode='songdo-open'] .open-activity-card,
  body[data-mode='songdo-open'] .open-activity-result,
  body[data-mode='songdo-open'] .open-activity-offer { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 760px), (pointer: coarse) {
  body[data-mode='songdo-open'] .open-activity-card,
  body[data-mode='songdo-open'] .open-activity-result { width: 100%; padding: 8px; font-size: 12px; }
  body[data-mode='songdo-open'] .open-activity-card { grid-template-columns: 24px minmax(0, 1fr); gap: 4px 6px; }
  body[data-mode='songdo-open'] .open-activity-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  body[data-mode='songdo-open'] .open-activity-amount { display: none; }
  body[data-mode='songdo-open'] .open-activity-cancel { display: none; }
  body[data-mode='songdo-open'] .open-activity-offer { width: min(520px, calc(100vw - 24px)); padding: 10px; }
  body[data-mode='songdo-open'] .open-activity-offer-text { font-size: 13px; }
  body[data-mode='songdo-open'] .open-activity-offer-actions { gap: 6px; }
  body[data-mode='songdo-open'] .open-activity-offer-actions button { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mode='songdo-open'] .open-activity-card,
  body[data-mode='songdo-open'] .open-activity-result,
  body[data-mode='songdo-open'] .open-activity-offer { transform: none; transition-property: opacity; }
}
/* open:activities end */
/* ---- open 병합 구분 ---- */
/* open:map start */
/* (★중요) 지도는 기존 청록 HUD와 같은 결을 쓰고 도로명판 하나만 대표 움직임을 갖는다. */
body[data-mode='songdo-open'] #location-hud[data-open-plate] { min-width: 0; padding: 9px 14px; border: 1.5px solid var(--open-text); border-radius: 4px; outline: 3px solid #1d3f7a; background: #1d3f7a; font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] #location-hud[data-open-plate] span { color: var(--open-text); font-size: 11px; letter-spacing: 0; }
body[data-mode='songdo-open'] #location-hud[data-open-plate] strong { margin-top: 3px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
body[data-mode='songdo-open'] #location-hud[data-open-plate-flip='a'] strong { animation: open-road-a 180ms ease-out; }
body[data-mode='songdo-open'] #location-hud[data-open-plate-flip='b'] strong { animation: open-road-b 180ms ease-out; }
body[data-mode='songdo-open'] #open-minimap { overflow: hidden; border: 1px solid var(--open-line); border-radius: 12px; background: #2c3d42; isolation: isolate; }
body[data-mode='songdo-open'] [data-open-minimap-canvas] { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
body[data-mode='songdo-open'] [data-open-minimap-canvas]:focus-visible { outline: 3px solid var(--open-mint); outline-offset: -4px; }
body[data-mode='songdo-open'] [data-open-minimap-north] { position: absolute; left: var(--north-x, 50%); top: var(--north-y, 6%); transform: translate(-50%, -50%); padding: 1px 3px; border-radius: 3px; background: var(--open-panel-strong); color: var(--open-text); font-size: 11px; font-weight: 700; pointer-events: none; }
body[data-mode='songdo-open'] #open-guide-strip { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--open-line); border-radius: 8px; background: var(--open-panel-strong); font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] #open-guide-strip p { margin: 0; color: var(--open-text); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
body[data-mode='songdo-open'] #open-guide-strip[data-open-guide-strong='true'] { border-color: var(--open-mint); }
body[data-mode='songdo-open'] #open-guide-strip[data-open-guide-strong='true'] p { color: var(--open-mint); font-weight: 700; }
body[data-mode='songdo-open'] #open-guide-strip button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--open-muted); font: inherit; cursor: pointer; }
body[data-mode='songdo-open'] #open-guide-strip button:hover { background: #294248; color: var(--open-text); }
body[data-mode='songdo-open'] #open-map { position: fixed; inset: 0; z-index: 30; background: #0b171d; color: var(--open-text); font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] [data-open-map-dialog] { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
body[data-mode='songdo-open'] [data-open-map-canvas] { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
body[data-mode='songdo-open'] [data-open-map-canvas]:active { cursor: grabbing; }
body[data-mode='songdo-open'] #open-map button { min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--open-line); border-radius: 6px; background: var(--open-panel-strong); color: var(--open-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; touch-action: manipulation; }
body[data-mode='songdo-open'] #open-map button:hover { border-color: var(--open-mint); background: #294248; }
body[data-mode='songdo-open'] #open-map button:disabled { opacity: .5; cursor: default; }
body[data-mode='songdo-open'] #open-map button[aria-pressed='true'] { border-color: var(--open-mint); color: var(--open-mint); }
body[data-mode='songdo-open'] [data-open-map-quickbar] { position: absolute; z-index: 2; top: max(20px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
body[data-mode='songdo-open'] [data-open-map-quickbar] button { pointer-events: auto; }
body[data-mode='songdo-open'] [data-open-map-places-panel] { position: absolute; z-index: 3; top: 88px; left: 24px; width: min(310px, calc(100% - 48px)); max-height: calc(100dvh - 260px); overflow-y: auto; padding: 16px; border: 1px solid var(--open-line); border-radius: 12px; background: var(--open-panel-strong); }
body[data-mode='songdo-open'] [data-open-map-places-panel] p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--open-muted); }
body[data-mode='songdo-open'] [data-open-map-destinations] { display: grid; gap: 8px; }
body[data-mode='songdo-open'] [data-open-map-close] { margin-left: auto; }
body[data-mode='songdo-open'] [data-open-map-card] { position: absolute; z-index: 2; top: max(88px, calc(env(safe-area-inset-top) + 70px)); right: max(24px, env(safe-area-inset-right)); width: min(300px, calc(100% - 48px)); max-height: calc(100dvh - 260px); overflow-y: auto; padding: 20px; border: 1px solid var(--open-line); border-radius: 12px; background: var(--open-panel-strong); scrollbar-color: var(--open-muted) #0b171d; }
body[data-mode='songdo-open'] [data-open-map-card] h2 { margin: 0 0 16px; color: var(--open-text); font-size: 19px; line-height: 1.4; }
body[data-mode='songdo-open'] [data-open-map-card] p { margin: 8px 0; color: var(--open-muted); font-size: 13px; line-height: 1.65; }
body[data-mode='songdo-open'] [data-open-map-card-actions] { display: grid; gap: 8px; margin-top: 20px; }
body[data-mode='songdo-open'] #open-map [data-open-map-set] { border-color: var(--open-mint); background: var(--open-mint); color: #0b171d; font-weight: 700; }
body[data-mode='songdo-open'] [data-open-map-legend] { position: absolute; z-index: 2; left: max(24px, env(safe-area-inset-left)); bottom: max(78px, calc(env(safe-area-inset-bottom) + 64px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: calc(100% - 210px); padding: 12px; border: 1px solid var(--open-line); border-radius: 8px; background: var(--open-panel-strong); }
body[data-mode='songdo-open'] [data-open-map-legend-item] { color: var(--open-text); font-size: 12px; }
body[data-mode='songdo-open'] [data-open-map-legend-item]::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; background: var(--marker-color, var(--open-mint)); border: 1px solid var(--open-text); border-radius: 2px; }
body[data-mode='songdo-open'] [data-open-map-legend-item='food'] { --marker-color: #e08a3c; }
body[data-mode='songdo-open'] [data-open-map-legend-item='work'] { --marker-color: #3c78d8; }
body[data-mode='songdo-open'] [data-open-map-legend-item='home'] { --marker-color: #48a875; }
body[data-mode='songdo-open'] [data-open-map-legend-item='my-car'] { --marker-color: #8fd4dc; }
body[data-mode='songdo-open'] [data-open-map-zoom] { position: absolute; z-index: 2; right: max(24px, env(safe-area-inset-right)); bottom: max(78px, calc(env(safe-area-inset-bottom) + 64px)); display: flex; gap: 8px; }
body[data-mode='songdo-open'] [data-open-map-notice] { position: absolute; z-index: 2; left: max(24px, env(safe-area-inset-left)); right: max(24px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; padding: 8px 12px; border-radius: 6px; background: var(--open-panel-strong); color: var(--open-muted); font-size: 11px; line-height: 1.55; }
@keyframes open-road-a { from { transform: perspective(240px) rotateX(-60deg); opacity: .4; } to { transform: perspective(240px) rotateX(0); opacity: 1; } }
@keyframes open-road-b { from { transform: perspective(240px) rotateX(-60deg); opacity: .4; } to { transform: perspective(240px) rotateX(0); opacity: 1; } }
@media (max-width: 760px), (pointer: coarse) {
  body[data-mode='songdo-open'] #location-hud[data-open-plate] { padding: 7px 9px; }
  body[data-mode='songdo-open'] #location-hud[data-open-plate] strong { font-size: 15px; }
  body[data-mode='songdo-open'] #location-hud[data-open-plate] span { font-size: 10px; }
  body[data-mode='songdo-open'] #open-guide-strip p { font-size: 12px; }
  body[data-mode='songdo-open'] [data-open-map-quickbar] { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  body[data-mode='songdo-open'] #open-map button { padding: 10px; font-size: 12px; }
  body[data-mode='songdo-open'] [data-open-map-card] { top: 122px; right: 12px; width: min(260px, calc(100% - 24px)); max-height: calc(100dvh - 390px); min-height: 130px; padding: 14px; }
  body[data-mode='songdo-open'] [data-open-map-card] h2 { margin-bottom: 10px; font-size: 17px; }
  body[data-mode='songdo-open'] [data-open-map-card-actions] { margin-top: 12px; }
  body[data-mode='songdo-open'] [data-open-map-legend] { left: 12px; right: 12px; bottom: max(116px, calc(env(safe-area-inset-bottom) + 104px)); max-width: none; gap: 6px 10px; padding: 8px; }
  body[data-mode='songdo-open'] [data-open-map-zoom] { right: 12px; bottom: max(240px, calc(env(safe-area-inset-bottom) + 228px)); }
  body[data-mode='songdo-open'] [data-open-map-notice] { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body[data-mode='songdo-open'] [data-open-map-card] { top: 70px; width: 250px; min-height: 0; max-height: calc(100dvh - 148px); }
  body[data-mode='songdo-open'] [data-open-map-legend] { right: auto; bottom: 74px; max-width: calc(100% - 300px); }
  body[data-mode='songdo-open'] [data-open-map-zoom] { left: 12px; right: auto; bottom: 192px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mode='songdo-open'] #location-hud[data-open-plate] strong { transform: none; animation: open-road-fade 120ms linear; }
  @keyframes open-road-fade { from { opacity: .55; } to { opacity: 1; } }
}
/* open:map end */
/* ---- open 병합 구분 ---- */
/* open:drive start */

body[data-mode="songdo-open"] #drive-hud { bottom: 95px; }
body[data-mode="songdo-open"] .open-drive { position: absolute; z-index: 5; right: 26px; bottom: 26px; width: min(300px, calc(100% - 52px)); color: #f5f7f6; font: 500 13px/1.5 Pretendard, 'Noto Sans KR', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
body[data-mode="songdo-open"] .open-drive-dash { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1px solid #aec7c855; border-radius: 10px; background: #0b171de8; }
body[data-mode="songdo-open"] .open-drive-car { display: grid; grid-template-columns: 7px 14px 7px; grid-template-rows: 6px 15px 6px; gap: 2px; width: 32px; }
body[data-mode="songdo-open"] .open-drive-zone { display: block; border: 1px solid #8fd4dc; border-radius: 2px; background: #8fd4dc33; }
body[data-mode="songdo-open"] .open-drive-zone[data-zone="front"] { grid-column: 2; grid-row: 1; }
body[data-mode="songdo-open"] .open-drive-zone[data-zone="left"] { grid-column: 1; grid-row: 2; }
body[data-mode="songdo-open"] .open-drive-zone[data-zone="right"] { grid-column: 3; grid-row: 2; }
body[data-mode="songdo-open"] .open-drive-zone[data-zone="rear"] { grid-column: 2; grid-row: 3; }
body[data-mode="songdo-open"] .open-drive-zone[data-level="1"] { border-color: #e9ca90; background: #e9ca9066; }
body[data-mode="songdo-open"] .open-drive-zone[data-level="2"] { border-color: #ff6b5c; background: #ff6b5c88; }
body[data-mode="songdo-open"] .open-drive-condition { flex: 1; white-space: nowrap; }
body[data-mode="songdo-open"] .open-drive-headlight { color: #8fd4dc; font-size: 18px; }
body[data-mode="songdo-open"] .open-drive-flash { flex-basis: 100%; min-height: 18px; color: #b7c9c8; font-size: 12px; }
/* (★중요) Windows PC 속도계와 겹치지 않도록 정비 패널에 24px 여유를 더한다. */
body[data-mode="songdo-open"] .open-drive-garage { position: absolute; right: 0; bottom: calc(100% + 178px); width: min(330px, calc(100vw - 52px)); padding: 14px; display: grid; gap: 7px; border: 1px solid #aec7c855; border-radius: 10px; background: #0b171de8; }
body[data-mode="songdo-open"] .open-drive-garage-title { color: #72d6b8; font-size: 13px; }
body[data-mode="songdo-open"] .open-drive-garage-progress { width: 100%; height: 6px; accent-color: #72d6b8; }
body[data-mode="songdo-open"] .open-drive-garage-note { color: #b7c9c8; font-size: 11px; line-height: 1.6; }
body[data-mode="songdo-open"] .open-drive-menu { padding: 20px 0; border-top: 1px solid #aec7c855; }
body[data-mode="songdo-open"] .open-drive-menu-title { margin: 0 0 16px; font-size: 16px; }
body[data-mode="songdo-open"] .open-drive-choice { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; border: 0; }
body[data-mode="songdo-open"] .open-drive-choice legend { margin-bottom: 8px; color: #b7c9c8; font-size: 12px; }
body[data-mode="songdo-open"] .open-drive-option { min-height: 44px; padding: 10px 14px; border: 1px solid #aec7c855; border-radius: 6px; background: #0b171d; color: #f5f7f6; font: inherit; cursor: pointer; }
body[data-mode="songdo-open"] .open-drive-option:hover { background: #203a3a; }
body[data-mode="songdo-open"] .open-drive-option[aria-pressed="true"] { border-color: #72d6b8; color: #72d6b8; background: #18332f; }
body[data-mode="songdo-open"] .open-drive-option:focus-visible { outline: 2px solid #72d6b8; outline-offset: 3px; }
body[data-mode="songdo-open"] .open-drive-option:disabled { opacity: .55; cursor: default; }
body[data-mode="songdo-open"] .open-drive-notice { max-width: 70ch; margin: 12px 0 0; color: #b7c9c8; font-size: 11px; line-height: 1.65; }
body[data-mode="songdo-open"] .open-drive ::selection, body[data-mode="songdo-open"] .open-drive-menu ::selection { background: #72d6b8; color: #0b171d; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  body[data-mode="songdo-open"] #drive-hud { bottom: calc(var(--hud-bottom, 15px) + 70px); }
  body[data-mode="songdo-open"] .open-drive { right: var(--hud-right, 12px); bottom: var(--hud-bottom, 15px); width: min(270px, calc(100% - var(--hud-left, 12px) - var(--hud-right, 12px))); }
  body[data-mode="songdo-open"] .open-drive-garage { width: min(300px, calc(100vw - 24px)); bottom: calc(100% + 154px); }
  body[data-mode="songdo-open"] .open-drive-option { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-mode="songdo-open"] .open-drive-flash:not([hidden]) { animation: open-drive-enter 160ms ease-out; }
  @keyframes open-drive-enter { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
/* open:drive end */
/* ---- open 병합 구분 ---- */
/* open:residents start */
/* (★중요) 주민 표식은 장면을 가리지 않는 청록 유리판과 모양·글자로 구분한다. */
body[data-mode='songdo-open'] :is(.open-resident-tag, .open-resident-bubble) {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 280px;
  padding: 7px 11px;
  border: 1px solid rgba(183, 201, 200, .22);
  border-radius: 16px;
  background: var(--open-panel);
  color: var(--open-text);
  font: 500 12px/1.4 Pretendard, 'Noto Sans KR', system-ui, sans-serif;
  pointer-events: none;
}
body[data-mode='songdo-open'] .open-resident-tag { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
body[data-mode='songdo-open'] .open-resident-tag[hidden],
body[data-mode='songdo-open'] .open-resident-bubble[hidden] { display: none; }
body[data-mode='songdo-open'] .open-resident-tag__mark { color: var(--open-mint); }
body[data-mode='songdo-open'] .open-resident-tag__line { overflow: hidden; text-overflow: ellipsis; color: var(--open-muted); font-size: 11px; }
body[data-mode='songdo-open'] .open-resident-tag__icon { min-width: 20px; padding: 1px 4px; border-radius: 5px; background: #b39bf4; color: #102025; text-align: center; }
body[data-mode='songdo-open'] .open-resident-tag__icon[data-activity='taxi'] { background: #e9c86b; }
body[data-mode='songdo-open'] .open-resident-tag__icon[data-activity='delivery'] { background: #87bfe9; }
body[data-mode='songdo-open'] .open-resident-tag__icon[data-activity='race'] { background: #efac7d; }
body[data-mode='songdo-open'] .open-resident-bubble { border-radius: 10px; font-size: 13px; white-space: normal; }
body[data-mode='songdo-open'] .open-resident-bubble::after { content: ''; position: absolute; left: calc(50% - 4px); bottom: -5px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--open-panel); border-right: 1px solid rgba(183, 201, 200, .22); border-bottom: 1px solid rgba(183, 201, 200, .22); }
body[data-mode='songdo-open'] .open-resident-bubble[data-protest='true'] { border-color: #e4a86d; }
body[data-mode='songdo-open'] .open-resident-bubble[data-protest='true']::after { border-color: #e4a86d; }
body[data-mode='songdo-open'] .open-talk {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 48px));
  max-height: 30vh;
  padding: 14px 16px 10px;
  border: 1px solid rgba(114, 214, 184, .4);
  border-radius: 14px;
  background: var(--open-panel-strong);
  color: var(--open-text);
  font-family: Pretendard, 'Noto Sans KR', system-ui, sans-serif;
  pointer-events: auto;
  animation: open-resident-enter 160ms ease-out;
}
body[data-mode='songdo-open'] .open-talk[hidden] { display: none; }
body[data-mode='songdo-open'] .open-talk__head { display: flex; justify-content: flex-start; align-items: baseline; gap: 8px; flex-shrink: 0; padding: 0; border: 0; }
body[data-mode='songdo-open'] .open-talk__mark { color: var(--open-mint); }
body[data-mode='songdo-open'] .open-talk__name { font-size: 14px; font-weight: 700; }
body[data-mode='songdo-open'] .open-talk__tier { margin-left: auto; color: var(--open-muted); font-size: 12px; }
body[data-mode='songdo-open'] .open-talk__line { flex-shrink: 0; margin: 10px 0; font-size: 16px; font-weight: 500; line-height: 1.45; }
body[data-mode='songdo-open'] .open-talk__choices { min-height: 44px; overflow-y: auto; padding: 0; margin: 0; list-style: none; scrollbar-color: var(--open-muted) transparent; }
body[data-mode='songdo-open'] .open-talk__choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(183, 201, 200, .14); border-radius: 0; background: transparent; color: var(--open-text); text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
body[data-mode='songdo-open'] .open-talk__choice:hover { background: rgba(114, 214, 184, .1); }
body[data-mode='songdo-open'] .open-talk__key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border: 1px solid rgba(183, 201, 200, .4); border-radius: 5px; color: var(--open-muted); font: 500 12px/1 system-ui, sans-serif; }
body[data-mode='songdo-open'] .open-talk__foot { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: 4px 0 0; }
body[data-mode='songdo-open'] .open-talk__leave { display: flex; align-items: center; gap: 8px; min-width: 88px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--open-muted); font-size: 12px; cursor: pointer; }
body[data-mode='songdo-open'] .open-talk__notice { color: var(--open-muted); font-size: 11px; line-height: 1.4; }
body[data-mode='songdo-open'] .open-talk-hint { padding: 10px 16px; border: 1px solid rgba(183, 201, 200, .22); border-radius: 12px; background: var(--open-panel); font-size: 13px; }
body[data-mode='songdo-open'] .open-neighbors { margin-block: 24px; padding-top: 16px; border-top: 1px solid rgba(183, 201, 200, .22); }
body[data-mode='songdo-open'] .open-neighbors__title { margin: 0 0 12px; font-size: 18px; }
body[data-mode='songdo-open'] .open-neighbors__list { display: grid; gap: 4px; max-height: 260px; overflow: auto; padding: 0; margin: 0 0 12px; list-style: none; }
body[data-mode='songdo-open'] .open-neighbors__item { display: grid; grid-template-columns: 18px minmax(100px, 1fr) auto 36px; align-items: center; gap: 6px 10px; padding: 9px 0; border-bottom: 1px solid rgba(183, 201, 200, .12); font-size: 13px; }
body[data-mode='songdo-open'] .open-neighbors__mark { color: var(--open-mint); }
body[data-mode='songdo-open'] .open-neighbors__tier { color: var(--open-muted); font-size: 12px; }
body[data-mode='songdo-open'] .open-neighbors__value { text-align: right; font-variant-numeric: tabular-nums; }
body[data-mode='songdo-open'] .open-neighbors__memory { grid-column: 2 / -1; color: var(--open-muted); font-size: 11px; }
body[data-mode='songdo-open'] :is(.open-neighbors__empty, .open-neighbors__notice) { color: var(--open-muted); font-size: 11px; }
@keyframes open-resident-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px), (pointer: coarse) {
  body[data-mode='songdo-open'] .open-talk { width: min(560px, calc(100vw - 24px)); padding: 10px 12px 6px; }
  body[data-mode='songdo-open'] .open-talk__foot { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mode='songdo-open'] .open-talk { animation: none; }
}
/* open:residents end */