:root {
  /* v1.0 Flicker-Free ?듯빀 ?덉씠?꾩썐 ?쒖뒪??*/
  --app-safe-height: 100dvh;
  --h-topbar: 40px;
  --h-statusCounts: 34px;
  --h-topFilterBar: 92px;
}

/* -----------------------------------------
   湲곗큹 ?덉씠?꾩썐 (html/body/appRoot)
   ----------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100dvh;
  /* dvh ?곸슜?쇰줈 紐⑤컮??二쇱냼李??€??*/
  overflow: hidden;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#appRoot {
  position: relative;
  width: 100%;
  height: var(--app-safe-height, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* -----------------------------------------
   硫붿씤 ?덉씠?꾩썐 (#layout)
   ----------------------------------------- */
#layout {
  position: absolute;
  top: 166px;
  /* topbar(40) + statusCounts(34) + topFilterBar(92) */
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--app-safe-height, 100dvh) - 166px);
  max-height: calc(var(--app-safe-height, 100dvh) - 166px);
  width: 100%;
  overflow: hidden;
  box-sizing: border-box !important;
}

/* -----------------------------------------
   ?ъ씠?쒕컮 諛??⑤꼸 ?ㅼ젙
   ----------------------------------------- */
#secondaryPanel {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 350px;
  transform: translateX(-100%);
  z-index: 1001;
  visibility: hidden;
  opacity: 0;
}

#topbar {
  position: absolute;
  top: 0px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #e9f2ff;
  border-bottom: 1px solid #c9dfff;
  z-index: 1000;
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  min-width: 100%;
  max-width: 100%;
}

#statusCounts {
  position: absolute;
  top: 40px;
  height: 34px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 12px;
  color: #666;
  min-height: 34px;
  max-height: 34px;
  /* ?誘れ뵠 ?⑥쥙??*/
  flex-shrink: 0;
  /* ??由??⑥쥙??*/
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box;
  z-index: 1000;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* 二쇱냼 寃€?됱갹 媛€蹂€ ?덈퉬 議곗젙 (PC) */
.address-search-area {
  flex: 1;
  display: flex !important;
  gap: 4px;
  min-width: 120px;
  max-width: 450px;
  margin: 0 10px;
}

#addressSearchInput {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

#addressSearchBtn {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
}

#topFilterBar {
  position: absolute;
  top: 74px;
  /* topbar(40px) + statusCounts(34px) */
  height: 92px;
  z-index: 1000;
  min-height: 92px;
  max-height: 92px;
  flex-shrink: 0;
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}


/* 筌왖€???뚢뫂?껅에?*/
.map-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.map-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-height: min-content;
  max-height: calc(100% - 40px);
  overflow-y: auto;
}

/* ?됰슢????袁り숲 甕곌쑵?????삘뀲 ?뚢뫂?껅에?甕곌쑵?됪€???쑴???띿쓺 ?????곗춦 */
.map-control-briefing-filter .briefing-filter-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px !important;
  padding: 4px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.map-control-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.map-control-btn:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.map-control-btn.active {
  background: #007AFF;
  color: white;
}

.control-icon {
  font-size: 18px;
}

/* 嚥≪뮆諭띌뀎??뚢뫂???€瑗?*/
.roadview-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 100vw?癒?퐣 100%嚥?癰궰€野?- 筌왖€???怨몃열 ??곷퓠??뺤춸 */
  height: 100%;
  /* 100vh?癒?퐣 100%嚥?癰궰€野?- 筌왖€???怨몃열 ??곷퓠??뺤춸 */
}

.roadview-container.hidden {
  display: none;
}

/* 雅뚯눘???類ｋ궖 獄쏅벡??(沃섎챶?뀐쭕??袁⑸퓠 獄쏄퀣?? */
.roadview-address-box {
  position: absolute;
  bottom: 220px;
  left: 20px;
  width: 230px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 12px;
}

.address-icon {
  font-size: 16px;
  color: #007AFF;
  flex-shrink: 0;
}

.address-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.address-content .road-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  line-height: 1.2;
}

.address-content .address {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

.address-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.date-badge {
  background: #f0f0f0;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.view-mode {
  background: #007AFF;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.roadview-close-btn {
  position: absolute;
  /* fixed?癒?퐣 absolute嚥?癰궰€野?- 嚥≪뮆諭띌뀎??뚢뫂???€瑗?疫꿸퀣? */
  top: 20px;
  right: 20px;
  /* ?ル슣湲??λ퓠???怨쀪맒??μ몵嚥?癰궰€野?*/
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 500;
  /* z-index???誘る연??嚥≪뮆諭띌뀎??袁⑸퓠 ?類ㅻ뼄??癰귣똻??袁⑥쨯 ??륁젟 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* flex ??됱뵠?袁⑹뜍???怨밸샨??獄쏆룇? ??낅즲嚥???쇱젟 */
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
}

.roadview-close-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.roadview-content {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #f8f9fa;
  /* 野꺜€????깅퓠??獄쏆빘? ???퉳??곗쨮 癰궰€野?*/
}

/* ???걗??곗춳 ?뚢뫂???€瑗???€? ?遺용꺖??*/
.roadview-content>div {
  width: 100% !important;
  height: 100% !important;
}

/* ??쇱뵠甕????걗??곗춳 ?온€???????*/
.roadview-content {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

.roadview-content canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.roadview-content iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* ??쇱뵠甕????걗??곗춳 ??€? ?遺용꺖??揶쏅벡????덊돩 ??쇱젟 */
.roadview-content>div {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

.roadview-minimap {
  position: absolute !important;
  bottom: 20px !important;
  left: 20px !important;
  width: 262px !important;
  height: 180px !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 3px solid #FF6B35 !important;
  animation: minimapPulse 2s infinite !important;
}

@keyframes minimapPulse {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  50% {
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5);
  }

  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

.minimap-label {
  position: absolute !important;
  top: -25px !important;
  left: 0 !important;
  background: #FF6B35 !important;
  color: white !important;
  padding: 4px 8px !important;
  border-radius: 4px 4px 0 0 !important;
  font-size: 11px !important;
  font-weight: bold !important;
  z-index: 1001 !important;
  white-space: nowrap !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 筌왖€???ル슣湲???됰슢??臾볦겱???袁り숲 */
.map-briefing-filter {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.roadview-minimap.expanded {
  width: 300px !important;
  height: 200px !important;
}



.minimap-header {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
}

.minimap-menu-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.minimap-menu-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.minimap-content {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  min-height: 100px !important;
  background: #f0f0f0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.minimap-controls {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

.minimap-expand-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.minimap-expand-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.minimap-zoom {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.minimap-zoom button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  width: 24px;
  height: 20px;
  transition: background 0.2s ease;
}

.minimap-zoom button:hover {
  background: rgba(255, 255, 255, 1);
}

/* ----------------- ?怨룸뼊獄?----------------- */
/* 餓λ쵎???#topbar ???????볤탢 - ?袁⑸퓠????€? ?類ㅼ벥??*/

.panel-header {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
  background: #f0f2f5;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.panel-back-btn {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  color: #555;
  transition: all 0.2s;
  user-select: none;
}

.panel-back-btn:hover {
  background-color: #e0e0e0;
  color: #007bff;
}

.panel-controls {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* ----------------- ?귐딅뮞??----------------- */
#listingList {
  list-style: none;
  margin: 0;
  padding: 0;
}

#listingList li {
  padding: 10px 12px 12px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
  font-size: 14px;
  /* 疫꼲€????由????뵬 */
  line-height: 1.4;
  /* 餓?揶쏄쑨爰????뵬 */
  position: relative;
  background: #fff;
  transition: background .18s, box-shadow .18s;
}

#listingList li:hover {
  background: #eef5ff;
}

#listingList li.active {
  background: #d9ecff;
  box-shadow: inset 0 0 0 2px #1565c0;
}

#listingList li .tag-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* ?怨밴묶 燁?*/
.status-chip {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  margin-right: 6px;
  border-radius: 3px;
  font-weight: 600;
  background: #607d8b;
  vertical-align: middle;
}

/* 燁삳?諭???깆뵥 ??용뮞?紐껊굶 */
.card-line1 {
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 14px;
  /* 疫꼲€????由????뵬 */
}

.card-line2 {
  color: #333;
  margin-bottom: 2px;
  font-size: 14px;
  /* 疫꼲€????由????뵬 */
}

.card-line3 {
  color: #555;
  margin-bottom: 1px;
  font-size: 14px;
  /* 疫꼲€????由????뵬 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-line4 {
  color: #666;
  font-size: 14px;
  /* 疫꼲€????由????뵬 */
  max-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-line5 {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 13px;
  /* ??꾩퍢 ?臾롮쓺 */
  color: #555;
}

.card-line5 .agent {
  font-weight: 600;
}

.muted {
  color: #666;
  font-size: 11px;
}

/* ----------------- ?袁り숲 獄?----------------- */
#filterBar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
  padding: 6px 12px 4px;
  background: #f4f7fb;
  border-bottom: 1px solid #d0d6dd;
  font-size: 12px;
}

#filterBar .f-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 90px;
}

#filterBar .f-item.short {
  min-width: 70px;
}

#filterBar .f-item.tiny {
  min-width: 55px;
}

#filterBar .f-item.range {
  min-width: 150px;
}

#filterBar .f-item.keyword {
  flex: 1 1 200px;
  min-width: 200px;
}

#filterBar .f-item.tag-legend {
  min-width: 150px;
}

#filterBar .legend-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

#filterBar .f-label {
  font-size: 11px;
  color: #555;
  letter-spacing: -0.5px;
}

#filterBar .f-ctl {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  min-height: 28px;
}

#filterBar select.f-ctl {
  cursor: pointer;
}

#filterBar .range-box {
  display: flex;
  align-items: center;
}

#filterBar .range-box .dash {
  padding: 0 4px;
  color: #666;
  font-size: 11px;
}

#filterBar .f-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

#filterBar .f-btn {
  padding: 6px 11px;
  font-size: 12px;
  border: 1px solid #888;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

#filterBar .f-btn.primary {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
}

#filterBar .f-btn:hover {
  filter: brightness(0.93);
}

/* ??볥젃 ??*/
.tag-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 2px;
  border: 1px solid #555;
  box-sizing: border-box;
}

.tag-color-red {
  background: #e53935;
}

.tag-color-blue {
  background: #1e88e5;
}

.tag-color-green {
  background: #43a047;
}

.tag-color-yellow {
  background: #fdd835;
}

.tag-hint {
  font-size: 10px;
}

/* ----------------- ?怨밴묶 燁삳똻???獄?----------------- */
/* 餓λ쵎???#statusCounts ???????볤탢 - ?袁⑸퓠????€? ?類ㅼ벥??*/

/* ----------------- 筌왖€???怨몃열 ----------------- */
/* [MOD] #mapArea / #map ?????*/
#mapArea {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 400px;
  /* ??됱읈?關??*/
}

/* 筌왖€??嚥≪뮆逾???살쒔??됱뵠 */
#mapLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  z-index: 20;
}

.hidden {
  display: none;
}

/* ----------------- ??볥젃 ?遺얠쟿??----------------- */
.tag-palette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.tag-palette .tp-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.tag-palette .tp-dot.red {
  background: #e53935;
}

