/* 단순·고정 레이아웃 — 깨지지 않게 */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}

/* 헤더 고정 높이 */
#header {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

.h-left strong { display: block; font-size: 14px; }
.h-left span { font-size: 11px; color: #94a3b8; }
.h-mid { display: flex; gap: 16px; font-size: 13px; color: #94a3b8; }
.h-mid b { color: #38bdf8; font-size: 16px; margin-left: 4px; }
.h-right { display: flex; gap: 8px; }

.btn {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 6px;
  background: #0ea5e9;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn.outline {
  background: transparent;
  border: 1px solid #475569;
  color: #e2e8f0;
}

.btn.sm { padding: 5px 9px; font-size: 11px; }
.btn:disabled { opacity: .45; cursor: default; }

/* 업로드 패널 */
.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #cbd5e1;
}
.field select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 5px;
  border: 1px solid #475569;
  background: #1e293b;
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
}

#dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 14px 8px;
  border: 1px dashed #475569;
  border-radius: 8px;
  background: #1e293b;
  text-align: center;
  cursor: pointer;
}
#dropzone b { font-size: 12px; color: #e2e8f0; }
#dropzone span { font-size: 11px; color: #94a3b8; }
#dropzone .ext { font-size: 10px; color: #64748b; }
#dropzone:hover, #dropzone:focus-visible { border-color: #38bdf8; outline: none; }
#dropzone.over {
  border-color: #38bdf8;
  border-style: solid;
  background: #0b3a54;
}

.row { display: flex; gap: 6px; margin-top: 8px; }
.row.hidden { display: none; }

.note.ok { color: #34d399; }
.note.err { color: #f87171; }

/* 본문: 좌 | 지도 | 우  (높이 명확) */
#layout {
  display: flex;
  height: calc(100% - 52px);
  width: 100%;
}

#left, #right {
  width: clamp(200px, 20vw, 280px);
  flex: 0 0 clamp(200px, 20vw, 280px);
  overflow-y: auto;
  background: #1e293b;
  padding: 10px;
}

#left { border-right: 1px solid #334155; }
#right {
  width: clamp(220px, 24vw, 340px);
  flex: 0 0 clamp(220px, 24vw, 340px);
  border-left: 1px solid #334155;
}

/* 지도 — flex 자식에 높이 100% (Leaflet 필수) */
#map {
  flex: 1 1 auto;
  min-width: 200px;
  height: 100%;
  background: #0b1220;
}

/* 패널 섹션 */
section {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #7dd3fc;
}

section label {
  display: block;
  font-size: 12px;
  margin: 4px 0;
  color: #cbd5e1;
  cursor: pointer;
}

section.grow {
  min-height: 180px;
}

.note {
  font-size: 11px;
  color: #94a3b8;
  margin: 6px 0 0;
  line-height: 1.4;
}

.box-text {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: #e2e8f0;
}

.box-text div {
  padding: 4px 6px;
  margin-bottom: 3px;
  background: #1e293b;
  border-radius: 4px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
}
.legend.hidden { display: none; }
.legend .chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #94a3b8;
}
.legend .chip i {
  display: inline-block;
  width: 14px;
  height: 2px;
}
.legend .chip.major i { height: 3px; }

/* 목록 */
#list {
  max-height: 280px;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #1e293b;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.item:hover { border-color: #38bdf8; }
