/* ── Pipeline Database page styles ──────────────────────────────── */

/* PLSS grid — filter adjust */
.plss-layer {
  filter: grayscale(0.85) opacity(0.55);
}

/* ── Sub navigation ─────────────────────────────────────────────── */
.db-subnav {
  height:      var(--subnav-h);
  background:  var(--bg1);
  border-bottom: 1px solid var(--bdr);
  display:     flex;
  align-items: center;
  padding:     0 14px;
  gap:         3px;
  flex-shrink: 0;
  z-index:     200;
}

.snav-btn {
  background:  none;
  border:      1px solid transparent;
  border-radius: 6px;
  color:       var(--t1);
  font-family: var(--font-sans);
  font-size:   11px;
  font-weight: 500;
  padding:     5px 13px;
  cursor:      pointer;
  transition:  all .13s;
  white-space: nowrap;
}
.snav-btn:hover { background: var(--bg2); color: var(--t0); }
.snav-btn.active {
  background:    var(--bg3);
  border-color:  var(--acc);
  color:         var(--acc);
}
.snav-ext-link {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      11px;
  font-weight:    600;
  color:          var(--t0);
  background:     var(--bg2);
  text-decoration: none;
  padding:        4px 10px 4px 12px;
  border:         1px solid rgba(255,255,255,.13);
  border-radius:  5px;
  white-space:    nowrap;
  letter-spacing: .02em;
  transition:     background .15s, border-color .15s, color .15s;
}
.snav-ext-link:hover {
  background:   var(--bg3);
  border-color: var(--acc);
  color:        var(--acc);
}
.snav-ext-link svg { flex-shrink: 0; }

/* ── Stat pills ─────────────────────────────────────────────────── */
.stat-pill {
  display:     flex;
  align-items: baseline;
  gap:         5px;
}
.sp-val {
  font-family:  var(--font-mono);
  font-size:    13px;
  font-weight:  600;
  color:        var(--acc);
}
.sp-lbl {
  font-size:    10px;
  color:        var(--t2);
  font-family:  var(--font-mono);
}

/* ── Tab panels ─────────────────────────────────────────────────── */
.tab-panel {
  display: none;
  flex:    1;
  overflow: hidden;
}
.tab-panel.active { display: flex; flex-direction: column; }

.db-body {
  flex:     1;
  display:  flex;
  overflow: hidden;
}

/* ── Left sidebar ───────────────────────────────────────────────── */
.db-left {
  width:       260px;
  background:  var(--bg1);
  border-right: 1px solid var(--bdr);
  display:     flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y:  auto;
}
.db-left::-webkit-scrollbar       { width: 4px; }
.db-left::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

.panel-hdr {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        10px 11px 6px;
  border-bottom:  1px solid var(--bdr);
  flex-shrink:    0;
}

/* ── Main content ───────────────────────────────────────────────── */
.db-main {
  flex:      1;
  overflow-y: auto;
  padding:   20px 24px;
  background: var(--bg0);
}
.db-main::-webkit-scrollbar       { width: 5px; }
.db-main::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* ── Import placeholder ─────────────────────────────────────────── */
.import-placeholder {
  height:      100%;
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:         10px;
  color:       var(--t2);
}
.imp-icon  { font-size: 42px; opacity: .35; }
.imp-title { font-size: 14px; font-weight: 600; color: var(--t1); }
.imp-sub   { font-size: 11px; color: var(--t2); text-align: center; max-width: 280px; line-height: 1.6; }

/* ── Project list ───────────────────────────────────────────────── */
.project-list {
  flex:    1;
  overflow-y: auto;
  padding: 6px;
}
.project-item {
  padding:       10px 10px;
  border-radius: 6px;
  cursor:        pointer;
  transition:    background .12s;
  margin-bottom: 2px;
  border:        1px solid transparent;
}
.project-item:hover  { background: var(--bg2); }
.project-item.active { background: var(--bg3); border-color: var(--acc); }

/* 컴팩트 한 줄 레이아웃 */
.project-item-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     5px 8px;
}
.project-item-row .pi-name {
  flex:          1 1 auto;
  margin-bottom: 0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.project-item-row .pi-meta {
  flex-shrink: 0;
  margin:      0;
}
.pi-del {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       2px 4px;
  color:         var(--t2);
  opacity:       0;
  transition:    opacity .12s, color .12s;
  flex-shrink:   0;
  display:       inline-flex;
  align-items:   center;
}
.project-item:hover .pi-del { opacity: 1; }
.pi-del:hover { color: var(--err); }

.pi-name {
  font-size:   12px;
  font-weight: 600;
  color:       var(--t0);
  margin-bottom: 3px;
}
.pi-meta {
  font-size:   10px;
  color:       var(--t2);
  font-family: var(--font-mono);
}

/* ── Filter boxes ───────────────────────────────────────────────── */
.filter-box {
  padding:       10px 11px;
  border-bottom: 1px solid var(--bdr);
}

/* ── Form elements ──────────────────────────────────────────────── */
.form-label {
  display:       block;
  font-size:     10px;
  color:         var(--t2);
  font-family:   var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.form-hint {
  font-size:   10px;
  color:       var(--t2);
  margin-top:  5px;
  line-height: 1.5;
}
.form-select {
  width:        100%;
  background:   var(--bg2);
  border:       1px solid var(--bdr);
  border-radius: 5px;
  color:        var(--t0);
  font-family:  var(--font-sans);
  font-size:    12px;
  padding:      6px 9px;
  outline:      none;
  transition:   border-color .15s;
  cursor:       pointer;
}
.form-select:focus { border-color: var(--acc); }

.form-input {
  width:        100%;
  background:   var(--bg2);
  border:       1px solid var(--bdr);
  border-radius: 5px;
  color:        var(--t0);
  font-family:  var(--font-sans);
  font-size:    12px;
  padding:      6px 9px;
  outline:      none;
  transition:   border-color .15s;
}
.form-input:focus { border-color: var(--acc); }
.form-input::placeholder { color: var(--t2); }

.form-row {
  margin-bottom: 16px;
}
.form-row label.form-label { margin-bottom: 5px; }

/* ── Table ──────────────────────────────────────────────────────── */
.tbl-toolbar {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 12px;
  border-bottom: 1px solid var(--bdr);
  background:  var(--bg1);
  flex-shrink: 0;
}
.sel-count {
  font-size:   11px;
  color:       var(--t2);
  font-family: var(--font-mono);
  min-width:   70px;
}

.tbl-wrap {
  flex:        1;
  overflow:    auto;
}
.data-tbl {
  width:           100%;
  border-collapse: collapse;
  font-size:       11px;
}
.data-tbl th {
  position:      sticky;
  top:           0;
  background:    var(--bg2);
  color:         var(--t2);
  font-family:   var(--font-mono);
  font-size:     9px;
  font-weight:   600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding:       8px 10px;
  text-align:    left;
  border-bottom: 1px solid var(--bdr);
  white-space:   nowrap;
  z-index:       5;
}
.data-tbl td {
  padding:       7px 10px;
  border-bottom: 1px solid var(--bdr);
  color:         var(--t0);
  vertical-align: middle;
  white-space:   nowrap;
}
.data-tbl tr:hover td { background: var(--bg2); }
.data-tbl tr.selected td { background: rgba(74,158,255,.08); }

.tbl-empty {
  text-align:  center;
  color:       var(--t2);
  font-family: var(--font-mono);
  font-size:   11px;
  padding:     40px 0;
}

/* ── Color swatch in table ──────────────────────────────────────── */
.color-swatch {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
}
.swatch-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  border:        1.5px solid rgba(255,255,255,.15);
  flex-shrink:   0;
}
.swatch-hex {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--t2);
}

/* ── Badge ──────────────────────────────────────────────────────── */
.badge {
  display:      inline-block;
  font-size:    9px;
  font-family:  var(--font-mono);
  padding:      2px 6px;
  border-radius: 4px;
  background:   var(--bg3);
  color:        var(--t2);
}
.badge-ok    { background: rgba(61,214,140,.15); color: var(--ok); }
.badge-warn  { background: rgba(255,107,53,.15); color: var(--warn); }
.badge-acc   { background: rgba(74,158,255,.15); color: var(--acc); }

/* ── Action buttons in table ────────────────────────────────────── */
.tbl-actions {
  display:  flex;
  gap:      4px;
}
.tbl-btn {
  background:   none;
  border:       1px solid var(--bdr);
  border-radius: 4px;
  color:        var(--t2);
  padding:      2px 7px;
  font-size:    10px;
  cursor:       pointer;
  transition:   all .12s;
  font-family:  var(--font-mono);
}
.tbl-btn:hover { border-color: var(--acc); color: var(--acc); }
.tbl-btn.danger:hover { border-color: var(--err); color: var(--err); }

/* ── Style detail / edit form ───────────────────────────────────── */
.style-preview-bar {
  height:        12px;
  border-radius: 6px;
  margin-bottom: 20px;
  transition:    background .2s;
}
.color-input-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.color-input-row input[type=color] {
  width:         32px;
  height:        32px;
  border:        1px solid var(--bdr2);
  border-radius: 5px;
  cursor:        pointer;
  padding:       2px;
  background:    var(--bg2);
  flex-shrink:   0;
}
.color-input-row .form-input { flex: 1; font-family: var(--font-mono); }

/* ── Pipeline list pane ─────────────────────────────────────────── */
.pipeline-list-pane {
  flex:      1;
  overflow-y: auto;
  padding:   6px;
}
.pipeline-item {
  padding:       8px 9px;
  border-radius: 6px;
  cursor:        pointer;
  border:        1px solid transparent;
  margin-bottom: 2px;
  transition:    background .12s;
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.pipeline-item:hover  { background: var(--bg2); }
.pipeline-item.active { background: var(--bg3); border-color: var(--acc); }
.pip-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}
.pip-name {
  flex:        1;
  font-size:   11px;
  font-weight: 500;
  color:       var(--t0);
}
.pip-count {
  font-size:   9px;
  color:       var(--t2);
  font-family: var(--font-mono);
}

/* ── Pipeline detail form ───────────────────────────────────────── */
.detail-section {
  margin-bottom: 24px;
}
.detail-section-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom:  12px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--bdr);
}
.form-grid-2 {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}
.form-grid-3 {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   12px;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.65);
  z-index:    2000;
  display:    none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; }

.modal-box {
  background:    var(--bg1);
  border:        1px solid var(--bdr2);
  border-radius: 12px;
  width:         480px;
  max-width:     95vw;
  max-height:    90vh;
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  box-shadow:    0 24px 64px rgba(0,0,0,.5);
}
.modal-hdr {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 18px 12px;
  border-bottom: 1px solid var(--bdr);
  font-size:   13px;
  font-weight: 600;
  color:       var(--t0);
  flex-shrink: 0;
}
.modal-close {
  background:  none;
  border:      none;
  color:       var(--t2);
  cursor:      pointer;
  font-size:   16px;
  padding:     2px;
  transition:  color .12s;
}
.modal-close:hover { color: var(--t0); }
.modal-body {
  flex:       1;
  overflow-y: auto;
  padding:    18px;
}
.modal-footer {
  padding:       12px 18px;
  border-top:    1px solid var(--bdr);
  display:       flex;
  justify-content: flex-end;
  gap:           8px;
  flex-shrink:   0;
}

/* ── Line style preview ─────────────────────────────────────────── */
.line-style-options {
  display: flex;
  gap:     8px;
  flex-wrap: wrap;
}
.lso {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     5px 10px;
  border:      1px solid var(--bdr);
  border-radius: 5px;
  cursor:      pointer;
  font-size:   11px;
  color:       var(--t1);
  transition:  all .12s;
}
.lso:hover  { border-color: var(--acc); }
.lso.active { border-color: var(--acc); background: rgba(74,158,255,.1); color: var(--acc); }
.lso svg    { flex-shrink: 0; }

