/* 기본 스타일 초기화 및 설정 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --light-gray-color: #f8f9fa;
    --medium-gray-color: #e9ecef;
    --dark-gray-color: #343a40;
    --text-color: #212529;
    --border-color: #dee2e6;
    --card-shadow: 0 4px 8px rgba(0,0,0,0.1);
    --border-radius: 0.3rem;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--light-gray-color);
    color: var(--text-color);
    line-height: 1.6;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
    color: var(--dark-gray-color);
    margin-bottom: 30px;
    font-weight: 700;
}




/* 검색 필터 영역 스타일 */
.search-filters-container, .search-filters-container0 { /* 기존 pop_title_wrap 클래스 대체 */
    background-color: #fff;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 필터 그룹 간 간격 */
    align-items: flex-end; /* 아래 정렬하여 버튼과 높이 맞춤 */
}

.filter-group {
    display: flex;
    flex-direction: column; /* 라벨과 셀렉트박스 수직 정렬 */
    gap: 5px; /* 라벨과 셀렉트박스 사이 간격 */
}

.filter-group label {
    font-size: 0.9em;
    color: var(--secondary-color);
    font-weight: 500;
}

.filter-select, .search-button { /* selectBox 클래스 대체 및 버튼 스타일 */
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #fff;
    font-size: 0.95em;
    min-width: 120px; /* 최소 너비 설정 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.filter-select:focus, .search-button:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    outline: none;
}

.search-button {
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    font-weight: 500;
    min-width: auto; /* 버튼은 내용에 맞게 */
    padding: 10px 20px;
}
.search-button:hover {
    background-color: #0056b3;
}

/* 테이블 컨테이너 및 테이블 기본 스타일 */
.responsive-table-container {
    width: 100%;
    overflow-x: auto;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
}

.data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em; /* 기본 폰트 크기 조정 */
}

.data-table th, .data-table td {
    border: 1px solid var(--border-color);
    padding: 12px 15px; /* 패딩 증가 */
    text-align: center;
    vertical-align: middle;
}

.data-table thead th {
    background-color: var(--medium-gray-color);
    font-weight: 700; /* 헤더 글씨 두껍게 */
    color: var(--dark-gray-color);
    white-space: nowrap;
}
.data-table thead th a {
    color: inherit;
    text-decoration: none;
}
.data-table thead th a:hover {
    text-decoration: underline;
}


.data-table tbody tr:nth-child(4n-3) td, /* 각 아이템의 첫번째 tr */
.data-table tbody tr:nth-child(4n-2) td { /* 각 아이템의 두번째 tr */
    background-color: #fff;
}
.data-table tbody tr:nth-child(4n-1) td, /* 다음 아이템의 첫번째 tr */
.data-table tbody tr:nth-child(4n) td {   /* 다음 아이템의 두번째 tr */
     background-color: var(--light-gray-color);
}

.data-table .al { text-align: left !important; }
.data-table .ar { text-align: right !important; }

.data-table .item-image { /* 이미지 스타일 */
    width: 120px; /* PC에서 이미지 너비 고정 */
    height: 100px; /* PC에서 이미지 높이 고정 */
    object-fit: cover; /* 비율 유지하며 꽉 채우기 */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}
.data-table td[rowspan="2"] img { /* rowspan 있는 이미지 셀 내부 이미지 */
     display: block;
     margin: auto;
}

