/*
 * 개미사 기본 스타일 골격.
 * 색상/타이포 토큰은 MGNC-24에서 디자인 이미지(screen-*) 기준으로 확정.
 * 시맨틱 팔레트: primary(파랑)·success(초록)·danger(빨강)·muted(회색).
 */
:root {
  /* Color — 시맨틱 팔레트 (Design.md §3) */
  --color-primary: #2563eb; /* 버튼(추가/저장/로그인), 활성 네비, 페이지네이션 active */
  --color-primary-weak: #eff6ff; /* primary hover/보조 배경, 사이드바 active, hero */
  --color-primary-strong: #1d4ed8; /* primary hover/press */
  --color-success: #22c55e; /* 카테고리 사용여부 토글 ON */
  --color-success-weak: #f0fdf4;
  --color-danger: #ef4444; /* 폼 필드 에러, 삭제(휴지통) 아이콘, 이미지 x 제거 */
  --color-danger-weak: #fef2f2; /* 에러 배너 배경 */
  --color-danger-strong: #b91c1c; /* 에러 텍스트 */
  --color-text: #1f2937;
  --color-muted: #6b7280; /* 캡션·placeholder·보조 정보 */
  --color-bg: #ffffff;
  --color-surface: #f9fafb; /* 카드/사이드바/테이블 표면 */
  --color-border: #e5e7eb;
  --color-public: #2563eb; /* 공개 뱃지 = primary(파랑) */
  --color-private: #9ca3af; /* 비공개 뱃지 / 토글 OFF track */

  /* Spacing scale (4px 기반, Design.md §5) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    'Pretendard',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Storefront ── */
.top-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 68px;
  padding: 0 var(--space-10);
  border-bottom: 1px solid var(--color-border);
}
.top-header .logo {
  font-weight: 700;
  font-size: 20px;
}
.search-bar {
  display: flex;
  flex: 1;
  max-width: 440px;
}
.search-input {
  flex: 1;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius) 0 0 var(--radius);
}
.search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-weak);
}
.search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-left: none;
  background: var(--color-bg);
  color: var(--color-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
}
.search-button:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.container {
  padding: var(--space-6) var(--space-10);
}
.main-nav {
  display: flex;
  justify-content: space-around;
  padding: 0 var(--space-10);
  border-bottom: 1px solid var(--color-border);
}
.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
}
.nav-link:hover {
  color: var(--color-text);
}
.nav-icon {
  display: inline-flex;
}
.nav-link.is-active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  font-weight: 700;
}
.breadcrumb {
  display: flex;
  gap: var(--space-2);
  color: var(--color-muted);
  margin: var(--space-4) 0;
}

/* 상품 그리드: Mobile 1 / Tablet 3 / Web 2 (Design.md §2) */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.product-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-thumb {
  aspect-ratio: 1;
  background: var(--color-surface);
}
.product-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.15s ease;
}
.product-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.product-thumb-link:hover img {
  transform: scale(1.03);
}
.product-name {
  padding: var(--space-3);
  font-size: 15px;
}
.pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-6) 0;
}
.page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}
.page.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}
/* 페이지 번호 축약(windowing)의 생략기호 — 비링크, 테두리 없이 muted 텍스트만 */
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--color-muted);
}

/* 스토어 전용 원형 페이지네이션 (Figma Web, MGNC-38). admin 사각형 페이지네이션은 그대로 둔다 */
.pagination--store .page {
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  color: var(--color-muted);
}
.pagination--store .page.is-active {
  color: #fff;
}
.pagination--store .page-arrow {
  color: var(--color-muted);
}
.pagination--store .page-ellipsis {
  min-width: 36px;
  height: 36px;
}

/* ── Admin ── */
.admin-shell {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-6) var(--space-5);
}
.sidebar .logo {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: var(--space-6);
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav-item {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}
.nav-item:hover {
  background: var(--color-primary-weak);
}
.nav-item.is-active {
  background: var(--color-primary-weak);
  color: var(--color-primary);
  font-weight: 600;
}
.admin-main {
  flex: 1;
}
.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-10);
  border-bottom: 1px solid var(--color-border);
}
.page-title {
  font-size: 24px;
  margin: 0;
}
.admin-content {
  padding: var(--space-10);
  background: var(--color-surface);
  min-height: calc(100vh - 72px);
}
.card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-8);
  background: var(--color-bg);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