/* ── Empty hint ─────────────────────────────────────────────────── */
.empty-hint {
  padding:    20px;
  text-align: center;
  font-size:  11px;
  color:      var(--t2);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════
   REGISTER TAB — 3-column layout
   ═══════════════════════════════════════════════════════════════════ */

.reg-body {
  flex:     1;
  display:  flex;
  overflow: hidden;
}

/* ── Left panel ─────────────────────────────────────────────────── */
.reg-left {
  width:          240px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  background:     var(--bg1);
  border-right:   1px solid var(--bdr);
  overflow:       hidden;
}

.reg-project-list {
  overflow-y:  auto;
  max-height:  200px;
  flex-shrink: 0;
  padding:     4px;
  border-bottom: 1px solid var(--bdr);
}
.reg-project-list::-webkit-scrollbar       { width: 3px; }
.reg-project-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

/* ── Layer section ──────────────────────────────────────────────── */
.reg-divider {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        10px 11px 6px;
  border-bottom:  1px solid var(--bdr);
  flex-shrink:    0;
}

.reg-layer-list {
  flex:       1;
  overflow-y: auto;
  padding:    4px 0;
  min-height: 0;
}
.reg-layer-list::-webkit-scrollbar       { width: 3px; }
.reg-layer-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

.reg-layer-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     6px 11px;
  border:      1px solid transparent;
  border-radius: 5px;
  margin:      2px 6px;
  transition:  background .12s;
  cursor:      default;
}
.reg-layer-item:hover  { background: var(--bg2); cursor:pointer; }
.reg-layer-item.active {
  background:  var(--bg3);
  border-color: var(--bdr2);
}
.reg-layer-item.form-open {
  background:    rgba(74,158,255,.10);
  border-color:  var(--acc);
}

.reg-layer-chk {
  width: 12px; height: 12px;
  flex-shrink: 0;
  accent-color: var(--acc);
  cursor: pointer;
}
.reg-layer-name-text {
  flex: 1;
  font-size: 11px;
  color: var(--t0);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reg-layer-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-new   { background: rgba(61,214,140,.18); color: var(--ok, #3dd68c); }
.badge-merge { background: rgba(74,158,255,.18); color: var(--acc); }

/* Toolbar above layer list */
.reg-layer-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 4px;
  border-bottom: 1px solid var(--bdr);
  margin-bottom: 4px;
}
.reg-select-all {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--t1);
  cursor: pointer;
}
.reg-select-all input {
  width: 11px; height: 11px;
  accent-color: var(--acc);
}
.reg-layer-hint {
  font-size: 9px;
  color: var(--t2);
  margin-left: auto;
  font-style: italic;
}

.ldel {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      var(--t2);
  padding:    1px;
  opacity:    0;
  transition: all .12s;
  flex-shrink: 0;
}
.reg-layer-item:hover .ldel { opacity: 1; }
.ldel:hover { color: var(--err); }

.reg-layer-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  border:        1.5px solid rgba(255,255,255,.15);
}

/* ── Confirm button ─────────────────────────────────────────────── */
.reg-confirm-wrap {
  padding:       10px 11px;
  border-top:    1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  flex-shrink:   0;
}

/* ── Basemap section — Extractor lp-foot 와 동일 스타일 ─────────── */
.reg-basemap-section {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        0 11px 12px;
}

.bm-option {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   11px;
  color:       var(--t1);
  cursor:      pointer;
  user-select: none;
  transition:  color .1s;
}
.bm-option:hover { color: var(--t0); }
.bm-option input[type="radio"],
.bm-option input[type="checkbox"] {
  accent-color: var(--acc);
  cursor:       pointer;
  flex-shrink:  0;
}
.bm-plss {
  border-top:  1px solid var(--bdr);
  margin-top:  4px;
  padding-top: 8px;
  display:     flex;
  align-items: center;
  gap:         6px;
}
.bm-zoom-hint {
  margin-left: auto;
  font-size:   9px;
  color:       var(--t2);
  font-family: var(--font-mono);
}

/* ── Center map ─────────────────────────────────────────────────── */
.reg-map-wrap {
  flex:     1;
  position: relative;
  background: var(--bg0);
  min-width: 0;
}

#regMap {
  position: absolute;
  inset:    0;
  z-index:  1;
}

.reg-map-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             10px;
  pointer-events:  none;
  z-index:         2;
  transition:      opacity .3s;
}
.reg-map-placeholder.hidden { opacity: 0; }
.rmp-icon  { font-size: 40px; opacity: .2; }
.rmp-title { font-size: 13px; font-weight: 600; color: var(--t1); }
.rmp-sub   { font-size: 10px; color: var(--t2); }

/* ── Right log ──────────────────────────────────────────────────── */
.reg-right {
  width:          220px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  background:     var(--bg1);
  border-left:    1px solid var(--bdr);
  overflow:       hidden;
}

.reg-log {
  flex:        1;
  overflow-y:  auto;
  padding:     8px 10px;
  font-family: var(--font-mono);
  font-size:   10px;
  line-height: 1.8;
}
.reg-log::-webkit-scrollbar       { width: 3px; }
.reg-log::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }
.reg-log div          { color: var(--t2); }
.reg-log .log-info    { color: var(--acc); }
.reg-log .log-done    { color: var(--ok); }
.reg-log .log-warn    { color: var(--warn); }
.reg-log .log-error   { color: var(--err); }
/* ═══════════════════════════════════════════════════════════════════
   WORKSPACE TAB — 3-column layout
   ═══════════════════════════════════════════════════════════════════ */

.ws-body {
  display:        flex;
  height:         calc(100vh - var(--nav-h) - var(--subnav-h));
  overflow:       hidden;
  position:       relative;
}

.ws-left {
  width:           272px;   /* Extractor --lp-w 와 동일 */
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  border-right:    1px solid var(--bdr);
  overflow:        hidden;
  background:      var(--bg1);
}

/* 스크롤 영역 (Base Map 위) */
.ws-left-scroll {
  flex:       1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4px;
}