.data-table a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.data-table a:hover {
    text-decoration: underline;
}
.data-table small {
    font-size: 0.85em;
    color: var(--secondary-color);
}
.data-table .price-value { /* 가격 강조 */
    font-weight: 700;
    color: #dc3545; /* 빨간색 계열로 강조 */
}
.data-table .status-badge { /* 진행 상태 뱃지 */
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 0.8em;
    font-weight: 700;
    color: #fff;
}
.data-table .status-new { background-color: #ffc107; /* 신건: 노랑색 */ }
.data-table .status-cancel { background-color: #a9a9a9; /* 취하: 회색 */ }
.data-table .status-done { background-color: #EB8276; /* 매각: 주황 */ }
.data-table .status-progress { background-color: #6BD089; color: var(--dark-gray-color); /* 유찰: 초록색 */ }


/* 페이지네이션 스타일 */
.pagination { margin-top: 30px; text-align: center; padding: 15px 0; }
.pagination a, .pagination .current {
    margin: 0 5px;
    padding: 10px 15px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--primary-color);
    border-radius: var(--border-radius);
    transition: background-color 0.2s, color 0.2s;
}
.pagination a:hover {
    background-color: var(--medium-gray-color);
    border-color: var(--secondary-color);
}
.pagination .current {
    font-weight: bold;
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.pagination .disabled {
    color: #aaa;
    pointer-events: none;
    border-color: #ddd;
}

/* --- 반응형 스타일 (모바일 화면) --- */
@media screen and (max-width: 768px) {
    .wrapper { padding: 10px; }
    h1 { font-size: 1.8em; }

    .search-filters-container0 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
          "saYYYY saNum goSrchTop";
        gap: 8px;
        align-items: center;
    }
      /* 각 그룹을 grid-area에 매핑 */
      .g-saYYYY   { grid-area: saYYYY; }
      .g-saNum   { grid-area: saNum; }
      .g-goSrchTop    { grid-area: goSrchTop; }

     /* 그리드 재배치: 종류/유찰, 지법/지원/담당계는 각각 2칸씩 */
    .search-filters-container {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
          "sale  sale   sale   sale"          /* 경매/매각 */
          "sido  sgg    emd    ri"            /* 시도/시군구/읍면동/리 */
          "type  type   yuchal yuchal"        /* 종류 | 유찰  (각 2칸) */
          "court court dept   dept"           /* 지법/지원 | 담당계 (각 2칸) */
          "submit submit submit submit";       /* 검색 버튼(선택) */
        gap: 8px;
        align-items: center;
    }

      /* 각 그룹을 grid-area에 매핑 */
      .g-sale   { grid-area: sale; }
      .g-sido   { grid-area: sido; }
      .g-sgg    { grid-area: sgg; }
      .g-emd    { grid-area: emd; }
      .g-ri     { grid-area: ri; }
      .g-type   { grid-area: type; }
      .g-yuchal { grid-area: yuchal; }
      .g-court  { grid-area: court; }
      .g-dept   { grid-area: dept; }
      .g-submit { grid-area: submit; }

        /* 라벨 텍스트를 보이지 않게 (선택 박스는 그대로 보임) */
        label[for="sido"],
        label[for="sgg"],
        label[for="emd"],
        label[for="ri"] {
            display: inline-block;   /* text-indent 적용 위해 블록화 */
            text-indent: -9999px;    /* 텍스트를 화면 밖으로 밀기 */
            white-space: nowrap;     /* 줄바꿈 방지 */
            overflow: hidden;        /* 밀린 텍스트 잘라내기 */
            vertical-align: middle;
        }

        /* 안쪽 select는 정상 크기로 보이게 복원 */
        label[for="sido"] .filter-select,
        label[for="sgg"] .filter-select,
        label[for="emd"] .filter-select,
        label[for="ri"] .filter-select {
            font-size: 0.95em !important;
            line-height: normal !important;
        }

        /* 혹시 라벨 하위에 클래스(.filter-select)로 지정된 경우까지 커버 */
        label[for="type"] > .filter-select,
        label[for="yuchalCnt"] > .filter-select,
        label[for="boCd"] > .filter-select,
        label[for="jpDeptCd"] > .filter-select {
            width: 100px !important;
            min-width: 100px !important;
            max-width: 100px !important;
            flex: 0 0 auto;
            box-sizing: border-box;
        }
     /* 입력/셀렉트/버튼은 가로 폭에 맞게 */
      .filter-group,
      .filter-group label { width: 100%; }
      .filter-group label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        white-space: nowrap;
        font-size: 0.9em;
      }

    .filter-select, .search-button {
        width: 100%;
        min-width: 60px; /* adjust */
        box-sizing: border-box;
        padding: 8px 10px;
      }
      .search-button {
        flex: 0 0 auto;          /* 버튼도 고정 폭/줄바꿈 없음 */
      }


    .data-table thead {
        display: none; /* 모바일에서는 테이블 헤더 숨김 */
    }
    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .data-table tbody tr.grid_body_row { /* 각 행(물건의 절반)을 하나의 블록으로 */
        margin-bottom: 0; /* 연속된 tr은 붙임 */
        border: none;
        padding: 0;
    }
    /* 두 개의 tr을 하나의 카드로 만들기 위한 스타일 */
    .data-table tbody tr.grid_body_row.odd:nth-child(4n-3), /* 홀수 아이템의 첫번째 tr */
    .data-table tbody tr.grid_body_row.even:nth-child(4n-1) { /* 짝수 아이템의 첫번째 tr */
        margin-top: 20px; /* 카드 간 상단 간격 */
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        border-bottom: none; /* 아래 tr과 이어지므로 하단 테두리 제거 */
        background-color: #fff !important; /* 배경색 통일 */
    }
    .data-table tbody tr.grid_body_row.odd:nth-child(4n-2), /* 홀수 아이템의 두번째 tr */
    .data-table tbody tr.grid_body_row.even:nth-child(4n) {   /* 짝수 아이템의 두번째 tr */
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        border-top: none; /* 위 tr과 이어지므로 상단 테두리 제거 */
        margin-bottom: 20px; /* 카드 간 하단 간격 */
        background-color: #fff !important; /* 배경색 통일 */
        box-shadow: var(--card-shadow);
    }


    .data-table td {
        text-align: right;
        position: relative;
        padding: 10px 15px;
        padding-left: 45%; /* 라벨을 위한 공간 */
        border: none;
        border-bottom: 1px dotted #eee;
        min-height: 38px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
     /* 첫번째 tr의 첫번째 td (이미지 td)는 특별 처리 */
    .data-table tbody tr.grid_body_row td[rowspan="2"] {
        display: flex; /* 이미지를 블록으로 만들어 카드 상단에 배치 */
        width: 100% !important;
        height: auto; /* 높이 자동 */
        padding: 0; /* 패딩 제거 */
        border-bottom: 1px solid var(--border-color); /* 이미지와 내용 구분선 */
    }
    .data-table tbody tr.grid_body_row td[rowspan="2"] .item-image {
        width: 100%;
        height: 180px; /* 모바일에서 이미지 높이 고정 */
        object-fit: cover;
        border-radius: 0; /* 카드 상단에 맞게 radius 제거 */
        border-top-left-radius: var(--border-radius); /* 카드 모서리 둥글게 */
        border-top-right-radius: var(--border-radius);
        border: none;
    }

    /* rowspan된 td는 카드의 첫번째 tr에서만 보이도록 (두번째 tr에서는 숨김) */
    .data-table tbody tr.grid_body_row:nth-child(odd) td[rowspan="2"]:not(:first-child),
    .data-table tbody tr.grid_body_row:nth-child(even) td[rowspan="2"]:not(:first-child) {
         /* 이미지가 아닌 rowspan td 들은 첫번째 tr에서 표시 */
    }
    .data-table tbody tr.grid_body_row:nth-child(even) td[data-label="선택"], /* 두번째 tr에서 rowspan 관련 셀 숨김 */
    .data-table tbody tr.grid_body_row:nth-child(even) td[data-label="사건번호"],
    .data-table tbody tr.grid_body_row:nth-child(even) td[data-label="소재지/내역"],
    .data-table tbody tr.grid_body_row:nth-child(even) td[data-label="지도"],
    .data-table tbody tr.grid_body_row:nth-child(even) td[data-label="비고"] {
        display: none;
    }


    .data-table td:last-child {
        border-bottom: none;
    }
    .data-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(45% - 25px); /* 라벨 너비 */
        padding-right: 10px;
        font-weight: 500;
        text-align: left;
        color: var(--secondary-color);
        font-size: 0.9em;
    }
    .data-table td[rowspan="2"]::before { /* 이미지 셀은 라벨 불필요 */
        display: none;
    }
    .data-table td.mobile-button-cell { /* 지도 버튼 셀 */
        padding-left: 15px;
        justify-content: center;
    }
     .data-table td.mobile-button-cell::before {
        display: none;
    }
    .data-table td.mobile-button-cell button {
        width: 100%;
        padding: 8px 10px;
        background-color: var(--secondary-color);
        color: white;
        border:none;
        border-radius: var(--border-radius);
        font-size: 0.9em;
    }
}

  .action-btn{
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; border-radius:5px;
    border:1px solid var(--border); background:var(--secondary-color);
    cursor:pointer; font-weight:700; font-size:14px; letter-spacing:-.2px;
    color: white;
    box-shadow:var(--shadow-sm);
    transition:transform .12s ease, box-shadow .12s ease, background-color .2s ease;
  }
  .action-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow) }
  .action-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
  .action-btn .ico{
    width:28px; height:28px; display:grid; place-items:center;
    border-radius:50%; background:#eef2ff; font-size:16px;
  }
  .action-btn.primary{ background:var(--primary); color:var(--primary-contrast); border-color:transparent }
  .action-btn.primary .ico{ background:rgba(255,255,255,.25) }



 /* 컨테이너 */
        .segmented { border:0; margin:0; padding:0; }
        .segmented-legend {
            font-weight:700;
            font-size:14px;
            color:var(--muted);
            margin:0 0 6px 2px;
            text-align: left;
        }

        .segmented-toggle{
            position:relative;
            display:grid;
            grid-template-columns:1fr 1fr;
            background:linear-gradient(180deg,#f8fbff,#eef7ff);
            border:1px solid var(--line);
            border-radius:14px;
            padding:4px;
            box-shadow:0 8px 24px rgba(17,24,39,.08);
            user-select:none;
            width: 300px; /* 예시 너비 설정 */
        }

        /* 라디오 인풋 (핵심 수정 부분) */
        .segmented-toggle input[type="radio"]{
            position:absolute;
            opacity:0;
            /* **핵심 수정: z-index를 높여 클릭 이벤트가 라디오 버튼에 확실히 도달하도록 보장** */
            z-index: 3;
            /* 각 라디오가 자기 절반을 클릭영역으로 가짐 */
            top:0; height:100%; width:50%;
        }
        #saleTypeAuc { left:0; }
        #saleTypeSale{ left:50%; }

        /* 라벨 */
        .segmented-toggle label{
            position:relative;
            z-index:2; /* 라벨은 인디케이터보다 위에 있어야 함 */
            text-align:center; padding:10px 12px;
            border-radius:10px; font-weight:700;
            color:#64748b; cursor:pointer;
            transition: color 160ms ease, transform 100ms ease;
        }
        .segmented-toggle label:active{ transform:scale(0.98); }

        /* 포커스 링: 키보드 접근성 */
        .segmented-toggle input[type="radio"]:focus-visible + label{
            box-shadow:0 0 0 2px #fff inset, 0 0 0 3px var(--primary-color);
        }

        /* 선택된 라벨 색상 */
        #saleTypeAuc:checked  + label{ color:white; }
        #saleTypeSale:checked + label{ color:white; }

        /* 슬라이딩 인디케이터 */
        .segmented-indicator{
            position:absolute;
            z-index:1; /* 라벨과 인풋 사이에 위치 */
            top:4px; left:4px;
            width:calc(50% - 0px);
            height:calc(100% - 8px);
            border-radius:10px;
            background:var(--primary-color);
            box-shadow:0 6px 16px var(--primary-shadow);
            transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease;
        }

        /* 체크 상태에 따른 위치 */
        #saleTypeAuc:checked  ~ .segmented-indicator{ transform:translateX(0%); }
        /* 인디케이터가 input#saleTypeSale 뒤에 위치하므로 ~ 셀렉터 사용 */
        #saleTypeSale:checked ~ .segmented-indicator{ transform:translateX(100%); }

        /* 선택 시 펄스 */
        @keyframes pulse {
            0%{ box-shadow:0 0 0 0 var(--primary-shadow); }
            100%{ box-shadow:0 0 0 14px transparent; }
        }
        .segmented-indicator.pulse{ animation:pulse 340ms ease-out; }

        @media (prefers-reduced-motion: reduce){
            .segmented-indicator{ transition:none; }
            .segmented-indicator.pulse{ animation:none; }
        }