/* ── Components ── */
.btn {
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-strong);
}
.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
}
.btn-ghost:hover {
  background: var(--color-surface);
}
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.table thead th {
  background: var(--color-surface);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 13px;
  vertical-align: middle;
}
.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
/* 나머지 열은 한 줄 유지(글자 세로 줄바꿈 방지), 카테고리명 열이 남는 폭을 흡수 */
.cat-table th,
.cat-table td {
  white-space: nowrap;
}
.cat-table th:nth-child(2),
.cat-table td:nth-child(2) {
  width: 100%;
  white-space: normal;
}
.badge {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 13px;
  color: #fff;
}
.badge-public {
  background: var(--color-public);
}
.badge-private {
  background: var(--color-private);
}
.toggle {
  display: inline-block;
  width: 54px;
  height: 22px;
  border-radius: 999px;
  position: relative;
  background: var(--color-private);
}
.toggle-on {
  background: var(--color-primary);
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.toggle-on .toggle-thumb {
  left: 34px;
}
.demo-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: var(--space-6) 0;
}
.form-error {
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-danger-weak);
  color: var(--color-danger-strong);
  font-size: 14px;
}

/* 공용 폼 필드 에러 (MGNC-27/29에서 컨트롤러 로직 연동) */
.input.is-invalid,
.input-sm.is-invalid {
  border-color: var(--color-danger);
}
.field-error {
  color: var(--color-danger);
  font-size: 13px;
}
.input-sm {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
}
.input-sm.num {
  width: 80px;
}
.btn-sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: 13px;
  border-radius: var(--radius);
}
.actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.toggle-btn {
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
}
.toggle-btn.is-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* 인터랙티브 토글 스위치 (사용여부, 무-JS form submit / ON=초록) */
.toggle-form {
  display: inline-block;
  margin: 0;
}
.toggle-switch {
  display: inline-block;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-private);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.toggle-switch.is-on {
  background: var(--color-success);
}
.toggle-switch .toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.toggle-switch.is-on .toggle-knob {
  left: 22px;
}

/* 액션 아이콘 버튼 (수정=연필 / 삭제=빨간 휴지통) */
.actions form {
  margin: 0;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.icon-btn:hover {
  background: var(--color-surface);
}
.cat-name {
  font-weight: 600;
}
.icon-danger {
  color: var(--color-danger);
}
.icon-danger:hover {
  background: var(--color-danger-weak);
}
#add-name:target {
  outline: 2px solid var(--color-primary);
}
.add-row td {
  background: var(--color-surface);
}
.back-link {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--color-muted);
  font-size: 14px;
}
.drilldown {
  color: inherit;
  text-decoration: none;
}
.drilldown:hover {
  text-decoration: underline;
}
.search-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  max-width: 360px;
}
.empty {
  text-align: center;
  color: var(--color-muted);
  padding: var(--space-8);
}
.product-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 720px;
}
.form-section {
  border: none;
  padding: 0;
  margin: 0;
}
.form-section-title {
  font-size: 18px;
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-5);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 768px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 44px;
}
.toggle-label {
  font-size: 14px;
  color: var(--color-muted);
}

/* 폼 내부 체크박스 토글 (상품 사용여부 = primary 파랑, 순수 CSS) */
.toggle-check {
  display: inline-flex;
  cursor: pointer;
}
.toggle-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-check input:checked + .toggle-switch {
  background: var(--color-primary);
}
.toggle-check input:checked + .toggle-switch .toggle-knob {
  left: 22px;
}
.toggle-check input:focus-visible + .toggle-switch {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 이미지 드래그&드롭 영역 */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-align: center;
  cursor: pointer;
}
.dropzone.is-drag {
  border-color: var(--color-primary);
  background: var(--color-primary-weak);
}
.dropzone-icon {
  color: var(--color-primary);
}
.dropzone-text {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

/* 이미지 썸네일 (기존/미리보기 공통) + x 제거 */
.thumb {
  position: relative;
  width: 120px;
  height: 120px;
}
.thumb img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.thumb-x,
.thumb-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-danger);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.thumb-remove input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.thumb-remove input:checked + span {
  outline: 2px solid var(--color-danger-strong);
  border-radius: 50%;
}
.hint {
  font-size: 12px;
  color: var(--color-muted);
}
.image-list {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.image-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 13px;
}
.image-item img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ── Storefront hero (매장 배너 이미지, 풀폭) ── */
.hero {
  text-align: center;
}
.hero-banner {
  display: block;
  width: 100%;
  height: auto;
}
.search-result {
  margin-top: var(--space-4);
  font-weight: 600;
}