.tag-palette .tp-dot.blue {
  background: #1e88e5;
}

.tag-palette .tp-dot.green {
  background: #43a047;
}

.tag-palette .tp-dot.yellow {
  background: #fdd835;
}

.tag-palette .tp-dot.none {
  background: #ccc;
}

/* ----------------- 筌왖€??餓λ쵐??????----------------- */
#mapCenterCross {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

#mapCenterCross .ch-line {
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.25s, transform 0.25s;
}

#mapCenterCross .ch-h {
  width: 34px;
  height: 2px;
}

#mapCenterCross .ch-v {
  height: 34px;
  width: 2px;
}

#mapCenterCross.flash .ch-line {
  background: #ff5722;
  transform: scale(1.25);
}

@media (prefers-color-scheme: dark) {
  #mapCenterCross .ch-line {
    background: rgba(255, 255, 255, 0.7);
  }

  #mapCenterCross.flash .ch-line {
    background: #ffa726;
  }
}

/* ----------------- ??쎄쾿嚥▲끇而??뚣끉??? (?醫뤾문) ----------------- */
#listingList {
  scrollbar-width: thin;
  scrollbar-color: #c2c8d0 #f0f2f5;
}

#listingList::-webkit-scrollbar {
  width: 10px;
}

#listingList::-webkit-scrollbar-track {
  background: #f0f2f5;
}

#listingList::-webkit-scrollbar-thumb {
  background: #c2c8d0;
  border-radius: 5px;
}

/* ??ㅺ섯/?袁り숲 ?諭€??*/
.panel-section {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  background: #fafafa;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 8px;
}

.filter-grid label {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #444;
  gap: 2px;
}

.filter-grid input,
.filter-grid select {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.filter-grid input:focus,
.filter-grid select:focus {
  border-color: #1e88e5;
}

.filter-grid input.invalid {
  border-color: #e53935;
  background: #ffebee;
}



/* ================================
   [PATCH] 2025-07-23 筌왖€???怨몃열 揶쏅벡????由???쇱젟
   - #mapWrap, #map??筌ㅼ뮇???誘れ뵠/揶쎛€嚥?100% ?怨몄뒠
   - flex ??됱뵠?袁⑹뜍?癒?퐣 width:0 ??롫뮉 ?얜챷??獄쎻뫗?(min-width:0)
   ================================ */

#mainContent {
  position: absolute;
  top: 0;
  /* #layout ??€??癒?퐣 ??뽰삂 */
  left: 280px;
  /* ?????뺤뺍 ??덊돩 ?⑥쥓??*/
  right: 0;
  bottom: 0;
  height: 100%;
  overflow: hidden;
  transition: none !important;
  /* ?醫딅빍筌롫뗄?????볤탢 */
}

/* 筌뤴뫀諭?UI ??由??⑥쥙??- ??? 癰궰€野??븍뜃? */
/* 2筌??????뺤뺍揶쎛€ ??€????筌롫뗄???꾩꼹?쀯㎘?鈺곌퀣??- ??볤탢??*/
/* #secondaryPanel.visible ~ #mainContent,
#layout:has(#secondaryPanel.visible) #mainContent {
  width: calc(100% - 280px - 350px) !important;
} */

#mapWrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------
   ?⑤벏???醫뤿뼢
------------------------------------------------- */
.hidden {
  display: none;
}

/* ?⑥쥒而?筌뤴뫖以??됯퀡??揶쏅벡?ｆ에???뽯뻻 */
#viewCustomerList:not(.hidden) {
  display: block !important;
}

#viewCustomerList.hidden {
  display: none !important;
}

/* -----------------------------------------------
   嚥≪뮄????袁⑹뒄 ?遺얇늺
------------------------------------------------- */
.login-required-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.login-required-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ?紐껋뵬??嚥≪뮄??????????*/
.login-required-box .login-form {
  text-align: left;
  margin-top: 20px;
}

.login-required-box .login-form .form-group {
  margin-bottom: 15px;
}

.login-required-box .login-form .form-group label {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-weight: 500;
  font-size: 13px;
}

.login-required-box .login-form .form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #e1e5e9;
  border-radius: 5px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.login-required-box .login-form .form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-required-box .login-form .btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-bottom: 15px;
}

.login-required-box .login-form .btn:hover {
  transform: translateY(-2px);
}

.login-required-box .login-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-required-box .login-form .login-links {
  text-align: center;
  margin-top: 10px;
}

.login-required-box .login-form .login-links a {
  color: #667eea;
  text-decoration: none;
  font-size: 12px;
  margin: 0 8px;
}

.login-required-box .login-form .login-links a:hover {
  text-decoration: underline;
}

.login-required-box .login-form .error-message {
  background: #fee;
  color: #c33;
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 15px;
  font-size: 12px;
  display: none;
}

.login-required-box .login-form .error-message.show {
  display: block;
}

.login-box {
  width: 320px;
  padding: 32px 28px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  text-align: center;
  font-family: sans-serif;
}

/* ??덉쨮??嚥≪뮄??????????*/
.login-form {
  text-align: left;
}

.login-form .form-group {
  margin-bottom: 1.5rem;
}

.login-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.login-form .form-group input {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid #e1e5e9;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.login-form .form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-form .btn {
  width: 100%;
  padding: 0.75rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.login-form .btn:hover {
  transform: translateY(-2px);
}

.login-form .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-form .login-links {
  margin-top: 1rem;
  text-align: center;
}

.login-form .register-link {
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
}

.login-form .register-link:hover {
  text-decoration: underline;
}

.login-form .error-message {
  color: #e74c3c;
  background: #fdf2f2;
  padding: 0.75rem;
  border-radius: 5px;
  margin-top: 1rem;
  display: none;
  font-size: 14px;
}

.login-form .error-message.show {
  display: block;
}

/* -----------------------------------------------
    筌왖€?????좑쭩?癰귣똻??
------------------------------------------------- */



/* =====================================================
   ?怨룸뼊 揶쎛€嚥??袁り숲獄??????
   ===================================================== */
.top-filter {
  border-bottom: 1px solid #ddd;
  background: #fafafa;
  padding: 6px 8px 10px;
  font-size: 12px;
  overflow-x: auto;
  /* 揶쎛€嚥???쎄쾿嚥???됱뒠 */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* 餓κ쑬而?퐛?疫뀀뜆? */
  align-items: flex-end;
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}

.top-filter .tf-row {
  display: grid;
  grid-template-columns: repeat(20, minmax(80px, 1fr)) 120px;
  /* 20?袁⑤굡 ?類ㅼ삢 + 甕곌쑵??怨몃열 */
  gap: 4px;
  margin-bottom: 4px;
  min-width: max-content;
  /* ??€? ?꾩꼹?쀯㎘醫롫퓠 筌띿쉸????덊돩 ?類ㅼ삢 (餓κ쑬而?퐛?獄쎻뫗?) */
}

.top-filter .tf-row.tf-labels div {
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
}

.top-filter .tf-row.tf-inputs input,
.top-filter .tf-row.tf-inputs select {
  width: 100%;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  background-color: white;
  box-sizing: border-box;
}

/* ?袁れ넺 ?袁り숲(select) ??덊돩 ?諛명€??온€??*/
#tf_status,
#tf_h_status {
  min-width: 60px !important;
  max-width: 60px !important;
}

.top-filter .tf-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  min-width: 120px;
}

#topFilterApplyBtn,
#topFilterResetBtn {
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
  min-width: 50px;
}

/* 雅뚯눛源??袁り숲 ?諭€?? 20??域밸챶???*/
#housingFilterSection .tf-row {
  grid-template-columns: repeat(20, 1fr) 120px;
}

/* ?袁り숲 ?諭€?? flex嚥???? ?⑤벀而?筌△뫁?, 甕곌쑵?됪€?揶쏆늿? 餓κ쑴肉?獄쏄퀣??*/
.top-filter .filter-section {
  flex: 1;
  min-width: 0;
}

.top-filter .tf-row.tf-actions-row {
  grid-template-columns: 1fr;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ??륁뵠?됰슢????袁り숲 筌뤴뫀諭??袁⑹뒠 ?????
   (body.hybrid-mode ??€???? ??됱뱽 ???춸 ??뽮쉐??
   疫꿸퀣??!important ??쇱젟????堉?怨뚮┛ ?袁る퉸 ?怨멸쉭 ?醫뤾문??????
???????????????????????????????????????????????????????????????????????????????????????????????????? */


/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   (??곸읈 ?袁⑺뒄????륁뵠?됰슢????袁り숲 筌뤴뫀諭??袁⑹뒠 ???????볤탢??- ???뵬 筌ㅼ뮉釉??μ몵嚥???€猷?
   ???????????????????????????????????????????????????????????????????????????????????????????????????? */
body.hybrid-mode .count-info {
  position: absolute !important;
  top: 30px !important;
  /* 燁?獄??袁⑥삋 */
  left: 15px !important;
  right: 15px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* ?ル슣???브쑴沅?*/
  font-size: 11px !important;
  z-index: 1001 !important;
}

body.hybrid-mode .sheet-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  border: none !important;
}

/* 揶쏆뮆??甕곌쑵????由?獄??怨좊뱜 筌ㅼ뮇伊?筌ㅼ뮇???*/
body.hybrid-mode .btn-add-listing,
body.hybrid-mode .mode-btn,
body.hybrid-mode .subtype-btn,
body.hybrid-mode .btn-sheet-open,
body.hybrid-mode .refresh-btn {
  padding: 2px 8px !important;
  height: 24px !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
}

#filterTriggerBtn {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#filterTriggerBtn:hover {
  background: #0056b3;
}

#filterSummaryArea {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
  /* Firefox */
}

#filterSummaryArea::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

.filter-chip {
  background: #e9f2ff;
  color: #0056b3;
  border: 1px solid #c9dfff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  animation: fadeIn 0.2s ease-out;
}

.filter-chip .remove-chip {
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: #999;
}

.filter-chip .remove-chip:hover {
  color: #dc3545;
}

/* 3. ??덉쨮???袁り숲 筌뤴뫀???????*/
#hybridFilterModal {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100dvh;
  background: white;
  z-index: 2000;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#hybridFilterModal.show {
  transform: translateX(0);
}

.hybrid-modal-header {
  padding: 16px;
  background: #e9f2ff;
  border-bottom: 1px solid #c9dfff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hybrid-modal-header h3 {
  margin: 0;
  font-size: 14px;
  color: #0056b3;
}

.hybrid-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.hybrid-modal-footer {
  padding: 16px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

.hybrid-modal-footer button {
  flex: 1;
  height: 40px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

#hybridApplyBtn {
  background: #007bff;
  color: white;
  border: none;
}

#hybridResetBtn {
  background: white;
  color: #666;
  border: 1px solid #ccc;
}

/* 筌뤴뫀????살쒔??됱뵠 */
#hybridFilterOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1999;
  display: none;
}

#hybridFilterOverlay.show {
  display: block;
}

/* 筌뤴뫀????€? ?袁り숲 ??????됱뵠?袁⑹뜍 筌ㅼ뮇???*/
.hybrid-modal-content .filter-section {
  display: block !important;
  /* 筌뤴뫀????€??癒?퐣????湲??紐꾪뀱 */
}

