:root { --km-blue: #0b3d91; --km-gold: #f2b705; --km-ink: #14182b; --km-bg: #f4f6fb; --km-line: #e2e6f0; }
body { background: var(--km-bg); color: var(--km-ink); margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.km-top { position: sticky; top: 0; z-index: 10; background: var(--km-blue); color: #fff; padding: 10px 14px; }
.km-bar { display: flex; align-items: center; gap: 10px; max-width: 1100px; margin: 0 auto; }
.km-logo { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; cursor: pointer; background: none; border: 0; color: #fff; padding: 0; }
.km-logo span { color: var(--km-gold); }
.km-sp { flex: 1; }
.km-sell { background: var(--km-gold); color: var(--km-ink); border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 800; cursor: pointer; }
.km-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.km-search { max-width: 1100px; margin: 10px auto 0; display: flex; gap: 8px; }
.km-search input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 12px 14px; font-size: 16px; }
.km-main { max-width: 1100px; margin: 0 auto; padding: 14px; }
.km-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.km-chip { flex: none; border: 1px solid var(--km-line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; color: var(--km-ink); }
.km-chip.on { background: var(--km-ink); color: #fff; border-color: var(--km-ink); }
.km-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.km-filters select, .km-filters input { border: 1px solid var(--km-line); border-radius: 10px; padding: 9px 10px; font-size: 15px; background: #fff; min-width: 0; flex: 1 1 110px; }
.km-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (min-width: 700px) { .km-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } }
.km-card { background: #fff; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid var(--km-line); text-align: left; padding: 0; color: inherit; font: inherit; }
.km-card img, .km-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #e8ecf5; }
.km-card-b { padding: 8px 10px 10px; }
.km-price { font-weight: 800; font-size: 17px; color: var(--km-blue); }
.km-t { font-size: 14px; margin: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-meta { font-size: 12px; color: #6b7290; }
.km-gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; border-radius: 14px; }
.km-gal img { flex: none; width: 100%; max-height: 70vh; object-fit: contain; background: #111; scroll-snap-align: center; border-radius: 14px; }
.km-panel { background: #fff; border-radius: 14px; padding: 16px; border: 1px solid var(--km-line); margin-top: 12px; }
.km-panel h1 { font-size: 22px; margin: 4px 0; }
.km-desc { white-space: pre-wrap; line-height: 1.5; }
.km-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.km-btn { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.km-btn.p { background: var(--km-blue); color: #fff; }
.km-btn.g { background: #25d366; color: #fff; }
.km-btn.l { background: #eef1f8; color: var(--km-ink); }
.km-btn.d { background: #fde8e8; color: #b42318; }
.km-form { display: grid; gap: 12px; }
.km-form label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.km-form input, .km-form textarea, .km-form select { border: 1px solid var(--km-line); border-radius: 10px; padding: 11px; font-size: 16px; font-family: inherit; }
.km-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.km-thumbs div { position: relative; }
.km-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.km-thumbs button { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 50%; width: 24px; height: 24px; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; }
.km-err { background: #fde8e8; color: #b42318; padding: 10px; border-radius: 10px; }
.km-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--km-line); }
.km-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.km-back { background: none; border: 0; color: var(--km-blue); font-weight: 700; cursor: pointer; padding: 4px 0; font-size: 15px; }