/* =========================================================================
   99market Design v2.0 - Eco Minimal + Mobile Readability
   ---------------------------------------------------------
   수정 원칙 (PRINCIPLES):
   - CSS 변수 오버라이드 방식만 사용 (기존 셀렉터 구조 유지)
   - 기존 JS / ID / class / 이벤트 핸들러 무수정 (CSS only)
   - 기존 레이아웃 구조 유지 (Flexbox/Grid 유지)
   - 글자 시스템을 확대하여 스마트폰 시인성 강화
   - 버튼/입력필드 최소 48px (Apple HIG / Material 준수)
   - 고대비 팔레트 (WCAG AA 이상)

   롤백 방법 (ROLLBACK):
   1) 간단: 각 HTML의 </head> 직전 <link ... design-v2.css> 1줄 제거
   2) 완전: static/*.html.backup-20260422 파일로 원상복구

   작성일: 2026-04-22  /  버전: v2.0
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. 루트 CSS 변수 오버라이드 (기본 테마)
   ------------------------------------------------------------------------- */
:root {
  /* === 색상 팔레트 : Eco Forest + Warm Cream === */
  --primary:          #2d5f3f !important;  /* Forest Green (기존 #1D3557) */
  --accent:           #4a8a5e !important;  /* Eco Green (기존 #E63946) */
  --accent-light:     #e7f3ed !important;  /* 연한 에코 (기존 #ffebee) */
  --bg:               #fafaf7 !important;  /* Off-White (기존 #ffffff) */
  --card:             #ffffff !important;
  --border:           #e8e5dd !important;  /* Warm Border (기존 #e0e0e0) */
  --text:             #1a1a1a !important;
  --muted:            #6b6b60 !important;  /* 고대비 강화 (기존 #888) */
  --success:          #4a8a5e !important;
  --danger:           #c94a4a !important;  /* 낮은 채도 (기존 #e05a5a) */
  --warning:          #d4a248 !important;

  /* === 헤더 · 탭 === */
  --header-bg:        #2d5f3f !important;
  --header-text:      #ffffff !important;
  --tab-bg:           #ffffff !important;
  --tab-active:       #2d5f3f !important;
  --chat-ai-bg:       #f4f1eb !important;  /* Warm Cream */
  --chat-user-bg:     #2d5f3f !important;
  --input-bg:         #ffffff !important;

  /* === 폰트 크기 확대 (스마트폰 시인성) === */
  --font-xs:          14px !important;     /* 13 → 14 */
  --font-sm:          15px !important;     /* 14 → 15 */
  --font-md:          17px !important;     /* 16 → 17 */
  --font-lg:          19px !important;     /* 18 → 19 */
  --font-xl:          22px !important;     /* 20 → 22 */
  --font-xxl:         26px !important;     /* 24 → 26 */

  /* === 둥근 모서리 (소프트 에코 톤) === */
  --radius:           14px !important;

  /* === 그림자 (가벼운 레이어) === */
  --shadow-sm: 0 1px 3px rgba(30, 60, 40, 0.05) !important;
  --shadow-md: 0 4px 16px rgba(30, 60, 40, 0.08) !important;
  --shadow-lg: 0 8px 28px rgba(30, 60, 40, 0.12) !important;
}