.hybrid-modal-content .tf-row.tf-labels {
  display: none;
  /* 筌뤴뫀??癒?퐣????곌볼????€? placeholder????살구??곗쨮 ??筌?揶쎛€?關苑??⑥쥓?? ??곕뼊 ??? */
}

.hybrid-modal-content .tf-row.tf-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hybrid-modal-content .tf-row.tf-inputs>div,
.hybrid-modal-content .tf-row.tf-inputs>input,
.hybrid-modal-content .tf-row.tf-inputs>select {
  width: 100% !important;
  height: 34px !important;
  margin-bottom: 4px;
}

/* ?袁り숲 ??????롫퓠 ??살구???袁る립 ?怨쀬뵠????욧쉐 ??뽰뒠 (CSS嚥???곌볼 癰귣벀?? */
.hybrid-modal-content .tf-row.tf-inputs input::before {
  content: attr(placeholder);
  display: block;
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 疫꿸퀣???怨룸뼊獄???龜???구/筌욊낯肄???€已? 癰귣떯而?*/
#topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #e9f2ff;
  border-bottom: 1px solid #c9dfff;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 40px;
  max-height: 40px;
  /* ?誘れ뵠 ?⑥쥙??*/
  box-sizing: border-box;
  flex-shrink: 0;
  /* ??由??⑥쥙??*/
}

.office-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

/* 筌뤴뫀諭??袁れ넎 甕곌쑵???????*/
.mode-switch {
  position: absolute;
  top: 0;
  right: -80px;
  /* ?怨뱀깈 ??용뮞?紐? 野껊??귨쭪? ??낅즲嚥???삘뀲筌잛럩?앮에???€猷?*/
}

.mode-toggle-btn {
  background: #007bff;
  color: white;
  border: 1px solid #007bff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  justify-content: center;
}

.mode-toggle-btn:hover {
  background: #0056b3;
  border-color: #0056b3;
  transform: translateY(-1px);
}

.mode-toggle-btn.briefing-mode {
  background: #28a745;
  border-color: #28a745;
}

.mode-toggle-btn.briefing-mode:hover {
  background: #218838;
  border-color: #218838;
}

#officeName {
  font-size: 16px;
  font-weight: 700;
}

/* auth-links ?怨몃열 ?????*/
.auth-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ???????釉뤄쭗??????*/
.user-role-name {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
}

.auth-links a {
  margin-left: 0;
  /* 疫꿸퀣??margin ??볤탢 */
  font-size: 12px;
  text-decoration: none;
  color: #007bff;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

.auth-links a:hover {
  background: #f8f9fa;
  color: #0056b3;
  transform: translateY(-1px);
}

/* 嚥≪뮄??袁⑹뜍 甕곌쑵???諛명€??????*/
#logoutBtn {
  background: #dc3545;
  color: white !important;
  border: 1px solid #dc3545;
}

#logoutBtn:hover {
  background: #c82333 !important;
  border-color: #c82333;
  color: white !important;
}

/* === ?????뺤뺍??筌띲끇窺?귐딅뮞???븐늿?졿묾??袁る립 ??됱뵠?袁⑹뜍 癰귣떯而?================== */
#listingList {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =============================================================== */

/* ============================================
   筌띾뜆鍮???€???쎄숲 ?뚣끉??? ?????+ ?醫딅빍筌롫뗄???
   ============================================ */
.marker-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.marker-dot.active {
  transform: scale(1.9);
  border-color: #ffeb3b;
  box-shadow: 0 0 6px rgba(255, 235, 59, .9);
  z-index: 1;
}

.cluster-small {
  width: 26px;
  height: 26px;
  background: #4a90e2;
  font-size: 12px;
}

.cluster-mid {
  width: 34px;
  height: 34px;
  background: #357ae8;
  font-size: 13px;
}

.cluster-big {
  width: 44px;
  height: 44px;
  background: #2356b8;
  font-size: 14px;
}

/* ?????뺤뺍 ???????꾩뜎 筌띲끇窺 ?귐딅뮞?硫? ??筌△뫀猷꾣에?*/
#listingList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listing-item {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.listing-item:hover {
  background: #f5f5f5;
}

/* 揶??諭€??疫꿸퀡??*/

#map {
  position: absolute;
  inset: 0;
}

/* ?귐딅뮞??疫꿸퀡????????醫? */
#listingList {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listing-item {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.listing-item:hover {
  background: #f5f5f5;
}

/* 筌롫뗄???怨몃열 - 餓λ쵎????볤탢??*/
/* 餓λ쵎???類ㅼ벥 ??볤탢??*/

/* ?귐딅뮞???袁⑹뵠??疫꿸퀡??*/
#listingList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listing-item {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.listing-item:hover {
  background: #f5f5f5;
}

/* ?袁れ넺 ??뽯뻻 ?????*/
.listing-item .status {
  color: #666;
  font-size: 12px;
  margin-left: 8px;
  padding: 2px 6px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}


/* ================================================================ */
/* === ??€????쎄쾿嚥??????귐딅뮞??????繹먯뮆臾€????ｋ궢 ===================== */
@keyframes blinkFade {
  0% {
    background: #fff176;
    transform: scale(1);
  }

  50% {
    background: #ffeb3b;
    transform: scale(1.1);
  }

  100% {
    background: transparent;
    transform: scale(1);
  }
}

@keyframes blinkFadeHover {
  0% {
    background: #fff176;
    transform: scale(1);
  }

  50% {
    background: #ffeb3b;
    transform: scale(1.15);
  }

  100% {
    background: transparent;
    transform: scale(1);
  }
}

@keyframes clusterBlinkHover {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.blink-highlight {
  animation: blinkFade 0.8s ease-out 1;
}

/* ===== ?귐딅뮞???醫뤾문/揶쏅벡??=========================================== */
.listing-item.selected {
  background: #fff3cd;
  /* ?怨좊립 ?紐껋삂 */
  transition: background .25s;
}

.listing-item.blink {
  animation: blinkFade 0.8s ease-out 1;
}

.marker-dot.blink {
  animation: blinkFade 0.8s ease-in-out !important;
  box-shadow: 0 0 15px currentColor !important;
}

@keyframes blinkFade {
  0% {
    background: #fff176;
  }

  100% {
    background: transparent;
  }
}

/* ??욧탷 ??ｊ볼?癒?뵬????*/
#listingSidebarWrap>label {
  margin: 0 12px 4px !important;
  padding: 0 !important;
}

/* =================================================
   [Cluster] ??€???쎄숲 甕곌쑬???癒곗굨 & 餓λ쵐釉??類ｌ졊
   ================================================= */

/* 甕곌쑬???뚢뫂???€瑗ョ몴?flex嚥? ??ъ쁽 餓λ쵐釉???類ｌ졊 */
.cluster-bubble {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3) !important;
  background-color: inherit !important;
  color: #fff !important;
  font-weight: 600 !important;
  user-select: none !important;
}

/* ??由계퉪?筌왖€??獄?獄쏄퀗瑗??*/
.cluster-small {
  width: 26px;
  height: 26px;
  background: #4a90e2 !important;
  font-size: 12px;
}

.cluster-mid {
  width: 34px;
  height: 34px;
  background: #357ae8 !important;
  font-size: 13px;
}

.cluster-big {
  width: 44px;
  height: 44px;
  background: #2356b8 !important;
  font-size: 14px;
}

/* ?逾??곕뗄荑뉛쭕?뿅????덈뮉 ??€???쎄숲 甕곌쑬???????- 筌ㅼ뮄???怨쀪퐨??뽰맄 */
.cluster-bubble[data-recommended="true"],
.cluster-bubble.recommended {
  background-color: #FF3B30 !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3) !important;
}

/* ?逾???€???쎄숲 甕곌쑬??疫꿸퀡????????????(?곕뗄荑??怨밴묶 ?怨쀪퐨) */
.cluster-bubble.recommended.cluster-small,
.cluster-bubble.recommended.cluster-mid,
.cluster-bubble.recommended.cluster-big {
  background-color: #FF3B30 !important;
}

/* ?됰슢????怨밴묶揶쎛€ ??덈뮉 ??€???쎄숲 甕곌쑬???????- ??볤탢??(??깃맒??곗쨮筌??닌됲뀋) */

/* 甕곌쑬????疫꿸퀡??筌띾뜆鍮???? */
.cluster-bubble+img {
  display: none !important;
}

/* ?봔€筌?div overflow ????곴퐣 甕곌쑬????롡봺筌왖€ ??낅즲嚥?*/
div:has(> .cluster-bubble) {
  overflow: visible !important;
}

/* =================================================
   [Briefing] ?됰슢????怨밴묶 ?온€????뽯뮞??
   ================================================= */

/* ?됰슢??臾볦겱???袁り숲 */
.briefing-filter {
  position: relative !important;
  z-index: 999 !important;
  /* 2筌??????뺤뺍癰귣?????苡???쇱젟 */
}

/* 筌왖€???뚢뫂?껅에???€????됰슢????袁り숲 */
.map-control-briefing-filter {
  position: relative !important;
  margin-right: 8px !important;
}

.briefing-filter-btn {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #333 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  /* v6.4: 釉뚮씪?곗? GPU 遺€???쒓굅瑜??꾪빐 釉붾윭 ?꾪꽣 ??젣 */
}

.briefing-filter-btn:hover {
  background: #f8f9fa !important;
  border-color: #007bff !important;
}

.briefing-filter-dropdown {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  background: white !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 8px 10px !important;
  margin-right: 8px !important;
  min-width: 120px !important;
  z-index: 1000 !important;
}

.briefing-option {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  font-size: 11px !important;
  width: 100% !important;
  min-width: 80px !important;
  gap: 4px !important;
}

.briefing-option:last-child {
  margin-bottom: 0;
}

.briefing-option input[type="checkbox"] {
  margin-right: 6px;
  cursor: pointer;
  transform: scale(0.9);
}

.briefing-status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.briefing-status.normal {
  background: #1976d2;
}

.briefing-status.pending {
  background: #ff9800;
}

.briefing-status.completed {
  background: #4caf50;
}

.briefing-status.onhold {
  background: #9e9e9e;
}

/* ?됰슢??????€???용뮞??揶쏅벡????뽯뻻 */
.briefing-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #333 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* ?됰슢????怨밴묶 筌띾뜆鍮??????- ??볤탢??(??깃맒??곗쨮筌??닌됲뀋) */

/* 筌띲끇窺?귐딅뮞???됰슢????怨밴묶 ??뽯뻻 */
#listingList li .briefing-status-indicator,
#clusterItemList li .briefing-status-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

#listingList li .briefing-status-indicator:hover,
#clusterItemList li .briefing-status-indicator:hover {
  transform: translateY(-50%) scale(1.2);
}

#listingList li .briefing-status-indicator.briefing-normal,
#clusterItemList li .briefing-status-indicator.briefing-normal {
  background: #1976d2;
}

#listingList li .briefing-status-indicator.briefing-pending,
#clusterItemList li .briefing-status-indicator.briefing-pending {
  background: #ff9800;
}

#listingList li .briefing-status-indicator.briefing-completed,
#clusterItemList li .briefing-status-indicator.briefing-completed {
  background: #4caf50;
}

#listingList li .briefing-status-indicator.briefing-onhold,
#clusterItemList li .briefing-status-indicator.briefing-onhold {
  background: #9e9e9e;
}

