/* ==========================================================================
   발견 상품(#/found) — 디자인 시스템(ds.css의 st-*)으로 그린다. 카드·검색창·칩·알약은 st- 클래스가 모양을 맡고,
   여기에는 이 화면에만 필요한 .fd-* 배치와 상태별 색만 둔다. 변수는 모두 --st-*.
   움직임은 transform·opacity뿐이고 prefers-reduced-motion이면 모두 멈춘다.
   ========================================================================== */

/* 상태별 색: 점·메모·설명 상자가 같이 쓴다(색은 언제나 상태 글자와 함께 보인다) */
.fd-st-checking { --c: var(--st-info); --cs: var(--st-info-soft); }
.fd-st-confirmed { --c: var(--st-ok); --cs: var(--st-ok-soft); }
.fd-st-held { --c: var(--st-warn); --cs: var(--st-warn-soft); }
.fd-st-unconfirmed { --c: var(--st-ink-2); --cs: var(--st-paper-sunk); }
.fd-st-withdrawn { --c: var(--st-danger); --cs: var(--st-danger-soft); }
.fd-st-unknown { --c: var(--st-ink-2); --cs: var(--st-paper-sunk); }

.fd-page { padding-bottom: var(--st-space-16); }
.fd-page .page-head p { max-width: 780px; text-wrap: pretty; }
.fd-live-row { margin-top: var(--st-space-5); }

/* ---------------------------------------------------------------- 검색·칩 */
.fd-tools { display: grid; gap: var(--st-space-4); margin: var(--st-space-6) 0 var(--st-space-5); }
.fd-search input::-webkit-search-cancel-button { display: none; }
.fd-clear {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--st-paper-sunk); color: var(--st-ink-2);
  font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.fd-clear:hover { background: var(--st-paper-deep); color: var(--st-ink); }
.fd-clear[hidden] { display: none; }
.fd-kbd { flex: none; margin-right: var(--st-space-3); padding: 4px 9px; border-radius: var(--st-radius-xs); border: 1px solid var(--st-line-strong); color: var(--st-ink-2); font: 600 12.5px/1 var(--st-font-sans); }
.fd-rows { display: flex; flex-wrap: wrap; gap: var(--st-space-3) var(--st-space-5); align-items: center; justify-content: space-between; }
.fd-group { display: flex; flex-wrap: wrap; gap: var(--st-space-2); align-items: center; }
.fd-sort { margin-left: auto; display: inline-flex; align-items: center; gap: var(--st-space-2); color: var(--st-ink-2); font: 600 13.5px/1 var(--st-font-sans); }
.fd-sortsel { height: 40px; padding: 0 var(--st-space-8) 0 var(--st-space-4); border: 1px solid var(--st-line-strong); border-radius: var(--st-radius-pill); background: var(--st-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191714' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--st-ink); font: 600 14px/1 var(--st-font-sans); appearance: none; -webkit-appearance: none; cursor: pointer; }
.fd-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.fd-chip[aria-pressed="true"] .fd-chip-dot { box-shadow: 0 0 0 1.5px var(--st-on-ink); }
.fd-statuses { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--st-space-1)); padding: var(--st-space-1); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.fd-statuses::-webkit-scrollbar { display: none; }
.fd-statuses .st-chip { flex: none; height: 34px; padding: 0 var(--st-space-3) 0 14px; font-size: 13.5px; }
.fd-legend { color: var(--st-ink-2); font-size: 14px; }
.fd-legend summary { display: flex; align-items: center; width: fit-content; min-height: 32px; cursor: pointer; color: var(--st-ink-2); font-weight: 600; }
.fd-legend summary { list-style: none; gap: var(--st-space-2); }
.fd-legend summary::-webkit-details-marker { display: none; }
.fd-legend summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--st-ink-2); border-bottom: 2px solid var(--st-ink-2); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.fd-legend[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.fd-legend ul { list-style: none; margin: var(--st-space-2) 0 0; padding: var(--st-space-4) var(--st-space-5); display: grid; gap: var(--st-space-3); border-radius: var(--st-radius-md); background: var(--st-paper-sunk); }
.fd-legend li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--st-space-3); align-items: center; line-height: 1.55; }
.fd-legend li .st-pill { justify-self: start; background: var(--st-paper); }
.fd-sum { min-height: 24px; margin: 0 0 var(--st-space-4); color: var(--st-ink-2); font: 600 14px/1.5 var(--st-font-sans); font-variant-numeric: tabular-nums; }
.fd-newbar {
  display: block; width: fit-content; max-width: 100%; margin: 0 auto var(--st-space-4); height: 40px; padding: 0 var(--st-space-5); border: 0; border-radius: var(--st-radius-pill);
  background: var(--st-brand-soft); color: var(--st-brand-ink); font: 700 14px/1 var(--st-font-sans); cursor: pointer; animation: fd-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.fd-newbar[hidden] { display: none; }

/* ---------------------------------------------------------------- 카드 그리드 */
.fd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-space-5); align-items: stretch; }
.fd-span { grid-column: 1 / -1; }
.fd-card {
  display: flex; flex-direction: column; gap: var(--st-space-3); min-width: 0; padding: var(--st-space-5);
  animation: fd-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.fd-kind-reform { background: var(--st-paper-warm); }
/* 한 줄의 카드끼리 이름(사진 칸 포함)·금액·비교·발견자 줄을 같은 높이에 맞춘다(부제가 없어도 금액 상자가 위로 올라가지 않는다). */
@supports (grid-template-rows: subgrid) {
  .fd-grid { row-gap: 0; }
  .fd-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--st-space-3); align-content: start; margin-bottom: var(--st-space-5); }
  .fd-card > .fd-foot { grid-row: 5; }
}
.fd-card.fd-st-withdrawn { opacity: 0.75; }
.fd-card.fd-st-withdrawn .fd-money-val { text-decoration: line-through; color: var(--st-ink-3); }
.fd-card.fd-new { animation: fd-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; box-shadow: 0 0 0 2px var(--st-brand), var(--st-shadow-md); }
@keyframes fd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fd-pop { 0% { opacity: 0; transform: scale(0.96); } 60% { transform: scale(1.015); } 100% { opacity: 1; transform: none; } }

