/* ========== KK-Mall Design System (base) ==========
   Shared tokens, typography, buttons, forms, chips, state panels, carousel, alerts, utilities,
   Blazor error/reconnect UI and global accessibility rules. Frozen during wave 1 (foundation-owned). */

:root {
  /* 화사한 톤: 밝은 크림 + 소프트 로즈/코랄 포인트 */
  --kk-bg: #fff8f5;
  --kk-bg-elevated: #ffffff;
  --kk-surface: #ffffff;
  --kk-text: #2d2420;
  --kk-text-secondary: #6b5e58;
  /* Decorative only (separators, disabled states): 2.5:1 on white, never used for readable text (WCAG 1.4.3). */
  --kk-muted: #b0a29c;
  --kk-line: rgba(232, 120, 110, 0.12);
  --kk-line-strong: rgba(232, 120, 110, 0.22);
  --kk-ink: #3d2f2a;
  --kk-accent: #e8786e;
  --kk-accent-soft: #f0958c;
  /* Accent-coloured text: 5.95:1 on #fff, 5.7:1 on --kk-bg, 4.9:1 on the pink top gradient (~#ffe4de).
     --kk-accent itself is only 2.9:1 and is for fills, borders and icons. */
  --kk-accent-text: #a8433a;
  /* Filled elements that carry white text (primary buttons, active chip, sticky CTA, cover tag): the accent fill is
     too light for white text, so they use this darker coral. White on --kk-cta-bg 4.92:1, on the hover shade 5.95:1,
     on the pressed shade 7.0:1 (WCAG AA 4.5:1). --kk-accent stays for decorative fills, borders and icons. */
  --kk-cta-bg: #c0493f;
  --kk-cta-bg-hover: #a8433a;
  --kk-cta-bg-active: #963b33;
  /* Focus outlines: >= 3:1 against white and the cream page (WCAG 1.4.11); the accent is only 2.9:1. */
  --kk-focus-ring: #b3443b;
  --kk-gold: #e8786e;
  --kk-gold-soft: rgba(232, 120, 110, 0.14);
  --kk-success: #3d9b7a; /* decorative (borders, icons): white on it is only 3.4:1 */
  --kk-success-strong: #2e7d62; /* filled success buttons: white 4.97:1 (hover #24664f 6.8:1, pressed #1a5a44 8.1:1) */
  --kk-success-bg: #e8f8f2;
  --kk-success-text: #1e6b50; /* text on --kk-success-bg: >= 4.5:1 (WCAG AA) */
  --kk-warn: #c9892e;
  --kk-warn-bg: #fff6e5;
  --kk-warn-text: #7a4a0c;
  --kk-danger: #d64545;
  --kk-danger-bg: #ffecec;
  --kk-danger-text: #a3262a;
  --kk-info: #3f7fb5;
  --kk-info-bg: #eaf3fb;
  --kk-info-text: #1d5580;
  --kk-radius: 16px;
  --kk-radius-sm: 10px;
  --kk-radius-pill: 999px;
  --kk-shadow: 0 1px 3px rgba(232, 120, 110, 0.06), 0 10px 28px rgba(61, 47, 42, 0.05);
  --kk-shadow-hover: 0 6px 16px rgba(232, 120, 110, 0.12), 0 18px 40px rgba(61, 47, 42, 0.07);
  --kk-touch: 44px;
  --kk-header-h: 64px;
  --kk-max: 1200px;
  --kk-font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --kk-display: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --kk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--kk-font);
  background: var(--kk-bg);
  color: var(--kk-text);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-image:
    radial-gradient(ellipse 90% 55% at 10% -10%, rgba(255, 186, 176, 0.35), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 5%, rgba(255, 214, 196, 0.4), transparent 50%),
    linear-gradient(180deg, #fffbfa 0%, var(--kk-bg) 45%, #fff5f0 100%);
  background-attachment: fixed;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s var(--kk-ease), color 0.2s var(--kk-ease);
}
a:hover { opacity: 0.88; }

img { max-width: 100%; height: auto; display: block; }

/* ========== Typography ========== */
.display-title {
  font-family: var(--kk-display);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kk-accent-text); /* small uppercase text: needs >= 4.5:1 */
  margin: 0 0 0.5rem;
}
.lead-muted {
  color: var(--kk-text-secondary);
  font-size: 0.95rem;
  margin: 0;
  max-width: 36rem;
}

/* ========== Buttons ========== */
.btn {
  --bs-btn-font-weight: 560;
  --bs-btn-border-radius: var(--kk-radius-sm);
  letter-spacing: -0.01em;
  min-height: var(--kk-touch);
  padding-inline: 1.1rem;
  transition: transform 0.15s var(--kk-ease), box-shadow 0.2s var(--kk-ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.98); }

