/* public-cart.css - the anonymous cart (design Rev 13): header link + badge, detail 「장바구니 담기」, /cart rows.
   Linked from App.razor right after public-gallery.css. base.css tokens only, no new colours; every button,
   link and field is at least 44px (--kk-touch). The rows are built by js/public-cart.js. */

/* ---------- header link + badge ---------- */
.pub-nav .kk-cart-link {
  position: relative;
  min-width: var(--kk-touch);
  min-height: var(--kk-touch);
  gap: 0.35rem;
}
.kk-cart-icon { flex: none; }
.kk-cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: var(--kk-radius-pill);
  background: var(--kk-cta-bg); /* white text 4.92:1 */
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--kk-surface);
}
.kk-cart-count[hidden] { display: none; }

@media (max-width: 575.98px) {
  /* Icon only on phones (the header must fit at 360px); the aria-label keeps the name. */
  .kk-cart-link-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .pub-nav .kk-cart-link { padding-inline: 0.6rem; }
}

/* ---------- detail page: 장바구니 담기 ---------- */
.kk-cart-add {
  margin: 0 0 1.1rem;
}
.kk-cart-add[hidden] { display: none; }
.kk-cart-add-btn {
  min-height: var(--kk-touch);
  min-width: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kk-cart-added {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.6rem;
}
.kk-cart-added[hidden] { display: none; }
.kk-cart-added .btn {
  min-height: var(--kk-touch);
  min-width: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kk-cart-added-text {
  font-weight: 650;
  color: var(--kk-success-text);
  flex-basis: 100%;
}
.kk-cart-add-hint {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  color: var(--kk-text-secondary);
  word-break: keep-all;
}
.kk-cart-add-msg {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  color: var(--kk-text);
  word-break: keep-all;
}
.kk-cart-add-msg[hidden] { display: none; }
@media (max-width: 575.98px) {
  .kk-cart-add-btn { width: 100%; }
}

/* ---------- /cart ---------- */
.kk-cart-page { min-width: 0; }
.kk-cart {
  margin-bottom: 1.5rem;
  min-width: 0;
}
.kk-cart-title {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
/* tabindex=-1: focused by the script after a successful 「다시 시도」 (keyboard users see where they are). */
.kk-cart-title:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.kk-cart-loading {
  color: var(--kk-text-secondary);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.kk-cart-loading[hidden] { display: none; }

.kk-cart-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.5rem;
}
.kk-cart-status {
  margin: 0;
  color: var(--kk-text);
  font-size: 0.9rem;
  word-break: keep-all;
}
.kk-cart-status:empty { display: none; }
.kk-cart-clear-gone,
.kk-cart-general {
  min-height: var(--kk-touch);
  min-width: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kk-cart-clear-gone[hidden],
.kk-cart-general[hidden] { display: none; }

.kk-cart-storage,
.kk-cart-lookup,
.kk-cart-noscript {
  font-size: 0.88rem;
  word-break: keep-all;
}
.kk-cart-lookup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.kk-cart-lookup .btn {
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
}
.kk-cart-storage[hidden],
.kk-cart-lookup[hidden] { display: none; }

.kk-cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.kk-cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb body remove"
    "fields fields fields";
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: var(--kk-radius-sm);
  box-shadow: var(--kk-shadow);
  min-width: 0;
}
@media (min-width: 576px) {
  .kk-cart-item {
    grid-template-areas:
      "thumb body remove"
      "thumb fields fields";
    padding: 1rem;
  }
}

.kk-cart-thumb {
  grid-area: thumb;
  display: block;
  width: 72px;
  height: 96px;
  border-radius: var(--kk-radius-sm);
  overflow: hidden;
  background: var(--kk-bg);
}
.kk-cart-thumb img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.kk-cart-thumb.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: var(--kk-text-secondary);
  font-size: 0.72rem;
  text-align: center;
  word-break: keep-all;
}

.kk-cart-body {
  grid-area: body;
  min-width: 0;
}
.kk-cart-name {
  display: inline-flex;
  align-items: center;
  min-height: var(--kk-touch);
  min-width: var(--kk-touch);
  margin: 0;
  font-weight: 650;
  color: var(--kk-text);
  text-decoration: underline;
  text-decoration-color: var(--kk-line-strong);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
p.kk-cart-name { text-decoration: none; }
a.kk-cart-name:hover,
a.kk-cart-name:focus-visible { color: var(--kk-accent-text); text-decoration-color: currentColor; }
.kk-cart-cat {
  margin: 0;
  min-height: 1.4em;
  min-height: 1lh;
  font-size: 0.84rem;
  color: var(--kk-text-secondary);
  overflow-wrap: anywhere;
}
.kk-cart-was,
.kk-cart-gone-hint {
  margin: 0;
  font-size: 0.84rem;
  color: var(--kk-text-secondary);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kk-cart-remove {
  grid-area: remove;
  min-width: var(--kk-touch);
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kk-cart-fields {
  grid-area: fields;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem 0.75rem;
  min-width: 0;
}
@media (min-width: 576px) {
  /* Narrow 수량 beside a wide 메모 (below 576px both use the full card width, one under the other). */
  .kk-cart-fields { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
.kk-cart-field {
  min-width: 0;
}
.kk-cart-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kk-text);
  margin-bottom: 0.25rem;
}
.kk-cart-optional {
  font-weight: 400;
  color: var(--kk-text-secondary);
}
.kk-cart-qty,
.kk-cart-note {
  width: 100%;
  min-width: 0;
  min-height: var(--kk-touch);
}
.kk-cart-qty[aria-invalid="true"] { border-color: var(--kk-danger-text); }
.kk-cart-qty[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--kk-danger-bg); }
.kk-cart-error {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--kk-danger-text);
  word-break: keep-all;
}
.kk-cart-error[hidden] { display: none; }
.kk-cart-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--kk-text-secondary);
}
.kk-cart-note-meta .form-text {
  margin: 0;
  font-size: 0.78rem;
  color: var(--kk-text-secondary);
}
.kk-cart-note-meta .form-text:first-child {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.kk-cart-note-count { white-space: nowrap; flex: none; }

/* Unavailable product: readable secondary text on the page tone, no opacity tricks. */
.kk-cart-item.is-gone { background: var(--kk-bg); box-shadow: none; }
.kk-cart-item.is-gone .kk-cart-name { color: var(--kk-text-secondary); }
/* The 「이미지 없음」 box would vanish into the row (both --kk-bg): white with a dashed edge keeps it a visible box. */
.kk-cart-item.is-gone .kk-cart-thumb {
  background: var(--kk-surface);
  border: 1px dashed var(--kk-line-strong);
}

/* Undo placeholder (JS sets min-height to the removed row's height, so nothing slides under the finger). */
.kk-cart-item.is-removed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Wrapped lines (long names on phones) stay together in the middle of the reserved height instead of being
     stretched apart, so 「되돌리기」 sits right next to what it undoes. */
  align-content: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  background: transparent;
  border: 1px dashed var(--kk-line-strong);
  box-shadow: none;
  color: var(--kk-text-secondary);
}
.kk-cart-removed-text {
  flex: 1 1 12rem;
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kk-cart-undo {
  min-width: var(--kk-touch);
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kk-cart-empty[hidden] { display: none; }
.kk-cart-empty .btn {
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
}

.kk-cart-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}
.kk-cart-actions[hidden] { display: none; }
.kk-cart-ask {
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 575.98px) {
  .kk-cart-ask { width: 100%; }
}

.kk-cart-sent {
  margin-bottom: 1rem;
  scroll-margin-top: calc(var(--kk-header-h) + 0.5rem);
}
/* Focused by the script after the redirect (also without keyboard use, so :focus and not only :focus-visible). */
.kk-cart-sent:focus,
.kk-cart-sent:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.kk-cart-sent-note {
  margin-top: 0.35rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.kk-cart-sent-note[hidden] { display: none; }

.kk-cart-inquiry { margin-bottom: 1.5rem; }
.kk-cart-inquiry[hidden] { display: none; }
.inquiry-cart-gone-names { font-weight: 600; }
.inquiry-cart-privacy { display: inline; }
.kk-sticky-cta[hidden] { display: none; }
@media (max-width: 767.98px) {
  /* /cart renders its sticky CTA hidden until there is something to send: keep 「위로」 at its normal place then
     (public.css lifts it above any sticky CTA on the page). */
  .kk-js body:has(.kk-sticky-cta[hidden]):not(:has(.kk-sticky-cta:not([hidden]))) .kk-to-top {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }
}

.kk-cart-off .btn {
  min-height: var(--kk-touch);
  display: inline-flex;
  align-items: center;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kk-cart-item,
  .kk-cart-add .btn,
  .kk-cart-link { transition: none; }
}