/* 기본 레이아웃 — 별도 디자인 없이 깔끔하고 기능적인 스타일 */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  color: #222;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── 상단 컨트롤 바 ───────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 1px solid #d8dadf;
  padding: 10px 16px;
  flex: 0 0 auto;
}

.topbar__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.controls__group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
}

fieldset.controls__group {
  border: 1px solid #d8dadf;
  border-radius: 4px;
  padding: 4px 10px;
}

fieldset.controls__group legend {
  font-size: 12px;
  color: #666;
  padding: 0 4px;
}

.controls__group label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

#keywords {
  padding: 5px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 220px;
}

/* 정적 스냅샷 — 키워드는 편집 불가(읽기 전용)임을 시각적으로 표시 */
#keywords[readonly] {
  background: #eef0f2;
  color: #888;
  cursor: not-allowed;
}

.controls__buttons { margin-left: auto; }

button {
  padding: 6px 14px;
  border: 1px solid #2563c4;
  background: #2563c4;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover:not(:disabled) { background: #1d4fa0; }

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#btn-stop {
  border-color: #c0392b;
  background: #c0392b;
}
#btn-stop:hover:not(:disabled) { background: #a13125; }

#btn-export {
  border-color: #2e8b57;
  background: #2e8b57;
}
#btn-export:hover:not(:disabled) { background: #256e45; }

/* ── 진행률 ───────────────────────────────────── */
.progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.progress__bar-wrap {
  flex: 1;
  height: 14px;
  background: #e3e5e9;
  border-radius: 7px;
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: #2563c4;
  transition: width 0.25s ease;
}

.progress__bar.is-error { background: #c0392b; }
.progress__bar.is-done { background: #2e8b57; }

.progress__label {
  flex: 0 0 auto;
  min-width: 220px;
  font-size: 12px;
  color: #555;
}

/* ── 본문 레이아웃: 좌 지도 / 우 그리드 ─────────── */
.layout {
  flex: 1 1 auto;
  display: flex;
  gap: 10px;
  padding: 10px;
  min-height: 0;
}

.panel {
  background: #fff;
  border: 1px solid #d8dadf;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.panel--map { flex: 1 1 50%; }
.panel--grid { flex: 1 1 50%; }

.panel__title {
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #eaebee;
  background: #fafbfc;
  border-radius: 6px 6px 0 0;
}

.panel__count {
  font-weight: 400;
  color: #888;
  font-size: 12px;
}

.map-frame {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 0 0 6px 6px;
}

/* ── 데이터 그리드 ────────────────────────────── */
.grid-wrap {
  flex: 1;
  overflow: auto;
}

.grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.grid th, .grid td {
  border: 1px solid #e2e4e8;
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.grid th {
  position: sticky;
  top: 0;
  background: #eef1f5;
  z-index: 1;
}

.grid td.wrap {
  white-space: normal;
  max-width: 240px;
}

/* 지오코딩 실패 행은 빨강 배경으로 시각 구분 */
.grid tr.row--failed { background: #fde8e8; }
.grid tr.row--failed:hover { background: #fbd9d9; }
.grid tr:hover:not(.row--failed) { background: #f3f6fb; }

.grid .badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}
.grid .badge--ok { background: #d5efdf; color: #1d6b3c; }
.grid .badge--fail { background: #f6cccc; color: #9c2a1f; }

.grid a { color: #2563c4; }

.grid__empty td {
  text-align: center;
  color: #999;
  padding: 24px;
  white-space: normal;
}

/* 분류 필터·셀 */
.filter-target {
  font-size: 13px;
  font-weight: normal;
  margin-left: 12px;
  color: #555;
  cursor: pointer;
}
.grid td.cat { font-weight: 600; white-space: nowrap; }
.grid td.cat--target { color: #2e9e3f; }
.grid td.cat--owner { color: #aaa; font-weight: 400; }
.grid td.cat--sender { color: #f58231; }
.grid td.cat--unknown { color: #999; font-weight: 400; }

/* 원본↔정규화 주소 차이 강조 */
.grid td.norm-changed {
  background: #fff5d6;
  font-weight: 600;
}
.grid td.norm-orig {
  color: #999;
}
.norm-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  color: #946800;
  background: #ffe9a8;
  border-radius: 8px;
  vertical-align: middle;
}