.item .meta { flex: 1; min-width: 0; font-size: 11px; color: #94a3b8; }
.item .n { font-weight: 700; color: #34d399; font-size: 12px; }

.ball {
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 차트 영역 고정 높이 */
.chart-h {
  height: 200px;
  position: relative;
  background: #020617;
  border-radius: 6px;
  border: 1px solid #334155;
  padding: 4px;
}
.chart-h.sm { height: 170px; margin-top: 8px; }
.chart-h canvas { width: 100% !important; height: 100% !important; }

/* Leaflet 팝업/마커 */
.leaflet-popup-content-wrapper {
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 8px;
}
.leaflet-popup-tip { background: #1e293b; }
.leaflet-popup-content { margin: 10px 12px; font-size: 12px; }

.leaflet-tooltip.depth-tip {
  background: #0f172a;
  color: #7dd3fc;
  border: 1px solid #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  box-shadow: none;
}
.leaflet-tooltip.depth-tip::before { border-top-color: #38bdf8; }

.leaflet-div-icon.depth-label {
  background: none;
  border: none;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    -1px -1px 1px #020617, 1px -1px 1px #020617,
    -1px 1px 1px #020617, 1px 1px 1px #020617;
  transform: translate(-50%, -50%);
}
.mk {
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; }
  #header { flex-wrap: wrap; height: auto; padding: 10px; }
  #layout { flex-direction: column; height: auto; }
  #map { height: 45vh; min-height: 280px; flex: none; width: 100%; }
  #left, #right { width: 100%; flex: none; max-height: none; }
}

#btn-select-file { margin-top: 8px; }

/* 26_MPA_survey map theme controls and marker appearance. */
.mo-chips { display:flex; flex-wrap:wrap; gap:5px; }
.mo-chip { padding:4px 9px; border-radius:13px; font-size:11.5px; cursor:pointer; background:#1d2b3a; border:1px solid #2a3b4d; color:#e7eef6; white-space:nowrap; transition:.12s; }
.mo-chip:hover { border-color:#37c2a6; }
.mo-chip.on { background:#37c2a6; border-color:#37c2a6; color:#04231d; font-weight:600; }
.mpa-layer-title { margin-top:14px; }
#mpa-areas { margin-top:8px; }
.mpa-depth-legend { display:flex; flex-wrap:wrap; gap:5px 8px; margin-top:8px; font-size:10px; color:#94a3b8; }
.mpa-depth-legend[hidden] { display:none; }
.mpa-depth-legend span { display:inline-flex; align-items:center; gap:3px; }
.mpa-depth-legend i { width:12px; height:10px; border:1px solid #64748b; }
.leaflet-container { background:#0b1119; }
body.light-base .leaflet-container { background:#eef2f6; }
.mk { border:2px solid rgba(255,255,255,.85); box-shadow:0 2px 6px rgba(0,0,0,.45); line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.5); }

.table-scroll { overflow-x:auto; margin:8px 0; }
.analysis-table { border-collapse:collapse; width:100%; font-size:11px; }
.analysis-table th,.analysis-table td { border:1px solid #334155; padding:6px; text-align:right; white-space:nowrap; }
.analysis-table th { color:#7dd3fc; background:#1e293b; }
.analysis-table caption { text-align:left; margin-bottom:6px; color:#cbd5e1; }
#quality-analysis summary { cursor:pointer; color:#fbbf24; }
#quality-analysis ul { padding-left:16px; }
.note a { color:#7dd3fc; }

/* Apply background theme only to tiles; observation markers and depth layers keep their colors. */
.leaflet-tile-pane.basemap-dark { filter: invert(1) hue-rotate(180deg) brightness(.8) saturate(.65); }
.leaflet-tile-pane.basemap-light { filter: grayscale(.7) brightness(1.08); }

.species-marker { flex-shrink:0; overflow:visible; vertical-align:middle; filter:drop-shadow(0 2px 3px #0005); }
#species-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-bottom:8px; font-size:11px; }
#species-legend span { display:inline-flex; align-items:center; gap:4px; }
#analysis-toolbar { position:sticky; top:-10px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; background:#1e293b; }
#analysis-drag { font-size:13px; flex:1; padding:5px; }
#right.floating { position:fixed; z-index:1100; width:min(390px, calc(100vw - 16px)); height:min(720px, calc(100vh - 90px)); max-height:calc(100vh - 16px); border:1px solid #64748b; border-radius:10px; box-shadow:0 12px 40px #0008; }
#right.floating #analysis-drag { cursor:move; touch-action:none; user-select:none; }

.map-legend { max-width:260px; padding:10px; border:1px solid #64748b; border-radius:8px; background:rgba(15,23,42,.94); color:#e2e8f0; font-size:11px; line-height:1.5; }
.map-legend #species-legend { margin:5px 0; }
.legend-counts { display:flex; align-items:center; gap:10px; margin:5px 0; }
#map-depth-key span { display:inline-flex; align-items:center; gap:3px; margin-right:7px; }
#map-depth-key i { width:12px; height:10px; display:inline-block; }
#analysis-size-controls { display:none; }
#right.floating { resize:both; overflow:auto; min-width:min(300px, calc(100vw - 16px)); min-height:260px; max-width:calc(100vw - 16px); }
#right.floating #analysis-size-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11px; margin:4px 0 12px; }
#analysis-size { background:#0f172a; color:#e2e8f0; border:1px solid #64748b; padding:4px; }
#right.floating .chart-h { height:var(--analysis-chart-height,240px); }
#right.floating .chart-h.sm { height:calc(var(--analysis-chart-height,240px) * .8); }
@media(max-width:600px) { .map-legend { max-width:200px; font-size:10px; padding:6px; } .legend-counts { display:none; } }

.analysis-filter { padding:8px 0 12px; font-size:12px; }
.analysis-filter label { display:block; margin-bottom:6px; color:#7dd3fc; }
#analysis-species { width:100%; padding:7px; border:1px solid #64748b; border-radius:5px; background:#0f172a; color:#e2e8f0; font:inherit; }

/* Survey workspace: clearer hierarchy, larger controls, and an unobstructed map. */
:root { --surface:#152333; --surface-raised:#1c2e40; --edge:#324a60; --ink:#edf4fa; --muted:#b1c2d2; --accent:#65dfc3; }
html,body { color:var(--ink); background:#0b1724; font-size:14px; }
#header { height:68px; padding:0 22px; background:#102334; border-bottom:1px solid #365267; gap:18px; }
.h-left strong { font-size:18px; letter-spacing:-.4px; display:flex; align-items:center; gap:9px; }
.brand-mark { color:var(--accent); font-size:26px; }
.h-left span:not(.brand-mark) { font-size:12px; color:#afc6d8; margin-left:35px; }
.h-mid { gap:12px; }
.h-mid>span { padding:8px 14px; background:#20394a; border:1px solid #335267; border-radius:9px; font-size:12px; }
.h-mid b { color:var(--accent); font-size:21px; }
#layout { height:calc(100% - 68px); }
#left { width:310px; flex-basis:310px; padding:16px; background:#101e2c; }
#right { width:380px; flex-basis:380px; padding:0; background:#101e2c; }
#analysis-body { padding:0 16px 20px; }
section { background:var(--surface); border:1px solid #2b4155; padding:15px; border-radius:12px; margin-bottom:14px; }
section h3 { font-size:14px; color:#e0f6f0; font-weight:700; margin-bottom:11px; }
section label { font-size:13px; line-height:1.6; margin:7px 0; }
.note { color:var(--muted); font-size:12px; line-height:1.65; }
.btn { font-size:13px; padding:9px 13px; border-radius:8px; background:var(--accent); color:#092b27; min-height:36px; }
.btn.outline { color:#e2f1fa; border-color:#456278; background:#203448; }
.btn:hover { filter:brightness(1.13); }
.btn.sm { font-size:12px; padding:6px 10px; }
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid #65dfc3; outline-offset:3px; }
input[type=radio],input[type=checkbox] { accent-color:#65dfc3; width:16px; height:16px; vertical-align:middle; margin-right:6px; }
select,input { font:inherit; }
.field select,#analysis-species,#analysis-size { border-color:#456278; background:#102031; font-size:13px; padding:8px; }
#upload summary { cursor:pointer; color:#dff5ef; font-size:14px; font-weight:700; }
#upload details[open]>summary { margin-bottom:15px; }
#dropzone { background:#1b3143; padding:16px 8px; border-color:#53718a; }
#dropzone b { font-size:13px; }
.mo-chip { font-size:12px; padding:7px 11px; border-color:#415b71; }
.mo-chip.on { background:#65dfc3; color:#0a2a23; }
#analysis-toolbar { top:0; padding:14px 16px; background:#1b3042; border-bottom:1px solid #395166; z-index:5; }
#analysis-drag { color:#fff; font-size:16px; }
.analysis-filter { padding:15px 0; }
.analysis-filter label { font-size:13px; color:#bde9df; }
.box-text { font-size:13px; }
.box-text div { padding:7px 9px; background:#213649; border-radius:6px; }
.chart-h { background:#0b1826; border-color:#31495e; border-radius:8px; }
.analysis-table { font-size:12px; }
.analysis-table th { background:#264053; color:#d6f1f9; }
.analysis-table td,.analysis-table th { border-color:#3a5268; padding:8px; }
.analysis-table tbody tr:nth-child(even) { background:#1b2e40; }
.item { padding:10px 7px; background:#203346; border:1px solid #324b60; border-radius:8px; }
.item .meta { font-size:12px; color:#d1dfeb; }
#left,#right,#analysis-body,#list { scrollbar-width:thin; scrollbar-color:#526f86 #142332; }
.map-legend { box-shadow:0 6px 22px #0005; border-color:#536e82; background:rgba(16,32,47,.96); border-radius:10px; }
.leaflet-control-zoom a { background:#f1f7fa; color:#17394a; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-tag { font-size:10px; color:#9ec9bd; border:1px solid #3c695f; padding:2px 6px; border-radius:5px; }
.area-tools { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:2px; }
.area-tools button { min-height:65px; color:#dbeaf7; background:#223c50; border:1px solid #476278; border-radius:9px; font-size:12px; cursor:pointer; }
.area-tools button span { display:block; font-size:24px; line-height:1.2; margin-bottom:3px; }
.area-tools button[aria-pressed=true] { background:#135947; border-color:#65dfc3; color:#c9fff1; box-shadow:inset 0 0 0 1px #65dfc3; }
#area-help { min-height:40px; color:#c4dbe9; margin:10px 0; }
.area-style { display:grid; grid-template-columns:54px 1fr 62px; gap:7px; }
.area-style label { font-size:11px; color:#b8ccdc; margin:0; }
.area-style select { width:100%; min-width:0; padding:7px 2px; margin-top:5px; background:#102334; color:#fff; border:1px solid #4c677d; border-radius:6px; font-size:11px; height:35px; }
.area-style input[type=color] { width:100%; height:35px; padding:3px; margin-top:5px; background:#102334; border:1px solid #4c677d; border-radius:6px; cursor:pointer; }
.area-actions { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }
.area-actions .btn { font-size:11px; padding:6px 8px; min-height:32px; }
.area-select-label { font-size:12px; color:#bbd5e7; }
#area-select,#area-name { width:100%; padding:8px; background:#102334; color:#eaf5ff; border:1px solid #47657b; border-radius:6px; font-size:12px; }
.area-edit { display:flex; align-items:center; gap:5px; margin:8px 0; }
.area-edit input { min-width:0; }
.area-edit .btn { font-size:12px; min-height:32px; }
.area-export { width:100%; font-size:12px; }
#area-storage { font-size:11px; }
.is-drawing { cursor:crosshair !important; }
.is-drawing .leaflet-marker-pane,.is-drawing .leaflet-interactive { pointer-events:none !important; }
.is-drawing .map-legend { display:none; }
#analysis-resize { display:none; }
#right.floating { display:flex; flex-direction:column; overflow:hidden; resize:none; padding:0; border:1px solid #688da3; border-radius:14px; min-width:0; min-height:0; max-width:calc(100vw - 8px); max-height:calc(100vh - 8px); box-shadow:0 18px 70px #0009; }
#right.floating #analysis-toolbar { position:relative; flex:none; padding:12px 16px; }
#right.floating #analysis-body { flex:1; min-height:0; overflow:auto; padding-bottom:42px; }
#right.floating #analysis-resize { display:block; position:absolute; right:0; bottom:0; width:40px; height:40px; background:#65dfc3; border:0; border-top-left-radius:12px; color:#082d24; font-size:26px; cursor:nwse-resize; touch-action:none; z-index:10; }
#right.floating #analysis-size-controls { font-size:12px; margin-bottom:16px; color:#c5d9e8; }
@media(min-width:901px) and (max-width:1250px) { #left {width:280px;flex-basis:280px;} #right {width:320px;flex-basis:320px;} .h-mid>span {padding:6px 8px;} .h-left strong {font-size:16px;} }
@media(max-width:900px) { html,body {height:auto;overflow:auto;} #header {height:auto;min-height:68px;padding:12px;flex-wrap:wrap;} #layout {height:auto;flex-direction:column;} #left,#right {width:100%;flex:none;} #map {height:60vh;min-height:350px;} #left {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;} #left>section {margin:0;} #left>#status {grid-column:1/-1;} .h-mid {margin-left:auto;} .h-right {flex-wrap:wrap;} }
@media(max-width:560px) { #left {display:block;} #left>section {margin-bottom:12px;} .h-mid {width:100%;margin:0;justify-content:space-between;} .h-mid>span {flex:1;} .h-left strong {font-size:17px;} .h-right .btn {font-size:12px;} #analysis-toolbar {padding:12px;} }

.area-edit .btn { white-space:nowrap; flex:none; }
.h-left .brand-mark { font-size:26px; margin:0; }

/* Bright workspace palette; map theme controls remain independent. */
:root { --surface:#fff; --surface-raised:#f1f6f8; --edge:#cbdbe4; --ink:#19384a; --muted:#536d7d; --accent:#117d70; }
html,body { background:#f4f8fa; color:var(--ink); }
#header { background:#fff; border-color:var(--edge); }
.h-left span:not(.brand-mark),.h-mid { color:var(--muted); }
.h-mid>span { background:#edf7f4; border-color:#c9e5dd; }
#left,#right { background:#edf3f6; border-color:var(--edge); }
section { border-color:var(--edge); box-shadow:0 2px 5px #19384a05; }
section h3,#upload summary,#analysis-drag { color:var(--ink); }
section label,.field,.box-text,.legend,.analysis-table caption { color:var(--ink); }
.btn { background:var(--accent); color:#fff; }
.btn.outline { color:#294e62; border-color:#b6cbd7; background:#f5f9fb; }
.btn:hover { filter:brightness(.97); }
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline-color:#117d70; }
input[type=radio],input[type=checkbox] { accent-color:var(--accent); }
.field select,#analysis-species,#analysis-size,.area-style select,#area-select,#area-name { background:#fff; color:var(--ink); border-color:#afc5d1; }
#dropzone { background:#f2f8fa; border-color:#9fbcca; }
#dropzone b { color:var(--ink); }
#dropzone span,#dropzone .ext { color:var(--muted); }
#dropzone.over { background:#dff4ee; }
.mo-chip { background:#f3f7fa; border-color:#bdcfd9; color:#365669; }
.mo-chip.on { background:#dff4ee; color:#075d50; border-color:#399c87; }
#analysis-toolbar { background:#e3eff3; border-color:#c3d7df; }
.analysis-filter label { color:#17675e; }
.box-text div { background:#eef5f8; }
.chart-h { background:#fff; border-color:#d5e2e9; }
.analysis-table th { background:#e7f1f5; color:#25526a; }
.analysis-table td,.analysis-table th { border-color:#cfdee6; }
.analysis-table tbody tr:nth-child(even) { background:#f3f8fa; }
.item { background:#f8fbfc; border-color:#d6e3e9; }
.item .meta { color:#435f70; }
.item .n,.note.ok { color:#08725e; }
.note.err { color:#b33136; }
.note a { color:#176892; }
#quality-analysis summary { color:#896000; }
.legend .chip,.mpa-depth-legend { color:var(--muted); }
#left,#right,#analysis-body,#list { scrollbar-color:#adc4d0 #edf3f6; }
.map-legend { background:rgba(255,255,255,.97); color:var(--ink); border-color:#b9cfd9; box-shadow:0 4px 18px #19384a20; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:#fff; color:var(--ink); }
.leaflet-tooltip.depth-tip { background:#fff; color:#176892; border-color:#8eb9cd; }
.section-tag { color:#347767; border-color:#b7dacc; background:#eff8f4; margin-left:8px; font-weight:400; }
#survey-area-details>summary { cursor:pointer; font-size:14px; font-weight:700; color:var(--ink); }
#survey-area-details[open]>summary { margin-bottom:15px; }
.area-tools button { background:#f1f7fa; color:#335c70; border-color:#b9d0dc; }
.area-tools button[aria-pressed=true] { background:#dff4ee; border-color:#117d70; color:#075d50; box-shadow:inset 0 0 0 1px #117d70; }
#area-help,.area-style label,.area-select-label { color:var(--muted); }
.area-style input[type=color] { background:#fff; border-color:#afc5d1; }
#area-name::placeholder { color:#657d8b; }
#right.floating { border-color:#9dbac9; box-shadow:0 18px 60px #19384a38; }
#right.floating #analysis-size-controls { color:var(--muted); }
#right.floating #analysis-resize { background:#117d70; color:#fff; }