/* 筌띲끇窺 ?怨멸쉭 ?類ｋ궖 ?됰슢????怨밴묶 */
.listing-detail-briefing-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.listing-detail-briefing-status:hover {
  transform: scale(1.05);
}

.listing-detail-briefing-status.briefing-normal {
  background: #1976d2;
}

.listing-detail-briefing-status.briefing-pending {
  background: #ff9800;
}

.listing-detail-briefing-status.briefing-completed {
  background: #4caf50;
}

.listing-detail-briefing-status.briefing-onhold {
  background: #9e9e9e;
}





/* 筌뤴뫀???????*/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2400;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ???ル굝利??類ㅼ뵥 ??쇱뵠??곗쨮域??????*/
.exit-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.exit-confirm-overlay.hidden {
  display: none;
}

.exit-confirm-overlay.show {
  opacity: 1;
}

.exit-confirm-dialog {
  background: white;
  border-radius: 16px;
  width: 85%;
  max-width: 320px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.exit-confirm-overlay.show .exit-confirm-dialog {
  transform: scale(1);
}

.exit-confirm-header {
  padding: 24px 20px 16px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
}

.exit-confirm-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.exit-confirm-body {
  padding: 20px;
  text-align: center;
}

.exit-confirm-message {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 24px;
}

.exit-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.exit-confirm-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-confirm-btn.cancel {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.exit-confirm-btn.cancel:hover {
  background: #e9ecef;
  color: #333;
}

.exit-confirm-btn.confirm {
  background: #dc3545;
  color: white;
}

.exit-confirm-btn.confirm:hover {
  background: #c82333;
  transform: translateY(-1px);
}


.modal-overlay.show {
  opacity: 1;
}

.modal {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

.modal-overlay.show .modal {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 15px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f8f9fa;
  color: #333;
}

.modal-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #6c757d;
}

.form-group input[type="checkbox"] {
  margin-right: 8px;
}

/* 揶쏆뮇??API ?袁⑤굡 ?????*/
.personal-api-fields {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 15px;
  margin-top: 15px;
}

.personal-api-fields .form-group {
  margin-bottom: 15px;
}

.personal-api-fields .form-group:last-child {
  margin-bottom: 0;
}

.personal-api-fields textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  resize: vertical;
  min-height: 80px;
}

.personal-api-fields textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* API ?뚯뒪??踰꾪듉 */
#testApiBtn {
  background: #17a2b8;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#testApiBtn:hover {
  background: #138496;
}

#testApiBtn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

/* ?쒗듃 ?좏깮 ?ㅽ???*/
.sheet-selection {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* 雅뚯눘??野꺜€???怨몃열 ?????(PC) */
.address-search-area {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 1001 !important;
  background: white !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #ddd !important;
  height: 34px !important;
  top: 33px !important;
  z-index: 1005 !important;
  /* ?怨몄맄 ??됱뵠??€以??????怨뱀깈?臾믪뒠 癰귣똻??*/
  pointer-events: auto !important;
  /* ??€????€源????됱뒠 */
  user-select: auto !important;
  /* ??용뮞???醫뤾문/??낆젾 ??됱뒠 */
  box-sizing: border-box !important;
}

.address-search-area input {
  pointer-events: auto !important;
  user-select: auto !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  width: 250px !important;
  background: transparent !important;
}

.address-search-area button {
  background: #007bff !important;
  color: white !important;
  border: none !important;
  padding: 4px 12px !important;
  border-radius: 15px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
}

.address-search-area button:hover {
  background: #0056b3 !important;
}

/* ?곹깭移댁슫?몃컮 留ㅻЪ??而⑦듃濡??ㅽ???*/
#statusCounts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.count-info {
  font-size: 14px;
  color: #495057;
  font-weight: 500;
}

.sheet-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  /* ?怨쀫? ?類ｌ졊 */
}



.sheet-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sheet-button {
  padding: 6px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  color: #6c757d;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 80px;
  text-align: center;
  position: relative;
}

.sheet-button:not(.selected):hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.sheet-button.selected {
  background: #007bff !important;
  color: white !important;
  border-color: #007bff !important;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
  font-weight: 600;
}

.sheet-button.selected::before {
  content: "??";
  font-weight: bold;
  margin-right: 6px;
  font-size: 14px;
  color: #ffffff;
}

.sheet-button.add-new {
  background: #28a745;
  color: white;
  border-color: #28a745;
  font-weight: 500;
}

.sheet-button.add-new:hover {
  background: #218838;
  border-color: #218838;
}

/* 而⑦뀓?ㅽ듃 硫붾돱 ?ㅽ???*/
.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  min-width: 140px;
  z-index: 2400;
  display: none;
  /* ???뮞?紐꾩뒠: ??湲?癰귣똻?졾칰?*/
  /* display: block !important; */
  /* background: red !important; */
}

.context-menu.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.context-menu-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: #495057;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.context-menu-item:hover {
  background: #f8f9fa;
  color: #007bff;
}

.context-menu-item.danger:hover {
  background: #f8d7da;
  color: #dc3545;
}

.context-menu-separator {
  height: 1px;
  background: #dee2e6;
  margin: 4px 0;
}

.btn-sheet-open {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  min-width: 120px;
  /* ??용뮞??疫뀀챷???筌띿쉳苡???덊돩 鈺곌퀣??*/
}

.btn-sheet-open:hover {
  background: #0056b3;
}

.btn-sheet-open:disabled,
.btn-sheet-open.disabled {
  background: #6c757d !important;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-sheet-edit {
  padding: 6px 12px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
  min-width: 80px;
}

.btn-sheet-edit:hover {
  background: #218838;
}

.sheet-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sheet-checkbox:hover {
  background: #e9ecef;
  border-color: #007bff;
}

.sheet-checkbox input[type="checkbox"] {
  margin: 0;
  width: 18px;
  height: 18px;
}

.sheet-checkbox .sheet-name {
  font-weight: 600;
  color: #495057;
  flex: 1;
}

.sheet-checkbox small {
  color: #6c757d;
  font-size: 12px;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #545b62;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ?怨룸뼊 ?袁り숲獄?甕곌쑵???????곗춦
???????????????????????????????????????????????????????????????????????????????????????????????????? */
/* 甕곌쑵???誘れ뵠???袁り숲獄??誘れ뵠??筌띿쉸??鈺곌퀣??*/
#topFilterApplyBtn,
#topFilterResetBtn {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   1筌??????뺤뺍 筌띲끇窺 ?귐딅뮞???袁⑥삋 ???⑤벀而???볤탢
???????????????????????????????????????????????????????????????????????????????????????????????????? */



/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ?????뺤뺍: 筌띲끇窺 ?귐딅뮞?????⑤벀而???볤탢
???????????????????????????????????????????????????????????????????????????????????????????????????? */

/* ????????????????????????????????????????????????????????????????????????????????????????????????????

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ?????뺤뺍 ??뽰삂 ?袁⑺뒄???怨룸뼊獄??誘れ뵠筌띾슦寃??袁⑥삋嚥???€?곫묾?
?????????????????????????????????????????????????????????????????????????????????????????????????????? */
/* ?怨룸뼊獄??誘れ뵠????쇱젫 揶?px)嚥?獄쏅떽??틠?깃쉭??*/
:root {
  --h-topbar: 56px;
  --h-statusCounts: 34px;
  --h-topFilterBar: 92px;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ?怨룸뼊獄???삳쐭/燁삳똻????袁り숲) 獄쏅쵐肉?layout????? ?袁⑺뒄嚥???筌?쑴??묾?
?????????????????????????????????????????????????????????????????????????????????????????????????????? */

/* layout: ?怨룸뼊獄??誘れ뵠筌띾슦寃?top?봔€??獄쏅뗀?뤸틦?? ??筌?쑴??묾?*/
/*#layout {
  position: absolute;
  top: calc(

    56px
    + 34px
    + 92px
  );
  left: 0;
  right: 0;
  bottom: 0;
  
  display: flex;       
  overflow: hidden;
} */
/* 餓λ쵎???類ㅼ벥 ??볤탢??- ?袁⑹벥 ?類ㅼ벥 ????*/

/* 餓λ쵎???類ㅼ벥 ??볤탢??- ?袁⑹벥 ?類ㅼ벥 ????*/

/* ?????뺤뺍 ?臾볦뿺 ?怨밴묶 */
#sidebar.collapsed {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

/* ?????뺤뺍 ?醫? 甕곌쑵??*/
.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: -12px;
  z-index: 1000;
  background: white;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  /* 揶쏅벡????뽯뻻 */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.sidebar-toggle:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.toggle-btn {
  background: none;
  border: none;
  font-size: 10px;
  color: #666;
  cursor: pointer;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.toggle-btn:hover {
  color: #333;
}

/* ?????뺤뺍 ?臾볦뿺 ?怨밴묶?癒?퐣 ?醫? 甕곌쑵?????읈 */
#sidebar.collapsed .toggle-btn {
  transform: rotate(180deg);
}

/* ?????뺤뺍 ?臾볦뿺 ?怨밴묶?癒?퐣 ??€? ?遺용꺖 ??ｋ┛疫?*/
#sidebar.collapsed #customerControls,
#sidebar.collapsed #listingControls,
#sidebar.collapsed #listingSidebarWrap {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 餓λ쵎???類ㅼ벥 ??볤탢??- ?袁⑹벥 ?類ㅼ벥 ????*/

/* 1筌??????뺤뺍 ?袁⑺뒄 鈺곌퀣??- #layout ??€??癒?퐣 ??뽰삂 */
#sidebar {
  position: absolute;
  top: 0;
  /* #layout ??€??癒?퐣 ??뽰삂 */
  height: calc(100vh - 166px);
  /* ?遺얇늺 ?袁⑷퍥 ?誘れ뵠?癒?퐣 ?怨룸뼊獄??誘れ뵠(166px) ??뽰뇚 */
  bottom: auto;
  /* bottom ??볤탢??뤿연 height揶쎛€ ?怨몄뒠??롫즲嚥?*/
  left: 0;
  width: 280px;
  z-index: 1000;
  transition: left 0.3s ease;
  overflow: hidden;
  /* ??쎄쾿嚥?獄쎻뫗? */
  box-sizing: border-box;
  /* ??ㅻ뎃/癰귣?????釉???誘れ뵠 ?④쑴沅?*/
  display: flex;
  /* flex ?뚢뫂???€瑗ユ에???쇱젟 */
  flex-direction: column;
  /* ?紐껋쨮 獄쎻뫚堉?*/
}

/* ?????뺤뺍 ?臾볦뿺 ?怨밴묶 */
#sidebar.collapsed {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
}

/* 筌롫뗄???꾩꼹?쀯㎘?餓λ쵎???類ㅼ벥 ??볤탢??*/

/* ?????뺤뺍 ?臾볦삋 ??筌롫뗄?ㅸ굜?묐€쀯㎘?鈺곌퀣??*/
#sidebar.collapsed~#mainContent {
  left: 20px;
}

/* ?????뺤뺍 ??깅쵟 ??筌롫뗄?ㅸ굜?묐€쀯㎘?鈺곌퀣??*/
#sidebar:not(.collapsed)~#mainContent {
  left: 280px;
}


