/* ========== Admin products (list, trash, composer) — owned by P2b ==========
   Loaded after base.css and admin.css. Prefixes: pl- = list, pt- = trash, pe- = editor, pa- = shared. */

.status-Deleted { background: var(--kk-danger-bg); color: var(--kk-danger-text); }

/* ---------- Shared ---------- */
.pa-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kk-text-secondary);
  background: #f5efec;
}

.pa-pager { margin: 1rem 0 0; }
.pa-pager-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}
.pa-page,
.pa-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kk-touch);
  min-height: var(--kk-touch);
  padding: 0 0.6rem;
  border-radius: var(--kk-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
}
.pa-page {
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  color: var(--kk-text);
  text-decoration: none;
}
a.pa-page:hover { border-color: var(--kk-accent); color: var(--kk-accent-text); opacity: 1; }
.pa-page.is-current { background: var(--kk-ink); border-color: var(--kk-ink); color: #fff; }
.pa-page.is-disabled { color: var(--kk-text-secondary); }
.pa-gap { color: var(--kk-text-secondary); min-width: 1.5rem; padding: 0; }
.pa-pager-summary { text-align: center; font-size: 0.8rem; color: var(--kk-text-secondary); margin: 0.4rem 0 0; }

/* ---------- Product list ---------- */
.pl-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.pl-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pl-count { font-size: 0.9rem; font-weight: 500; color: var(--kk-text-secondary); margin-left: 0.35rem; }
.pl-results.is-loading { opacity: 0.6; transition: opacity 0.2s; }
.pl-name { overflow-wrap: anywhere; word-break: keep-all; }

.pl-cards {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mobile-product-card {
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--kk-shadow);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow 0.2s, transform 0.2s;
}
.mobile-product-card:hover {
  box-shadow: var(--kk-shadow-hover);
  transform: translateY(-1px);
  opacity: 1;
}
.mobile-product-card:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.pl-card { display: flex; gap: 0.85rem; align-items: flex-start; }
.pl-card-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--kk-line);
}
.pl-card-body { flex: 1 1 auto; min-width: 0; }
.pl-card-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.pl-card-title .status-badge { flex: 0 0 auto; }

.thumb-admin {
  width: 56px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--kk-line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pl-thumb-cell { width: 72px; }
/* The model-name link is stretched over the whole row (Bootstrap .stretched-link), so the row is one real link. */
.pl-row { position: relative; }
.pl-link { color: var(--kk-text); text-decoration: none; }
.pl-link:focus-visible { outline: none; }
.pl-row:focus-within { outline: 3px solid var(--kk-focus-ring); outline-offset: -3px; }
.pl-row:hover .pl-link { color: var(--kk-accent-text); }

/* ---------- Trash ---------- */
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
}
.pt-body { flex: 1 1 12rem; min-width: 0; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 575.98px) {
  .pt-actions { width: 100%; }
  .pt-actions .btn { flex: 1 1 0; }
}

/* ---------- Editor ---------- */
.pe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.pe-dirty {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--kk-warn-text);
  background: var(--kk-warn-bg);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
}
/* .pe-live regions stay rendered while empty (no display:none) so screen readers announce what appears in them (F97). */
.pe-progress { display: flex; align-items: center; gap: 0.6rem; }
.pe-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--kk-line-strong);
  border-top-color: var(--kk-accent);
  border-radius: 50%;
  animation: kk-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.pe-banner { overflow-wrap: anywhere; }

.pe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.pe-grid > .admin-card { margin-bottom: 0; min-width: 0; }
/* Design §5.3: desktop = two columns (meta | images); phones = stacked, photos first. */
@media (min-width: 992px) {
  .pe-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "info photos";
    align-items: start;
  }
  .pe-info { grid-area: info; }
  .pe-photos { grid-area: photos; }
}

.pe-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