.btn-dark {
  --bs-btn-bg: var(--kk-cta-bg);
  --bs-btn-border-color: var(--kk-cta-bg);
  --bs-btn-hover-bg: var(--kk-cta-bg-hover);
  --bs-btn-hover-border-color: var(--kk-cta-bg-hover);
  --bs-btn-active-bg: var(--kk-cta-bg-active);
  --bs-btn-active-border-color: var(--kk-cta-bg-active);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  box-shadow: 0 2px 8px rgba(232, 120, 110, 0.28);
}
.btn-dark:hover {
  box-shadow: 0 6px 18px rgba(232, 120, 110, 0.35);
}

.btn-outline-dark {
  --bs-btn-color: var(--kk-ink);
  --bs-btn-border-color: var(--kk-line-strong);
  --bs-btn-hover-bg: var(--kk-cta-bg);
  --bs-btn-hover-border-color: var(--kk-cta-bg);
  --bs-btn-hover-color: #fff;
  background: var(--kk-surface);
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--kk-text-secondary);
  min-height: var(--kk-touch); /* F71: >= 44px touch target */
  border-radius: var(--kk-radius-sm);
  padding: 0.4rem 0.75rem;
  font-weight: 500;
}
.btn-ghost:hover {
  background: rgba(28, 25, 23, 0.05);
  color: var(--kk-text);
  opacity: 1;
}

/* Filled success button (admin "게시"): white text needs >= 4.5:1, which --kk-success (3.4:1) does not give. */
.btn-success {
  --bs-btn-bg: var(--kk-success-strong);
  --bs-btn-border-color: var(--kk-success-strong);
  --bs-btn-hover-bg: #24664f;
  --bs-btn-hover-border-color: #24664f;
  --bs-btn-active-bg: #1a5a44;
  --bs-btn-active-border-color: #1a5a44;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

.form-control, .form-select {
  min-height: var(--kk-touch);
  border-radius: var(--kk-radius-sm);
  border-color: var(--kk-line-strong);
  background: var(--kk-surface);
  padding: 0.55rem 0.9rem;
  font-size: 1rem; /* F72: >= 16px so iOS Safari does not zoom on focus */
  box-shadow: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--kk-gold);
  box-shadow: 0 0 0 3px var(--kk-gold-soft);
}
.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--kk-text-secondary);
  margin-bottom: 0.35rem;
}

.chip-row {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kk-touch); /* F71 */
  padding: 0.4rem 1rem;
  border-radius: var(--kk-radius-pill);
  border: 1px solid var(--kk-line-strong);
  background: var(--kk-surface);
  color: var(--kk-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 520;
  transition: all 0.2s var(--kk-ease);
}
.chip:hover {
  border-color: var(--kk-text);
  color: var(--kk-text);
}
.chip.active {
  background: var(--kk-cta-bg);
  color: #fff;
  border-color: var(--kk-cta-bg);
  box-shadow: 0 4px 14px rgba(232, 120, 110, 0.28);
}

/* Empty states */
.state-panel {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--kk-surface);
  border: 1px dashed var(--kk-line-strong);
  border-radius: var(--kk-radius);
  color: var(--kk-text-secondary);
}
.state-panel .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--kk-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kk-gold);
  font-size: 1.25rem;
}
.carousel-wrap {
  position: relative;
  background: #0c0a09;
  border-radius: calc(var(--kk-radius) + 4px);
  overflow: hidden;
  touch-action: pan-y;
  box-shadow: var(--kk-shadow);
  user-select: none;
}
.carousel-track {
  display: flex;
  transition: transform 0.4s var(--kk-ease);
  will-change: transform;
}
.carousel-slide {
  min-width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0a09;
}
.carousel-slide img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carousel-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.65rem;
  pointer-events: none;
}
.carousel-nav button {
  pointer-events: auto;
  width: var(--kk-touch); /* F71 */
  height: var(--kk-touch);
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--kk-ink);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.carousel-wrap:hover .carousel-nav button,
.carousel-nav button:focus {
  opacity: 1;
}
.carousel-nav button:disabled {
  opacity: 0 !important;
  cursor: default;
}
.carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 0.6rem 0 0;
}
/* F71: 24px hit area around the small visual dot (a 44px area per dot would overflow with 20 images). */
.carousel-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.carousel-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6d3d1;
  transform: translate(-50%, -50%);
  transition: all 0.2s;
}
.carousel-dots button.on::before {
  background: var(--kk-accent);
  width: 22px;
  border-radius: 4px;
}
.carousel-dots button.on {
  width: 30px;
}
.carousel-counter {
  text-align: center;
  font-size: 0.78rem;
  color: var(--kk-text-secondary);
  margin-top: 0.35rem;
  letter-spacing: 0.04em;
}