/* Base Map 하단 고정 — Extractor lp-foot 와 동일 */
.ws-left-foot {
  flex-shrink:  0;
  border-top:   1px solid var(--bdr);
  background:   var(--bg1);
}
.ws-left-foot .ws-section-hdr {
  border-top:  none;
  margin-top:  0;
  padding-top: 9px;
}
.ws-left-foot input[type="radio"] {
  accent-color: var(--acc);
  cursor:       pointer;
  flex-shrink:  0;
}
body.light .ws-left-foot input[type="radio"] {
  accent-color: auto;
}

.ws-map-wrap {
  flex:     1;
  position: relative;
  overflow: hidden;
}
.ws-map-wrap #regMap {
  width:  100%;
  height: 100%;
}

/* ── Leaflet 좌측 하단 컨트롤 컨테이너 ── */
.ws-map-wrap .leaflet-bottom.leaflet-left {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            8px;
  padding:        0 0 14px 14px !important;
}
.ws-map-wrap .leaflet-bottom.leaflet-left .leaflet-control {
  margin: 0 !important;
  clear: none !important; /* Prevent leaflet default from breaking flex */
}
.ws-map-wrap .leaflet-control-zoom  { order: 1; }
.ws-map-wrap .mtp-wrap              { order: 2; }
.ws-map-wrap .rsc-wrap              { order: 3; margin-top: 4px !important; }

/* ── Zoom 컨트롤 — 컴팩트 스타일 ── */
.ws-map-wrap .leaflet-control-zoom {
  border:        none !important;
  border-radius: 6px !important;
  box-shadow:    0 1px 4px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.07) !important;
  overflow:      hidden;
}
.ws-map-wrap .leaflet-control-zoom a {
  width:           26px !important;
  height:          26px !important;
  line-height:     26px !important;
  font-size:       14px !important;
  font-weight:     500 !important;
  color:           #ccc !important;
  background:      #2a2a2a !important;
  border:          none !important;
  border-bottom:   1px solid #3a3a3a !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  transition:      background .12s !important;
}
.ws-map-wrap .leaflet-control-zoom-out { border-bottom: none !important; }
.ws-map-wrap .leaflet-control-zoom a:hover {
  background: #333 !important;
  color:      #fff !important;
}
body.light .ws-map-wrap .leaflet-control-zoom a {
  color:         #555 !important;
  background:    #fff !important;
  border-bottom-color: #e2e2e2 !important;
}
body.light .ws-map-wrap .leaflet-control-zoom a:hover {
  background: #f0f0f0 !important;
  color:      #111 !important;
}

/* ── Ruler Scale 커스텀 컨트롤 ── */
.ws-map-wrap .rsc-wrap   { background: transparent; border: none; box-shadow: none; line-height: 1; }
.ws-map-wrap .rsc-svg    { display: block; }
.ws-map-wrap .rsc-toggle {
  display:     flex;
  align-items: center;
  gap:         3px;
  margin-top:  4px;
  font-size:   10px;
  font-family: system-ui, sans-serif;
}
.ws-map-wrap .rsc-u {
  cursor:      pointer;
  padding:     1px 4px;
  border-radius: 3px;
  color:       var(--t2);
  font-size:   12px;
  transition:  color .12s, background .12s;
}
.ws-map-wrap .rsc-u:hover   { color: var(--acc); }
.ws-map-wrap .rsc-u.rsc-u-on {
  color:       var(--acc);
  font-weight: 600;
  background:  rgba(74,158,255,.12);
}
.ws-map-wrap .rsc-sep { color: var(--t2); font-size: 9px; }

.ws-right {
  width:           252px;   /* Extractor --rp-w 와 동일 */
  flex-shrink:     0;
  border-left:     1px solid var(--bdr);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  background:      var(--bg1);
  position:        relative;  /* anchor for slide-in form */
}
.ws-right .panel-hdr { flex-shrink: 0; }
.ws-right .reg-log   { flex: 1; overflow-y: auto; padding: 8px 10px; }

.ws-right-log {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-height: 0;
}
/* Reference panel relocated under the Log (was bottom-left) */
.ws-right .ws-ref-panel {
  flex-shrink:  0;
  max-height:   46%;
  overflow-y:   auto;
  border-top:   1px solid var(--bdr);
}
.ws-right-form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;            /* ≈ 1.9x the 252px log panel */
  max-width: 90vw;
  background: var(--bg1);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 50;
  overflow: hidden;
}
.ws-right-form.show { transform: translateX(0); box-shadow: -8px 0 24px rgba(0,0,0,.35); }

/* ── Segment editor (Workspace) ───────────────────────────────── */
.ws-seg-editor {
  width: 320px;       /* 등록 폼(480)보다 좁게 */
  z-index: 55;        /* 등록 폼(50) 위 */
}
.se-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--bdr); flex-shrink: 0;
}
.se-title { font-size: 13px; font-weight: 600; color: var(--t0); }
.se-x {
  background: none; border: none; color: var(--t2); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 4px 7px; border-radius: 5px;
}
.se-x:hover { background: var(--bg2); color: var(--t0); }
.se-body {
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
}
.se-summary {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 7px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 5px;
}
.se-row { display: flex; justify-content: space-between; font-size: 12px; }
.se-row span { color: var(--t2); }
.se-row b    { color: var(--t0); font-weight: 600; }
.se-actions  { display: flex; flex-direction: column; gap: 7px; }
.se-act {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--t0);
  background: var(--bg2); border: 1px solid var(--bdr);
  transition: background .12s, border-color .12s;
}
.se-act:hover        { background: var(--bg3); }
.se-connect:hover    { border-color: #22d3ee; }
.se-disconnect:hover { border-color: #a78bfa; }
.se-remove:hover     { border-color: var(--err); }
.se-restore          { border-color: var(--warn); }
.se-restore:hover    { background: rgba(245, 158, 11, .14); }
.se-note {
  font-size: 11.5px; color: var(--t1); line-height: 1.55;
  background: var(--bg2); border-radius: 6px; padding: 8px 10px;
}
.se-hint { font-size: 11px; color: var(--t2); text-align: center; }

/* Segment / Pipeline 편집 모드 토글 (좌측 패널) */
.seg-mode-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.seg-mode-label { font-size: 11px; font-weight: 600; color: var(--t2); }
.seg-mode-toggle {
  display: inline-flex; border: 1px solid var(--bdr);
  border-radius: 6px; overflow: hidden; background: var(--bg2);
}
.smt-btn {
  border: none; background: transparent; color: var(--t1); cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 4px 11px;
  transition: background .12s, color .12s;
}
.smt-btn + .smt-btn { border-left: 1px solid var(--bdr); }
.smt-btn.active { background: var(--acc); color: #fff; }
.smt-btn:not(.active):hover { color: var(--t0); background: var(--bg3); }

.lpf-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.lpf-hdr-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lpf-dot {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.15);
}
.lpf-title { font-size: 12px; font-weight: 600; color: var(--t0); }
.lpf-sub   { font-size: 10px; color: var(--t2); margin-top: 1px; }

.lpf-mode {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg0);
  flex-shrink: 0;
}
.lpf-radio {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--t1); cursor: pointer;
}
.lpf-radio input { accent-color: var(--acc); }
.lpf-mode .form-select { font-size: 11px; }
.lpf-mode .form-select:disabled { opacity: .4; cursor: not-allowed; }

