/* ── 디자인 토큰: GovScope DS(ds.css) 토큰 리매핑 ──
   같은 이름(--ink/--muted/--line/--sans/--mono)은 로컬 재정의를 두지 않고
   ds.css :root(다크 기본 + [data-theme="light"] 오버라이드)에서 그대로 상속받는다.
   검색 전용 별칭(--paper/--surface/--navy 등)만 ds 토큰을 참조해 매핑. */
:root {
  --paper:      var(--bg);
  --surface:    var(--surf);
  --ink-2:      var(--ink2);
  --line-2:     var(--line2);

  --navy:       var(--az);   /* 브랜드 액션 */
  --navy-ink:   var(--ink);
  --crimson:    var(--crit); /* .status.is-error 등 실제 오류색 — 의미 유지 위해 --crit로(--t 아님) */

  /* 코퍼스 색: 오직 자료 구분에만 사용 — ds 팔레트와 안 튀어 유지(라이트·다크 모두 확인) */
  --c-legal:    #2C4B8C;   /* 법령 = 네이비(권위) */
  --c-bylaws:   #0E8A7D;   /* 내규 = 틸 */
  --c-ca:       #B7324F;   /* 단협 = 크림슨 */
  --c-disclosure: #B4690E; /* 공시자료 = 앰버(4번째 구분색) */

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(31,33,38,.04), 0 8px 24px rgba(31,33,38,.06);
  --shadow-lg:  0 2px 6px rgba(31,33,38,.06), 0 18px 48px rgba(31,33,38,.10);

  --serif: var(--sans);   /* 세리프 미사용 방침 — ds.css --sans(IBM Plex Sans KR) 상속 */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

em { font-style: normal; }
strong, b { font-weight: 700; }

/* ── 상단 바 ── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 25px; width: auto; display: block; }
.topbar-tool {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 1px solid var(--line);
  letter-spacing: .01em;
  white-space: nowrap;
}
.topbar-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .15s;
}
.topbar-link:hover { color: var(--navy); }

/* ── 히어로 ── */
/* ── 작업 영역(2-pane 그리드) ── */
.ws {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(24px, 4.5vw, 48px) 24px 40px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.pane-search { width: 100%; max-width: 660px; text-align: center; }
.pane-results { display: none; width: 100%; min-width: 0; }

/* 검색 후: 넓은 화면 = 좌측 검색·필터 레일 + 우측 결과 */
body.has-results .ws {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  justify-items: stretch;
  padding-top: 32px;
}
body.has-results .pane-search {
  max-width: none;
  text-align: left;
  position: sticky;
  top: 84px;
}
body.has-results .pane-results { display: block; }
body.has-results .hero-text,
body.has-results .examples { display: none; }

/* 검색 전: 필터는 히어로에서 숨겨 깔끔하게(검색 후 레일에 표시) */
body:not(.has-results) .filters { display: none; }

@media (prefers-reduced-motion: no-preference) {
  body.has-results .pane-results { animation: fade .4s ease; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 18px;
  font-weight: 600;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(2.3rem, 6.4vw, 4rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.hero-title em {
  color: var(--navy);
  position: relative;
  white-space: nowrap;
}
.hero-title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.14em;
  background: linear-gradient(90deg, var(--navy) 0 62%, var(--crimson) 62% 100%);
  opacity: .22;
  border-radius: 2px;
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.14rem);
  color: var(--ink-2);
  margin: 0 auto 30px;
  max-width: 30em;
}
.hero-sub strong { color: var(--navy); font-variant-numeric: tabular-nums; }

/* ── 검색 ── */
.search { max-width: 640px; margin: 0 auto; }
body.has-results .search { max-width: none; margin: 0; }
/* 레일에서는 모드 토글을 전체폭으로 */
body.has-results .mode { display: flex; width: 100%; }
body.has-results .mode-btn { flex: 1; }

.mode {
  position: relative;
  display: inline-flex;
  background: var(--line-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto 14px;
}
.mode-btn {
  position: relative;
  z-index: 1;
  min-width: 88px;       /* 두 탭 동일 폭 — 슬라이더(50%)·좌우 간격 대칭 유지 */
  text-align: center;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s;
}
.mode-btn.is-active { color: var(--bg); }  /* --navy(=az)는 라이트/다크에 따라 밝기가 뒤집혀 --bg가 항상 대비됨 */
.mode-slider {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--navy);
  border-radius: 999px;
  transition: transform .28s cubic-bezier(.4,.05,.2,1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--navy) 35%, transparent);
}
.mode[data-mode="semantic"] .mode-slider { transform: translateX(100%); }

/* 2026-08-05 전면 개편: '활용' 블록이 페이지에서 빠지며 검색창이 페이지의 유일한 1차 행동이 됐다
   — 그만큼 크기·그림자·포커스감을 한 단계 올렸다(패딩 8→10~14px, 아이콘 20→22px). */
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.search-box:focus-within {
  border-color: var(--t);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t) 16%, transparent), var(--shadow);
}
.search-icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round;
}
.search-box:focus-within .search-icon { stroke: var(--t); }
#keyword {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 16.5px;
  color: var(--ink);
  padding: 10px 0;
}
#keyword::placeholder { color: var(--muted); }
/* 키보드 단축키 힌트("/") — 비어있고 포커스도 없을 때만. 값이 생기면 지우기(×) 버튼이 같은 자리를 대신한다 */
.search-kbd {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);   /* var(--muted)는 다크에서 서치박스 배경 대비 3.4:1로 AA(4.5) 미달(실측) — --ink-2로 교체 */
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  line-height: 1.4;
}
#keyword:focus ~ .search-kbd,
#keyword:not(:placeholder-shown) ~ .search-kbd { display: none; }
/* 지우기(×) — 입력값이 있을 때만. :placeholder-shown은 값 유무를 항상 실시간 반영하므로
   타이핑·붙여넣기·URL 딥링크(?q=) 어느 경로로 값이 채워져도 JS 상태동기화 없이 정확하다. */
