@charset "UTF-8";
/* 부품 상품 정비사 검토(/parts-review) 전용 스타일. 토큰·기본 규칙은 vote.css + site.css 를 그대로 따른다. */

/* vote.css 의 button/input[type=text]{display:block} 등이 hidden 속성보다 우선순위가 높아 숨김이 무시되는 문제 방지
   (site.css 의 .comp-card[hidden] 패턴과 동일 취지 — 여기서는 페이지 전체 요소에 적용). */
[hidden] { display: none !important; }

.guide-list { margin: 0 0 18px; padding: 16px 18px; border: 1px solid #E2E8F0; border-left: 4px solid #1F62C9; border-radius: 12px; background: white; list-style: none; font-size: 14px; }
.guide-list li { margin: 4px 0; }
.guide-list b { color: #191C1E; }

.ghost-btn, .link-btn { width: auto; background: white; color: #1F62C9; border: 1px solid #CBD5E1; margin-top: 12px; }
.ghost-btn:hover:not(:disabled), .link-btn:hover:not(:disabled) { background: #E7EEFB; }
.link-btn { display: inline-block; border: 0; background: transparent; padding: 12px 4px; margin: 0; text-decoration: underline; font-weight: 700; font-size: inherit; color: #1F62C9; } /* padding = 손가락 탭 영역 44px 이상 확보 */

.who-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin: 20px 0 12px; }

/* 분류 칩: 이름 + 건수 + 내 검토 수 */
.cat-chips button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; }
.cat-chips small { display: block; margin-left: 0; }

#review-filters { position: static; backdrop-filter: none; background: transparent; padding: 8px 0; border-bottom: 0; }
#filter-seg button { min-height: 44px; }
#progress { color: #1F62C9; font-weight: 700; }

/* vote.css/site.css 가 type=text 만 스타일링해 tel·search 는 브라우저 기본 테두리(2px inset)로 남는 문제 보정 */
#r-phone4 { border: 1px solid #CBD5E1; border-radius: 10px; padding: 12px 14px; min-height: 44px; color: #191C1E; background: #fff; }
#search { border: 1px solid #CBD5E1; border-radius: 10px; padding: 9px 12px; min-height: 44px; color: #191C1E; background: #fff; }

.review-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

/* vote.css 의 .card(cursor:pointer)·.card-title(font-size 19px, margin-top 8px) 상속 차단 —
   투표 카드용 규칙이라 검토 카드에는 맞지 않는다. */
.review-list .card { cursor: default; }
.review-list .card-title { margin-top: 0; font-size: inherit; }

.card { border: 1px solid #E2E8F0; border-radius: 16px; background: white; padding: 16px; }
.card.done { border-color: #86EFAC; background: #F7FEFA; }
.card-head { display: flex; gap: 12px; align-items: flex-start; }
.thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #F1F5F9; display: flex; align-items: center; justify-content: center; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumb-fallback { color: #94A3B8; font-size: 11px; text-align: center; padding: 4px; }
.name-empty { color: #94A3B8; font-weight: 400; } /* 제목 크기(15px)는 유지하되 '정보 없음' 임을 톤으로만 구분 */
.card-title { flex: 1; min-width: 0; }
.card-title h3 { margin: 2px 0 4px; font-size: 15px; font-weight: 750; color: #191C1E; line-height: 1.4; overflow-wrap: anywhere; }
.card-title .price { margin: 0 0 4px; font-size: 13px; color: #596370; }
.card-title .orig-link { display: inline-block; padding: 13px 0; font-size: 12px; } /* padding = 손가락 탭 영역 44px 이상 확보 */
.site-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #F1F5F9; color: #596370; }
.tag.soldout { background: #FEE2E2; color: #B42318; margin-left: 6px; }
.tag.done { background: #DCFCE7; color: #15803D; margin-right: 6px; }
.card-flags { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.reopen-btn { width: auto; margin: 0; padding: 6px 14px; font-size: 12px; min-height: 44px; background: white; color: #1F62C9; border: 1px solid #CBD5E1; }
.reopen-btn:hover:not(:disabled) { background: #E7EEFB; }

.card-body { margin-top: 14px; }
.field-table { border-top: 1px solid #E2E8F0; }
.f-row { padding: 12px 0; border-bottom: 1px solid #E2E8F0; }
.f-label { font-size: 12px; font-weight: 700; color: #596370; margin-bottom: 3px; }
.f-value { font-size: 14.5px; color: #191C1E; margin-bottom: 10px; overflow-wrap: anywhere; }
.f-value.is-empty { color: #94A3B8; font-style: italic; }
.f-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v-btn { width: auto; margin: 0; min-height: 44px; padding: 8px 16px; font-size: 13px; font-weight: 700; background: white; color: #191C1E; border: 1px solid #CBD5E1; border-radius: 10px; }
.v-btn:hover:not(:disabled) { background: #F1F5F9; }
.v-btn[data-v=ok][aria-pressed=true] { background: #1F62C9; border-color: #1F62C9; color: white; }
.v-btn[data-v=wrong][aria-pressed=true] { background: #B42318; border-color: #B42318; color: white; }
.v-btn[data-v=unknown][aria-pressed=true] { background: #596370; border-color: #596370; color: white; }
.f-fix { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.f-fix select, .f-fix input[type=text] { display: block; width: 100%; min-height: 44px; border: 1px solid #CBD5E1; border-radius: 10px; padding: 10px 12px; color: #191C1E; background: #fff; }

.note { margin-top: 6px; min-height: 64px; } /* vote.css textarea min-height:106px 무력화 — 카드가 불필요하게 길어짐 방지 */
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.card-actions button { width: auto; margin: 0; min-height: 44px; padding: 10px 16px; font-size: 13px; background: white; color: #1F62C9; border: 1px solid #CBD5E1; }
.card-actions button:hover:not(:disabled) { background: #E7EEFB; }
/* 저장 상태는 card-body 밖(카드 접힘과 무관하게 항상 보임)에 렌더된다. .card 자체 padding 안에 놓이므로 별도 좌우 여백은 두지 않는다. */
.save-status { margin: 12px 0 0; font-size: 12.5px; color: #596370; }
.save-status[data-state=saving] { color: #596370; }
.save-status[data-state=saved] { color: #15803D; }
.save-status[data-state=failed] { color: #B42318; }
.retry-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 6px 0 0 10px; padding: 0 14px; font-size: 12.5px; font-weight: 700; background: white; color: #B42318; border: 1px solid #B42318; border-radius: 8px; }
.retry-btn:hover { background: #FEE2E2; }

#more { width: auto; display: block; margin: 8px auto 0; min-height: 44px; padding: 10px 24px; background: white; color: #1F62C9; border: 1px solid #CBD5E1; }
#more:hover:not(:disabled) { background: #E7EEFB; }

@media (min-width: 641px) {
  .card { padding: 20px; }
  .thumb { width: 96px; height: 96px; }
}
@media (max-width: 640px) {
  .card-head { gap: 10px; }
  .thumb { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }