/* =====================================================================
   페이지 표준 레이아웃 (page-standard.css)
   - 기준 화면: dataSearch (데이터 검색) 의 CSS 를 모듈화
   - 적용 방법: 페이지의 page-local <style> 보다 뒤에 <link> 로 import
       <link rel="stylesheet" href="../common/page-standard.css">
   - search-design.css 와 함께 사용 (search-design 은 변형 클래스 정규화 담당,
     page-standard 는 페이지 전체 골격을 담당)
   ===================================================================== */

/* ── 디자인 토큰 ──────────────────────────────────────────────── */
:root{
  --bg-base:#f1f5f9; --bg-surface:#fff; --bg-header:#f8fafc;
  --border:#e2e8f0; --border-md:#cbd5e1;
  --text-primary:#0f172a; --text-secondary:#475569; --text-muted:#94a3b8;
  --primary:#1a56db; --primary-light:#dbeafe; --primary-xlight:#eff6ff;
  --success:#16a34a; --success-light:#dcfce7;
  --danger:#dc2626; --danger-light:#fee2e2;
  --warning:#d97706; --warning-light:#fef3c7;
  --info:#0284c7;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 4px 12px rgba(0,0,0,.10);
  --radius:5px; --radius-lg:8px;
  --mono:'Consolas','Monaco',monospace;
  --font:'Noto Sans KR',-apple-system,sans-serif;
  /* 신규 디자인 토큰 */
  --brand:#2563eb; --brand-600:#1d4ed8; --brand-50:#eff4ff; --brand-100:#dbe6ff;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-400:#94a3b8; --ink-300:#cbd5e1;
  --line:#e7ebf1; --line-soft:#eef1f6; --bg-soft:#f5f7fb;
  --shadow-card:0 1px 2px rgba(15,31,61,.04),0 1px 3px rgba(15,31,61,.06);
}

/* ── 페이지 골격 ─────────────────────────────────────────────── */
body{
  font-family:var(--font) !important;
  background:var(--bg-base) !important;
  color:var(--text-primary) !important;
  font-size:13px !important;
  height:100vh !important;
  overflow:hidden !important;
  margin:0; padding:0;
}
*{margin:0; padding:0; box-sizing:border-box;}

.page-wrap{display:flex !important; flex-direction:column !important; height:100vh !important; overflow:hidden !important;}