.lpf-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 11px 14px;
  min-height: 0;
}
.lpf-body::-webkit-scrollbar       { width: 4px; }
.lpf-body::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

.lpf-section-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  margin: 12px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--bdr);
}
.lpf-body .form-row { margin-bottom: 7px; }
.lpf-body .form-label { font-size: 10px; }
.lpf-body .form-input,
.lpf-body .form-select {
  font-size: 11px; padding: 4px 6px;
}
.lpf-body .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lpf-body .color-input-row {
  display: flex; gap: 6px; align-items: center;
}
.lpf-body .color-input-row input[type=color] {
  width: 28px; height: 24px; padding: 0; border: 1px solid var(--bdr);
  background: transparent; cursor: pointer; border-radius: 3px;
}

.lpf-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 9px 11px;
  border-top: 1px solid var(--bdr);
  background: var(--bg0);
  flex-shrink: 0;
}

/* Pipeline color chips (auto-derived from Type + Operator) */
.lpf-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}
.lpf-color-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg0);
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.lpf-color-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.lpf-color-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lpf-color-tag {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
}
.lpf-color-name {
  font-size: 11px;
  color: var(--t0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpf-color-hint {
  font-size: 10px;
  color: var(--t2);
  font-style: italic;
  margin-top: -2px;
}

/* ─────────────────────────────────────────────────────────────
   Preset tab — combined Functions + Operators
   ───────────────────────────────────────────────────────────── */
.preset-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  padding: 12px 11px 4px;
  border-top: 1px solid var(--bdr);
  margin-top: 4px;
}
.preset-section-hdr:first-of-type { border-top: none; margin-top: 0; }
.preset-section-hdr .ws-mini-btn { padding: 1px 7px; font-size: 12px; line-height: 1; }

.preset-list {
  padding: 2px 0;
}
.preset-list::-webkit-scrollbar       { width: 4px; }
.preset-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

/* Preset panel layout: Functions fixed-height, Operators scrollable with pinned header+search */
.preset-left {
  overflow: hidden;        /* override .db-left's overflow-y:auto for this panel */
  display: flex;
  flex-direction: column;
}
.preset-list-fixed { flex-shrink: 0; }   /* Functions: natural height, no scroll */

.preset-op-hdr   { flex-shrink: 0; }     /* pinned */
.preset-op-search {
  flex-shrink: 0;
  padding: 6px 11px 8px;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg1);
}
.preset-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.preset-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  cursor: pointer;
  font-size: 11px;
  color: var(--t1);
  border-left: 2px solid transparent;
  transition: background .12s;
}
.preset-item:hover  { background: var(--bg2); }
.preset-item.active {
  background: var(--bg3);
  border-left-color: var(--acc);
  color: var(--t0);
}
.preset-swatch {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.12);
}
.preset-item .preset-swatch[style*="border-radius:50%"] {
  width: 12px; height: 12px;
}
.preset-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-meta {
  font-size: 9px;
  color: var(--t2);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.preset-hl {
  background: rgba(74,158,255,.28);
  color: var(--t0);
  border-radius: 2px;
  padding: 0 1px;
}
.preset-item.search-hit {
  outline: 1px solid var(--acc);
  outline-offset: -2px;
}

.ws-section-hdr {
  font-size:     9px;
  font-weight:   600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:         var(--t2);
  padding:       14px 12px 4px;
  border-top:    1px solid var(--bdr);
  margin-top:    6px;
}
.ws-project-list { flex-shrink: 0; }

/* Layer groups */
.ws-layer-group {
  padding:       6px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.wlg-row { display:flex; align-items:center; gap:6px; }
.wlg-toggle {
  display:flex; align-items:center; gap:6px;
  cursor:pointer; flex:1; font-size:11px; color:var(--t1);
}
.wlg-toggle input[type=checkbox] {
  accent-color:var(--acc); width:12px; height:12px; flex-shrink:0;
}
.wlg-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wlg-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-mini-btn {
  background:none; border:1px solid var(--bdr); border-radius:3px;
  color:var(--t2); font-size:10px; cursor:pointer; padding:1px 5px;
  transition:all .12s; flex-shrink:0;
}
.ws-mini-btn:hover { border-color:var(--acc); color:var(--acc); }

/* HIFLD quick import */
.hifld-quick-row { display:flex; gap:5px; align-items:center; }
.form-select-xs {
  flex:1; font-size:10px; padding:3px 5px;
  background:var(--bg2); border:1px solid var(--bdr); border-radius:3px; color:var(--t1);
}
.btn-xs { font-size:10px; padding:3px 8px; border-radius:3px; border:none; cursor:pointer; white-space:nowrap; }
.btn-primary.btn-xs         { background:var(--acc); color:#fff; }
.btn-primary.btn-xs:hover   { background:#3a8eef; }
.btn-primary.btn-xs:disabled{ opacity:.5; cursor:default; }
.hifld-quick-result { font-size:10px; margin-top:5px; color:var(--t2); min-height:14px; }

/* Leaflet tooltip */
.ws-tooltip {
  font-size:11px; background:rgba(15,20,30,.92);
  border:1px solid rgba(255,255,255,.12); color:#e0e4f0;
  border-radius:4px; padding:4px 8px; pointer-events:none;
}
.ws-tooltip b { color:#fff; }

/* ═══════════════════════════════════════════════════════════════════
   POST-REGISTER PIPELINE PANEL
   ═══════════════════════════════════════════════════════════════════ */
.wsp-header {
  padding:12px 14px; border-bottom:1px solid var(--bdr);
  background:rgba(52,211,153,.07); flex-shrink:0;
}
.wsp-title { font-size:13px; font-weight:600; color:#34d399; }
.wsp-sub   { font-size:10px; color:var(--t2); margin-top:2px; font-family:var(--font-mono); }
.wsp-batch { color:var(--t1); }
.wsp-colors { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.wsp-color-chip { font-size:9px; color:var(--t2); font-family:var(--font-mono); display:flex; align-items:center; }
.wsp-body { flex:1; overflow-y:auto; padding:12px 14px; }
.wsp-section-title {
  font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t2); margin-bottom:10px;
}
.wsp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.wsp-footer { padding:12px 14px; border-top:1px solid var(--bdr); flex-shrink:0; }
.wsp-hint   { font-size:10px; color:var(--t2); margin-top:8px; text-align:center; }
.btn-full   { width:100%; }

/* ═══════════════════════════════════════════════════════════════════
   DB MANAGER — sub-nav + panels
   FIX: #id selector was overriding .tab-panel { display:none }
   Solution: only apply flex layout when ALSO .active
   ═══════════════════════════════════════════════════════════════════ */

/* ── DB Manager tab ──────────────────────────────────────────────── */
#tab-dbmanager.active {
  flex-direction: column;
  height: calc(100vh - var(--nav-h) - var(--subnav-h));
  overflow: hidden;
}

/* Section panels within DB Manager */
.pl-section          { display: none; flex: 1; overflow: hidden; }
.pl-section.active   { display: flex; }            /* row: left panel + main */
#pl-section-pipelines { position: relative; }      /* anchor preset slide-in */

.pl-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Left panel */
.pl-left {
  width:        48px;
  background:   var(--bg1);
  border-right: 1px solid var(--bdr);
  display:      flex;
  flex-direction: column;
  align-items:  center;
  flex-shrink:  0;
  padding:      10px 0;
  gap:          6px;
  z-index:      10;
}

/* Narrow-rail icon button + hover tooltip */
.pl-icon-btn {
  position:        relative;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      none;
  border:          1px solid var(--bdr);
  border-radius:   8px;
  color:           var(--t1);
  cursor:          pointer;
  transition:      background .13s, color .13s, border-color .13s;
}
.pl-icon-btn:hover  { background: var(--bg2); color: var(--acc); border-color: var(--acc); }
.pl-icon-btn.active { background: rgba(74,158,255,.1); color: var(--acc); border-color: var(--acc); }
.pl-icon-btn::after {
  content:       attr(data-label);
  position:      absolute;
  left:          calc(100% + 8px);
  top:           50%;
  transform:     translateY(-50%);
  background:    var(--bg3);
  color:         var(--t0);
  font-size:     11px;
  font-weight:   500;
  padding:       3px 8px;
  border-radius: 5px;
  white-space:   nowrap;
  opacity:       0;
  pointer-events: none;
  transition:    opacity .12s;
  z-index:       100;
  box-shadow:    0 2px 10px rgba(0,0,0,.35);
}
.pl-icon-btn:hover::after { opacity: 1; }

.pl-nav-btn {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         7px 10px;
  background:      none;
  border:          1px solid var(--bdr);
  border-radius:   5px;
  color:           var(--t1);
  font-family:     var(--font-sans);
  font-size:       11px;
  font-weight:     500;
  cursor:          pointer;
  transition:      all .13s;
}
.pl-nav-btn:hover         { background: var(--bg2); color: var(--t0); }
.pl-nav-btn.active        { border-color: var(--acc); color: var(--acc); background: rgba(74,158,255,.07); }
.pl-nav-btn.active svg    { transform: rotate(90deg); }
.pl-nav-btn svg           { transition: transform .2s ease; flex-shrink: 0; }

.pl-divider { height: 1px; background: var(--bdr); margin: 4px 0; }

.pl-stat-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
.pl-stat-row   { display: flex; align-items: baseline; gap: 6px; }
.pl-stat-val   { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--acc); }
.pl-stat-lbl   { font-size: 10px; color: var(--t2); font-family: var(--font-mono); }

/* Preset slide-in panel — anchored to right edge of pl-left, slides over main */
.pl-preset-panel {
  position:     absolute;
  left:         48px;
  top:          0;
  bottom:       0;
  width:        260px;
  background:   var(--bg1);
  border-right: 1px solid var(--bdr);
  z-index:      50;
  display:      flex;
  flex-direction: column;
  overflow:     hidden;
  transform:    translateX(-100%);
  visibility:   hidden;
  pointer-events: none;
  transition:   transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
  box-shadow:   4px 0 16px rgba(0,0,0,.25);
}
.pl-preset-panel.open {
  transform:      translateX(0);
  visibility:     visible;
  pointer-events: auto;
}

/* Transparent overlay — covers main area when preset panel is open */
.pl-preset-overlay {
  position: absolute;
  left:     48px;
  top:      0;
  right:    0;
  bottom:   0;
  z-index:  49;
  display:  none;
  cursor:   pointer;
}
.pl-preset-overlay.open { display: block; }

/* Main spreadsheet area */
.pl-main {
  flex:    1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.dbm-subnav {
  display:flex; gap:0; padding:0 10px;
  border-bottom:1px solid var(--bdr); background:var(--bg1); flex-shrink:0;
}
.dbm-btn {
  padding:7px 14px 6px; border:none; border-bottom:2px solid transparent;
  border-radius:0; font-size:11px; font-weight:500; color:var(--t2);
  background:none; cursor:pointer; transition:color .12s, border-color .12s;
  font-family:var(--font-sans); letter-spacing:.02em;
}
.dbm-btn:hover  { color:var(--t1); }
.dbm-btn.active { color:var(--t0); border-bottom-color:var(--acc); }

.dbm-panel { display:none; flex:1; overflow:hidden; }
.dbm-panel.active { display:flex; flex-direction:column; }
.dbm-panel .db-body { flex:1; overflow:hidden; }
#dbm-spreadsheet { overflow:hidden; }

/* ── ws-right Log panel — Extractor log-box/progressLog 와 동일 ── */
.ws-right .log-box {
  flex:           1;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-height:     0;
}
.ws-progress-log {
  flex:        1;
  overflow-y:  auto;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--t1);
  line-height: 1.7;
  padding:     8px 10px;
  background:  var(--bg0);
}
.ws-progress-log .log-done  { color: var(--ok); }
.ws-progress-log .log-error { color: var(--err); }
.ws-progress-log .log-info  { color: var(--acc); }
.ws-progress-log .log-warn  { color: var(--warn); }

/* ═══════════════════════════════════════════════════════════════════
   GAS PIPELINES — legend toggle + import popup
   Shared design with extractor.css
   ═══════════════════════════════════════════════════════════════════ */

/* -- Gas Pipeline colors (dark mode default) -- */
:root {
  --gp-interstate:  #e8603a;
  --gp-intrastate:  #e8a33a;
  --gp-gathering:   #5b8dd9;
  --gp-storage:     #7a7a7a;
}
body.light {
  --gp-interstate:  #d04a28;
  --gp-intrastate:  #c98a22;
  --gp-gathering:   #4473b8;
  --gp-storage:     #666666;
}

/* ── Layer toggle panel (PLSS + Gas Pipelines) ── */
.gp-panel {
  border-top: 1px solid var(--bdr);
  padding:    4px 11px 6px;
}
.gp-panel-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--t2);
  padding:        8px 6px 5px;
}
.gp-panel > .gp-row,
.gp-panel > .gp-row-parent {
  margin-left: 8px;
}
.gp-row {
  display:       flex;
  align-items:   center;
  padding:       5px 6px;
  border-radius: 4px;
  cursor:        pointer;
  user-select:   none;
  transition:    opacity .15s;
}
.gp-row:hover { background: var(--bg2); }
.gp-row.gp-off { opacity: .35; }
.gp-row-parent.gp-off { opacity: 1; }
.gp-row-parent {
  display:       block;
  padding:       0;
  cursor:        default;
}
.gp-row-parent:hover { background: none; }
.gp-row-head {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       5px 6px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    opacity .15s;
  position:      relative;
}
.gp-row-head:hover { background: var(--bg2); }
.gp-row-parent.gp-off .gp-row-head { opacity: .35; }
/* 게이트(import gear)를 흐름에서 빼서 헤더 높이를 안 키움 — PLSS↔Gas 간격을 Extractor와 동일하게 */
.gp-row-head .gp-import-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

.gp-title {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gp-import-btn {
  background:    none;
  border:        1px solid var(--bdr);
  border-radius: 4px;
  color:         var(--t2);
  cursor:        pointer;
  padding:       3px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all .12s;
}
.gp-import-btn:hover { border-color: var(--acc); color: var(--acc); }

.gp-legend {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding-left:   6px;
}
.gp-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       3px 6px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    opacity .15s;
  user-select:   none;
}
.gp-item:hover { background: var(--bg2); }
.gp-item.gp-off { opacity: .35; }
.gp-item.gp-off .gp-label { color: var(--t2); }

.gp-line {
  display:       inline-block;
  width:         18px;
  height:        3px;
  border-radius: 1.5px;
  flex-shrink:   0;
}
.gp-line-interstate  { background: var(--gp-interstate); }
.gp-line-intrastate  { background: var(--gp-intrastate); }
.gp-line-gathering   { background: var(--gp-gathering); }
.gp-line-storage     { background: var(--gp-storage); }

.fac-icon {
  background: none !important;
  border:     none !important;
}

.gp-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  margin-right:  5px;
  vertical-align: middle;
  flex-shrink:   0;
}

.gp-label {
  font-size:   11px;
  color:       var(--t1);
  transition:  color .12s;
}

/* Facilities grouped under a parent header; items mirror gas children: [action] [icon] [label] */
.fac-add {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; padding: 0;
  border: none; border-radius: 5px; cursor: pointer;
  background: transparent; color: var(--t2);
  transition: background .12s, color .12s;
}
.fac-add:hover { background: var(--bg3); color: var(--t0); }
.fac-item { gap: 6px; }
.fac-item .fac-add { width: 16px; height: 16px; }
.fac-add-empty { visibility: hidden; pointer-events: none; }

/* -- Import popup (slides out from panel, aligned to trigger button) -- */
.gp-import-popup {
  position:   fixed;
  z-index:    500;
  animation:  gpSlideIn .15s ease-out;
}
@keyframes gpSlideIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.gp-import-inner {
  background:      var(--bg1);
  border:          1px solid var(--bdr2);
  border-radius:   8px;
  padding:         8px 10px 10px;
  width:           180px;
  box-shadow:      0 8px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
body.light .gp-import-inner {
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
/* ── Price Calendar ──────────────────────────────────────────────── */
.price-cal-wrap { position: relative; }

.price-calendar {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  z-index:       300;
  background:    var(--bg1);
  border:        1px solid var(--bdr2);
  border-radius: 8px;
  padding:       10px;
  width:         210px;
  box-shadow:    0 8px 30px rgba(0,0,0,.4);
  user-select:   none;
}
body.light .price-calendar { box-shadow: 0 8px 24px rgba(0,0,0,.14); }

.price-cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   8px;
}
.price-cal-nav {
  background: none;
  border:     none;
  color:      var(--t1);
  cursor:     pointer;
  padding:    2px 7px;
  border-radius: 4px;
  font-size:  13px;
  line-height: 1;
}
.price-cal-nav:hover { background: var(--bg3); }
.price-cal-month { font-size: 12px; font-weight: 600; color: var(--t0); }

/* 클릭 가능한 헤더 타이틀 (Month Year / Year → 모드 전환) */
.price-cal-title {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     12px;
  font-weight:   600;
  color:         var(--t0);
  padding:       3px 10px;
  border-radius: 5px;
  transition:    background .1s;
}
.price-cal-title:hover { background: var(--bg3); }

.price-cal-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   2px;
}
.price-cal-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 4px; }