/* ?????뺤뺍 ?臾볦뿺 ?怨밴묶?癒?퐣 ??€? ?遺용꺖 ??ｋ┛疫?*/
#sidebar.collapsed #customerControls,
#sidebar.collapsed #listingControls,
#sidebar.collapsed #listingSidebarWrap {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}




/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   4) 筌띲끇窺 ?귐딅뮞?紐껋춸 ??쎄쾿嚥?筌ｌ꼶??
???????????????????????????????????????????????????????????????????????????????????????????????????? */
#listingSidebarWrap {
  flex: 1;
  /* ??? ?⑤벀而?筌뤴뫀紐?筌△뫁? */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* flex ?袁⑹뵠??뽰뵠 ?봔€筌??誘れ뵠???λ뜃???? ??낅즲嚥?*/
  position: relative;
  /* ??€???쎄숲 ?귐딅뮞?紐꾩벥 ??? ?袁⑺뒄 疫꿸퀣???*/
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* ??€???쎄숲 ?귐딅뮞?紐? 野껊??귨쭪? ??낅즲嚥???쇱젟 */
  isolation: isolate !important;
  /* height: 100% ??볤탢 - flex: 1???癒?짗??곗쨮 ?誘れ뵠 鈺곌퀣??*/
}

#listingSidebarWrap>ul#listingList {
  flex: 1;
  /* ??? ?⑤벀而?筌뤴뫀紐?筌△뫁? */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  /* flex ?袁⑹뵠??뽰뵠 ?봔€筌??誘れ뵠???λ뜃???? ??낅즲嚥?*/
  height: 100%;
  /* 揶쏅벡?ｆ에??袁⑷퍥 ?誘れ뵠 筌△뫁? */
  max-height: none;
  /* 筌ㅼ뮆? ?誘れ뵠 ??쀫립 ??곸젫 */
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box;
  /* ??€???쎄숲 ?귐딅뮞?紐? 野껊??귨쭪? ??낅즲嚥???쇱젟 */
  position: relative;
  z-index: 1;
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ?袁⑷퍥癰귣떯由???ㅺ섯: ??? ?袁⑺뒄 + ??梨?獄쏄퉭諭뜻에?
???????????????????????????????????????????????????????????????????????????????????????????????????? */
.full-list-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: white;
  z-index: 1100 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.full-list-panel.hidden {
  display: none !important;
}

#fullListPanel {
  position: absolute;
  top: 0;
  /* #layout ??€??癒?퐣 ??뽰삂 */
  left: 0;
  width: 100%;
  height: 100%;
  /* #layout ?誘れ뵠 ?袁⑷퍥 ????*/
  z-index: 1100;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#fullBriefingListPanel {
  position: absolute;
  top: 0;
  /* #layout ??€??癒?퐣 ??뽰삂 */
  left: 0;
  width: 100%;
  height: 100%;
  /* #layout ?誘れ뵠 ?袁⑷퍥 ????*/
  z-index: 1100;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#fullListPanel.hidden,
#fullBriefingListPanel.hidden {
  display: none !important;
}

.full-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.full-list-header span {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.full-list-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ??€???쎄숲 筌뤴뫖以?*/
.cluster-list {
  position: absolute;
  /* ??? ?袁⑺뒄嚥?癰궰€野?*/
  top: 0;
  /* ?怨룸뼊?봔€????뽰삂 */
  left: 0;
  /* ?ル슣瑜ラ겫?????뽰삂 */
  right: 0;
  /* ?怨쀫?繹먮슣? */
  bottom: 0;
  /* ??롫뼊繹먮슣? */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  z-index: 5;
  /* 筌띲끇窺?귐딅뮞???袁⑸퓠 ??뽯뻻 (??? z-index ???? */
  height: 100% !important;
  /* ?袁⑷퍥 ?誘れ뵠 筌△뫁? */
  width: 100% !important;
  /* ?袁⑷퍥 ??덊돩 筌△뫁? */
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  min-height: 100% !important;
  max-height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  /* 疫꿸퀣??UI ?遺용꺖??븍궢 野껊??귨쭪? ??낅즲嚥???쇱젟 */
  pointer-events: auto !important;
  isolation: isolate !important;
  /* z-index 鈺곌퀣???곗쨮 筌띲끇窺 ?귐딅뮞?紐???野껊?臾??얜챷????욧퍙 */
  z-index: 5 !important;
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  transform: translateZ(0) !important;
  will-change: transform !important;
}

.cluster-list ul#clusterItemList {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  /* 餓λ쵐?? flex ?袁⑹뵠??뽰뵠 ?봔€筌??誘れ뵠???λ뜃???? ??낅즲嚥?*/
  height: 100% !important;
  /* ?袁⑷퍥 ?誘れ뵠 筌△뫁? */
  max-height: none !important;
  /* 筌ㅼ뮆? ?誘れ뵠 ??쀫립 ??곸젫 */
  /* UI 癰궰€??獄쎻뫗????袁る립 ?곕떽? ??쇱젟 */
  box-sizing: border-box !important;
  flex-shrink: 1 !important;
  flex-grow: 1 !important;
  /* 疫꿸퀣??UI ?遺용꺖??븍궢 野껊??귨쭪? ??낅즲嚥???쇱젟 */
  pointer-events: auto !important;
}

.cluster-list.hidden {
  display: none;
}

@keyframes clusterPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.cluster-animate {
  animation: clusterPop 0.35s ease-in-out !important;
  transform: scale(1.5);
  transition: transform 0.35s ease-in-out;
}

/* 筌띲끇窺 ?귐딅뮞????餓???됱뵠?袁⑹뜍 */
.listing-item .meta-top,
.listing-item .meta-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 1???궢 2??揶?揶쏄쑨爰?*/
.listing-item .meta-top {
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: space-between;
}

.listing-item .listing-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  flex: 1;
}

.listing-item .listing-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.listing-item .meta-top .region {
  font-weight: 500;
  color: #333;
}

.listing-item .meta-top .jibun {
  font-weight: 500;
  color: #333;
}

.listing-item .meta-top .floor {
  font-weight: 500;
  color: #333;
}

.listing-item .meta-top .store-name {
  font-weight: 500;
  color: #333;
}

.listing-item .meta-bottom {
  font-size: 0.93em;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.listing-item .meta-bottom .area-real {
  font-weight: 500;
  color: #333;
}

.listing-item .meta-bottom .deposit,
.listing-item .meta-bottom .rent,
.listing-item .meta-bottom .premium {
  color: #555;
}

/* ?袁⑹뒄 ???怨좊뱜 ??由곗쮯??깃맒 鈺곌퀣??*/
.listing-item .meta-top .addr {
  font-weight: 500;
}

.listing-item .meta-bottom {
  font-size: 0.93em;
  color: #555;
}

.cluster-bubble {
  pointer-events: auto !important;
  z-index: 100 !important;
}

.cluster-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f0f2f5;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}

.cluster-list-title {
  display: block;
  margin: 0;
  font-size: 1em;
  /* 筌띲끇窺 ?귐딅뮞????뺛걠(.title) ?怨좊뱜 ??由?? ??덉뵬??띿쓺 */
  font-weight: 500;
  color: #333;
}

.cluster-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.cluster-close-btn:hover {
  background-color: #e0e0e0;
  color: #333;
}

/* ??€???쎄숲 筌뤴뫖以??袁⑹뒠 ?怨좊뱜 ??由?鈺곌퀣??*/
#clusterList .listing-item .title {
  font-weight: normal;
  margin-bottom: 4px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  line-height: 1.4;
}

#clusterList .listing-item .meta {
  color: #555;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  line-height: 1.4;
}

/* ??€???쎄숲 ?귐딅뮞???袁⑹뵠??뽰뱽 ??곗뺘 筌띲끇窺 ?귐딅뮞?紐? ??덉뵬???????곗쨮 筌띿쉸??*/
#clusterItemList li {
  padding: 12px 12px 14px;
  border-bottom: 1px solid #ececec;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  background: #fff;
  transition: background .18s, box-shadow .18s;
}

#clusterItemList li:hover {
  background: #eef5ff;
}

#clusterItemList li.selected {
  background: #d9ecff;
  box-shadow: inset 0 0 0 2px #1565c0;
}

/* ?醫뤾문??筌띲끇窺 ?????뺤뺍 ?귐딅뮞??*/
.listing-item.selected .title {
  background-color: #ffeeba;
}

/* ?醫뤾문??筌띲끇窺 ??€???쎄숲?귐딅뮞??*/
.cluster-item.selected {
  background-color: #ffeeba;
}

#clusterItemList .listing-item.selected {
  background-color: #ffeeba;
}

/* ?????? ?????뺤뺍 ?뚢뫂?껅에???????????????????????????????????????????? */
#customerControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  flex: 0 0 auto;
  /* ?誘れ뵠 ?⑥쥙??*/
  min-height: 60px;
  /* 筌ㅼ뮇???誘れ뵠 ??쇱젟 */
}

#customerControls .button-row {
  display: flex;
  gap: 8px;
}

#customerControls .button-row button {
  flex: 1;
  padding: 6px 12px;
  border: 1px solid #ccc;
  background: #fafafa;
  cursor: pointer;
}

#customerControls button:hover {
  background: #eee;
}

/* ?⑥쥒而??怨멸쉭 ?怨몃열 */
#customerDetail {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

#customerDetail.hidden {
  display: none;
}

/* 筌띲끇窺 ?귐딅뮞???뚢뫂?껅에?*/
#listingControls {
  flex: 0 0 auto;
  /* ?誘れ뵠 ?⑥쥙??*/
  min-height: 40px;
  /* 筌ㅼ뮇???誘れ뵠 ??쇱젟 */
}

#listingControls .listing-header .listing-mode-buttons {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  width: 100%;
}

#listingControls .listing-header .listing-mode-buttons.hidden {
  display: none !important;
}

#listingControls .listing-header .mode-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  background: #f8f9fa;
  color: #666;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

#listingControls .listing-header .mode-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

#listingControls .listing-header .mode-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

#listingControls .listing-header .mode-btn.active[data-mode="briefing"] {
  background: #28a745;
  border-color: #28a745;
}

/* 甕곌쑵?됪뤃?揶쏄쑨爰???덉뺘??곗쨮 ?リ낱?녔묾?*/
#listingControls .listing-actions {
  display: flex;
  gap: 4px;
  /* 疫꿸퀣??8px ??4px */
  margin-bottom: 8px;
}

#listingControls .listing-actions button {
  padding: 4px 6px;
  background: none;
  border: none;
  cursor: pointer;
}

#listingControls .listing-actions button:hover {
  text-decoration: underline;
}

#listingControls .listing-header+button#viewAllBtn {
  margin-top: 4px;
}

/* 餓λ쵎???類ㅼ벥 ??볤탢??- ?袁⑹벥 ?類ㅼ벥 ????*/

#secondaryPanel.visible {
  left: 0 !important;
  /* ?遺얇늺 ??긱걹 ??밸퓠????뽰삂 */
  transform: translateX(280px) !important;
  /* 1筌??????뺤뺍 ??삘뀲?紐꾩몵嚥???€猷?*/
  visibility: visible !important;
  /* visible ?怨밴묶?????뮉 癰귣똻??袁⑥쨯 */
  opacity: 1 !important;
  /* visible ?怨밴묶?????뮉 ?袁⑹읈??癰귣똻??袁⑥쨯 */
}

