/* Scoped 3D controls; the 2D page keeps its own appearance. */
:root { --g3-bg: rgba(8, 22, 30, 0.94); --g3-line: #304653; --g3-text: #c3d2da; --g3-accent: #00d8f5; }
#right-tools {
  position: absolute; top: 48px; right: 10px; z-index: 10;
  width: min(300px, calc(100% - 20px)); max-height: calc(100% - 68px);
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #45616e transparent;
}
#right-tools #panel { position: static; width: 100%; max-height: none; flex-shrink: 0; }
/* 나침판: 홈 버튼 왼쪽, #panel-toggle과 같은 크기·테마 */
.g3-compass {
  position: absolute; top: 10px; right: 48px; z-index: 11;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 3px;
  border: 1px solid #30404b; border-radius: 5px;
  background: rgba(8, 22, 30, 0.88); color: #aab8c1; cursor: pointer;
}
.g3-compass:hover { color: var(--g3-accent); border-color: #00bcd9; }
.g3-compass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.g3-compass svg { display: block; width: 24px; height: 24px; }
.g3-panel, .g3-route-toggle {
  box-sizing: border-box; color: var(--g3-text); background: var(--g3-bg);
  border: 1px solid var(--g3-line); border-radius: 8px;
  font: 13px/1.5 "Malgun Gothic", sans-serif; box-shadow: 0 5px 20px #0003;
}
.g3-panel { padding: 12px; }
.g3-panel[hidden], #right-tools [hidden] { display: none; }
.g3-panel * { box-sizing: border-box; }
.g3-panel button, .g3-panel input, .g3-panel select { font: inherit; }
.g3-panel button, .g3-panel select, .g3-panel input {
  border: 1px solid var(--g3-line); border-radius: 5px; background: #142732; color: var(--g3-text); padding: 6px 8px;
}
.g3-panel button { cursor: pointer; }
.g3-panel button:hover:not(:disabled), .g3-panel summary:hover { color: var(--g3-accent); border-color: #00bcd9; }
.g3-panel :focus-visible, .g3-route-toggle:focus-visible { outline: 2px solid var(--g3-accent); outline-offset: 2px; }
.g3-panel input::placeholder { color: #8297a3; }
.g3-panel input[type=checkbox] { accent-color: #00bcd9; width: 16px; height: 16px; }
.g3-panel button:disabled { opacity: 0.45; cursor: not-allowed; }
.g3-panel .g3-primary { color: #06e1f7; border-color: #00a9c4; background: #064354; }
.g3-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.g3-header h2 { margin: 0; font-size: 14px; color: #e2f1f7; }
.g3-header button { border: 0; padding: 2px 6px; background: transparent; }
.g3-hint { font-size: 11px; color: #91a8b5; margin: 0 0 10px; }
.g3-status { margin: 8px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 12px; }
.g3-status:empty { display: none; }
.g3-status[data-error=true] { color: #ffb1a9; }
.g3-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.g3-wide { width: 100%; margin-top: 6px; }
.g3-route-toggle { flex-shrink: 0; padding: 8px 12px; display: flex; justify-content: space-between; cursor: pointer; }
.g3-route-toggle[aria-expanded=true] { color: var(--g3-accent); border-color: #00a9c4; }
#g3-route-panel { flex-shrink: 0; }
.g3-point-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 28px; gap: 5px; margin-bottom: 6px; align-items: center; }
.g3-point-row input { min-width: 0; width: 100%; font-size: 12px; padding: 7px 5px; }
.g3-point-row button { padding: 6px 2px; }
.g3-point-row.selecting { outline: 1px solid var(--g3-accent); outline-offset: 2px; border-radius: 4px; }
.g3-point-row[data-kind=start] > button:first-child { color: #77e4c6; }
.g3-point-row[data-kind=end] > button:first-child { color: #ffb4ba; }
.g3-point-row[data-kind=via] > button:first-child { color: #ffd581; }
#g3-options { border-top: 1px solid var(--g3-line); margin-top: 10px; padding-top: 8px; }
#g3-options summary { cursor: pointer; color: #9cb7c5; }
.g3-option { display: flex; align-items: center; gap: 6px; margin-top: 7px; justify-content: space-between; }
.g3-option select { max-width: 170px; }
#g3-height { width: 65px; }
#g3-search { position: absolute; top: 10px; left: 10px; width: min(320px, calc(100% - 20px)); z-index: 20; }
.g3-search-row { display: flex; gap: 5px; }
#g3-query { width: 100%; min-width: 0; }
.g3-search-row button { flex-shrink: 0; }
.g3-results { overflow-y: auto; max-height: min(440px, 55vh); scrollbar-width: thin; scrollbar-color: #45616e transparent; }
.g3-result { border-top: 1px solid var(--g3-line); padding: 10px 0; }
.g3-result:first-child { margin-top: 8px; }
.g3-panel .g3-result-title { display: block; text-align: left; width: 100%; padding: 0; border: 0; background: transparent; color: #e4f1f7; font-weight: bold; }
.g3-result p { margin: 4px 0; color: #9bb1bd; font-size: 12px; overflow-wrap: anywhere; }
.g3-result .g3-actions { margin-top: 6px; }
#g3-context { position: fixed; z-index: 50; padding: 5px; min-width: 160px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow-y: auto; }
#g3-context button { display: block; text-align: left; width: 100%; background: transparent; border: 0; padding: 8px 12px; }
#g3-context button:hover { background: #144253; }
#g3-link-panel { position: fixed; top: 90px; left: min(345px, 35vw); z-index: 30; width: min(350px, calc(100% - 20px)); max-height: calc(100% - 110px); display: flex; flex-direction: column; }
#g3-link-panel[hidden] { display: none; }
.g3-link-fields { display: flex; gap: 6px; align-items: end; flex-shrink: 0; }
.g3-link-fields label { flex: 1; min-width: 0; font-size: 11px; }
.g3-link-fields input { display: block; width: 100%; margin-top: 4px; }
#g3-link-results { min-height: 0; flex: 1; }
.g3-link-card { border: 1px solid var(--g3-line); border-radius: 5px; padding: 8px; margin-top: 8px; }
.g3-link-card.active { border-color: var(--g3-accent); background: #073844; }
.g3-link-card dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); font-size: 11px; margin: 8px 0; gap: 3px; }
.g3-link-card dt { color: #8fa8b5; }
.g3-link-card dd { margin: 0; overflow-wrap: anywhere; }
.g3-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
  #g3-search { top: 48px; width: calc(100% - 20px); }
  #right-tools { top: 110px; max-height: calc(100% - 130px); }
  body.g3-search-open #right-tools { display: none; }
  #g3-link-panel { top: 110px; left: 10px; width: calc(100% - 20px); max-height: calc(100% - 130px); }
  body.g3-link-open #right-tools { display: none; }
  .g3-results { max-height: calc(100vh - 225px); }
}

#g3-selection-tip { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 20px); white-space: nowrap; }
#g3-selection-tip[hidden] { display: none; }