/* 사용자 앱 사건번호로 찾기 (화면설계서 S-04 · S-04A · S-05)
 * - user-tokens.css · user-home.css · user-app.css · user-guide.css(하위 화면 상단 바 app-topbar) 뒤에 읽힙니다(레이아웃 user-app-head 의 stylesheets 로 이 화면에서만).
 * - 시안 v15(화면 v15 켜기 body.app--v15): 회색 바탕 위 흰 칸(--color-bg-surface — v15 에서 page 가 회색) · 알약 칩 · 테두리 없는 흰 상자(파일 끝 v15 범위).
 * - 토큰만 씁니다. 값은 시안(고비_화면시안_261015v3) 실측: .note · .fl · .opts/.opt · .inp · .btn1 · .btn2 · .row · .badge · .type · .x-c · .x-ic · .box · .kv · .wf-note.
 * - 접두어: 화면 case-*. 행 카드(C-6)는 공용 /static/shared/user-item-row.css (partials/user-item-row). "준비 중"은 user-home.css .home-pending(도형 없는 파란 글자).
 * - 누르는 영역 48px(2-6): 칩 · 버튼은 보이는 크기를 시안 그대로 두고 가상 요소로 위아래만 넓힘(배치에 영향 없음).
 * - 인라인 style 없음(CSP). 스크립트 없이 동작('다른 법원' 고르기는 :has). */

.case {
  display: block;
}

/* ---------- 2 안내 문구 (시안 .note + 13px, 위 8 · 아래 12) ---------- */
.case-intro {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
  word-break: keep-all;
}

/* ---------- 3 · 4 칸 제목 (시안 .fl: 13px 굵게, 위 18 · 아래 8) ---------- */
.case-label {
  margin: 18px 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

/* ---------- 3 법원 칩 (시안 .opts · .opt): 줄 바꿈, 사이 6px, 하나 고르기 ---------- */
.case-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1_5);
}

.case-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

/* 누르는 영역 48px: 보이는 칩(약 34px) 위아래로 넓힘 */
.case-chip::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

/* 라디오는 화면에서 숨기고(키보드 · 화면 읽기는 그대로) 글자 칸이 칩 모양 */
.case-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.case-chip__text {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-compact);
  white-space: nowrap;
}

