/* 검색용 정적 페이지(products/… · references/… · 404)의 기본 모양 — tools/build-pages.mjs 가 만든 HTML 에 씀.
   사이트 화면(js/app.js)이 뜨면 이 내용은 통째로 바뀌므로, 방문자에게는 화면이 뜨기 전 잠깐과 스크립트가 꺼진 경우에만 보임.
   색은 어두운 테마(css/theme-black.css)와 같게: 바탕 #1d1d1f · 글자 #f5f5f7 / #a1a1a6 */
html { background: #1d1d1f; }
.sp { box-sizing: border-box; min-height: 100vh; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 52px) 48px; max-width: 1280px; color: #f5f5f7; background: #1d1d1f; font: 400 16px/1.6 -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; word-break: keep-all; }
.sp *, .sp *::before { box-sizing: border-box; }
.sp a { color: inherit; text-decoration: none; }
.sp a:hover { text-decoration: underline; }
.sp small { font-size: .6em; font-weight: 400; color: #a1a1a6; }
.sp-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sp-logo { font-weight: 700; font-size: 20px; letter-spacing: .02em; }
.sp-logo span { font-weight: 400; font-size: 14px; color: #a3c63c; }
.sp-hd nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; color: #a1a1a6; }
.sp-crumbs { margin: 20px 0 8px; font-size: 13px; color: #86868b; }
.sp-main h1 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.sp-main h2 { margin: 44px 0 12px; font-size: 22px; font-weight: 600; }
.sp-main p { margin: 0 0 12px; color: #a1a1a6; }
.sp-lead { font-size: 18px; }
.sp-shots { display: flex; gap: 4px; margin: 20px 0; overflow-x: auto; }
.sp-shots img { flex: none; width: min(100%, 720px); aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.sp-shots img + img { width: min(60%, 360px); }
.sp-facts { margin: 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.sp-facts > div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sp-facts dt { flex: none; width: 11em; color: #86868b; }
.sp-facts dd { margin: 0; }
.sp-facts a, .sp-table a, .sp-cta a, .sp-ft a { text-decoration: underline; text-underline-offset: 3px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; }
.sp-card { display: flex; flex-direction: column; padding-bottom: 12px; background: #000; }
.sp-card img, .sp-card i { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.sp-card-ref img { object-fit: cover; background: #2a2a2d; }
.sp-card b { padding: 10px 12px 0; font-size: 14px; font-weight: 600; }
.sp-card em { padding: 2px 12px 0; font-size: 12px; font-style: normal; color: #86868b; }
.sp-links, .sp-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sp-links li, .sp-codes li { padding: 6px 14px; font-size: 14px; background: #2a2a2d; border-radius: 980px; }
.sp-codes li { padding: 3px 10px; font-size: 13px; }
.sp-table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14px; }
.sp-table th, .sp-table td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sp-table th { font-weight: 400; color: #86868b; }
.sp-cta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 36px; }
.sp-long { color: #a1a1a6; }
.sp-long img { max-width: 100%; height: auto; }
.sp-ft { margin-top: 64px; padding-top: 20px; font-size: 13px; color: #86868b; border-top: 1px solid rgba(255, 255, 255, .1); }
.sp-ft p { margin: 0 0 4px; }
.sp-404 { padding: 12vh 0; text-align: center; }
@media (max-width: 600px) { .sp-facts > div { flex-direction: column; gap: 2px; } .sp-facts dt { width: auto; font-size: 13px; } .sp-grid { grid-template-columns: repeat(2, 1fr); } .sp-table { font-size: 13px; } }
/* 긴 글 페이지(개인정보 처리방침) */
.sp-doc { max-width: 980px; color: #a1a1a6; }
.sp-doc ul { padding-left: 20px; }
.sp-doc table { width: 100%; margin: 12px 0 16px; border-collapse: collapse; font-size: 14px; }
.sp-doc th, .sp-doc td { padding: 10px 12px; text-align: left; vertical-align: top; border: 1px solid rgba(255, 255, 255, .2); }
.sp-doc th { color: #f5f5f7; }