.alert {
  border-radius: var(--kk-radius-sm);
  border: none;
  font-size: 0.9rem;
}
/* Status alerts: dark text tokens (all >= 4.5:1 on their backgrounds, WCAG AA) plus a coloured left border, so the
   status does not rely on the light tint alone. Links inside inherit the text colour and stay underlined. */
.alert-success { background: var(--kk-success-bg); color: var(--kk-success-text); border-left: 4px solid var(--kk-success); }
.alert-danger { background: var(--kk-danger-bg); color: var(--kk-danger-text); border-left: 4px solid var(--kk-danger); }
.alert-warning { background: var(--kk-warn-bg); color: var(--kk-warn-text); border-left: 4px solid var(--kk-warn); }
.alert-info { background: var(--kk-info-bg); color: var(--kk-info-text); border-left: 4px solid var(--kk-info); }
.alert-success a,
.alert-danger a,
.alert-warning a,
.alert-info a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.alert-light { background: var(--kk-surface); border: 1px solid var(--kk-line) !important; color: var(--kk-text-secondary); }

/* Utilities */
/* Muted helper text still has to be readable (WCAG AA 4.5:1): --kk-text-secondary is 6.2:1 on #fff, 5.8:1 on the
   #fff5f0 gradient stop and 5.2:1 on the pink top gradient (~#ffe4de); --kk-muted (2.5:1) is for decoration only. */
.text-muted { color: var(--kk-text-secondary) !important; }
.container-narrow { max-width: 720px; margin: 0 auto; }

@media (max-width: 575.98px) {
  .carousel-nav button { opacity: 0.85; }
}

/* ========== Global accessibility (F71 touch targets, F72 input font size) ========== */
.btn { min-width: var(--kk-touch); }
.btn-sm { min-height: var(--kk-touch); }
.form-check { min-height: var(--kk-touch); display: flex; align-items: center; gap: 0.5rem; }
.form-check .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0; }
@media (max-width: 991.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ========== Status pages (NotFound / Error) and error boundaries ========== */
.kk-status-page {
  max-width: 560px;
  margin: 2rem auto;
}
.kk-status-title {
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  color: var(--kk-ink);
  margin: 0 0 0.5rem;
}
.kk-status-ref {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--kk-text-secondary);
}
.kk-error-boundary { margin: 1rem 0; }

/* ========== Blazor unhandled-error bar (#blazor-error-ui; the framework sets display:block) ========== */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  padding: 0.85rem 3.25rem 0.85rem 1.1rem;
  padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
  background: var(--kk-warn-bg);
  color: var(--kk-ink);
  border-top: 1px solid rgba(201, 137, 46, 0.35);
  box-shadow: 0 -4px 16px rgba(61, 47, 42, 0.12);
  font-size: 0.92rem;
}
#blazor-error-ui .reload {
  display: inline-flex;
  align-items: center;
  min-height: var(--kk-touch);
  margin-left: 0.5rem;
  font-weight: 650;
  color: var(--kk-accent-text); /* text on --kk-warn-bg: the accent is only 2.7:1 there */
  text-decoration: underline;
}
#blazor-error-ui .dismiss {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: var(--kk-touch);
  height: var(--kk-touch);
  border: none;
  background: transparent;
  color: var(--kk-text-secondary);
  font-size: 1rem;
  cursor: pointer;
}

/* ========== Reconnect modal (#components-reconnect-modal, .NET 9 state classes) ========== */
#components-reconnect-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: rgba(45, 36, 32, 0.35);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
}
.kk-reconnect-dialog {
  width: 100%;
  max-width: 360px;
  background: var(--kk-surface);
  border-radius: var(--kk-radius);
  box-shadow: var(--kk-shadow-hover);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.kk-reconnect-text {
  display: none;
  margin: 0 0 1rem;
  color: var(--kk-text);
  font-size: 0.95rem;
}
.kk-reconnect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.kk-reconnect-actions .btn { display: none; }
.kk-reconnect-spinner {
  display: none;
  width: 32px;
  height: 32px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 3px solid var(--kk-gold-soft);
  border-top-color: var(--kk-accent);
  animation: kk-spin 0.9s linear infinite;
}
@keyframes kk-spin { to { transform: rotate(360deg); } }
.components-reconnect-show .kk-reconnect-spinner,
.components-reconnect-show .kk-reconnect-text.kk-reconnect-show,
.components-reconnect-failed .kk-reconnect-text.kk-reconnect-failed,
.components-reconnect-rejected .kk-reconnect-text.kk-reconnect-rejected {
  display: block;
}
.components-reconnect-failed .kk-reconnect-actions .kk-reconnect-failed,
.components-reconnect-rejected .kk-reconnect-actions .kk-reconnect-rejected {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .kk-reconnect-spinner { animation: none; }
}