@charset "UTF-8";
/* 세대 코드 연식 검토(/parts-review/generations) 전용 스타일 — ../review.css 위에 추가분만 둔다.
   카드 뼈대(.card/.save-status/.v-btn 등)는 review.css 를 그대로 쓰고, 여기서는 이 화면에만
   있는 것(히스토그램·연식 선택·상태 라디오)만 정의한다. */

/* "여기서 고른 값이 곧 제품" 이 아니라는 것 — 화면에서 가장 먼저 읽혀야 하는 문장이다. */
.gate-note { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #F3D9A4; border-left: 4px solid #C77700; border-radius: 12px; background: #FFF9EE; font-size: 14px; color: #4A3A1C; }
.gate-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

#gen-filters { margin: 12px 0 8px; }
#gen-filters .filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* 보류 사유는 문장이라 라벨이 길다 — 폭을 묶어 두지 않으면 검색칸을 밀어낸다. */
#gen-filters select { min-height: 44px; max-width: 240px; padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 10px; background: white; color: #191C1E; font-size: 13px; }
#gen-filters #search { flex: 1 1 200px; min-width: 160px; }
#filter-mfr button { min-height: 44px; }
#progress { color: #1F62C9; font-weight: 700; margin: 0 0 8px; }
.download-row button { width: auto; margin: 0; min-height: 44px; padding: 10px 16px; font-size: 13px; }
.download-row .secondary { background: white; color: #1F62C9; border: 1px solid #CBD5E1; }
.download-row .secondary:hover:not(:disabled) { background: #E7EEFB; }

.gen-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
/* vote.css 의 .card(cursor:pointer)·.card-title(19px) 상속 차단 — review.css 가 .review-list 에 한 것과 같은 취지. */
.gen-list .card { cursor: default; }
/* 상태별 테두리 — 미검토(기본 회색) / 확정(초록) / 보류(주황) / 제외(회색 흐림). */
.gen-list .card[data-status=confirmed] { border-color: #86EFAC; background: #F7FEFA; }
.gen-list .card[data-status=hold] { border-color: #FCD34D; background: #FFFCF3; }
.gen-list .card[data-status=rejected] { border-color: #CBD5E1; background: #F8FAFC; }

.gen-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mfr-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #F1F5F9; color: #596370; }
.mfr-badge.mfr-honda { background: #FEE2E2; color: #B42318; }
.mfr-badge.mfr-yamaha { background: #E3F2FD; color: #1565C0; }
.gen-code { font-size: 20px; font-weight: 800; color: #191C1E; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.gen-fam { font-size: 12.5px; color: #596370; }
.status-tag { display: inline-block; margin-left: auto; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #F1F5F9; color: #596370; }
.status-tag[data-status=confirmed] { background: #DCFCE7; color: #15803D; }
.status-tag[data-status=hold] { background: #FEF3C7; color: #92400E; }
.status-tag[data-status=rejected] { background: #E2E8F0; color: #475569; }

.gen-meta { margin: 6px 0 2px; font-size: 12.5px; color: #596370; }
.gen-meta .warn { color: #B42318; font-weight: 700; }
.gen-est { margin: 2px 0 10px; font-size: 14px; color: #191C1E; overflow-wrap: anywhere; }
.gen-est b { font-weight: 800; }
.gen-est .muted { color: #596370; font-weight: 400; }
.samples { margin: 0 0 12px; font-size: 12.5px; color: #596370; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }

/* 두 값 나란히 — 왼쪽이 기본값(카탈로그 도출), 오른쪽이 참고(판매자 표기).
   minmax(0,1fr) 이어야 긴 텍스트가 칸을 밀어 가로 스크롤을 만들지 않는다. */
.gen-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 6px; }
.gen-value { border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px 12px; background: #FBFCFE; min-width: 0; }
.gen-value[data-kind=derived] { border-color: #1F62C9; background: #F3F7FE; }
.gen-value[data-kind=derived][data-state=missing] { border-color: #E2E8F0; background: #F8FAFC; }
.gen-value .val-label { display: block; font-size: 12px; font-weight: 700; color: #596370; margin-bottom: 2px; }
.gen-value .val-flag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #1F62C9; color: white; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.gen-value .val-range { display: block; font-size: 17px; font-weight: 800; color: #191C1E; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gen-value[data-state=missing] .val-range { color: #94A3B8; font-size: 15px; }
.gen-value .val-sub { display: block; margin-top: 2px; font-size: 12px; color: #596370; overflow-wrap: anywhere; }

.gen-mismatch { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.gen-agree { margin: 0 0 10px; font-size: 12.5px; color: #15803D; }
/* 어긋난 카드는 목록에서도 바로 눈에 띄어야 한다. */
.gen-list .card[data-mismatch=true] { border-color: #FDBA74; }
.mismatch-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #FFEDD5; color: #9A3412; }
.auto-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #E7EEFB; color: #1F62C9; }
.auto-note { margin: 0 0 10px; font-size: 12.5px; color: #1F62C9; }

/* 자동 확정이 막힌 사유 — 왜 사람이 봐야 하는지 */
.hold-reasons { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #FCD34D; border-radius: 12px; background: #FFFCF3; }
.hold-reasons .hold-title { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #92400E; }
.hold-reasons ul { margin: 0; padding-left: 18px; font-size: 13px; color: #78350F; }
.hold-reasons li { margin: 2px 0; overflow-wrap: anywhere; }

/* 도출 근거 — "왜 이 값인가" */
.gen-evidence { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #E2E8F0; border-radius: 12px; background: #FBFCFE; }
.ev-title { margin: 6px 0 4px; font-size: 12px; font-weight: 700; color: #596370; }
.gen-evidence .ev-title:first-child { margin-top: 0; }
.ev-title .muted { font-weight: 400; color: #94A3B8; }
.ev-bits { margin: 0 0 6px; font-size: 13px; color: #191C1E; overflow-wrap: anywhere; }
.ev-bits.muted { color: #94A3B8; }
.ev-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.ev-methods li { padding: 3px 9px; border-radius: 999px; background: #EEF2F6; font-size: 12px; color: #596370; }
.ev-methods li b { color: #191C1E; font-variant-numeric: tabular-nums; }
.ev-samples { margin: 0 0 6px; font-size: 12px; color: #596370; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.profile-wrap { margin-top: 6px; }
/* 연식 프로파일은 같은 축·같은 막대 규약을 쓰되 색으로 계열을 구분한다(판매자=파랑, 카탈로그=청록). */
.hist-profile .hist-col[data-in=true] .hist-bar { background: #0F766E; }
.hist-profile + .hist-axis { margin-bottom: 2px; }

/* 히스토그램 — 연도별 관측 건수. 막대 높이는 inline style(--h)로만 주고 색·크기는 여기서 정한다.
   추정 범위 안의 연도는 진한 파랑, 밖은 회색이라 "어디를 잘랐는지"가 한눈에 보인다. */
.hist { display: flex; align-items: flex-end; gap: 3px; height: 68px; padding: 0 0 2px; margin: 0 0 4px; overflow-x: auto; }
.hist-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; min-width: 26px; flex: 1 1 26px; height: 100%; }
.hist-bar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #CBD5E1; }
.hist-col[data-in=true] .hist-bar { background: #1F62C9; }
.hist-col[data-count="0"] .hist-bar { background: #EEF2F6; }
.hist-n { font-size: 10px; color: #596370; font-variant-numeric: tabular-nums; line-height: 1; }
.hist-axis { display: flex; gap: 3px; margin: 0 0 10px; overflow-x: auto; }
.hist-axis span { min-width: 26px; flex: 1 1 26px; text-align: center; font-size: 10px; color: #94A3B8; font-variant-numeric: tabular-nums; }

.gen-form { border-top: 1px solid #E2E8F0; padding-top: 12px; }
.gen-form .field-label { margin-top: 0; }
.status-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 0; border: 0; }
.status-options legend { font-size: 12px; font-weight: 700; color: #596370; padding: 0; margin-bottom: 6px; }
/* 라디오는 접근성(키보드·스크린리더)을 위해 실제 input 을 두고 라벨만 버튼처럼 보이게 한다. */
.status-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid #CBD5E1; border-radius: 10px; background: white; font-size: 13px; font-weight: 700; color: #191C1E; cursor: pointer; }
.status-options label:hover { background: #F1F5F9; }
.status-options input { margin: 0; accent-color: #1F62C9; }
.status-options label:has(input:checked) { border-color: #1F62C9; background: #E7EEFB; color: #1F62C9; }
.status-options label:has(input:focus-visible) { outline: 2px solid #1F62C9; outline-offset: 2px; }

.year-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.year-field { display: flex; flex-direction: column; gap: 4px; }
.year-field span { font-size: 12px; font-weight: 700; color: #596370; }
.year-row select { min-height: 44px; min-width: 116px; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 10px; background: white; color: #191C1E; font-size: 14px; }
.year-row select:disabled { background: #F1F5F9; color: #94A3B8; }
.year-error { margin: 2px 0 8px; font-size: 12.5px; color: #B42318; }

.gen-note { margin-top: 6px; min-height: 56px; }

@media (max-width: 640px) {
  .gen-code { font-size: 17px; }
  .status-tag { margin-left: 0; }
  .year-row select { min-width: 104px; }
  /* 좁은 폭에서는 두 값을 위아래로 — 옆으로 붙이면 연식이 줄바꿈돼 읽기 어렵다. */
  .gen-values { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }