/* ============================================================================
 * 배때지 V2 · 공개 사진검색 모달 + 결과 UI (item.php 전용 로드)
 *   - shop 페이지는 shop-final.css 에 동일 클래스가 이미 있으므로 여기서 로드하지 않는다.
 *   - item.php 에는 v2img-* 스타일이 없어, 대표이미지 사진검색 모달이 여기 스타일로 렌더된다.
 *   - 마크업: includes/photo_search_modal.php + assets/photo-search.js(renderResults)
 * ==========================================================================*/

body.modal-open { overflow: hidden; }

.v2img-modal{
    position:fixed; inset:0; z-index:5000;
    display:flex; align-items:flex-end; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.v2img-modal.open{ opacity:1; visibility:visible; }

.v2img-backdrop{ position:absolute; inset:0; background:rgba(17,17,20,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

.v2img-sheet{
    position:relative; z-index:1;
    width:100%; max-width:560px; max-height:92vh;
    background:#fff; border-radius:20px 20px 0 0;
    display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(24px); transition:transform .24s ease;
    box-shadow:0 -12px 40px rgba(0,0,0,.24);
}
.v2img-modal.open .v2img-sheet{ transform:translateY(0); }

.v2img-head{
    flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid #eef0f3;
}
.v2img-head strong{ font-size:16px; font-weight:800; color:#16161a; letter-spacing:-.3px; }
.v2img-close{
    width:36px; height:36px; border:0; background:#f4f6fb; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#4b4b52;
}
.v2img-close svg{ width:18px; height:18px; }
.v2img-close:hover{ background:#e9edf5; }

/* ---------------- 폼(업로드) ---------------- */
.v2img-form{ display:flex; flex-direction:column; gap:14px; padding:18px; overflow-y:auto; }
.v2img-upload{
    position:relative; display:block; border:1.5px dashed #d3d7e0; border-radius:16px;
    background:#fafbfc; min-height:220px; cursor:pointer; overflow:hidden;
}
.v2img-preview-wrap{ position:relative; width:100%; aspect-ratio:1/1; max-height:340px; }
#v2ImagePreview{ width:100%; height:100%; object-fit:contain; display:block; background:#f0f1f4; }
.v2img-upload-empty{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:#8a8f98; text-align:center;
}
.v2img-plus svg{ width:34px; height:34px; color:#b6bcc7; }
.v2img-upload-empty strong{ font-size:14px; font-weight:700; color:#4b4b52; }
.v2img-upload-empty small{ font-size:12px; }

.v2img-scan{ position:absolute; inset:0; pointer-events:none; }
.v2img-scan-line{
    position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#4f46e5,transparent);
    animation:v2imgScan 1.6s linear infinite;
}
@keyframes v2imgScan{ 0%{top:6%} 50%{top:92%} 100%{top:6%} }
.v2img-corner{ position:absolute; width:20px; height:20px; border:2px solid #4f46e5; }
.v2img-corner.top-left{ top:8px; left:8px; border-right:0; border-bottom:0; }
.v2img-corner.top-right{ top:8px; right:8px; border-left:0; border-bottom:0; }
.v2img-corner.bottom-left{ bottom:8px; left:8px; border-right:0; border-top:0; }
.v2img-corner.bottom-right{ bottom:8px; right:8px; border-left:0; border-top:0; }

.v2img-analyzing{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:rgba(255,255,255,.94); }
.v2img-analyzing strong{ font-size:13.5px; font-weight:800; color:#16161a; }
.v2img-analyzing p{ margin:4px 0 8px; font-size:12px; color:#6b6b74; }
.v2img-progress{ height:6px; background:#eceef2; border-radius:6px; overflow:hidden; }
.v2img-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#4f46e5,#7c83ff); transition:width .3s ease; }
.v2img-steps{ display:flex; gap:8px; margin-top:8px; font-size:11px; font-weight:700; color:#b6bcc7; }
.v2img-steps span.active{ color:#4f46e5; }
.v2img-steps span.done{ color:#16a34a; }

.v2img-select-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v2img-select-row label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:#6b6b74; }
.v2img-select-row select{
    height:44px; border:1px solid #e4e6eb; border-radius:10px; padding:0 12px; font:inherit; font-size:14px; background:#fff; color:#16161a;
}
.v2img-submit{
    height:50px; border:0; border-radius:12px; background:#16161a; color:#fff; font-size:15px; font-weight:800; cursor:pointer;
}
.v2img-submit:disabled{ opacity:.45; cursor:not-allowed; }
.v2img-change{
    height:44px; border:1px solid #e4e6eb; border-radius:12px; background:#fff; color:#4b4b52; font-size:13.5px; font-weight:700; cursor:pointer;
}

/* ---------------- 결과 모드 ---------------- */
.v2img-sheet.v2img-result-mode .v2img-form{ display:none; }
.v2img-result-view{ display:none; flex-direction:column; overflow-y:auto; padding:16px 16px 24px; }
.v2img-sheet.v2img-result-mode .v2img-result-view{ display:flex; }

.v2img-result-loading{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 20px; color:#6b6b74; }
.v2img-result-loading strong{ font-size:14px; font-weight:700; }
.v2img-result-loading-ring{
    width:34px; height:34px; border-radius:50%; border:3px solid #e6e8ef; border-top-color:#4f46e5;
    animation:v2imgSpin .8s linear infinite;
}
@keyframes v2imgSpin{ to{ transform:rotate(360deg) } }

.v2img-result-top{ margin-bottom:12px; }
.v2img-result-search-row{ display:flex; gap:12px; align-items:flex-start; }
.v2img-result-query{ flex:0 0 78px; width:78px; height:78px; border-radius:12px; overflow:hidden; background:#f0f1f4; border:1px solid #e4e6eb; }
.v2img-result-query img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2img-result-controls{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.v2img-result-selects{ display:flex; gap:8px; }
.v2img-result-selects select{
    flex:1 1 0; min-width:0; height:40px; border:1px solid #e4e6eb; border-radius:10px; padding:0 10px; font:inherit; font-size:13px; background:#fff; color:#16161a;
}
.v2img-result-again{
    align-self:flex-start; height:38px; padding:0 16px; border:1px solid #e4e6eb; border-radius:999px;
    background:#fff; font-size:13px; font-weight:700; color:#4b4b52; cursor:pointer;
}
.v2img-result-again:hover{ border-color:#c8ccd4; }
.v2img-result-message{ margin-top:10px; font-size:12.5px; color:#6b6b74; line-height:1.5; }
.v2img-result-summary{ font-size:13px; font-weight:800; color:#16161a; margin:6px 0 12px; }

.v2img-result-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.v2img-result-card{ display:block; text-decoration:none; color:inherit; }
.v2img-result-image{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#f0f1f4; border:1px solid #eef0f3; }
.v2img-result-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.v2img-result-score{
    position:absolute; top:6px; left:6px; padding:2px 7px; border-radius:999px;
    background:rgba(79,70,229,.92); color:#fff; font-size:10.5px; font-weight:800;
}
.v2img-result-brand{ margin-top:7px; font-size:11px; font-weight:700; color:#8a8f98; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v2img-result-title{
    margin-top:2px; font-size:12.5px; font-weight:600; color:#16161a; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.v2img-result-price{ margin-top:4px; font-size:13px; font-weight:800; color:#16161a; }
.v2img-result-empty{ padding:44px 20px; text-align:center; color:#6b6b74; font-size:13.5px; line-height:1.6; }

/* ---------------- 태블릿/PC ---------------- */
@media (min-width:768px){
    .v2img-modal{ align-items:center; padding:24px; }
    .v2img-sheet{ border-radius:20px; max-height:88vh; transform:scale(.98); }
    .v2img-modal.open .v2img-sheet{ transform:scale(1); }
    .v2img-result-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px){
    .v2img-sheet{ max-width:680px; }
}

/* 좁은 모바일 */
@media (max-width:400px){
    .v2img-result-grid{ grid-template-columns:repeat(2,1fr); }
    .v2img-result-search-row{ flex-direction:column; }
    .v2img-result-query{ flex-basis:64px; width:64px; height:64px; }
}

@media (prefers-reduced-motion:reduce){
    .v2img-modal,.v2img-sheet,.v2img-progress span{ transition:none; }
    .v2img-scan-line,.v2img-result-loading-ring{ animation:none; }
}