.search-clear {
  display: none;
  flex: none;
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: var(--ink-2);   /* var(--muted)는 다크에서 서치박스 배경 대비 3.4:1로 AA(4.5) 미달(실측) — --ink-2로 교체 */
  font-size: 17px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.search-clear:hover { background: var(--line-2); color: var(--ink); }
#keyword:not(:placeholder-shown) ~ .search-clear { display: inline-flex; align-items: center; justify-content: center; }
#searchBtn {
  flex: none;
  border: 0;
  background: var(--az);
  color: var(--bg);   /* --az는 라이트/다크에 따라 밝기가 뒤집혀 --bg가 항상 대비됨(ds .btn 패턴과 동일) */
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, transform .1s;
}
#searchBtn:hover { background: color-mix(in srgb, var(--az) 85%, var(--t)); }
#searchBtn:active { transform: translateY(1px); }
#searchBtn:disabled { opacity: .5; cursor: not-allowed; }

.mode-hint {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
}
.mode-hint b { color: var(--navy); }
/* 의미검색 질문 해석 배너 — 검색창 아래·필터 위. 상태줄과 분리해 결과줄은 키워드검색과 동일하게 */
.rewrite-note {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: color-mix(in srgb, var(--navy) 8%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}
.rewrite-note b { color: var(--navy); font-weight: 700; }

/* ── 예시 칩 ── */
.examples {
  margin: 26px auto 0;
  max-width: 640px;
  text-align: center;
}
.examples-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.examples-label {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .02em;
}
.examples-refresh {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.4,.05,.2,1), color .18s, border-color .18s;
}
.examples-refresh:hover { color: var(--navy); border-color: var(--navy); }
.examples-refresh:active { transform: rotate(180deg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .1s;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip:active { transform: translateY(1px); }

/* ── 패널 (필터 + 결과) ── */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 16px;
}
/* 좌측 레일에서는 필터를 세로로 쌓아 좁은 폭에서도 읽기 편하게 */
body.has-results .filters { flex-direction: column; align-items: stretch; }
body.has-results .field, body.has-results .field-sm { flex: 1 1 auto; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; }
.field-sm { flex: 0 0 80px; }
.field-label { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.field select, .field input {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.field select:focus, .field input:focus {
  outline: 0;
  border-color: var(--t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 16%, transparent);
}
/* 결과 바의 정렬 select — label.sort-toggle 안이라 위 .field 규칙에 안 걸린다.
   빠뜨리면 네이티브 회색 필드로 남는다(다크에서 rgb(107,107,107) 실측). 바가 13px 이라 크기만 낮춘다. */
.sort-toggle select {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.sort-toggle select:focus {
  outline: 0;
  border-color: var(--t);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t) 16%, transparent);
}
/* 필터 접힘 토글 — 모바일에서만 노출(검색 후). 데스크톱은 필터 상시 표시 */
.filters-toggle { display: none; }
.filters-toggle .ft-caret { transition: transform .18s; font-size: 18px; line-height: 1; margin-left: 1px; }
.filters-toggle[aria-expanded="true"] .ft-caret { transform: rotate(180deg); }
.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  padding-bottom: 9px;
}
.check input { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; }
.check.is-disabled { opacity: .4; cursor: not-allowed; }
/* 활용처 칩 행 — .rfilter 칩 컴포넌트 재사용, 프리셋(묶음)은 점선 테두리로 구분 */
.field-uc { flex: 1 1 100%; }
.field-label-sub { font-weight: 400; color: var(--muted); }
.uc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.uc-chip.uc-preset { border-style: dashed; }
.uc-chip.uc-preset.is-active { border-style: solid; }

/* ── 상태줄 + 결과 툴바 ── */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 16px;
}
.status {
  min-height: 20px;
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;            /* 한글은 어절 단위로만 줄바꿈(중간 끊김 방지) */
}
.status.is-error { color: var(--crimson); }
.status .nudge { color: var(--navy); }
.status .st-tok { white-space: nowrap; }   /* 각 항목(건수·범위 등)은 안 쪼개짐, 항목 사이에서만 줄바꿈 */
.status .st-hint { color: var(--navy); margin-left: 10px; }
/* 주(主) 그룹: 상위 N건 + 더 있음 — 진하게 */
.status .st-primary { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.status .st-count { }
/* 메타 그룹: 범위·필터·시간 — 흐리게, 간격 띄워 분리 */
.status .st-meta { color: var(--muted); margin-left: 14px; }
/* '더 있음' 클릭 → 다음 단계까지 더 불러오기 */
.status .st-more {
  margin-left: 7px; padding: 1px 8px;
  font: inherit; font-weight: 700; color: var(--navy);
  background: color-mix(in srgb, var(--navy) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--navy) 28%, transparent);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.status .st-more:hover { background: color-mix(in srgb, var(--navy) 18%, transparent); }

.btn-excel {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-bylaws);
  background: color-mix(in srgb, var(--c-bylaws) 8%, transparent);
  color: var(--c-bylaws);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .18s;
}
.btn-excel:hover { background: color-mix(in srgb, var(--c-bylaws) 16%, transparent); }
.btn-excel svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status .spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--line);
  border-top-color: var(--navy);
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 7px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 결과 코퍼스 필터 ── */
.result-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.rfilter {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.rfilter:hover { border-color: var(--navy); }
.rfilter.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }  /* --bg는 --ink 밝기 반전과 항상 대비됨 */
.rfilter .rf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.rfilter[data-k="legal"]  .rf-dot { background: var(--c-legal); }
.rfilter[data-k="bylaws"] .rf-dot { background: var(--c-bylaws); }
.rfilter[data-k="ca"]     .rf-dot { background: var(--c-ca); }
.rfilter[data-k="disclosure"] .rf-dot { background: var(--c-disclosure); }