/* The single file input stays mounted but invisible; the labels are the visible buttons. */
.pe-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pe-file-input:focus-visible + .pe-pick { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.pe-pick { cursor: pointer; }
.pe-pick.disabled { pointer-events: none; opacity: 0.55; }

.ig-composer .ig-dropzone {
  display: block;
  cursor: pointer;
  border: 2px dashed var(--kk-line-strong);
  border-radius: var(--kk-radius);
  background: linear-gradient(180deg, #fff 0%, #fff8f5 100%);
  min-height: 200px;
  transition: border-color 0.2s, background 0.2s;
}
.ig-composer .ig-dropzone:hover {
  border-color: var(--kk-accent);
  background: #fff5f2;
}
.ig-composer .ig-dropzone.is-disabled { pointer-events: none; opacity: 0.6; }
.ig-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
  min-height: 200px;
}
.ig-dropzone-icon {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: var(--kk-accent);
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.ig-preview-carousel {
  max-width: 420px;
  margin: 0 auto;
}
/* Soft-deleted product: its images are not served (media endpoint hides them), so a note replaces the carousel. */
.pe-photos-hidden {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--kk-line-strong);
  border-radius: var(--kk-radius);
  color: var(--kk-text-secondary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.pe-photos-hidden-icon { font-size: 1.4rem; color: var(--kk-muted); flex: 0 0 auto; }

.pe-no-preview {
  color: #d6d3d1;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
  overflow-wrap: anywhere;
}

/* Thumbnail grid: 2 columns on phones, more as space allows (design §5.3). */
.pe-thumbs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.75rem;
}
.pe-thumb { position: relative; min-width: 0; }
.pe-thumb-btn {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  cursor: pointer;
}
.pe-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }
.pe-thumb-btn:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.pe-thumb.active .pe-thumb-btn {
  border-color: var(--kk-accent);
  box-shadow: 0 0 0 3px var(--kk-gold-soft);
}
.pe-thumb.is-pending .pe-thumb-btn { border-style: dashed; border-color: var(--kk-line-strong); }
.pe-thumb.is-pending.active .pe-thumb-btn { border-color: var(--kk-accent); }
.ig-cover-tag,
.pe-pending-tag {
  position: absolute;
  top: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  pointer-events: none;
}
.ig-cover-tag { left: 4px; background: var(--kk-cta-bg); color: #fff; }
.pe-pending-tag { right: 4px; background: rgba(45, 36, 32, 0.78); color: #fff; }
/* F71: 2x2 grid of 44px buttons under each thumbnail. */
.pe-thumb-actions {
  display: grid;
  grid-template-columns: repeat(2, var(--kk-touch));
  gap: 6px;
  justify-content: center;
  margin-top: 0.4rem;
}
.pe-thumb-actions .btn {
  min-height: var(--kk-touch);
  min-width: var(--kk-touch);
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
}

/* Form */
.pe-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pe-public,
.pe-private {
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.25rem;
  white-space: nowrap;
}
.pe-public { background: var(--kk-warn-bg); color: var(--kk-warn-text); }
.pe-private { background: #eef2f0; color: #52665c; }
@media (max-width: 575.98px) {
  .pe-public, .pe-private { white-space: normal; }
}
.pe-text-warning {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--kk-warn-text);
  background: var(--kk-warn-bg);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}
.pe-info .validation-message { color: var(--kk-danger-text); font-size: 0.82rem; margin-top: 0.25rem; }
.pe-info .invalid { border-color: var(--kk-danger); }

.pe-ready {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--kk-line);
}
.pe-ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.pe-ready-list .is-ok { color: var(--kk-success-text); }
.pe-ready-list .is-missing { color: var(--kk-text-secondary); }

.pe-danger { border-color: rgba(214, 69, 69, 0.25); }

/* Sticky action bar: clear of the iPhone home indicator (viewport-fit=cover). */
.sticky-actions.pe-actions {
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  align-items: center;
}
@media (max-width: 575.98px) {
  .sticky-actions.pe-actions .btn:not(.btn-link) { flex: 1 1 auto; }
}

/* ---------- Rev 7 composer additions (B07, B10, B13–B15) ---------- */
.pe-public-link { min-height: var(--kk-touch); display: inline-flex; align-items: center; margin-left: auto; }
.pe-last-saved { color: var(--kk-text-secondary); overflow-wrap: anywhere; }
.pe-last-saved a { color: var(--kk-accent-text); font-weight: 600; }
.pe-heic-hint { color: var(--kk-text-secondary); }

/* B10: files dragged from the desktop over the photo card (admin-products.js sets the attribute). */
.pe-photos[data-kk-file-over="on"] {
  outline: 3px dashed var(--kk-accent-text);
  outline-offset: -6px;
  background: var(--kk-accent-soft);
}
.pe-photos[data-kk-file-over="on"] .ig-dropzone { border-color: var(--kk-accent); }

/* B10: drag-to-reorder. The source follows the pointer; the target slot is outlined. */
.pe-thumbs[data-kk-sortable="on"] .pe-thumb-btn { cursor: grab; touch-action: manipulation; }
.pe-thumbs[data-kk-sortable="on"] .pe-thumb-btn img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.pe-thumb[data-kk-drag="source"] {
  z-index: 5;
  opacity: 0.85;
  cursor: grabbing;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}
.pe-thumb[data-kk-drag="source"] .pe-thumb-btn { cursor: grabbing; }
.pe-thumb[data-kk-drag="target"] .pe-thumb-btn {
  border-color: var(--kk-accent);
  border-style: dashed;
  box-shadow: 0 0 0 3px var(--kk-gold-soft);
}
.pe-thumb[data-kk-drag="armed"] .pe-thumb-btn { box-shadow: 0 0 0 3px var(--kk-focus-ring); }
.pe-thumbs[data-kk-dragging="on"] { user-select: none; -webkit-user-select: none; }

/* B07: store picker with the inline "+ 새 매장" form. */
.pe-store-row { display: flex; gap: 0.5rem; align-items: stretch; }
.pe-store-row .form-select { flex: 1 1 auto; min-width: 0; }
.pe-store-add { flex: 0 0 auto; min-height: var(--kk-touch); white-space: nowrap; }
.pe-new-store {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--kk-line-strong);
  border-radius: var(--kk-radius-sm);
  background: var(--kk-bg-elevated);
}
.pe-new-store .form-control { min-height: var(--kk-touch); }
.pe-new-store-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--kk-danger-text);
  background: var(--kk-danger-bg);
  overflow-wrap: anywhere;
}
.pe-new-store-error .btn,
.pe-new-store-actions .btn { min-height: var(--kk-touch); }
.pe-new-store-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* B14: price unit hint and the "thousand won?" warning (never blocks saving). */
.pe-price-preview { color: var(--kk-text); font-weight: 600; }
.pe-price-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--kk-warn-text);
  background: var(--kk-warn-bg);
}
.pe-price-warning .btn { min-height: var(--kk-touch); }

/* B15: "customer-visible" note under Description/OptionsText. */
.pe-public-note {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kk-warn-text);
}
.pe-save-next { min-height: var(--kk-touch); }

/* F97: respect reduced-motion preferences on the admin product pages. */
@media (prefers-reduced-motion: reduce) {
  .ig-preview-carousel .carousel-track,
  .mobile-product-card,
  .pl-results.is-loading,
  .ig-composer .ig-dropzone { transition: none; }
  .mobile-product-card:hover { transform: none; }
  .pe-spinner { animation: none; }
  .pe-thumb[data-kk-drag="source"] { filter: none; }
}