/* admin-dashboard.html 의 다중 테마 전용: data-theme 미지정 / minimal 시에만 적용 */
[data-theme="minimal"] {
  --primary:      #2d5f3f !important;
  --accent:       #4a8a5e !important;
  --accent2:      #8b7355 !important;
  --bg:           #fafaf7 !important;
  --card:         #ffffff !important;
  --border:       #e8e5dd !important;
  --text:         #1a1a1a !important;
  --muted:        #6b6b60 !important;
  --success:      #4a8a5e !important;
  --warning:      #d4a248 !important;
  --danger:       #c94a4a !important;
  --info:         #4a7a8a !important;
  --master:       #d46a2a !important;
  --sidebar-bg:   #2d5f3f !important;
  --sidebar-text: #ffffff !important;
  --login-bg:     linear-gradient(135deg,#2d5f3f 0%,#4a8a5e 100%) !important;
}

/* -------------------------------------------------------------------------
   2. 스마트폰 시인성 강화 - 전역 타이포그래피
   ------------------------------------------------------------------------- */
body {
  font-size: 16px !important;      /* 기본 폰트 크기 상향 */
  line-height: 1.65 !important;    /* 행간 확보 */
  letter-spacing: -0.15px !important; /* 한글 최적화 */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* -------------------------------------------------------------------------
   3. 버튼 시스템 - 터치 타겟 48px 준수 (Apple HIG / Material)
   ------------------------------------------------------------------------- */
button,
.btn,
input[type="button"],
input[type="submit"] {
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -0.2px !important;
  transition: transform 0.1s ease, box-shadow 0.15s ease !important;
}
button:active,
.btn:active {
  transform: scale(0.98);
}

/* 작은 버튼 예외 (테이블 행동 등, 기존 .btn-sm / .btn-xs 우선) */
.btn-sm, button.btn-sm,
.btn-xs, button.btn-xs {
  min-height: 36px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* -------------------------------------------------------------------------
   4. 입력 필드 시스템 - 48px 높이 + 고대비 테두리
   ------------------------------------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input:not([type]),
textarea,
select {
  min-height: 48px;
  border-radius: 12px !important;
  border: 1.5px solid var(--border) !important;
  padding: 12px 14px !important;
  font-size: 16px !important;     /* iOS 자동줌 방지용 16px 이상 */
  line-height: 1.5 !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
textarea {
  min-height: 88px;
  resize: vertical;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: #4a8a5e !important;
  box-shadow: 0 0 0 3px rgba(74, 138, 94, 0.15) !important;
}

/* -------------------------------------------------------------------------
   5. 카드 / 패널 - 부드러운 모서리 + 여백
   ------------------------------------------------------------------------- */
.card,
.panel,
.section,
.product-card,
.order-card {
  border-radius: 16px !important;
  border-color: var(--border) !important;
}

/* -------------------------------------------------------------------------
   6. 상태 배지 / 토큰 (admin + 고객 공통) - 직관성 강화
   ------------------------------------------------------------------------- */
.badge,
.status-badge,
.tag,
.chip {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}

/* -------------------------------------------------------------------------
   7. 스크롤바 - 얇게 + 에코 톤
   ------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
  background: rgba(45, 95, 63, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 95, 63, 0.45);
}

/* -------------------------------------------------------------------------
   8. 링크 - 에코 그린 기조
   ------------------------------------------------------------------------- */
a { color: #2d5f3f; text-decoration-color: rgba(45, 95, 63, 0.3); }
a:hover { color: #4a8a5e; }

/* -------------------------------------------------------------------------
   9. 탭 / 네비게이션 active 상태 - 고대비
   ------------------------------------------------------------------------- */
.tab.active,
.nav-item.active,
[aria-selected="true"] {
  color: #2d5f3f !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------------------
   10. 장바구니 / 주문 합계 박스 - 강조
   ------------------------------------------------------------------------- */
.total-row,
.price-total,
.summary-total {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* -------------------------------------------------------------------------
   11. 헤더 - Forest Green 고정 (브랜드 일관성)
   ------------------------------------------------------------------------- */
.header {
  background: linear-gradient(135deg, #2d5f3f 0%, #3a7550 100%) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   12. 라이브 배지 - 상태 직관성 유지 (빨강은 LIVE로서 유지, 단 채도 낮춤)
   ------------------------------------------------------------------------- */
.live-badge {
  background: linear-gradient(135deg, #c94a4a, #e05a5a) !important;
  box-shadow: 0 2px 10px rgba(201, 74, 74, 0.45) !important;
}

/* -------------------------------------------------------------------------
   13. admin 사이드바 - Forest Green 톤
   ------------------------------------------------------------------------- */
.sidebar,
.side-nav,
[class*="sidebar"] {
  background: #2d5f3f !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   14. 모바일 뷰포트 (375px 이하) - 추가 여백 / 시인성
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  body {
    font-size: 16px !important;
  }
  button, .btn {
    font-size: 15px !important;
  }
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
}

/* -------------------------------------------------------------------------
   15. 접근성 - focus-visible 키보드 내비게이션 강화
   ------------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid #4a8a5e !important;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   16. 에코 액센트 - CTA 버튼 (primary 계열) 강조
   ------------------------------------------------------------------------- */
.btn-primary,
button.primary,
[class*="primary-btn"],
.submit-btn,
.cta-btn {
  background: linear-gradient(135deg, #2d5f3f 0%, #4a8a5e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(45, 95, 63, 0.25) !important;
  border: none !important;
}
.btn-primary:hover,
button.primary:hover {
  box-shadow: 0 6px 18px rgba(45, 95, 63, 0.35) !important;
}

/* -------------------------------------------------------------------------
   17. 위험 행동 버튼 - 낮은 채도 (덜 공격적)
   ------------------------------------------------------------------------- */
.btn-danger,
button.danger,
[class*="danger"] {
  background: #c94a4a !important;
  color: #ffffff !important;
}

/* END of design-v2.css =================================================== */