#secondaryPanel.hidden {
  left: 0 !important;
  /* ?遺얇늺 ??긱걹 ??밸퓠????뽰삂 */
  transform: translateX(-100%) !important;
  /* ??긱걹??곗쨮 ??? */
  visibility: visible !important;
  /* hidden ?怨밴묶?????뮉 ?袁⑹읈????? */
  opacity: 1 !important;
  /* hidden ?怨밴묶?????뮉 ?袁⑹읈????梨??띿쓺 */
}

/* 2筌??????뺤뺍揶쎛€ ??€????1筌??????뺤뺍??域밸챶?嚥??醫? */
/* 疫꿸퀣???1筌??????뺤뺍 ??ｋ┛疫??꾨뗀諭???볤탢 */
/* #secondaryPanel.visible ~ #sidebar {
  display: none !important;
} */

/* 2筌??????뺤뺍揶쎛€ ??€????1筌??????뺤뺍 ??ｋ┛疫?(??揶쏅베????醫뤾문?? - ??볤탢 */
/* #layout:has(#secondaryPanel.visible) #sidebar {
  display: none !important;
} */

#secondaryPanel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}

#secondaryPanel .panel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#secondaryPanel .toggle-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

#secondaryPanel .toggle-btn:hover {
  background: #e9ecef;
  color: #333;
}

/* 2筌??????뺤뺍 ?臾볦뿺 ?怨밴묶 - ??볤탢??(visible/hidden ??€???살춸 ???? */

#secondaryPanel .panel-close {
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer !important;
  color: #666 !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
  user-select: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#secondaryPanel .panel-close:hover {
  color: #333;
}

#secondaryPanel .panel-body {
  height: calc(100% - 50px);
  overflow: hidden;
}

#secondaryPanel .panel-view {
  height: 100%;
  overflow: hidden;
  display: none;
}

#secondaryPanel .panel-view:not(.hidden) {
  display: block !important;
  padding: 12px;
  overflow-y: auto;
  /* 2筌??????뺤뺍???醫롮뵬????쎄쾿嚥?*/
  height: calc(100% - 50px);
  /* ??ㅺ섯 獄쏅뗀逾??誘れ뵠??筌띿쉸??*/
  box-sizing: border-box;
}

/* ?⑥쥒而?筌뤴뫖以??됯퀣肉??뺤춸 ??쎄쾿嚥???뽮쉐??*/
#viewCustomerList:not(.hidden) {
  overflow-y: auto !important;
}

#viewCustomerList {
  display: block !important;
  background: white;
  height: 100%;
  /* ??ㅺ섯 ???誘れ뵠??筌띿쉸??*/
  position: relative;
  z-index: 1000;
  overflow-y: auto;
  /* ??쎄쾿嚥???뽮쉐??*/
}

#viewCustomerList:not(.hidden) {
  display: block !important;
}

#viewCustomerList.hidden {
  display: none !important;
}

/* ?⑥쥒而?筌뤴뫖以??뚢뫂???€瑗?- ??쎄쾿嚥???볤탢 */
#viewCustomerList .customer-list-container {
  height: 100%;
  /* ?봔€筌??誘れ뵠??筌띿쉸??*/
  overflow: visible;
  /* ??€? ??쎄쾿嚥???볤탢 */
  margin: 0;
  border: none;
  background: white;
  border-radius: 0;
  /* 筌뤴뫁苑뚨뵳??觀?疫???볤탢 */
}

/* ?⑥쥒而?筌뤴뫖以??꾩꼹?쀯㎘?- ??쎄쾿嚥???볤탢 */
#customerListContent2 {
  height: auto;
  /* ?誘れ뵠 ?癒?짗 鈺곌퀣??*/
  overflow: visible;
  /* ??€? ??쎄쾿嚥???볤탢 */
  background: white;
  color: black;
  font-size: 14px;
  position: relative;
  z-index: 1001;
  padding: 0;
  width: 100%;
  visibility: visible;
  opacity: 1;
}

#customerListContent2 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: black;
  display: block;
  visibility: visible;
  opacity: 1;
  height: auto;
  /* ?誘れ뵠 ?癒?짗 鈺곌퀣??*/
  width: 100%;
  background: white;
  position: relative;
  z-index: 1002;
  overflow: visible;
  /* ??쎄쾿嚥???볤탢 */
}

#customerListContent2 li {
  background: white;
  color: black;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  z-index: 1003;
  display: block;
  visibility: visible;
  opacity: 1;
  margin: 0;
  padding: 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#customerListContent2 li:hover {
  background: #f0f8ff;
  /* ?怨좊립 ?????獄쏄퀗瑗?*/
}

/* ?⑥쥒而?筌뤴뫖以??袁⑹뵠???뚢뫂???€瑗?*/
.customer-list-items {
  height: auto;
  /* ?誘れ뵠 ?癒?짗 鈺곌퀣??*/
  overflow: visible;
  /* ??쎄쾿嚥???볤탢 */
  padding: 0;
  margin: 0;
}

/* ?⑥쥒而?燁삳?諭??????*/
.customer-card {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.customer-card:hover {
  background: #f0f8ff;
  border-color: #1976d2;
  box-shadow: 0 2px 4px rgba(25, 118, 210, 0.1);
}

/* ?????????????????????????????????????????????????????????????????????? */
/* 筌띲끇窺?怨멸쉭?類ｋ궖 ??#viewListingDetail) ??€? row ?????*/
/* ?????????????????????????????????????????????????????????????????????? */
#viewListingDetail .detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

#viewListingDetail .detail-row:last-child {
  border-bottom: none;
}

#viewListingDetail .label {
  font-weight: 600;
}

#viewListingDetail .value {
  text-align: right;
  word-break: break-word;
}

/* ?????????????????????????????????????????????????????????????????????? */
/* 筌띲끇窺?怨멸쉭?類ｋ궖: 域밸챶?????됱뵠?袁⑹뜍??곗쨮 癰궰€野?*/
/* ?????????????????????????????????????????????????????????????????????? */
#secondaryPanel .detail-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  /* ??곌볼 80px / 揶???롢돢筌왖€ */
  column-gap: 12px;
  /* ??곌볼?遺쎌빽 揶쏄쑨爰?*/
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: start;
  /* 筌렺€?怨뺤뵬????뽯퓠???袁⒲걹 疫꿸퀣? */
}

#secondaryPanel .label {
  font-weight: 600;
}

#secondaryPanel .value {
  text-align: left;
  /* ??긱걹 ?類ｌ졊 */
  word-break: break-word;
}

#customerList {
  list-style: none;
  padding: 0;
  margin: 0;
}

#customerList li {
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

#customerList li:hover {
  background: #f5f5f5;
}

/* ?⑥쥒而??袁り숲 ??뺚댘??쇱뒲 ?????*/
.customer-filter-dropdown {
  margin-bottom: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.customer-filter-dropdown select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

.customer-filter-dropdown select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

#customerListItems {
  list-style: none;
  padding: 0;
  margin: 0;
}

#customerListItems li {
  padding: 6px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

#customerListItems li:hover {
  background: #f5f5f5;
}

.detail-row {
  /* viewCustomerDetail/Form ?⑤벊???????*/
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  column-gap: 12px;
}

.detail-row:last-child {
  border-bottom: none;
}

.label {
  font-weight: 600;
}

.value,
.form-control {
  text-align: left;
  width: 100%;
}

/* ?⑥쥒而?筌뤴뫖以??뚢뫂???€瑗?*/
.customer-list-container {
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  height: 100%;
  overflow: hidden;
  /* ??쎄쾿嚥???볤탢 - 2筌??????뺤뺍?癒?퐣筌?*/
}

.customer-list-container.hidden {
  display: none;
}

/* ?醫뤾문???⑥쥒而??類ｋ궖 */
.selected-customer-info {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
}

.selected-customer-info.hidden {
  display: none;
}

.selected-customer-info .customer-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.selected-customer-info .customer-info-label {
  font-weight: bold;
  color: #333;
}

.selected-customer-info .customer-info-value {
  color: #666;
}

/* ?⑥쥒而??뚢뫂???쎈뱜 筌롫뗀???????*/
#customerContextMenu {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 600;
  min-width: 120px;
}

#customerContextMenu .context-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

#customerContextMenu .context-menu-item:last-child {
  border-bottom: none;
}

#customerContextMenu .context-menu-item:hover {
  background-color: #f5f5f5;
}

#customerContextMenu .context-menu-item.delete {
  color: #dc3545;
}

/* ?袁⑷퍥 ?됰슢????귐딅뮞???紐꾩춿 ?온€???????*/
.full-briefing-list-editable td.editing {
  background-color: #fff3cd !important;
  border: 2px solid #ffc107 !important;
}

.full-briefing-list-editable td.modified {
  background-color: #d4edda !important;
  border-left: 3px solid #28a745 !important;
}

/* ?癒?궚/??륁젟癰?甕곌쑵???????*/
.full-briefing-view-mode-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.full-briefing-view-mode-btn.active {
  background-color: #007bff;
  color: white;
}

.full-briefing-view-mode-btn:not(.active) {
  background-color: #6c757d;
  color: white;
}

.full-briefing-view-mode-btn.edited.active {
  background-color: #28a745;
}

/* ?醫롫뮞??筌롫뗄?놅쭪? ?????*/
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  z-index: 601;
  animation: toastSlideIn 0.3s ease-out;
  max-width: 300px;
  word-wrap: break-word;
}

.toast.success {
  background-color: #28a745;
}

.toast.warning {
  background-color: #ffc107;
  color: #212529;
}

.toast.error {
  background-color: #dc3545;
}

.toast.info {
  background-color: #17a2b8;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ?怨밴묶 燁삳똻????怨몃열 ?⑥쥙???誘れ뵠 */
#statusCounts {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 12px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-size: 12px;
  color: #666;
  min-height: 34px;
  max-height: 34px;
  /* ?誘れ뵠 ?⑥쥙??*/
  flex-shrink: 0;
  /* ??由??⑥쥙??*/
}



/* 筌뤴뫀諭?UI ??由??⑥쥙??- ??? 癰궰€野??븍뜃? */
/* 2筌??????뺤뺍揶쎛€ ??€????筌롫뗄???꾩꼹?쀯㎘?鈺곌퀣??- ??볤탢??*/
/* #secondaryPanel.visible ~ #mainContent,
#layout:has(#secondaryPanel.visible) #mainContent {
  width: calc(100% - 280px - 350px) !important;
} */

/* ??€???쎄숲 筌띲끇窺 筌뤴뫖以?癒?퐣 ?귐딅뮞????€????뽯퓠????由??醫? - ??볤탢??*/
/* #clusterList:not(.hidden) ~ #mainContent,
#layout:has(#clusterList:not(.hidden)) #mainContent {
  width: calc(100% - 280px) !important;
} */

/* ??€???쎄숲 筌띲끇窺 筌뤴뫖以됪€?2筌??????뺤뺍揶쎛€ ??덈뻻????€????- ??볤탢??*/
/* #layout:has(#clusterList:not(.hidden)):has(#secondaryPanel.visible) #mainContent {
  width: calc(100% - 280px - 350px) !important;
} */