.case-chip__input:checked + .case-chip__text {
  border-color: var(--color-bg-inverse);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

.case-chip__input:focus-visible + .case-chip__text {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* '다른 법원' 고르기 (설계 (제안)): '다른 법원' 칩을 고를 때만 보임 */
.case-other {
  display: none;
  margin-top: var(--space-2);
}

.case-other.is-open,
.case-form:has(#case-court-other:checked) .case-other {
  display: block;
}

.case-select {
  width: 100%;
  height: var(--layout-hit-min);
  padding: 0 var(--space-3_5);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-md);
}

/* ---------- 4 사건번호 (시안: 연도 칸 104px · '타경' · 번호 칸, 사이 6px) ---------- */
.case-no {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
}

.case-no__kind {
  flex: none;
  font-size: var(--font-size-md);
}

/* 입력 칸 (시안 .inp): 높이 48, 테두리 1.5px, 모서리 12, 안쪽 14 */
.case-input {
  display: flex;
  align-items: center;
  height: var(--layout-hit-min);
  padding: 0 var(--space-3_5);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.case-input--year {
  flex: none;
  width: 104px;
}

.case-input--no {
  flex: 1 1 auto;
  min-width: 0;
}

/* 초점: 시안처럼 테두리를 진하게 + 키보드 초점 고리(2-6) */
.case-input:focus-within {
  border-color: var(--color-bg-inverse);
}

.case-input:has(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.case-input__field {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: left;
  outline: none; /* 초점 표시는 칸(.case-input)이 그림 */
}

/* 자리 글자('10482'): 입력값(잉크 · 굵게)과 구분되게 보조 회색 · 보통 굵기(화면 점검 2026-10-26 — 굵은 글자라 입력값처럼 보임).
 * 색은 흰 칸 위 4.5 : 1 이상 유지(text.tertiary #5f5f5f 약 6.4 : 1) */
.case-input__field::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

/* ---------- 버튼 (시안 .btn1 빨강 15px · .btn2 흰 바탕 검정 테두리 14px), 폭 100% ---------- */
.case-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-align: center;
  text-decoration: none;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* 누르는 영역 48px: 보이는 버튼(46 · 45px) 위아래로 넓힘 */
.case-btn::after {
  content: "";
  position: absolute;
  inset: -2px 0;
}

.case-btn--primary {
  padding: 14px;
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: 0.9375rem; /* 15px (시안 .btn1) */
}

.app .case-btn--secondary {
  padding: var(--space-3);
  border: 1.5px solid var(--color-bg-inverse);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
}

.case-btn--primary:not([aria-disabled="true"]):active {
  background: var(--color-brand-primary-pressed);
  transform: scale(var(--scale-pressed));
}

.case-btn--secondary:not([aria-disabled="true"]):active {
  transform: scale(var(--scale-pressed));
}

/* 5 확인 (위 16) */
.case-submit {
  margin-top: var(--space-4);
}

/* 7 결과 자리 (시안 #caseRes: 위 12, 비어 있어도 자리 유지) */
.case-result {
  margin-top: var(--space-3);
}

/* 형식 오류 안내 (설계 (제안): 확인 버튼 아래 빨간 글자) */
.case-error {
  margin: 0 0 var(--space-2);
  color: var(--color-verdict-risk-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-sm);
}

/* 6 예시 (시안 .note: 11px, 위 6) */
.case-note {
  margin-top: var(--space-1_5);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-xs);
  word-break: keep-all;
}

/* ---------- S-05 2 결과 없음 안내 (시안 .x-c 위 28 · .x-ic 64px 원) ---------- */
.case-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 28px var(--space-2) 0;
  text-align: center;
}

.case-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.case-empty__glyph {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-empty__title {
  margin-top: 6px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-compact);
}

/* 시안 <p>: 본문 14px, 위아래 1em */
.app .case-empty__desc {
  margin: var(--space-3_5) 0;
  font-size: var(--font-size-md);
  line-height: var(--font-leading-compact);
  word-break: keep-all;
}

/* 사건번호 (시안 .x-c b: 18px · 800) */
.case-empty__no {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heavy);
}

/* ---------- S-05 3 입력 정보 상자 (시안 .box · .kv) ---------- */
.case-box {
  margin: var(--space-3_5) 0 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.case-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-bg-muted);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-compact);
}

.case-kv:last-child {
  border-bottom: 0;
}

.case-kv dt {
  font-weight: var(--font-weight-regular);
}

.case-kv dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: right;
}

/* ---------- S-05 4 · 5 · 6 버튼 (시안 위 12 · 8 · 8) ---------- */
.case-actions {
  margin-top: var(--space-3);
}

.case-actions > * + * {
  margin-top: var(--space-2);
}

/* S-05 5 통지서 · 캡처 올려서 바로 분석: 올리기 기능 전(보류 U-5)이라 누를 수 없는 보조 버튼(aria-disabled) + 파란 "준비 중"(.home-pending).
 * 모양은 시안 .btn2 그대로, 글자와 "준비 중" 사이는 시안 .btn2 gap 6px (시안 정합 X-05) */
.case-btn--soon {
  gap: 6px;
  cursor: default;
}

/* ---------- S-05 8 입력 도움말 (시안 .wf-note) ---------- */
.case-help {
  margin-top: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: 10px;
  background: var(--color-bg-subtle);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  line-height: 1.55;
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .case-btn {
    transition: none;
  }

  .case-btn--primary:not([aria-disabled="true"]):active,
  .case-btn--secondary:not([aria-disabled="true"]):active {
    transform: none;
  }
}

/* ---------- 시안 v15 (body.app--v15): 칩은 잉크 테두리 알약, 정보 상자 · 도움말 · 돋보기 원은 흰 바탕(회색 바탕 위) ---------- */
.app--v15 .case-chip__text {
  border-color: var(--color-chip-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
}

.app--v15 .case-chip__input:checked + .case-chip__text {
  border-color: var(--color-chip-on-bg);
  background: var(--color-chip-on-bg);
  color: var(--color-chip-on-text);
}

.app--v15 .case-box {
  border: 0;
  border-radius: var(--radius-box);
}

.app--v15 .case-help,
.app--v15 .case-empty__icon {
  background: var(--color-bg-surface);
}