/* 플레이어 화면과 필수 생활 정보를 데스크톱·모바일에서 함께 표시한다. */
:root { font-family: system-ui, sans-serif; color: #223c32; background: #f3f4ed; }
* { box-sizing: border-box; } body { margin: 0; } a { color: inherit; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid #d5dccf; }
.eyebrow { font-size: 11px; letter-spacing: .08em; color: #637568; } h1 { font-size: 22px; margin: 5px 0 0; } h2 { font-size: 27px; margin: 7px 0; } h3 { font-size: 14px; margin: 22px 0 10px; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: calc(100dvh - 90px); }
.world-panel { position: relative; min-width: 0; min-height: 520px; } #scene { position: absolute; inset: 0; } canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.world-note { position: absolute; top: 20px; left: 20px; padding: 12px 16px; background: #f6f5e8eb; pointer-events: none; font-size: 12px; }
.world-note strong, .world-note span { display: block; } .world-note span { margin-top: 5px; }
.camera-controls { position: absolute; bottom: 20px; left: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; right: 20px; } .camera-controls span { font-size: 11px; background: #f5f5e8dd; padding: 7px; }
.life-panel { padding: 24px; border-left: 1px solid #d5dccf; background: #fafaf5; } #action { color: #748170; font-size: 13px; }
.facts { margin: 20px 0; } .facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e1e5db; }
dt { font-size: 12px; color: #67796d; } dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.need { display: flex; justify-content: space-between; font-size: 12px; margin-top: 12px; } meter { width: 100%; height: 16px; }
button { font: inherit; font-size: 12px; color: inherit; background: #fff; border: 1px solid #b7c6b6; border-radius: 5px; padding: 10px 12px; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; } button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 3px solid #be912c; outline-offset: 2px; }
.destinations, .actions { display: flex; flex-wrap: wrap; gap: 7px; } .destinations button[aria-current="location"] { background: #dfe8d7; }
/* (★중요) 달리기 선택과 엔진에서 확인한 속도를 구분해 표시한다. */
.pace-control { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-size: 12px; }
#run[aria-pressed="true"] { background: #254d3d; color: #fff; }
.hint, details { font-size: 11px; color: #6f7e72; line-height: 1.7; } #status { padding: 12px; background: #e4eddd; font-size: 12px; line-height: 1.7; } #status[data-error="true"] { background: #f3e1d7; } details { margin-top: 20px; } summary { cursor: pointer; }
@media (max-width: 760px) { .topbar { padding: 14px 16px; } h1 { font-size: 18px; } main { display: block; } .world-panel { height: 52dvh; min-height: 340px; } .life-panel { border-left: 0; padding: 20px; } .world-note { left: 12px; top: 12px; max-width: calc(100% - 24px); } .camera-controls { bottom: 12px; left: 12px; } .facts { margin: 12px 0; } }