/* =========================================================================
   similarity.css — 유사 청구문서 검색 페이지 (PoC 데모 ④)

   index 의 product-redesign.css 뒤에 로드. 포털 헤더·업로드존·로딩 스텝·
   판정 배너·샘플 카드 클래스는 그대로 재사용하고, 이 파일은 sim-* 전용
   레이아웃만 정의한다. 색·서체는 --product-* 토큰만 사용 (FRONTEND_DESIGN §3).
   ========================================================================= */

body.sim-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--product-bg);
}

.sim-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--product-bg);
}

/* display 지정이 UA [hidden] 을 덮지 않도록 명시 (뷰 전환은 hidden 속성) */
.sim-main section[hidden] {
  display: none !important;
}

/* 업로드/로딩/언리더블 뷰는 기존 클래스 재사용 — 세로 중앙 배치만 보정 */
.sim-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 48px 24px;
}

.sim-app .loading-view,
.sim-app .unreadable-view {
  min-height: 100%;
}

/* ------------------------------------------------------------- 결과 뷰 */

.sim-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}

.sim-scope {
  font-size: 14px;
  font-weight: 600;
  color: var(--product-meta);
  letter-spacing: -0.01em;
}

.sim-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sim-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.sim-pane__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.sim-pane__tag {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sim-pane__tag--new {
  background: var(--product-blue-soft);
  color: var(--product-blue-dark);
}

.sim-pane__tag--old {
  background: var(--product-red-soft);
  color: var(--product-red);
}

.sim-pane__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--product-ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-pane__score {
  margin-left: auto;
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--product-red);
}

.sim-pane__frame {
  border: 1px solid var(--product-rule);
  border-radius: 12px;
  background: var(--product-surface);
  padding: 16px;
  box-shadow: var(--product-shadow-canvas);
}

.sim-pane__imgwrap {
  position: relative;
  width: 100%;
}

.sim-pane__imgwrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: var(--product-bg);
}

/* 차이 영역 박스 — 판정 색 문법(빨강=의심) */
.sim-diff-box {
  position: absolute;
  border: 3px solid var(--product-red);
  border-radius: 4px;
  background: transparent;
  outline: 2px solid var(--product-red-soft);
  pointer-events: none;
}

.sim-diff-box__label {
  position: absolute;
  top: -34px;
  left: -3px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--product-red-strong);
  color: var(--product-on-strong);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ----------------------------------------------------- 매치 칩 리스트 */

.sim-matches__head {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--product-ink-soft);
  letter-spacing: -0.01em;
}

.sim-matches__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sim-match-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 18px;
  border: 1px solid var(--product-rule);
  border-radius: 10px;
  background: var(--product-surface);
  cursor: pointer;
  text-align: left;
}

.sim-match-chip:hover {
  border-color: var(--product-rule-strong);
}

.sim-match-chip.is-active {
  border-color: var(--product-red);
  background: var(--product-red-soft);
}

.sim-match-chip__no {
  font-size: 15px;
  font-weight: 700;
  color: var(--product-ink);
  letter-spacing: -0.01em;
}

.sim-match-chip__meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--product-meta);
}

.sim-match-chip__score {
  font-size: 14px;
  font-weight: 700;
  color: var(--product-red);
}

/* ------------------------------------------------------------- 액션 행 */

.sim-actions {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.sim-again {
  width: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* 매치 0건(초록) — 비교 패널 대신 배너만: JS 가 body.sim-has-match 토글 */
body:not(.sim-has-match) .sim-compare .sim-pane:last-child,
body:not(.sim-has-match) .sim-matches {
  display: none;
}

body:not(.sim-has-match) .sim-compare {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

@media (max-width: 1024px) {
  .sim-compare {
    grid-template-columns: 1fr;
  }
}