/* ??€???쎄숲 ?귐딅뮞?硫? ??뽯뻻????筌띲끇窺 ?귐딅뮞?紐껊뮉 域밸챶?嚥??醫? */
.cluster-list:not(.hidden)~#listingList,
.cluster-list:not(.hidden)+#listingList {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 100% !important;
  width: 100% !important;
}

/* ??????온€???온€???????*/
.status-counts-left {
  flex: 1;
}

.status-counts-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-only {
  display: none;
}

.admin-only:not(.hidden) {
  display: flex;
}

.admin-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
  /* 筌ㅼ뮇????덊돩 ??쇱젟 */
  text-align: center;
}

.admin-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ??€諭띈첋??袁⑹뒠 筌롫뗀???뚢뫂???€瑗?*/
.admin-only {
  display: flex;
  align-items: center;
  gap: 10px;
  /* ??€諭띈첋?甕곌쑵??揶쏄쑨爰?*/
}


/* 紐⑤떖 諛곌꼍 ?щ챸??泥섎━ (紐⑤컮??諛뷀삎 紐⑤떖 ?꾩슜) */
#listingListModal.modal,
#clusterListModal.modal {
  background: transparent !important;
  pointer-events: none;
  /* 諛곌꼍 ?대┃ ??吏€???곗튂 ?덉슜 */
}

#listingListModal.modal .modal-content,
#clusterListModal.modal .modal-content {
  pointer-events: auto;
  /* 而⑦뀗痢좊뒗 ?곗튂 ?덉슜 */
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* ?뚯쁺 ?쒓굅 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 90%;
  max-height: 90%;
  /* ??뺚댘??쇱뒲(??쇱뵠?怨뺥닏 select) ???€????롡봺???얜챷??獄쎻뫗? */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  /* ??쎄쾿嚥▲끉? ?醫???롫┷ ??쇱뵠?怨뺥닏 ??뺚댘??쇱뒲????롡봺筌왖€ ??낅즲嚥?*/
  overflow-y: auto;
  overflow-x: visible;
  flex: 1;
}

/* ??????온€???뚢뫂?껅에?*/
.user-management-controls {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.btn-primary {
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background: #545b62;
}

/* ????????뵠??*/
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.user-table th,
.user-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  white-space: nowrap;
  font-size: 16px;
}

.user-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 16px;
}

.user-table tbody tr:hover {
  background-color: #f9f9f9;
}

.table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar {
  width: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.user-table .user-actions {
  display: flex;
  gap: 4px;
}

.user-table .action-btn {
  background: none;
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.user-table .action-btn.edit {
  color: #007bff;
  border-color: #007bff;
}

.user-table .action-btn.edit:hover {
  background: #007bff;
  color: white;
}

.user-table .action-btn.delete {
  color: #dc3545;
  border-color: #dc3545;
}

.user-table .action-btn.delete:hover {
  background: #dc3545;
  color: white;
}

.user-table .status-active {
  color: #28a745;
  font-weight: 600;
}

.user-table .status-inactive {
  color: #dc3545;
  font-weight: 600;
}

/* ???????*/
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group .radio-group input[type="radio"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group .radio-group input[type="radio"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.radio-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

/* ??덉쨮?⑥쥙臾??뚢뫂?껅에??????*/
.refresh-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  border: 1px solid #e9ecef;
  margin-left: 12px;
}


/* ??덉쨮?⑥쥙臾?甕곌쑵??*/
.refresh-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.refresh-btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

.refresh-btn:active {
  transform: scale(0.95);
}

.refresh-btn.loading {
  background: #6c757d;
  cursor: not-allowed;
  animation: spin 1s linear infinite;
}

.refresh-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 嚥≪뮆逾??醫딅빍筌롫뗄???*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 筌띾뜆?筌???낅쑓??꾨뱜 ??볦퍢 */
.last-update {
  font-size: 10px;
  color: #6c757d;
  white-space: nowrap;
}



/* ??????온€??筌뤴뫀???????*/
.user-management-modal {
  width: 95vw !important;
  max-width: 2000px !important;
  min-width: 1800px !important;
}

.user-management-modal .modal-content {
  width: 95vw !important;
  max-width: 2000px !important;
  min-width: 1800px !important;
  max-height: none !important;
}

.user-management-modal .modal-body {
  padding: 20px !important;
  width: 100% !important;
}

.user-management-modal .table-container {
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.user-table th,
.user-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  white-space: nowrap;
  font-size: 16px;
}

.user-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #495057;
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 16px;
}

.user-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* ?뚎됱쓥 ??덊돩 筌뤿굞?????쇱젟 */
.user-table th:nth-child(1),
.user-table td:nth-child(1) {
  width: 120px;
}

/* ID */
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
  width: 200px;
}

/* ??€李??*/
.user-table th:nth-child(3),
.user-table td:nth-child(3) {
  width: 100px;
}

/* ??€已?*/
.user-table th:nth-child(4),
.user-table td:nth-child(4) {
  width: 150px;
}

/* 筌욊낯肄?*/
.user-table th:nth-child(5),
.user-table td:nth-child(5) {
  width: 80px;
}

/* ??釉?*/
.user-table th:nth-child(6),
.user-table td:nth-child(6) {
  width: 80px;
}

/* ?怨밴묶 */
.user-table th:nth-child(7),
.user-table td:nth-child(7) {
  width: 120px;
}

/* 揶쎛€??놁뵬 */
.user-table th:nth-child(8),
.user-table td:nth-child(8) {
  width: 200px;
}

/* ?臾믩씜 */

/* 筌욊낯肄???륁젟 ?온€???????*/
.job-title-edit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-title-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  min-width: 120px;
}

.job-title-save-btn {
  padding: 4px 8px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.job-title-save-btn:hover {
  background: #218838;
}

.job-title-save-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.job-title-edit-btn {
  padding: 4px 8px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.job-title-edit-btn:hover {
  background: #0056b3;
}

.job-title-display {
  padding: 6px 8px;
  background: #e9ecef;
  border-radius: 4px;
  font-size: 12px;
  min-width: 120px;
  display: inline-block;
}

/* ??????臾믩씜 甕곌쑵???????*/
.user-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.user-action-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.user-action-btn.approve {
  background: #28a745;
  color: white;
}

.user-action-btn.reject {
  background: #dc3545;
  color: white;
}

.user-action-btn.deactivate {
  background: #6c757d;
  color: white;
}

.user-action-btn.reset-password {
  background: #ffc107;
  color: #212529;
}

.user-action-btn.edit-role {
  background: #17a2b8;
  color: white;
}

.user-action-btn:hover {
  opacity: 0.8;
}

.user-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ??????온€??筌뤴뫀???????- 筌ㅼ뮄???怨쀪퐨??뽰맄嚥??怨몄뒠 */
#userManagementModal.user-management-modal,
#userManagementModal.user-management-modal .modal-content,
#userManagementModal .user-management-modal,
#userManagementModal .user-management-modal .modal-content {
  width: 95vw !important;
  max-width: 2000px !important;
  min-width: 1800px !important;
}

#userManagementModal.user-management-modal .modal-content,
#userManagementModal .user-management-modal .modal-content {
  max-height: none !important;
}

#userManagementModal.user-management-modal .modal-body,
#userManagementModal .user-management-modal .modal-body {
  padding: 20px !important;
  width: 100% !important;
}

#userManagementModal.user-management-modal .table-container,
#userManagementModal .user-management-modal .table-container {
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* 沃섏눊而???類ｋ궖 ?袁⑤굡 ?臾롫┛/??깊뒄疫??????*/
.sensitive-field {
  transition: all 0.3s ease;
}

.sensitive-value {
  transition: opacity 0.3s ease;
}

.sensitive-field.collapsed .sensitive-value {
  opacity: 0;
}

.field-toggle {
  transition: all 0.2s ease;
  user-select: none;
}

.field-toggle:hover {
  transform: scale(1.1);
}

.sensitive-field .field-toggle {
  margin-right: 4px;
}

/* Supabase ??녿┛???醫? ??쇱맄燁?*/
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked+.toggle-slider {
  background-color: #007bff;
}

.toggle-switch input:checked+.toggle-slider:before {
  transform: translateX(26px);
}

.toggle-switch input:focus+.toggle-slider {
  box-shadow: 0 0 1px #007bff;
}

/* 筌띲끇窺?源낆쨯 甕곌쑵???????*/
.btn-add-listing {
  margin-left: 15px;
  padding: 4px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-add-listing:hover {
  background: #0056b3;
}

/* ?怨?/雅뚯눛源?筌뤴뫀諭??醫? 甕곌쑵??*/
.listing-mode-toggle {
  display: inline-flex;
  margin-left: 15px;
  gap: 4px;
}

.listing-mode-toggle .mode-btn {
  padding: 4px 12px;
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.listing-mode-toggle .mode-btn:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

.listing-mode-toggle .mode-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.listing-mode-toggle .mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* subtype 甕곌쑵??*/
.subtype-buttons {
  display: inline-flex;
  margin-left: 8px;
  gap: 4px;
}

.subtype-buttons.hidden {
  display: none;
}

.subtype-buttons .subtype-btn {
  padding: 4px 12px;
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.subtype-buttons .subtype-btn:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

.subtype-buttons .subtype-btn.active {
  background: #28a745;
  color: white;
  border-color: #28a745;
}

.subtype-buttons .subtype-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 筌띲끇窺?源낆쨯 筌뤴뫀???????*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* ?ъ옣??吏€?? 諛곌꼍 ?뚯쁺 ?꾩쟾 ?쒓굅 */
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}


.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  border-radius: 8px;
  width: 95%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h2 {
  margin: 0;
  color: #333;
  font-size: 20px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.modal-close:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #e9ecef;
}

/* ???????*/
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  width: 100%;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.form-group input,
.form-group textarea {
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-group textarea {
  resize: vertical;
  min-height: 70px;
}

/* 甕곌쑵???????*/
.btn-primary {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary:hover {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-secondary:hover {
  background: #545b62;
}

/* ??쀫뱜筌왖€??甕곌쑵???????*/
.btn-sheet-url {
  background: #28a745;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.btn-sheet-url:hover {
  background: #218838;
}

/* ??쀫뱜筌왖€??筌뤴뫀???????*/
#sheetUrlModal .modal-content {
  width: 95%;
  max-width: 600px;
  overflow-x: hidden;
}

#sheetUrlModal .form-group label {
  font-size: 40px;
}

#sheetUrlModal .form-group input {
  font-size: 40px;
  padding: 10px 14px;
}

#sheetUrlModal .form-group small {
  font-size: 36px;
  line-height: 1.4;
}

#sheetUrlModal .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

#sheetUrlModal .admin-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 40px;
}

#sheetUrlModal .admin-btn:hover {
  background: #0056b3;
}

/* 疫뀀뜆釉???낆젾 ?袁⑤굡 ?遺욧땀????볤탢 */
input[type="text"]::-webkit-outer-spin-button,
input[type="text"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="text"] {
  -moz-appearance: textfield;
}

/* ???????*/
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

/* ?곕뗄荑?癰귢쑵紐??????*/
.recommendation-star-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.recommendation-star {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  display: inline-block;
  transform-origin: center;
  color: #999;
  opacity: 0.8;
}

.recommendation-star:hover {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 4px 8px rgba(255, 59, 48, 0.4));
}