.fd-top { display: flex; align-items: center; justify-content: space-between; gap: var(--st-space-3); min-width: 0; }
.fd-time { color: var(--st-ink-3); font: 600 12.5px/1 var(--st-font-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-name { margin: 0; font: 700 18px/1.4 var(--st-font-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.fd-open {
  all: unset; cursor: pointer; font: inherit; color: var(--st-ink); text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--st-radius-lg); z-index: 1; }
.fd-open:focus-visible { outline: none; }
.fd-open:focus-visible::after { box-shadow: var(--st-shadow-focus); }
.fd-sub { margin: calc(-1 * var(--st-space-1)) 0 0; display: flex; flex-wrap: wrap; gap: 4px var(--st-space-2); align-items: center; color: var(--st-ink-3); font: 600 12.5px/1.45 var(--st-font-sans); overflow-wrap: anywhere; }
.fd-sub:empty { display: none; }
.fd-cat { padding: 2px 9px; border-radius: var(--st-radius-pill); background: var(--st-paper-sunk); color: var(--st-ink-2); font-weight: 600; }

/* 상품 사진 칸: paper-sunk 4:3 틀, 사진은 잘라내지 않고(contain) 판매처 사진 그대로. 사진이 없으면 분류 이모지 하나. */
.fd-id { display: flex; align-items: flex-start; gap: var(--st-space-3); min-width: 0; }
.fd-id-text { display: grid; gap: var(--st-space-1); flex: 1; min-width: 0; }
.fd-photo { position: relative; flex: none; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--st-radius-sm); background: var(--st-paper-sunk); box-shadow: inset 0 0 0 1px var(--st-line); }
.fd-photo--card { width: 88px; }
.fd-photo--detail { width: 100%; max-width: 320px; border-radius: var(--st-radius-md); }
.fd-photo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fd-photo-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; font-size: 30px; line-height: 1; filter: saturate(0.85); user-select: none; }
.fd-photo--detail .fd-photo-emoji { font-size: 56px; }

/* 상태 알약 안의 그림 */
.fd-badge { gap: 6px; padding-left: 9px; }
.fd-ico { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; }
.fd-ico svg { width: 14px; height: 14px; }
.fd-ico-check { animation: fd-check 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes fd-check { 0% { transform: scale(0.4); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
.fd-dots { display: inline-flex; gap: 3px; align-items: center; justify-content: center; width: 18px; height: 14px; flex: none; }
.fd-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: fd-bounce 1.1s ease-in-out infinite; }
.fd-dots i:nth-child(2) { animation-delay: 0.14s; }
.fd-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes fd-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* 금액: 숫자는 잉크, 오렌지는 면(옅은 바탕)에만 */
.fd-money { display: grid; gap: 2px; min-width: 0; padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-brand-soft); }
.fd-money-label { color: var(--st-ink-2); font: 600 12.5px/1.35 var(--st-font-sans); }
.fd-money-val { color: var(--st-ink); font: 800 28px/1.15 var(--st-font-sans); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.fd-money-note { font: 700 12.5px/1.4 var(--st-font-sans); color: var(--c); }
.fd-money-none { background: var(--st-paper-sunk); }
.fd-money-wait { color: var(--st-ink-2); font: 700 16px/1.4 var(--st-font-sans); }
.fd-st-held .fd-money { background: var(--st-warn-soft); }
.fd-st-withdrawn .fd-money, .fd-st-unconfirmed .fd-money { background: var(--st-paper-sunk); }
.fd-st-withdrawn .fd-money-note { color: var(--st-ink-2); }

/* 근거 요약 */
.fd-cmp { display: grid; gap: var(--st-space-2); min-width: 0; }
.fd-cmp-none { margin: 0; color: var(--st-ink-3); font: 600 13px/1.5 var(--st-font-sans); }
.fd-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--st-space-3); color: var(--st-ink-2); font: 600 12.5px/1.4 var(--st-font-sans); }
.fd-bar-head b { color: var(--st-ink); font-size: 13px; font-weight: 700; }
.fd-track { height: 8px; margin-top: 4px; border-radius: var(--st-radius-pill); background: var(--st-paper-sunk); overflow: hidden; }
.fd-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; transform-origin: left center; animation: fd-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.15s; }
.fd-bar-high .fd-track i { background: var(--st-brand); }
.fd-bar-low .fd-track i { background: var(--st-ink-2); }
@keyframes fd-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fd-save { justify-self: start; height: 24px; padding: 0 10px; font-size: 12.5px; font-weight: 700; }
.fd-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fd-tags:empty { display: none; }
.fd-tag, .fd-host {
  display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border-radius: var(--st-radius-pill); background: var(--st-paper-sunk); color: var(--st-ink-2);
  font: 600 12.5px/1.3 var(--st-font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-tag-hot { background: var(--st-brand-soft); color: var(--st-brand-ink); font-weight: 700; }

/* 발견자 */
.fd-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--st-space-3); margin-top: auto; padding-top: var(--st-space-3); border-top: 1px solid var(--st-line); min-width: 0; }
.fd-finder { display: inline-flex; align-items: center; gap: var(--st-space-2); min-width: 0; }
.fd-avatar { display: inline-flex; flex: none; }
.fd-handle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--st-ink); font: 700 14px/1.3 var(--st-font-sans); }
.fd-reform-badge { gap: var(--st-space-2); padding-left: 4px; font-weight: 700; }
.fd-reform-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--st-radius-agent); background: var(--st-brand); color: var(--st-on-brand); }
.fd-reform-mark svg { width: 13px; height: 13px; }
.fd-more { flex: none; color: var(--st-ink-3); font: 700 13px/1 var(--st-font-sans); transition: color 0.2s; }
.fd-more span { display: inline-block; transition: transform 0.2s; }
.fd-card:hover .fd-more { color: var(--st-ink); }
.fd-card:hover .fd-more span { transform: translateX(3px); }