.price-cal-dow {
  font-size:   10px;
  color:       var(--t2);
  text-align:  center;
  padding:     2px 0 4px;
  font-weight: 600;
}
.price-cal-day {
  font-size:     11px;
  text-align:    center;
  padding:       5px 2px;
  border-radius: 4px;
  line-height:   1;
}
.price-cal-day.has-data {
  color:       var(--acc);
  font-weight: 700;
  cursor:      pointer;
}
.price-cal-day.has-data:hover { background: var(--acc); color: #fff; }
.price-cal-day.no-data  { color: var(--t2); opacity: .45; }
.price-cal-day.selected { background: var(--acc) !important; color: #fff !important; }

/* 월/년 선택 셀 */
.price-cal-cell {
  font-size:     12px;
  text-align:    center;
  padding:       10px 4px;
  border-radius: 5px;
  cursor:        pointer;
  color:         var(--t1);
  transition:    background .1s;
}
.price-cal-cell:hover    { background: var(--bg3); }
.price-cal-cell.has-data { color: var(--acc); font-weight: 700; }
.price-cal-cell.selected { background: var(--acc); color: #fff; }

/* ── Price Data 3-column layout ─────────────────────────────────── */
.price-mid {
  width:        210px;
  flex-shrink:  0;
  background:   var(--bg1);
  border-right: 1px solid var(--bdr);
  display:      flex;
  flex-direction: column;
  overflow:     hidden;
}
.price-mid-list {
  flex:       1;
  overflow-y: auto;
  padding:    8px;
  display:    flex;
  flex-direction: column;
  gap:        5px;
}
.price-mid-list::-webkit-scrollbar       { width: 4px; }
.price-mid-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 2px; }

/* 연도 그룹 헤더 (접기/펼치기) */
.price-year-hdr {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 9px;
  cursor:        pointer;
  background:    var(--bg1);
  border:        1px solid var(--bdr);
  border-radius: 6px;
  user-select:   none;
  position:      sticky;
  top:           0;
  z-index:       2;
}
.price-year-hdr:hover { background: var(--bg3); }
.price-year-hdr .pyh-toggle {
  width:       14px; height: 14px; flex-shrink: 0;
  display:     flex; align-items: center; justify-content: center;
  font-size:   13px; font-weight: 700; line-height: 1;
  color:       var(--acc);
  border:      1px solid var(--bdr); border-radius: 3px;
}
.price-year-hdr .pyh-year { font-size: 13px; font-weight: 700; color: var(--t0);
                            flex: 1; font-family: var(--font-mono); }
.price-year-hdr .pyh-meta { font-size: 10px; color: var(--t2); }

.price-year-body {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        5px 0 3px 8px;
}

/* 월 그룹 헤더 (연도 안에서 접기/펼치기) */
.price-month-hdr {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       5px 8px;
  cursor:        pointer;
  background:    var(--bg2);
  border:        1px solid var(--bdr);
  border-radius: 5px;
  user-select:   none;
}
.price-month-hdr:hover { background: var(--bg3); }
.price-month-hdr .pmh-toggle {
  width:       13px; height: 13px; flex-shrink: 0;
  display:     flex; align-items: center; justify-content: center;
  font-size:   12px; font-weight: 700; line-height: 1;
  color:       var(--acc);
  border:      1px solid var(--bdr); border-radius: 3px;
}
.price-month-hdr .pmh-month { font-size: 12px; font-weight: 600; color: var(--t1);
                              flex: 1; font-family: var(--font-mono); }
.price-month-hdr .pmh-meta  { font-size: 10px; color: var(--t2); }

.price-month-body {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        5px 0 5px 8px;
}

.price-date-row {
  display:       flex;
  align-items:   center;
  padding:       8px 10px;
  cursor:        pointer;
  gap:           8px;
  background:    var(--bg2);
  border:        1px solid var(--bdr);
  border-left:   3px solid var(--bdr);
  border-radius: 6px;
  transition:    border-color .12s, background .12s, transform .06s;
}
.price-date-row:hover {
  background:    var(--bg3);
  border-left-color: var(--acc);
  transform:     translateX(2px);
}
.price-date-row.active {
  background:    var(--bg3);
  border-color:  var(--acc);
  border-left-color: var(--acc);
}
.price-date-row .pdr-date  { font-size: 12px; font-weight: 600; color: var(--t0);
                             flex: 1; font-family: var(--font-mono); letter-spacing: .3px; }
.price-date-row .pdr-count { font-size: 10px; color: var(--t1); background: var(--bg0);
                             padding: 1px 7px; border-radius: 9px; font-weight: 600; }
.price-date-row .pdr-del   { opacity: 0; font-size: 12px; line-height: 1; padding: 2px 5px;
                             border-radius: 4px; border: none; background: none;
                             color: var(--danger, #e55); cursor: pointer; transition: opacity .1s; }
.price-date-row:hover .pdr-del { opacity: .7; }
.price-date-row .pdr-del:hover { opacity: 1; background: rgba(229,85,85,.15); }

.price-browser-header {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
  padding:     10px 14px;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  background:  var(--bg1);
}
.price-manage-actions {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}
.price-log {
  font-size:  11px;
  padding:    8px 11px;
  color:      var(--t2);
  min-height: 28px;
  border-top: 1px solid var(--bdr);
  flex-shrink: 0;
  white-space: pre-wrap;
  word-break:  break-all;
}