/* 상품 이미지 라이트박스 모달 (MGNC-40) */
.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.85);
  z-index: 1000;
}
.lightbox[aria-hidden='true'] {
  display: none;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
}
.lightbox-close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* 반응형 (Mobile) */
@media (max-width: 768px) {
  .top-header {
    height: 60px;
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  /* 좁은 화면에서 검색 input이 줄어들 수 있게 하고, 돋보기 버튼은 정사각형을 유지 */
  .search-bar {
    min-width: 0;
  }
  .search-input {
    min-width: 0;
  }
  .search-button {
    flex-shrink: 0;
  }
  .container {
    padding: var(--space-4);
  }
  .main-nav {
    justify-content: flex-start;
    padding: 0 var(--space-4);
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-link {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-2);
  }
}

/* ── Storefront 서브 카테고리 네비 (Web/Tablet 탭 ↔ Mobile pill) ── */
.sub-nav {
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-10);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.sub-item {
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  white-space: nowrap;
}
.sub-item:hover {
  color: var(--color-primary);
}
.sub-item.is-active {
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
@media (max-width: 768px) {
  /* 모바일: 서브네비를 세로로 쌓아 라벨이 잘리지 않게 한다 */
  .sub-nav {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3) var(--space-4);
    border-bottom: none;
    overflow-x: visible;
  }
  .sub-item {
    white-space: normal;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
  }
  .sub-item:hover {
    background: var(--color-primary-weak);
    color: var(--color-primary);
  }
  .sub-item.is-active {
    background: var(--color-primary);
    color: #fff;
    border-bottom: none;
  }
  .sub-item.is-active:hover {
    background: var(--color-primary);
    color: #fff;
  }
}
.store-breadcrumb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-5) var(--space-10) var(--space-6);
  color: var(--color-text);
}
.store-breadcrumb-item {
  font-weight: 700;
}
.store-breadcrumb-sep {
  margin: 0 var(--space-2);
  color: var(--color-border);
}
.store-breadcrumb-count {
  color: var(--color-muted);
}
@media (max-width: 768px) {
  .store-breadcrumb {
    padding: var(--space-4);
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .store-breadcrumb-count {
    white-space: nowrap;
  }
}

/* 원형 페이지네이션: 모바일에서 축약된 번호+화살표가 넘치면 줄바꿈, 원 크기를 살짝 줄여 중앙 정렬 유지 */
@media (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .pagination--store .page,
  .pagination--store .page-arrow {
    min-width: 32px;
    height: 32px;
  }
  .pagination--store .page-ellipsis {
    min-width: 32px;
    height: 32px;
  }
}

/* 키보드 포커스 표시(공통) — 기존 .toggle-check input:focus-visible 패턴과 통일 */
.nav-link:focus-visible,
.sub-item:focus-visible,
.page:focus-visible,
.btn:focus-visible,
.btn-sm:focus-visible,
.icon-btn:focus-visible,
.toggle-btn:focus-visible,
.toggle-switch:focus-visible,
.product-thumb-link:focus-visible,
.search-button:focus-visible,
.input:focus-visible,
.input-sm:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Auth ── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
}
.login-card {
  width: 400px;
  padding: var(--space-10);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.login-title {
  text-align: center;
  margin: 0;
}
.login-sub {
  text-align: center;
  color: var(--color-muted);
  margin: var(--space-2) 0 var(--space-8);
}
.login-error {
  padding: var(--space-3);
  margin-bottom: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-danger-weak);
  color: var(--color-danger-strong);
  font-size: 14px;
  text-align: center;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field-label {
  font-size: 14px;
}
.input {
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}