.fd-pager { display: grid; place-items: center; margin-top: var(--st-space-8); }
.fd-pager .st-btn[hidden] { display: none; }
.fd-pager .st-btn { min-width: 180px; }

/* ---------------------------------------------------------------- 로딩·빈 상태·오류 */
.fd-skel { display: grid; gap: var(--st-space-3); padding: var(--st-space-5); border-radius: var(--st-radius-lg); background: var(--st-paper); border: 1px solid var(--st-line); }
.fd-skel i { display: block; height: 14px; }
.fd-skel .s1 { width: 42%; height: 24px; border-radius: var(--st-radius-pill); }
.fd-skel .s2 { width: 86%; height: 20px; }
.fd-skel .s3 { height: 64px; border-radius: var(--st-radius-md); }
.fd-skel .s4 { width: 60%; }
.fd-empty { border-radius: var(--st-radius-xl); background: var(--st-paper-warm); }
.fd-error { background: var(--st-danger-soft); }

/* ---------------------------------------------------------------- 상세 시트 */
.fd-sheet-back { position: fixed; inset: 0; z-index: var(--st-z-modal); display: flex; justify-content: flex-end; background: var(--st-scrim); animation: fade 0.25s both; }
.fd-sheet-back.is-leaving { opacity: 0; transition: opacity 0.18s; pointer-events: none; }
.fd-sheet {
  position: relative; width: min(600px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--st-paper);
  padding: var(--st-space-8) var(--st-space-6) var(--st-space-10); border-radius: var(--st-radius-xl) 0 0 var(--st-radius-xl);
  box-shadow: var(--st-shadow-lg); animation: fd-slide 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; outline: none;
}
@keyframes fd-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.fd-sheet-close {
  position: sticky; top: 0; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -4px -32px auto; border: 0; border-radius: 50%;
  background: var(--st-paper-sunk); color: var(--st-ink); font-size: 24px; line-height: 1; cursor: pointer; transition: background-color 0.15s;
}
.fd-sheet-close:hover { background: var(--st-paper-deep); }
.fd-sheet-body { display: grid; gap: var(--st-space-5); min-width: 0; }
.fd-detail { display: grid; gap: var(--st-space-5); min-width: 0; }
.fd-detail-head { display: grid; gap: var(--st-space-2); padding-right: 44px; }
.fd-detail-head .fd-top { justify-content: flex-start; gap: var(--st-space-4); flex-wrap: wrap; }
.fd-detail-title { margin: 0; font: 800 26px/1.3 var(--st-font-sans); letter-spacing: -0.035em; overflow-wrap: anywhere; text-wrap: balance; }
.fd-fine { color: var(--st-ink-3); font: 600 12.5px/1.5 var(--st-font-sans); }
.fd-statusbox { display: grid; gap: var(--st-space-2); padding: var(--st-space-4) var(--st-space-5); border-radius: var(--st-radius-md); background: var(--cs); }
.fd-statusbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2) var(--st-space-3); }
.fd-statusbox .st-pill { background: var(--st-paper); }
.fd-statusbox p { margin: 0; color: var(--st-ink); font-size: 15px; line-height: 1.65; }
.fd-statusbox .fd-note { padding: var(--st-space-2) var(--st-space-3); border-radius: var(--st-radius-sm); background: var(--st-paper); font-size: 13.5px; color: var(--st-ink-2); }
.fd-sec { display: grid; gap: var(--st-space-3); min-width: 0; }
.fd-sec h4 { margin: 0; font: 800 16px/1.4 var(--st-font-sans); letter-spacing: -0.02em; }
.fd-summary { margin: 0; font-size: 16px; line-height: 1.7; }
.fd-note { margin: 0; color: var(--st-ink-2); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.fd-strong { font-weight: 800; color: var(--st-ink); }
.fd-lines, .fd-evs, .fd-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-space-3); min-width: 0; }
.fd-line, .fd-ev { padding: var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper-warm); box-shadow: inset 0 0 0 1px var(--st-line); min-width: 0; }
.fd-line-head, .fd-ev-head { display: flex; justify-content: space-between; align-items: center; gap: var(--st-space-3); flex-wrap: wrap; font: 700 13.5px/1.4 var(--st-font-sans); }
.fd-line dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-space-2) var(--st-space-4); margin: var(--st-space-3) 0 0; }
.fd-line dt, .fd-facts dt { color: var(--st-ink-3); font: 600 12.5px/1.4 var(--st-font-sans); }
.fd-line dd, .fd-facts dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.fd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-3) var(--st-space-4); margin: 0; }
.fd-ev blockquote { margin: var(--st-space-3) 0 0; padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-sm); background: var(--st-paper-sunk); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--st-ink); }
.fd-ev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2) var(--st-space-3); margin-top: var(--st-space-3); }
.fd-link { color: var(--st-brand-ink); font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.fd-link:hover { color: var(--st-ink); }
.fd-ev-foot .fd-link { margin-left: auto; }
.fd-srcs li { font-size: 14px; }
.fd-detail-link { margin: 0; }
.fd-detail-link .st-btn { color: var(--st-on-brand); text-decoration: none; }

.fd-foot-note { margin: var(--st-space-5) 0 0; text-align: center; overflow-wrap: anywhere; }
.fd-foot-note[hidden] { display: none; }
.fd-amount-note { line-height: 1.6; }
.fd-owner-lint { padding: var(--st-space-4) var(--st-space-5); border-radius: var(--st-radius-md); background: var(--st-paper-warm); }
.fd-owner-lint ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.6; color: var(--st-ink-2); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 반응형 */
@media (max-width: 1000px) {
  .fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fd-grid { grid-template-columns: minmax(0, 1fr); gap: var(--st-space-4); }
  .fd-kbd { display: none; }
  .fd-sort { margin-left: auto; }
  .fd-rows { gap: var(--st-space-3); }
  .fd-legend li { grid-template-columns: minmax(0, 1fr); gap: var(--st-space-1); }
  .fd-legend summary { min-height: 44px; }
  .fd-sheet-back { align-items: flex-end; }
  .fd-sheet { width: 100%; height: auto; max-height: 92dvh; border-radius: var(--st-radius-xl) var(--st-radius-xl) 0 0; padding: var(--st-space-6) var(--st-space-5) var(--st-space-8); animation-name: fd-slide-up; }
  .fd-sheet::before { content: ''; display: block; width: 38px; height: 4px; margin: -10px auto var(--st-space-3); border-radius: 4px; background: var(--st-line-strong); }
  .fd-detail-title { font-size: 22px; }
  .fd-photo--card { width: 80px; }
}
@keyframes fd-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fd-card, .fd-card.fd-new, .fd-ico-check, .fd-track i, .fd-newbar, .fd-sheet, .fd-sheet-back, .fd-skel i { animation: none; }
  .fd-dots i { animation: none; opacity: 1; }
  .fd-dots i:nth-child(2) { opacity: 0.7; }
  .fd-dots i:nth-child(3) { opacity: 0.4; }
  .fd-more span { transition: none; }
}
.fd-line-no { color: var(--st-ink); }