/* 7Eyes EARTH — B6 다크 전용 정리 (2026-10-19 사용자 요청)
 *  · 라이트/다크 전환 없앰 → 항상 다크
 *  · 브랜드 색: SISTECH 진청색 #004282 (로고 사각형 색) · 라임 #A6CE39 (로고 S)
 *  · 왼쪽 상단: SISTECH 사각 로고 + 그 오른쪽 "7Eyes EARTH"
 *  · 왼쪽 세로 레일: 폭 64px, 화면 왼쪽 벽에 거의 붙임(6px)
 *  · 나침반: 빨강(북)·흰색(남) 화살표 바늘
 * app.css / tokens.css 뒤에 읽는다. 기존 파일은 손대지 않고 덮어쓴다.
 */
:root, [data-theme="dark"], [data-theme="light"] {
  color-scheme: dark;
  --c-blue:        #004282;   /* SISTECH 진청색 */
  --c-navy:        #00254A;
  --c-lime:        #A6CE39;   /* SISTECH 라임 */
  --c-orange:      #FF8A4C;

  --gray-1: #041A33;
  --gray-2: #0B2F58;
  --gray-3: #184472;
  --gray-4: #A9B8CF;

  --bg-map:        #04182E;
  --surface:       rgb(3 28 58 / .94);
  --surface-soft:  rgb(3 28 58 / .90);
  --surface-solid: #041A33;
  --line:          #123A62;
  --outline:       #184472;
  --text:          #E6EDF7;
  --text-sub:      #A9B8CF;
  --text-faint:    #8FA3C0;
  --text-lime:     #B7DB55;
  --text-orange:   #FF9A62;
  --tint-orange:   #3A1E12;

  --on-blue:   #FFFFFF;
  --on-lime:   #00254A;
  --on-navy:   #FFFFFF;
  --chip-cur:  #1A5EA8;

  --shadow-btn:  0 2px 8px rgb(0 0 0 / .4);
  --shadow-bar:  0 2px 10px rgb(0 0 0 / .4);
  --shadow-card: 0 2px 12px rgb(0 0 0 / .5);

  --rail-w: 64px;
  --rail-left: 6px;
  --brand-h: 44px;
}

/* 라이트/다크 스위치 제거 */
.topright .theme { display: none !important; }

/* 왼쪽 상단 브랜드: 사각 로고 + 7Eyes EARTH (모바일용 .mbrand를 항상 보이게) */
.mbrand {
  display: flex !important; position: fixed; z-index: 12; left: var(--rail-left); top: 6px;
  height: var(--brand-h); align-items: center; gap: 10px; padding: 0 12px 0 6px;
  border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-bar);
  text-decoration: none; color: var(--text); font-family: var(--font-num); font-weight: 800; font-size: 16px; letter-spacing: .2px;
}
.mbrand img { height: 30px; width: auto; display: block; border-radius: 5px; }

/* 왼쪽 레일: 좁게, 벽에 붙여, 브랜드 아래부터 */
.rail { left: var(--rail-left); top: calc(6px + var(--brand-h) + 6px); bottom: 6px; width: var(--rail-w); padding: 8px 0 8px; gap: 2px; border-radius: 10px; }
.rail .brand { display: none; }
.rail .ri { width: 56px; min-height: 54px; font-size: 11px; gap: 3px; border-radius: 10px; padding: 4px 0; }
.rail .ri[aria-pressed="true"] { background: var(--c-lime); color: var(--on-lime); }
.rail .quality { font-size: 10px; }

/* 레일 옆 패널 · 상태줄 위치 */
.panel { left: calc(var(--rail-left) + var(--rail-w) + 8px); top: calc(6px + var(--brand-h) + 6px); max-height: calc(100vh - 6px - var(--brand-h) - 12px - 48px); }
.status { left: calc(var(--rail-left) + var(--rail-w) + 8px); }
body.panel-open .dock, body.panel-open .dockpop, body.panel-open .mbar, body.panel-open #cadLegend.legacy-card {
  left: calc((var(--rail-left) + var(--rail-w) + 8px + var(--panel-w) + 100vw) / 2) !important;
}
#demoTop { left: calc(var(--rail-left) + var(--rail-w) + 8px); }