/* ── 결과 카드 (시그니처) ── */
.card {
  --c: var(--muted);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px 11px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.card--legal  { --c: var(--c-legal); }
.card--bylaws { --c: var(--c-bylaws); }
.card--ca     { --c: var(--c-ca); }
.card--disclosure { --c: var(--c-disclosure); }

/* 카드 3단 구조: 메타(출처) / 조문 본문 / 푸터 — 헤어라인으로 구분 */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 9px;
}
.corpus-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.type-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 1px 8px;
  border-radius: 999px;
  letter-spacing: .01em;
}
.card-source { color: var(--ink-2); font-weight: 600; }
.card-dot { color: var(--line); }

.card-cite {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.cite-no {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--c);
  flex: none;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cite-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

.card-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);   /* 읽기 프로필: 결과 본문은 보조색(--ink-2)이 아닌 고대비 --ink */
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 7.5em;
  overflow: hidden;
  position: relative;
  transition: max-height .3s ease;
}
.card-body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5em;   /* 잘림 표시는 마지막 줄만 살짝 — 본문을 뿌옇게 덮지 않게 */
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  transition: opacity .2s;
}
.card-body.is-open { max-height: none; }
.card-body.is-open::after { opacity: 0; }
/* 잘리지 않은 짧은 본문: 클립·페이드 제거 */
.card-body.no-clip { max-height: none; }
.card-body.no-clip::after { display: none; }
.card-body mark, .cite-title mark {
  background: #FCE96A;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 9px;
  border-top: 1px solid var(--line-2);
  margin-top: 10px;
}
.relevance {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.rel-bar {
  flex: 1;
  max-width: 160px;
  height: 5px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
}
.rel-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4,.05,.2,1);
}
.rel-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.rel-exact {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c);
  flex: none;
}
/* 본문 안 법령 인용 링크 — 점선 밑줄로 은근하게 */
.body-law {
  color: var(--navy);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.body-law:hover { text-decoration: underline solid; }

/* 법령 원문 링크 (국가법령정보센터) — 모바일에서도 새 탭으로 */
.law-link {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.law-link:hover { color: var(--navy); text-decoration: underline; }

.expand {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.expand:hover { text-decoration: underline; }

/* ── 더 보기 ── */
.btn-more {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-more:hover { border-color: var(--navy); background: color-mix(in srgb, var(--navy) 6%, transparent); }
.btn-more:disabled { opacity: .5; cursor: default; }

/* ── 빈 상태 / 안내 ── */
.empty {
  text-align: center;
  padding: 20px 8px 8px;
}
.empty-lead {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 6px;
}
.empty-desc { color: var(--muted); font-size: 14.5px; margin: 0 auto 26px; max-width: 30em; }
.legend {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 560px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.legend-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.legend-item b { color: var(--ink); font-size: 14.5px; }
.legend-desc { color: var(--muted); font-size: 13px; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-legal  .dot { background: var(--c-legal); }
.legend-bylaws .dot { background: var(--c-bylaws); }
.legend-ca     .dot { background: var(--c-ca); }

/* ── 푸터 ── */
.footer {
  border-top: 1px solid var(--line);
  padding: 32px 24px 48px;
  text-align: center;
}
.footer-provider { font-size: 13.5px; color: var(--ink-2); margin: 0 0 6px; }
.footer-provider a { color: var(--navy); text-decoration: none; }
.footer-provider a:hover { text-decoration: underline; }
.footer-note { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ── 등장 모션 ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero-title, .hero-sub, .search, .mode-hint, .examples {
    animation: rise .6s cubic-bezier(.2,.6,.2,1) backwards;
  }
  .hero-title { animation-delay: .05s; }
  .hero-sub { animation-delay: .12s; }
  .search { animation-delay: .18s; }
  .examples { animation-delay: .26s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  .card { animation: rise .45s cubic-bezier(.2,.6,.2,1) backwards; }
}

/* ── 반응형 ── */
/* 태블릿·모바일: 2-pane를 단일 컬럼으로 (검색바 상단 + 결과 아래) */
@media (max-width: 860px) {
  body.has-results .ws {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: stretch;
  }
  body.has-results .pane-search {
    position: static;   /* 모바일은 상단바와 겹치지 않게 고정 해제 */
    max-width: none;
  }
  /* 좁은 화면에선 필터를 다시 가로 배치(공간 절약) */
  body.has-results .filters { flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
  body.has-results .field { flex: 1 1 45%; }
}

@media (max-width: 560px) {
  /* 상단바: iPhone 등 좁은 폭에서 한 줄에 들어가게 축소(줄바꿈 방지) */
  .topbar-inner { padding: 12px 16px; gap: 9px; flex-wrap: nowrap; }
  .brand { flex: 0 0 auto; }
  .brand-logo { height: 20px; }
  .topbar-tool { font-size: 13.5px; padding-left: 9px; }
  .topbar-link { font-size: 12.5px; }
  .theme-btn { font-size: 11.5px; padding: 0 9px; height: 26px; gap: 4px; }
  .ws { padding-left: 16px; padding-right: 16px; }
  /* 검색 버튼을 입력창 아래 전체폭으로 내려 placeholder(예시)를 가리지 않게 */
  .search-box { flex-wrap: wrap; }
  #keyword { flex: 1 1 60%; }
  .search-kbd { display: none; }   /* 터치기기엔 물리 키보드 단축키가 없음 — 힌트 생략(지우기 버튼은 유지) */
  #searchBtn { flex: 1 1 100%; margin-top: 8px; }
  /* 검색 후 필터: 기본 접힘 + 토글 노출. 펼치면 2열 그리드로 압축(크기 통일·체크박스 한 줄) */
  body.has-results .filters-toggle {
    display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center;
    margin-top: 12px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    color: var(--ink-2); font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  body.has-results .filters { flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin-top: 10px; }
  body.has-results .filters.is-collapsed { display: none; }
  body.has-results .field,
  body.has-results .field-sm { flex: 1 1 calc(50% - 5px); min-width: 0; }
  body.has-results .check { flex: 1 1 calc(50% - 5px); padding-bottom: 0; }
  .card-cite { flex-direction: column; gap: 2px; }
}

/* ── 다크모드 — JS가 <html data-theme>를 라이트/다크로 확정(자동=OS 추종, 수동설정 가능) ──
   --paper/--surface/--ink/--ink-2/--muted/--line/--line-2/--navy/--navy-ink/--crimson은
   위 :root에서 이미 ds.css 토큰(var(--bg) 등) 경유로 매핑돼 있어, ds.css의 다크 오버라이드가
   그대로 반영된다 — 여기서 다시 정의하지 않음(검색 전용 코퍼스색만 대비 보정). */
:root[data-theme="dark"] {
  --c-legal:    #7C9CDF;
  --c-bylaws:   #3BB8A8;
  --c-ca:       #E37E95;
  --c-disclosure: #DFA04A;

  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.4);
}
/* 로고: 진회색 글자를 명도 반전(색상은 유지)으로 어두운 배경에서도 보이게 — 배경칩 없음(현재 .brand-logo는 미사용) */
[data-theme="dark"] .brand-logo { filter: invert(1) hue-rotate(180deg); }
/* 형광펜: 원색 노랑 대신 반투명 — 밝은 본문 글자를 유지 */
[data-theme="dark"] .card-body mark, [data-theme="dark"] .cite-title mark { background: rgba(252,233,106,.26); }

/* ── 테마 버튼 (상단 바 우측: 자동→라이트→다크 순환) ── */
.theme-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  line-height: 1;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.theme-btn:hover { color: var(--navy); border-color: var(--navy); }

/* ── 3탭 모드(통합 추가) — 슬라이더 1/3 폭, data-mode별 위치 ─────────────── */
.mode.mode-3 .mode-btn { min-width: 72px; padding: 8px 16px; }
.mode.mode-3 .mode-slider { width: calc((100% - 8px) / 3); }
.mode.mode-3[data-mode="keyword"] .mode-slider { transform: translateX(0); }
/* 4팔(키워드·의미·통합·기관) — 슬라이더 폭·이동을 팔 수에 맞춘다(2026-08-06) */
.mode.mode-4 .mode-btn { min-width: 64px; padding: 8px 13px; }
.mode.mode-4 .mode-slider { width: calc((100% - 8px) / 4); }
.mode.mode-4[data-mode="keyword"] .mode-slider { transform: translateX(0); }
.mode.mode-4[data-mode="semantic"] .mode-slider { transform: translateX(100%); }
.mode.mode-4[data-mode="hybrid"] .mode-slider { transform: translateX(200%); }
.mode.mode-4[data-mode="inst"] .mode-slider { transform: translateX(300%); }
.mode.mode-3[data-mode="semantic"] .mode-slider { transform: translateX(100%); }
.mode.mode-3[data-mode="hybrid"] .mode-slider { transform: translateX(200%); }

/* ── 결과 섹션 헤더(전체 보기에서 조문/공시 분리) ───────────────────────── */
.rsec-head {
  display: flex; align-items: baseline; gap: 8px;
  margin: 20px 2px 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}
.rsec-head:first-child { margin-top: 4px; }
.rsec-count { font-weight: 600; opacity: .75; }

/* ── 질의 해석 배너의 '해석 끄기' ──────────────────────────────────────── */
.und-off {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 11px; padding: 1px 8px; margin-left: 6px; border-radius: 999px; cursor: pointer;
}
.und-off:hover { color: var(--navy); border-color: var(--navy); }

/* 검색창 바로 아래 관점(view-switch.js) 바 — 그 스타일은 view-switch.js가 자체 주입하며
   margin: 0 0 12px(아래쪽만)라 검색창과 위쪽이 맞붙어 있었다(실측 0px, 2026-08-05).
   ds.css·view-switch.js는 건드리지 않고 이 페이지에서만 ID 선택자로 위쪽 간격만 보정한다
   (ID 특이도가 .vsw class보다 항상 우선이라 주입 순서와 무관하게 이긴다). 20px = 이 페이지에서
   이미 쓰는 간격 단위(.hero-title 하단 20px)를 재사용 — 바로 아래 .role-land의 상단 14px보다는
   좁게 둬서 '검색과 한 묶음'이라는 관계를 유지한다. */
#vsw { margin-top: 20px; }

/* ── 역할(오디언스) 맞춤 바·패널 (#103) — 칩은 .rfilter 재사용, 페이지 토큰(--navy/--line/--surface) ── */
/* 1단 관점 랜딩 — 검색 전 첫 화면(카드 4장). 옛 '관점' 바를 여기로 흡수했다. */
.role-land { margin: 14px 0 4px; }
.role-land[hidden] { display: none; }
.rl-lead { margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.rl-lead .rl-sub { font-weight: 600; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
/* 2×2 고정. auto-fit minmax(210px,1fr)이었는데 이 자리의 컨테이너는 .pane-search 660px이라
   3칸(3×210+2×10=650)까지만 들어가고 4번째가 혼자 다음 줄로 밀렸다.
   1×4로 가면 카드당 글자칸이 127px뿐이라 한글 설명이 3줄로 접힌다 — 2×2는 295px로 2줄에 들어간다.
   auto-fit을 쓰지 않는 이유: 칸 수가 컨테이너 폭에 따라 조용히 바뀌면 오늘 같은 3+1이 또 생긴다. */
.rl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .rl-cards { grid-template-columns: 1fr; } }
.rl-card { text-align: left; background: var(--surf2); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px; cursor: pointer; font-family: inherit; color: var(--ink); display: flex;
  flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }
.rl-card:hover { border-color: var(--t); transform: translateY(-1px); }
.rl-card:focus-visible { outline: 2px solid var(--t); outline-offset: 2px; }
.rl-card.is-active { border-color: var(--t); box-shadow: inset 0 0 0 1px var(--t); }
.rl-card b { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.rl-card .rl-desc { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.5; word-break: keep-all; }
.rl-card .rl-roles { font-size: 11px; color: var(--ink-2); font-weight: 700; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .rl-card { transition: none; } .rl-card:hover { transform: none; } }
.role-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.role-bar[hidden] { display: none; }
.role-lead, .rp-lead { font-size: 11px; font-weight: 700; color: var(--muted); font-family: var(--mono); }
.role-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.role-auto { font-size: 11.5px; color: var(--muted); }
.role-auto[hidden] { display: none; }
.role-auto button { border: 0; background: none; color: var(--navy); font-weight: 800; cursor: pointer; padding: 0 2px; font-family: var(--sans); }
.role-auto .x { color: var(--muted); font-weight: 700; }
.role-panel { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--surface); }
.role-panel[hidden] { display: none; }
.rp-link { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 12px; }
.rp-link:hover { text-decoration: underline; }

/* 기관 팔 결과 — 조문 카드가 아니라 기관 칩 목록이다(2026-08-06) */
.inst-hits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inst-hits .chip { text-decoration: none; }