body { 
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 
    overflow-anchor: none; 
}
img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; }
input, textarea { user-select: text !important; -webkit-user-select: text !important; }
.pin-number { user-select: text !important; -webkit-user-select: text !important; cursor: text; }

/* Filter and Layout Common */
.filter-section { background: #f9f9f9; padding: 30px 20px; border-bottom: 1px solid #eee; }
.container { max-width: 1100px; margin: 0 auto; }

/* Common Job Tab Styles (Prevent line break on mobile) */
.category-tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #333; padding-bottom: 15px; }
.tab-btn { padding: 12px 30px; border: 1px solid #ddd; background: #fff; border-radius: 30px; cursor: pointer; font-size: 16px; font-weight: 700; color: #666; text-decoration: none; display: inline-block; transition: all 0.2s; white-space: nowrap; }
.tab-btn:hover { border-color: #27ae60; color: #27ae60; }
.tab-btn.active { background: #27ae60; color: #fff; border-color: #27ae60; box-shadow: 0 4px 10px rgba(39,174,96,0.3); }

/* Search Mode Toggle (Condition vs Map) */
.search-mode-toggle { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px; }
.btn-mode { padding: 12px 25px; font-size: 15px; font-weight: 700; border-radius: 30px; border: 1px solid #ddd; background: #fff; color: #888; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.btn-mode:hover { background: #f9f9f9; }
.btn-mode.active { background: #333; color: #fff; border-color: #333; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Prevent Text Wrapping on Mobile */
@media (max-width: 640px) {
    .search-mode-toggle { gap: 8px; }
    .btn-mode { padding: 10px 14px; font-size: 13px; letter-spacing: -0.5px; white-space: nowrap; }
}

/* Mode Container Hide/Show Animation */
#mode-condition, #mode-map { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Mode A: Condition Filter */
.filter-controls { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.filter-select { padding: 10px; border-radius: 5px; border: 1px solid #ddd; min-width: 180px; height: 45px; }
.search-box { display: flex; flex: 1; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; background: #fff; height: 45px; }
.search-box input { border: none; padding: 0 15px; flex: 1; outline: none; }
.btn-search { background: #333; color: #fff; border: none; padding: 0 20px; cursor: pointer; }


/* Nationwide Map Wrapper */
.map-wrapper-svg { 
    position: relative; 
    width: 100%; 
    max-width: 380px; 
    margin: 0 auto; 
    padding: 30px 20px; 
    transition: max-width 0.3s ease; 
}

.svg_map_in { 
    width: 100%; 
    height: auto; 
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.05)); 
}

/* Nationwide Map Puzzle Margin Application (paint-order) */
.svg_map_in .group1 path { 
    fill: #e5e5e5; 
    stroke: #ffffff !important; 
    stroke-width: 3px !important; 
    paint-order: stroke fill; 
    stroke-linejoin: round; 
    transition: fill 0.2s ease; 
    cursor: pointer; 
}

/* Apply Lawsee Green on Mouseover & Active */
.svg_map_in .group1 path:hover { fill: #27ae60 !important; }
.svg_map_in .group1 path.active { fill: #27ae60 !important; }

/* Text Outline (Perfect protection against overflow) */
.svg_map_in .group2 { pointer-events: none; } 
.svg_map_in .group2 text { 
    pointer-events: none; 
    fill: #737373; 
    stroke: #ffffff; 
    stroke-width: 2.5px; 
    paint-order: stroke fill; 
    transition: fill 0.2s ease; 
}

/* Speech Bubble Popup */
.region-popup { display: none; position: absolute; background: #fff; border: 2px solid #333; border-radius: 8px; padding: 5px 0; z-index: 100; min-width: 160px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); text-align: left; }
.region-popup.show { display: block; animation: popUpAnim 0.2s ease-out forwards; }
@keyframes popUpAnim { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.region-popup::before { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0; border-style: solid; border-color: #333 transparent transparent transparent; }
.region-popup::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0; border-style: solid; border-color: #fff transparent transparent transparent; }
.region-popup a { display: block; padding: 10px 15px; color: #444; text-decoration: none; font-size: 13px; border-bottom: 1px solid #f0f0f0; transition: all 0.2s; }
.region-popup a:last-child { border-bottom: none; }
.region-popup a:hover { background: #f0fdf4; color: #27ae60; font-weight: bold; padding-left: 20px; }
#popup-seoul { top: 10%; left: 10%; }
#popup-gyeonggi { top: 5%; left: 40%; }

/* Detail Result Header (Box height optimization & Tight fit to map) */
#map-result-header {
    position: relative;
    display: none;
    background: #fff;
    border-top: 2px solid #333;
    padding: 40px 30px; 
    min-height: 220px;  
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border-radius: 0 0 12px 12px;
    margin-bottom: 30px;
    overflow: hidden;
}

/* Container Grouping Title and Map */
.header-content-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    padding-left: 10%; 
}

/* Title Text (Unified to dark gray) */
.header-text-content { 
    position: relative; 
    z-index: 10; 
    text-align: left; 
}

#dynamic-region-title { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 20px;}

#map-result-header.show-flex { display: flex !important; justify-content: center; }

.map-result-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto;
}
.header-left { flex: 1; text-align: left; }
.map-result-title { font-size: 26px; font-weight: 800; color: #333; margin: 0 0 15px 0; line-height: 1.3;}
.map-result-title span.highlight { color: #27ae60; }
.btn-reset-map { padding: 8px 18px; background: #fff; color: #555; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.2s; }
.btn-reset-map:hover { border-color: #333; color: #333; background: #f9f9f9; }

/* 'Window' Area for Map Insertion */
#regional-map-container {
    position: absolute; 
    right: -80px;  
    top: -20px;    
    bottom: -20px; 
    width: 650px;  
    z-index: 1; 
    display: flex; 
    align-items: center;
    justify-content: center;
    pointer-events: none; 
}

#unified-mini-map {
    position: absolute !important; 
    left: 0 !important;
    top: 0 !important;
    width: calc(100% - 100px) !important; 
    max-width: 400px !important; 
    height: 100% !important; 
    margin: 0 !important;
}

.mini-map-paths path { fill: #f4f4f4; stroke: #ffffff; stroke-width: 1.5px; transition: all 0.3s ease; }
/* Selected Region: Lawsee Dark Green + Thin White Border */
.mini-map-paths path.highlight { fill: #27ae60 !important; stroke: #ffffff !important; stroke-width: 1.5px !important; paint-order: stroke fill; }

/* Newly Added: Detail Map (Seoul, Gyeonggi, Incheon) Common Styles */
.detail-map-svg {
    display: none;
    width: 100%;
    height: auto; 
    overflow: visible !important;
}

.sub-region-paths path {
    fill: #e0e0e0;
    stroke: #ffffff;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: fill 0.3s ease;
}

/* Apply Lawsee Green on Mouseover and Click Active */
.sub-region-paths path:hover { fill: #27ae60 !important; }
.sub-region-paths path.active { fill: #27ae60 !important; }

/* Detail Region Map Shield CSS (For PC screen) */
.detail-region-map {
    width: 100%; 
    min-width: 600px; 
    height: auto;
}

/* =======================================================
   Responsive Breakpoint Optimization
   ======================================================= */
@media (max-width: 1300px) { .map-wrapper-svg { max-width: 380px; } }
@media (max-width: 1024px) { .map-wrapper-svg { max-width: 350px; } }

/* Mobile Adaptation: Place map behind text like a background */
@media (max-width: 768px) { 
    .map-wrapper-svg { max-width: 300px; } 
    
    /* Result Box Margin Adjustment */
    #map-result-header { 
        padding: 15px 10px 5px 10px !important; 
        margin-bottom: 10px !important; 
        min-height: auto; 
    }
    
    /* Stack Text and Map Vertically (column) */
    .header-content-wrapper { 
        padding-left: 0; 
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        width: 100%;
        margin: 0;
    }

    /* 1st Floor: Text Area */
    .header-text-content { 
        max-width: 100%; 
        text-align: center; 
        margin-bottom: 5px; 
        z-index: 2;
    } 
    
    #dynamic-region-title { 
        font-size: 25px; 
        text-shadow: none; 
    }
    
   /* 2nd Floor: Map Area */
    #regional-map-container { 
        position: relative; 
        right: auto; top: auto; bottom: auto; left: auto;
        width: 100%; 
        max-width: 350px; 
        height: 250px; 
        margin: 0 auto;
        display: flex; 
        justify-content: center;
        align-items: center;
        border: none !important;
        background: transparent;
    }

    #unified-mini-map { 
        width: 100% !important; 
        max-height: 100% !important; 
    }

    .detail-map-svg { 
        height: auto !important; 
        max-height: none !important; 
    }
    
    /* Release the 600px suppression shield on mobile */
    .detail-region-map {
        min-width: 0 !important;
    }
}

@media (max-width: 640px) {
    .category-tabs { gap: 6px; justify-content: center; } 
    .tab-btn { padding: 10px 16px; font-size: 14px; } 
    .search-mode-toggle { gap: 8px; }
    .btn-mode { padding: 10px 14px; font-size: 13px; letter-spacing: -0.5px; white-space: nowrap; }
}


/* Expert Card Styles */
.expert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 30px 0; }
.expert-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.card-top { padding: 25px 0; text-align: center; background: #fafafa; position: relative; }
.status-badge { position: absolute; top: 12px; right: 12px; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: bold; }
.status-badge.group1 { background: #e8f5e9; color: #27ae60; }
.status-badge.group2 { background: #f5f5f5; color: #999; }
.profile-img img { width: 100px; height: 100px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }
.card-body { padding: 20px; text-align: center; flex-grow: 1; }
.expert-job { color: #27ae60; font-size: 13px; font-weight: bold; margin-bottom: 5px; }
.expert-name { font-size: 17px; font-weight: 700; margin: 0; }
.office-name { font-size: 12px; color: #888; font-weight: normal; display: block; margin-top: 4px; }
.card-footer { display: flex; border-top: 1px solid #eee; }
.card-footer a { flex: 1; padding: 14px 0; text-align: center; font-size: 13px; font-weight: 700; text-decoration: none; }
.btn-detail { background: #fff; color: #666; }
.btn-online { background: #333; color: #fff; }
.btn-call-hpass { background: #27ae60; color: #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; }
.btn-card-only { background: #e8f5e9; color: #27ae60; border-left: 1px solid #eee; border-right: 1px solid #eee; }

@media (max-width: 1024px) { .expert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .expert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .expert-card { font-size: 13px; }
  .expert-card .expert-name { font-size: 14px; }
  .expert-card .card-footer { gap: 4px; }
  .expert-card .card-footer a { font-size: 11px; padding: 7px 4px; }
}

/* ===================== Pagination ===================== */
.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 32px 0 16px;
  padding: 0 10px;
}
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #555;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
}
.page-btn:hover {
  background: #f0f7f0;
  border-color: #2e7d32;
  color: #2e7d32;
}
.page-btn.active {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
  font-weight: 700;
  pointer-events: none;
}
@media (max-width: 480px) {
  .page-btn { min-width: 32px; height: 32px; font-size: 12px; }
}