/* 페이지 헤더 - 작은 한 줄 */
.page-hdr{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 20px !important;
  height:46px !important;
  background:var(--bg-surface) !important;
  border-bottom:1px solid var(--border) !important;
  flex-shrink:0 !important;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.page-hdr-left{display:flex; align-items:center; gap:12px;}
.page-hdr-title{font-size:14px !important; font-weight:700 !important; color:var(--text-primary) !important;}
.page-hdr-sep{width:1px; height:18px; background:var(--border);}
.page-hdr-bread{font-size:11px !important; color:var(--text-muted) !important;}
/* 페이지헤드 h1 / .title / .page-hdr-title / .logo-text 모두 작은 한줄 */
.page-hdr h1,
.page-hdr .title,
.page-hdr .page-hdr-title,
.page-hdr .logo-text,
.page-hdr .header-title,
.page-hdr .h-title{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--text-primary) !important;
}
/* 명시적 아이콘 변형 숨김 (logo-icon 배지, hdr-icon 등) */
.page-hdr > .logo-icon,
.page-hdr .logo-icon,
.page-hdr > .hdr-icon,
.page-hdr > .header-icon,
.page-hdr > .h-icon,
.page-hdr > .badge:not(.page-hdr-badge){
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
/* 표준 헤더는 아이콘 없이 텍스트만 - 큰 폰트 (18px 이상) 만 아이콘으로 간주하여 숨김
   주의: 타이틀 span 은 보통 font-size:14~16px 이라 안 잡혀야 함 */
.page-hdr > span[style*="font-size:18"],
.page-hdr > span[style*="font-size:19"],
.page-hdr > span[style*="font-size:2"],
.page-hdr > span[style*="font-size:3"],
.page-hdr .page-hdr-left > span[style*="font-size:18"],
.page-hdr .page-hdr-left > span[style*="font-size:19"],
.page-hdr .page-hdr-left > span[style*="font-size:2"],
.page-hdr .page-hdr-left > span[style*="font-size:3"],
.page-hdr > svg,
.page-hdr .page-hdr-left > svg,
.page-hdr > .ic,
.page-hdr .page-hdr-left > .ic,
.pagehead h1 > .ic,
.pagehead h1 > svg,
.page-hdr > [class*="icon"]:not([class*="page-hdr"]),
.page-hdr .page-hdr-left > [class*="icon"]:not([class*="page-hdr"]){
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
/* 우측 액션 슬롯 */
.page-hdr-actions{margin-left:auto !important; display:flex; gap:8px; align-items:center;}

/* ── .pagehead (큰 페이지헤드 변형) 도 .page-hdr 표준에 맞춤 ──
   datasetMgmt 등이 .pagehead h1 + .ic 아이콘 + crumb 우측 정렬 구조 사용.
   데이터 검색 표준(작은 한 줄 헤더) 으로 통일. */
.pagehead{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  background:transparent !important;
  border-bottom:1px solid var(--line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:8px 4px !important;
  min-height:38px !important;
  height:auto !important;
  flex-shrink:0 !important;
  margin:0 0 4px 0 !important;
}
.pagehead h1{
  font-size:14px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  color:var(--ink-900) !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
}
/* 아이콘 숨김 (표준은 텍스트만) */
.pagehead h1 .ic{ display:none !important; }
/* h1 옆 래퍼 div 가 있을 경우 (crumb + actions 묶음) */
.pagehead > div:not(.page-hdr-actions){
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 !important;
}
/* 브레드크럼: 타이틀 옆에 세로선 구분자 + 작은 글씨 */
.pagehead .crumb{
  font-size:11.5px !important;
  color:var(--ink-400) !important;
  font-weight:normal !important;
  padding-left:10px !important;
  border-left:1px solid var(--line) !important;
  margin:0 !important;
}
.pagehead .crumb b{ color:var(--ink-700) !important; font-weight:600 !important; }
/* 우측 액션 슬롯 */
.pagehead .page-hdr-actions{ margin-left:auto !important; }

/* 페이지 본문 */
.page-body{
  flex:1 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  padding:10px 14px 0 !important;
  gap:8px !important;
  background:var(--bg-soft) !important;
}

/* ── 레거시 검색바 (.search-bar) 통합 처리 ──────────────────────
   datasetView 등 page-local 마크업이 .search-bar + .adv-row + .s-expand-row
   를 분리 카드로 만들어 경계가 보이는 문제 해결.
   한 카드처럼 보이도록 위/가운데/아래 라운드 조립 + gap 상쇄(-8px).
   ============================================================ */
.page-body > .search-bar{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:12px 12px 0 0 !important;
  border-bottom:none !important;
  box-shadow:var(--shadow-card) !important;
  padding:12px 16px !important;
  margin:0 !important;
}
/* .search-bar 뒤에 아무것도 없으면 사방 라운드 + 아래 테두리 복원 */
.page-body > .search-bar:last-child,
.page-body > .search-bar:not(:has(+ .adv-row)):not(:has(+ .s-expand-row)){
  border-radius:12px !important;
  border-bottom:1px solid var(--line) !important;
}

.page-body > .adv-row{
  background:linear-gradient(180deg,#fafbfe,#fff) !important;
  border:1px solid var(--line) !important;
  border-top:1px solid var(--line-soft) !important;
  border-bottom:none !important;
  border-radius:0 !important;
  padding:12px 18px !important;
  margin-top:-8px !important;     /* page-body gap 상쇄 */
}
/* adv-row 가 마지막이면 아래 라운드 + 아래 테두리 */
.page-body > .adv-row:last-child{
  border-radius:0 0 12px 12px !important;
  border-bottom:1px solid var(--line) !important;
}

.page-body > .s-expand-row{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-top:1px solid var(--line-soft) !important;
  border-radius:0 0 12px 12px !important;
  margin-top:-8px !important;     /* page-body gap 상쇄 */
  margin-bottom:6px !important;
  padding:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  box-shadow:var(--shadow-card);
}

/* 레거시 .sr (검색바 내용 row) — 검색 버튼 우측 끝 정렬 */
.page-body > .search-bar .sr{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.page-body > .search-bar .sr > .si:not([type="date"]){
  flex:1 !important;
  min-width:200px !important;
}
/* board 패턴: .search-bar > .sb-kw (입력 래퍼) 도 flex:1 로 확장 → 검색 버튼 우측 */
.page-body > .search-bar > .sb-kw,
.page-body > .search-bar .sb-kw{
  flex:1 !important;
  min-width:200px !important;
  display:flex !important;
  align-items:center !important;
}
.page-body > .search-bar > .sb-kw input{
  flex:1 !important;
  border:none !important;
  outline:none !important;
}
/* search-bar 자체가 flex 일 때, 검색 버튼 등은 flex-shrink 0 */
.page-body > .search-bar > .s-btn,
.page-body > .search-bar > .sb-btn,
.page-body > .search-bar > button{ flex-shrink:0 !important; }
.page-body > .search-bar .sr > .sb-btn,
.page-body > .search-bar .sr > .btn-primary,
.page-body > .search-bar .sr > .btn-reset,
.page-body > .search-bar .sr > .btn-reset-ext{
  flex-shrink:0 !important;
  height:36px !important;
  padding:0 18px !important;
  font-size:13px !important;
}
.page-body > .search-bar .sr > .sb-btn,
.page-body > .search-bar .sr > .btn-primary{
  background:var(--brand) !important;
  color:#fff !important;
  border:1px solid var(--brand) !important;
  border-radius:9px !important;
  font-weight:600 !important;
}
.page-body > .search-bar .sr > .btn-reset,
.page-body > .search-bar .sr > .btn-reset-ext{
  background:#fff !important;
  color:var(--ink-700) !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  font-weight:600 !important;
}
/* .s-act (등록 버튼 묶음) - 절대 검색바 안에 안 남도록 우측 끝 */
.page-body > .search-bar .sr > .s-act{ margin-left:auto !important; }

/* ── 변형 클래스 (.search / .summary) 도 .search-bar / .summary-bar 와 동일 처리 ─
   메타데이터 관리 등이 .search / .summary 를 사용 */
.page-body > .search{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:var(--shadow-card) !important;
  padding:12px 16px !important;
  margin:0 !important;
}
.page-body > .search .sr{ display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; }
.page-body > .search .sr > .si:not([type="date"]){ flex:1 !important; min-width:200px !important; }
.page-body > .search .sr > .sb-btn,
.page-body > .search .sr > .btn-primary,
.page-body > .search .sr > .btn-reset,
.page-body > .search .sr > .btn-reset-ext{
  flex-shrink:0 !important;
  height:36px !important;
  padding:0 18px !important;
  font-size:13px !important;
  border-radius:9px !important;
  font-weight:600 !important;
}
.page-body > .search .sr > .sb-btn,
.page-body > .search .sr > .btn-primary{
  background:var(--brand) !important;
  color:#fff !important;
  border:1px solid var(--brand) !important;
}
.page-body > .search .sr > .btn-reset,
.page-body > .search .sr > .btn-reset-ext{
  background:#fff !important;
  color:var(--ink-700) !important;
  border:1px solid var(--line) !important;
}
.page-body > .search .sr > .s-act{ margin-left:auto !important; }

/* .summary (콤팩트 가로 스트립) — .summary-bar 와 동일 */
.page-body > .summary{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-shrink:0 !important;
  flex-wrap:wrap !important;
  background:var(--bg-surface) !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  padding:7px 12px !important;
  margin:0 !important;
  box-shadow:var(--shadow-card);
}
.page-body > .summary .sc{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:2px 10px 2px 8px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  border-right:1px solid var(--line-soft) !important;
}
.page-body > .summary .sc:last-of-type{ border-right:none !important; }
.page-body > .summary .sdiv{ flex:1 !important; border-right:none !important; }
.page-body > .summary .sc-ic{
  width:22px !important; height:22px !important;
  border-radius:6px !important;
  font-size:11px !important;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.page-body > .summary .sc-info{ display:flex !important; align-items:center !important; gap:4px !important; }
.page-body > .summary .sc-lb{ font-size:11px !important; color:var(--ink-500) !important; }
.page-body > .summary .sc-v{ font-size:14px !important; font-weight:700 !important; color:var(--ink-900) !important; margin-left:2px; }

/* ── 검색/등록 버튼 안의 인라인 SVG 아이콘 숨김 (스코프 없이 글로벌) ──
   viewbox(소문자) 같은 잘못된 속성으로 SVG 가 깨져 보이는 문제 해결. */
.sb-btn svg,
button.sb-btn svg,
.search-bar .btn svg,
.search .btn svg,
.search-bar button svg,
.search button svg,
.panel-search .toolbar button svg,
.toolbar .btn svg,
.btn.btn-c svg,
.btn-primary svg,
[design*="검색"] button svg{ display:none !important; }

/* ── 등록류 버튼 통일 (.s-act .btn, .btn-c 등 우측 끝) ───────── */
.page-body .s-act .btn,
.page-body .s-act .btn-c{
  background:var(--brand) !important;
  color:#fff !important;
  border:1px solid var(--brand) !important;
  border-radius:9px !important;
  height:36px !important;
  padding:0 14px !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  cursor:pointer;
}
.page-body .s-act .btn:hover,
.page-body .s-act .btn-c:hover{
  background:var(--brand-600) !important;
  border-color:var(--brand-600) !important;
}

/* main 컨테이너 (metadataView 가 .main 사용) → .page-body 와 동일 동작 */
.page-body .main{ display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; }
.page-body .main > .search,
.page-body .main > .summary{ flex-shrink:0; }

/* ── 통계카드 (콤팩트 가로 스트립, 검색 위) ─────────────────── */
.summary-bar{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-shrink:0 !important;
  flex-wrap:wrap !important;
  background:var(--bg-surface) !important;
  border:1px solid var(--line) !important;
  border-radius:9px !important;
  padding:7px 12px !important;
  margin:0 !important;
  box-shadow:var(--shadow-card);
}
.summary-bar .sc{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  padding:2px 10px 2px 8px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  border-right:1px solid var(--line-soft) !important;
}
.summary-bar .sc:last-of-type{ border-right:none !important; }
.summary-bar .sdiv{ flex:1 !important; border-right:none !important; }
.summary-bar .sc-ic{
  width:22px !important; height:22px !important;
  border-radius:6px !important;
  font-size:11px !important;
  flex-shrink:0;
}
.summary-bar .sc-lb{ font-size:11px !important; color:var(--ink-500) !important; }
.summary-bar .sc-v{ font-size:14px !important; font-weight:700 !important; color:var(--ink-900) !important; margin-left:2px; }

/* ── 통합 검색 패널 (toolbar + adv + adv-toggle 한 카드) ─────── */
.panel-search{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  flex-shrink:0;
}
.panel-search .toolbar{
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.panel-search .toolbar .s-label{
  font-size:12.5px; font-weight:600; color:var(--ink-500); white-space:nowrap;
}
.panel-search .toolbar .s-chips{ display:flex; gap:4px; }
.panel-search .toolbar .s-chip{
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  font-size:12.5px;
  cursor:pointer;
  background:#fff;
  color:var(--ink-500);
  transition:all .12s;
  user-select:none;
  white-space:nowrap;
}
.panel-search .toolbar .s-chip:hover{ border-color:var(--brand); color:var(--brand); }
.panel-search .toolbar .s-chip.on{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600;
}
.panel-search .toolbar .search-box{
  display:flex; align-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:#fff;
  transition:.15s;
  flex:1;
  min-width:260px;
  height:36px;
}
.panel-search .toolbar .search-box:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-50);
}
.panel-search .toolbar .search-box .ic{
  padding:0 4px 0 12px; color:var(--ink-400); pointer-events:none;
}
.panel-search .toolbar .search-box input{
  border:none; outline:none;
  padding:0 12px 0 4px;
  font-size:13.5px;
  flex:1;
  font-family:inherit;
  color:var(--ink-900);
  background:transparent;
  height:100%;
}
.panel-search .toolbar .search-box input::placeholder{ color:var(--ink-400); }
.panel-search .toolbar .search-box .go{ display:none !important; }

.panel-search .toolbar .btn-search-ext{
  background:var(--brand); color:#fff;
  border:1px solid var(--brand);
  height:36px; padding:0 18px;
  border-radius:9px;
  cursor:pointer; font-weight:600; font-size:13.5px; font-family:inherit;
  transition:.15s;
}
.panel-search .toolbar .btn-search-ext:hover{
  background:var(--brand-600); border-color:var(--brand-600);
}
.panel-search .toolbar .btn-reset-ext{
  background:#fff; color:var(--ink-700);
  border:1px solid var(--line);
  height:36px; padding:0 16px;
  border-radius:9px;
  cursor:pointer; font-weight:600; font-size:13.5px; font-family:inherit;
  transition:.15s;
}
.panel-search .toolbar .btn-reset-ext:hover{
  border-color:var(--ink-300); background:var(--bg-soft);
}

/* ── 상세검색 펼침 + 토글 손잡이 ──────────────────────────── */
.panel-search .adv{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.panel-search .adv.open{ max-height:560px; border-top:1px solid var(--line-soft); }
.panel-search .adv-inner{
  padding:16px 20px;
  background:linear-gradient(180deg,#fafbfe,#fff);
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.panel-search .adv-toggle-bar{ display:flex; justify-content:center; align-items:center; }
.panel-search .adv-toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ink-500);
  padding:6px 20px;
  text-decoration:none;
  transition:.15s;
}
.panel-search .adv-toggle:hover{ color:var(--brand); background:var(--brand-50); }
.panel-search .adv-toggle.open{ color:var(--brand); }
.panel-search .adv-toggle .chev{ font-size:10px; transition:transform .25s; }
.panel-search .adv-toggle.open .chev{ transform:rotate(180deg); }
.panel-search .adv-toggle .fcount{
  background:var(--brand); color:#fff;
  font-size:11px; font-weight:700;
  border-radius:20px; min-width:18px; height:18px; padding:0 5px;
  display:none; place-items:center;
}
.panel-search .adv-toggle.has-filters .fcount{ display:grid; }

/* ── 결과 영역 (좌측 리스트 + 우측 상세) ─────────────────────── */
.results-layout{
  flex:1;
  overflow:hidden;
  display:flex;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-card);
  margin-bottom:14px;
}
.result-list{
  flex:1;
  overflow-y:auto;
  background:#fff;
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.result-list::-webkit-scrollbar{ width:5px; }
.result-list::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:3px; }
.result-count-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 0 12px;
  flex-shrink:0;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:6px;
}
.result-count-text{ font-size:13px; color:var(--ink-500); }
.result-count-text em{ font-weight:700; color:var(--ink-900); font-style:normal; }
.sort-select{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:12.5px;
  font-family:var(--font);
  color:var(--ink-700);
  background:#fff;
  outline:none;
  cursor:pointer;
}
.search-result-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  padding:12px 4px 12px 12px;
  cursor:pointer;
  transition:background .12s;
  border-left:3px solid transparent;
  margin-left:-8px;
}
.search-result-item:last-child{ border-bottom:none; }
.search-result-item:hover{ background:var(--brand-50); }
.search-result-item.selected{ border-left-color:var(--brand); background:var(--brand-50); }
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 20px;
  color:var(--ink-400); flex:1;
  background:#fff;
}
.empty-icon{ font-size:48px; margin-bottom:14px; opacity:.35; }
.empty-text{ font-size:14px; font-weight:600; color:var(--ink-700); }
.empty-sub{ font-size:12.5px; margin-top:4px; color:var(--ink-400); }