.recommendation-star.recommended {
  color: #ff3b30;
  opacity: 1;
  text-shadow:
    0 0 10px rgba(255, 59, 48, 0.8),
    0 0 20px rgba(255, 59, 48, 0.6),
    0 0 30px rgba(255, 193, 7, 0.4);
  animation: starGlow 2s ease-in-out infinite alternate;
}

@keyframes starGlow {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.5));
  }

  100% {
    filter: drop-shadow(0 0 15px rgba(255, 193, 7, 0.8));
  }
}

/* ?곕뗄荑?筌뤴뫀????좎룞????*/
.recommendation-modal,
.recommendation-detail-modal,
.recommendation-cancel-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.recommendation-modal .modal-content,
.recommendation-detail-modal .modal-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.recommendation-modal .modal-header,
.recommendation-detail-modal .modal-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommendation-modal .modal-header h3,
.recommendation-detail-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.recommendation-modal .close-btn,
.recommendation-detail-modal .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.recommendation-modal .modal-body,
.recommendation-detail-modal .modal-body {
  padding: 20px;
}

.recommendation-modal .form-group,
.recommendation-detail-modal .form-group {
  margin-bottom: 20px;
}

.recommendation-modal .form-group label,
.recommendation-detail-modal .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.recommendation-modal textarea,
.recommendation-detail-modal textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}

.recommendation-modal .char-count,
.recommendation-detail-modal .char-count {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.recommendation-modal .modal-footer,
.recommendation-detail-modal .modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.recommendation-modal .btn-cancel,
.recommendation-modal .btn-submit,
.recommendation-detail-modal .btn-cancel,
.recommendation-detail-modal .btn-submit {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.recommendation-modal .btn-cancel,
.recommendation-detail-modal .btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.recommendation-modal .btn-submit,
.recommendation-detail-modal .btn-submit {
  background: #007AFF;
  color: white;
}

.recommendation-modal .btn-submit:hover,
.recommendation-detail-modal .btn-submit:hover {
  background: #0056CC;
}

/* ?곕뗄荑??띯뫁??筌뤴뫀???諛명€??????*/
.recommendation-cancel-modal .modal-content {
  max-width: 400px;
}

.recommendation-cancel-modal .warning-text {
  margin-top: 10px;
  padding: 8px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 4px;
  color: #856404;
}

.recommendation-cancel-modal .btn-confirm {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
}

.recommendation-cancel-modal .btn-confirm:hover {
  background: #c82333;
}

/* ?곕뗄荑??怨멸쉭 筌뤴뫀????띯뫁??甕곌쑵???????*/
.recommendation-detail-modal .recommendation-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e0e0e0;
}

.recommendation-detail-modal .btn-cancel-recommendation {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.recommendation-detail-modal .btn-cancel-recommendation:hover {
  background: #c82333;
}

/* ?곕뗄荑???좎럩苑?筌뤴뫀???곕톪?? ??좎룞????*/
.recommendations-section,
.comments-section {
  margin-bottom: 20px;
}

.recommendations-section h4,
.comments-section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.recommendation-item,
.comment-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 8px;
}

.recommendation-item .user-info,
.comment-item .user-info {
  font-weight: 500;
  color: #007AFF;
  font-size: 14px;
  margin-bottom: 4px;
}

.recommendation-item .reason,
.comment-item .comment {
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
}

.recommendation-item .date,
.comment-item .date {
  font-size: 12px;
  color: #666;
}

.no-data {
  text-align: center;
  color: #666;
  font-style: italic;
  padding: 20px;
}

.add-comment-section {
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.add-comment-section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.btn-add-comment {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 8px;
}

/* ?곕뗄荑?筌띾뜆鍮??????*/
.marker-dot.recommended {
  transform: scale(1.3);
  box-shadow:
    0 0 10px rgba(255, 59, 48, 0.8),
    0 0 20px rgba(255, 59, 48, 0.6),
    0 0 30px rgba(255, 59, 48, 0.4);
  animation: markerGlow 2s ease-in-out infinite alternate;
}

@keyframes markerGlow {
  0% {
    box-shadow:
      0 0 5px rgba(255, 193, 7, 0.5),
      0 0 10px rgba(255, 193, 7, 0.3),
      0 0 15px rgba(255, 193, 7, 0.2);
  }

  100% {
    box-shadow:
      0 0 15px rgba(255, 193, 7, 0.8),
      0 0 25px rgba(255, 193, 7, 0.6),
      0 0 35px rgba(255, 193, 7, 0.4);
  }
}

/* ----------------- ?袁⑹삺 ?袁⑺뒄 筌띾뜆鍮?(?袁ⓥ봺沃섎챷毓?????? ----------------- */
.current-location-marker-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  position: relative;
}

.current-location-dot {
  width: 14px;
  height: 14px;
  background: #007AFF;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 2;
  position: relative;
}

.current-location-dot::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0, 122, 255, 0.2);
  border-radius: 50%;
  animation: locationPulse 2s infinite;
  z-index: 1;
}

@keyframes locationPulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.current-location-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #fff;
  margin-left: -7px;
  margin-top: -24px;
  /* ?袁⑺뒄 ???袁⒲걹??獄쏄퀣??*/
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  transform-origin: 50% 215%;
  /* ?癒?벥 餓λ쵐???疫꿸퀣???곗쨮 ???읈 */
  z-index: 3;
  transition: transform 0.15s ease-out;
}

/* ?????온€??筌뤴뫀????됱뵠?袁⑹뜍 獄????뵠???????*/
.slot-management-modal {
  max-width: 1000px !important;
}

.slot-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
  font-size: 14px;
}

.slot-table th,
.slot-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 8px;
  text-align: left;
}

.slot-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
}

.slot-table tr:hover {
  background-color: #fcfcfc;
}

.slot-user-select,
.slot-manager-name,
.slot-sheet-url {
  border: 1px solid #ced4da;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out;
}

.slot-user-select:focus,
.slot-manager-name:focus,
.slot-sheet-url:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-active {
  background-color: #d1e7dd;
  color: #0f5132;
}

.status-inactive {
  background-color: #f8d7da;
  color: #842029;
}

.btn-save-slot {
  transition: all 0.2s;
}

.btn-save-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ????????????????????????????????????????????????????????????????????????????????????????????????????
   ??륁뵠?됰슢????袁り숲 筌뤴뫀諭??袁⑹뒠 ?????(FINAL OVERRIDE)
   (body.hybrid-mode ??€???? ??됱뱽 ???춸 ??뽮쉐??
   ???뵬 筌ㅼ뮉釉??λ퓠 ?袁⑺뒄??뤿연 筌뤴뫀諭???롪퐨 域뱀뮇?????堉?怨룸빍??
???????????????????????????????????????????????????????????????????????????????????????????????????? */

/* 1. ?怨룸뼊 ??됱뵠?袁⑹뜍 ?誘れ뵠 ??苑??獄??袁り숲獄???? */
body.hybrid-mode #topFilterBar:not(#hybridFilterModal #topFilterBar) {
  display: none !important;
}

/* 筌뤴뫀????€????袁り숲獄쏅뗀????뽯뻻 */
body.hybrid-mode #hybridFilterModal #topFilterBar {
  display: block !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.hybrid-mode #topbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  background: #e9f2ff !important;
  z-index: 1000 !important;
}

@media (min-width: 769px) {
  body.hybrid-mode #topbar {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  body.hybrid-mode #statusCounts {
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: white !important;
    border-bottom: 2px solid #e9ecef !important;
    z-index: 1000 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
  }

  body.hybrid-mode #layout {
    position: absolute !important;
    top: 110px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 110px) !important;
    max-height: calc(100vh - 110px) !important;
    width: 100% !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* #layout ??€? 筌뤴뫀諭??癒?뻼???怨룸뼊 ??媛?獄?癰궰€??揶쏅벡???λ뜃由??(?醫됯봄 ??볤탢 ???뼎) */
  body.hybrid-mode #layout>#sidebar,
  body.hybrid-mode #layout>#mainContent,
  body.hybrid-mode #layout>#mapWrap,
  body.hybrid-mode #layout>#mapArea,
  body.hybrid-mode #layout>.mobile-notch {
    position: absolute !important;
    top: 0 !important;
    margin-top: 0 !important;
    height: 100% !important;
    transform: none !important;
  }

  body.hybrid-mode #filterChipBar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    gap: 10px !important;
    padding: 0 15px !important;
    border-bottom: 1px dashed #f0f0f0 !important;
    box-sizing: border-box !important;
  }

  /* 2?? ???? 獄??닌딄쉐 */
  body.hybrid-mode .count-info {
    display: flex !important;
    position: absolute !important;
    top: 30px !important;
    left: 15px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    z-index: 1001 !important;
    font-size: 13px !important;
    margin: 0 !important;
  }

  body.hybrid-mode .sheet-controls {
    display: flex !important;
    position: absolute !important;
    top: 30px !important;
    right: 15px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    z-index: 1001 !important;
    margin: 0 !important;
  }

  body.hybrid-mode #statusCounts>div:not(#filterChipBar):not(.count-info):not(.sheet-controls):not(#addressSearchArea) {
    display: none !important;
  }

  /* 10. ?袁り숲 筌뤴뫀???諭€??揶쏆뮆????뽯선 揶쏅벡???怨몄뒠 */
  #hybridFilterModal .filter-section.hidden {
    display: none !important;
  }

  /* 11. ?袁れ넺 ?袁り숲 ??뺚댘??쇱뒲 ??덊돩 ?類ㅼ삢 (??삘뀲 ?袁⑤굡?? ??덉뵬??띿쓺) */
  body.hybrid-mode #tf_status,
  body.hybrid-mode #tf_h_status {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 留ㅻЪ ?ъ쭊 ?낅줈???곸뿭 */
.photo-upload-area {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px dashed #ced4da;
  border-radius: 8px;
}

.photo-upload-label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  color: #495057;
}

.photo-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.photo-btn {
  flex: 1;
  padding: 10px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s;
}

.photo-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.photo-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.photo-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dee2e6;
  background: #fff;
}

.photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.photo-remove-btn:hover {
  background: rgba(255, 0, 0, 1);
}

/* 留ㅻЪ ?ъ쭊 媛ㅻ윭由??ㅽ???*/
.detail-photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.gallery-item {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #eee;
  background: #f0f0f0;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.photo-count-badge {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
}

/* ========================================
   理쒖쟻?붾맂 ?ъ쭊 ?쇱씠?몃컯??(v1.4)
   - PC/紐⑤컮??怨듯넻 ?곸슜
   - 諛곌꼍 釉붾윭 ?쒓굅 (GPU 遺€??理쒖쟻??
   ======================================== */
#photoLightbox.photo-lightbox-v2 {
  display: none;
  opacity: 0;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* dvh ?€??100% ?ъ슜 (?덉씠?꾩썐 猷⑦봽 諛⑹?) */
  background-color: #000000 !important;
  z-index: 2100 !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* GPU 怨쇰????좊컻 ?붿냼 ?쒓굅 (?꾨젰 蹂댄샇 紐⑤뱶 ?€?? */
  will-change: opacity;
  transition: opacity 0.2s ease-in-out;
}

#photoLightbox.photo-lightbox-v2.active {
  display: flex !important;
  opacity: 1 !important;
}

#photoLightbox.photo-lightbox-v2 .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#photoLightbox.photo-lightbox-v2 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: translateZ(0);
}