/* 다크에서 블루 글씨 대비 유지 */
.sec b, .why b, .rail .ri:hover, .btn:hover, .mapctl button:hover, .dock button:hover .ico { color: var(--text); }
.brand, .mbrand { color: var(--text); }
.theme button[aria-pressed="true"], .btn[aria-pressed="true"] { background: var(--c-blue); color: var(--on-blue); }

/* 나침반: 빨강(북)·흰색(남) 바늘 */
.compass { color: var(--text); background: var(--surface); border: 1px solid var(--outline); }
.compass .ico { width: 34px; height: 34px; transition: transform 80ms linear; }
.compass .ico .n { fill: #E8322B; }
.compass .ico .s { fill: #F4F7FB; }
.compass .ico .ring { fill: none; stroke: var(--outline); stroke-width: 1; }
.compass .ico .dot { fill: var(--surface-solid); }

/* 주요 건물 이름 라벨 (카카오맵 모양) — js/poi-labels.js
 * 종류별 색 동그라미 아이콘 + 그 아래 같은 색 이름(흰 테두리 글씨) · 지도 바탕 위 글씨라 카카오맵 색을 그대로 씀 */
#poiLabels { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
#poiLabels .pl {
  --k: #8A6A45; --kt: #5C4630;
  position: absolute; left: 0; top: 0; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: 700 12.5px/1.18 var(--font); letter-spacing: -.3px; text-align: center; white-space: nowrap; color: var(--kt);
}
#poiLabels .pl .pi {
  width: 18px; height: 18px; border-radius: 50%; background: var(--k); display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgb(0 0 0 / .45);
}
#poiLabels .pl .pi svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#poiLabels .pl .pn {
  text-shadow: -1.5px 0 #fff, 1.5px 0 #fff, 0 -1.5px #fff, 0 1.5px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff, 1px 1px #fff, 0 0 4px rgb(255 255 255 / .9);
}
/* 종류별 색 (카카오맵) — 아이콘 바탕 --k · 글씨 --kt */
#poiLabels .pl.k-apt      { --k: #A07A4B; --kt: #5C4630; }
#poiLabels .pl.k-subway   { --k: #3A4A63; --kt: #1F2A3C; }
#poiLabels .pl.k-subway .pn { font-size: 13.5px; }
#poiLabels .pl.k-park     { --k: #3FA34D; --kt: #2B7A36; }
#poiLabels .pl.k-hospital { --k: #E5484D; --kt: #D03A3F; }
#poiLabels .pl.k-mart     { --k: #F08A24; --kt: #E0731A; }
#poiLabels .pl.k-public   { --k: #4B5563; --kt: #2E3440; }
#poiLabels .pl.k-police   { --k: #5E6B7D; --kt: #3B4655; }
#poiLabels .pl.k-fire     { --k: #6B7280; --kt: #3B4655; }
#poiLabels .pl.k-school   { --k: #3B7DD8; --kt: #2A5FA8; }
#poiLabels .pl.k-culture  { --k: #A35BC9; --kt: #8A43AE; }
#poiLabels .pl.k-building { --k: #6E7B91; --kt: #3B4655; }
#poiLabels .pl.far { opacity: .85; }
#poiLabels .pl.far .pn { font-size: 11.5px; }
body.demo #poiLabels { display: none; }

@media (max-width: 760px) {
  .mbrand { top: var(--edge); left: var(--edge); height: 36px; font-size: 13px; }
  .mbrand img { height: 22px; }
  .rail { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 64px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px)); border-radius: 14px 14px 0 0; }
  .panel { left: var(--edge); right: var(--edge); top: auto; }
  .status { left: var(--edge); }
  #poiLabels .pl { font-size: 11px; }
  #poiLabels .pl .pi { width: 16px; height: 16px; }
}