/* ==========================================================================
   떡사세요 — 백설기 화이트 디자인 시스템
   app.css v1.0.0
   모바일 퍼스트 (375px → 768px → 1025px → 1280px)
   클래스 prefix: ts-
   ========================================================================== */

/* ==========================================================================
   1. CSS 변수 (디자인 토큰)
   ========================================================================== */
:root {
  /* 컬러 팔레트 — 백설기 화이트 */
  --ts-bg:          #FAFAF8;
  --ts-bg-cream:    #F5F0EB;
  --ts-beige:       #E8DDD3;
  --ts-red:         #C4736E;
  --ts-red-dark:    #A85E59;
  --ts-red-light:   #D4928D;
  --ts-red-pale:    #F5E8E7;
  --ts-brown:       #A89279;
  --ts-brown-light: #C4B09A;
  --ts-green:       #8FA978;
  --ts-green-light: #A8C093;
  --ts-text:        #3D3532;
  --ts-text-sub:    #7A7067;
  --ts-text-hint:   #B0A89E;
  --ts-white:       #FFFFFF;
  --ts-border:      #E8DDD3;
  --ts-border-light:#F0EAE3;

  /* 그림자 */
  --ts-shadow-sm:   0 1px 3px rgba(61,53,50,0.08);
  --ts-shadow:      0 2px 8px rgba(61,53,50,0.10);
  --ts-shadow-md:   0 4px 16px rgba(61,53,50,0.12);
  --ts-shadow-lg:   0 8px 32px rgba(61,53,50,0.14);
  --ts-shadow-card: 0 2px 12px rgba(61,53,50,0.08);

  /* 타이포그래피 */
  --ts-font:        'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ts-font-size-xs:   11px;
  --ts-font-size-sm:   13px;
  --ts-font-size-base: 15px;
  --ts-font-size-md:   16px;
  --ts-font-size-lg:   18px;
  --ts-font-size-xl:   20px;
  --ts-font-size-2xl:  24px;
  --ts-font-size-3xl:  28px;

  /* 간격 */
  --ts-space-1:  4px;
  --ts-space-2:  8px;
  --ts-space-3:  12px;
  --ts-space-4:  16px;
  --ts-space-5:  20px;
  --ts-space-6:  24px;
  --ts-space-8:  32px;
  --ts-space-10: 40px;
  --ts-space-12: 48px;

  /* 반경 */
  --ts-radius-sm:  6px;
  --ts-radius:     10px;
  --ts-radius-md:  14px;
  --ts-radius-lg:  18px;
  --ts-radius-xl:  24px;
  --ts-radius-full: 9999px;

  /* 트랜지션 */
  --ts-transition: 0.18s ease;
  --ts-transition-md: 0.25s ease;

  /* 레이아웃 */
  --ts-container:  1200px;
  --ts-header-h:   68px;
  --ts-mobile-nav: 60px;
}

/* ==========================================================================
   2. 웹폰트 — Pretendard (로컬 로드)
   ========================================================================== */
@font-face { font-family: 'Pretendard'; src: url('/assets/font/pretendard/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/font/pretendard/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/font/pretendard/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('/assets/font/pretendard/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ==========================================================================
   3. 리셋 & 공통 기반
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--ts-font-size-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--ts-font); background: var(--ts-bg); color: var(--ts-text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ts-red); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: none; border-top: 1px solid var(--ts-border-light); margin: var(--ts-space-6) 0; }

/* 접근성 */
.ts-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:focus-visible { outline: 2px solid var(--ts-red); outline-offset: 2px; border-radius: var(--ts-radius-sm); }

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ts-bg-cream); }
::-webkit-scrollbar-thumb { background: var(--ts-beige); border-radius: var(--ts-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ts-brown-light); }

/* ==========================================================================
   4. 타이포그래피
   ========================================================================== */
.ts-h1 { font-size: var(--ts-font-size-2xl); font-weight: 700; line-height: 1.3; color: var(--ts-text); }
.ts-h2 { font-size: var(--ts-font-size-xl); font-weight: 700; line-height: 1.35; color: var(--ts-text); }
.ts-h3 { font-size: var(--ts-font-size-lg); font-weight: 600; line-height: 1.4; color: var(--ts-text); }
.ts-h4 { font-size: var(--ts-font-size-md); font-weight: 600; line-height: 1.45; color: var(--ts-text); }
.ts-body { font-size: var(--ts-font-size-base); font-weight: 400; line-height: 1.6; color: var(--ts-text); }
.ts-body-sm { font-size: var(--ts-font-size-sm); font-weight: 400; line-height: 1.55; color: var(--ts-text-sub); }
.ts-caption { font-size: var(--ts-font-size-xs); font-weight: 400; line-height: 1.5; color: var(--ts-text-hint); }
.ts-label { font-size: var(--ts-font-size-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--ts-text); }
.ts-text-primary { color: var(--ts-red); }
.ts-text-sub { color: var(--ts-text-sub); }
.ts-text-hint { color: var(--ts-text-hint); }
.ts-text-center { text-align: center; }
.ts-text-right { text-align: right; }
.ts-font-bold { font-weight: 700; }
.ts-font-semibold { font-weight: 600; }
.ts-font-medium { font-weight: 500; }
.ts-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ts-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 768px) {
  .ts-h1 { font-size: var(--ts-font-size-3xl); }
  .ts-h2 { font-size: var(--ts-font-size-2xl); }
  .ts-h3 { font-size: var(--ts-font-size-xl); }
}

/* ==========================================================================
   5. 레이아웃 — 컨테이너 & 그리드
   ========================================================================== */
.ts-container { width: 100%; max-width: var(--ts-container); margin: 0 auto; padding: 0 var(--ts-space-4); }
.ts-row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--ts-space-3)); }
.ts-col { padding: 0 var(--ts-space-3); flex: 1 1 0%; min-width: 0; }
.ts-col-auto { flex: 0 0 auto; padding: 0 var(--ts-space-3); }
.ts-col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 var(--ts-space-3); }
.ts-col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 var(--ts-space-3); }
.ts-grid { display: grid; gap: var(--ts-space-4); }
.ts-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ts-grid-1 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .ts-container { padding: 0 var(--ts-space-6); }
  .ts-grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .ts-grid-3-md { grid-template-columns: repeat(3, 1fr); }
  .ts-grid-4-md { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1025px) {
  .ts-grid-3-lg { grid-template-columns: repeat(3, 1fr); }
  .ts-grid-4-lg { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   6. 플렉스 유틸리티
   ========================================================================== */
.ts-flex { display: flex; }
.ts-flex-col { flex-direction: column; }
.ts-flex-center { align-items: center; justify-content: center; }
.ts-flex-between { align-items: center; justify-content: space-between; }
.ts-flex-start { align-items: center; justify-content: flex-start; }
.ts-flex-end { align-items: center; justify-content: flex-end; }
.ts-align-center { align-items: center; }
.ts-gap-1 { gap: var(--ts-space-1); }
.ts-gap-2 { gap: var(--ts-space-2); }
.ts-gap-3 { gap: var(--ts-space-3); }
.ts-gap-4 { gap: var(--ts-space-4); }
.ts-gap-6 { gap: var(--ts-space-6); }
.ts-shrink-0 { flex-shrink: 0; }
.ts-grow { flex-grow: 1; }
.ts-wrap { flex-wrap: wrap; }

/* ==========================================================================
   7. 간격 유틸리티
   ========================================================================== */
.ts-mt-1 { margin-top: var(--ts-space-1); }
.ts-mt-2 { margin-top: var(--ts-space-2); }
.ts-mt-3 { margin-top: var(--ts-space-3); }
.ts-mt-4 { margin-top: var(--ts-space-4); }
.ts-mt-6 { margin-top: var(--ts-space-6); }
.ts-mt-8 { margin-top: var(--ts-space-8); }
.ts-mb-2 { margin-bottom: var(--ts-space-2); }
.ts-mb-3 { margin-bottom: var(--ts-space-3); }
.ts-mb-4 { margin-bottom: var(--ts-space-4); }
.ts-mb-6 { margin-bottom: var(--ts-space-6); }
.ts-mb-8 { margin-bottom: var(--ts-space-8); }
.ts-mx-auto { margin-left: auto; margin-right: auto; }
.ts-p-2 { padding: var(--ts-space-2); }
.ts-p-3 { padding: var(--ts-space-3); }
.ts-p-4 { padding: var(--ts-space-4); }
.ts-p-6 { padding: var(--ts-space-6); }
.ts-py-2 { padding-top: var(--ts-space-2); padding-bottom: var(--ts-space-2); }
.ts-py-3 { padding-top: var(--ts-space-3); padding-bottom: var(--ts-space-3); }
.ts-py-4 { padding-top: var(--ts-space-4); padding-bottom: var(--ts-space-4); }
.ts-py-6 { padding-top: var(--ts-space-6); padding-bottom: var(--ts-space-6); }
.ts-py-8 { padding-top: var(--ts-space-8); padding-bottom: var(--ts-space-8); }
.ts-py-10 { padding-top: var(--ts-space-10); padding-bottom: var(--ts-space-10); }
.ts-px-4 { padding-left: var(--ts-space-4); padding-right: var(--ts-space-4); }

/* ==========================================================================
   8. 버튼
   ========================================================================== */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ts-space-2); height: 44px; padding: 0 var(--ts-space-5); border-radius: var(--ts-radius); font-size: var(--ts-font-size-base); font-weight: 600; line-height: 1; transition: background var(--ts-transition), color var(--ts-transition), border-color var(--ts-transition), box-shadow var(--ts-transition); white-space: nowrap; cursor: pointer; }
.ts-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ts-btn-sm { height: 36px; padding: 0 var(--ts-space-4); font-size: var(--ts-font-size-sm); border-radius: var(--ts-radius-sm); }
.ts-btn-lg { height: 52px; padding: 0 var(--ts-space-8); font-size: var(--ts-font-size-md); }
.ts-btn-full { width: 100%; }
.ts-btn-icon { width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
.ts-btn-icon-sm { width: 36px; height: 36px; padding: 0; flex-shrink: 0; }

/* Primary — 팥 레드 */
.ts-btn-primary { background: var(--ts-red); color: var(--ts-white); border: 1.5px solid transparent; }
.ts-btn-primary:hover { background: var(--ts-red-dark); color: var(--ts-white); box-shadow: var(--ts-shadow-md); }
.ts-btn-primary:active { background: var(--ts-red-dark); transform: translateY(1px); }

/* Secondary — 베이지 */
.ts-btn-secondary { background: var(--ts-beige); color: var(--ts-text); border: 1.5px solid transparent; }
.ts-btn-secondary:hover { background: var(--ts-brown-light); color: var(--ts-text); }

/* Outline — 테두리 */
.ts-btn-outline { background: transparent; color: var(--ts-red); border: 1.5px solid var(--ts-red); }
.ts-btn-outline:hover { background: var(--ts-red-pale); }

/* Ghost — 투명 */
.ts-btn-ghost { background: transparent; color: var(--ts-text-sub); border: 1.5px solid var(--ts-border); }
.ts-btn-ghost:hover { background: var(--ts-bg-cream); border-color: var(--ts-beige); color: var(--ts-text); }

/* White */
.ts-btn-white { background: var(--ts-white); color: var(--ts-text); border: 1.5px solid var(--ts-border); }
.ts-btn-white:hover { background: var(--ts-bg-cream); }

/* ==========================================================================
   9. 폼 요소
   ========================================================================== */
.ts-form-group { display: flex; flex-direction: column; gap: var(--ts-space-2); }
.ts-form-label { font-size: var(--ts-font-size-sm); font-weight: 600; color: var(--ts-text); }
.ts-form-label.required::after { content: ' *'; color: var(--ts-red); }
.ts-form-hint { font-size: var(--ts-font-size-xs); color: var(--ts-text-hint); }
.ts-form-error { font-size: var(--ts-font-size-xs); color: var(--ts-red); }

.ts-input { width: 100%; height: 46px; padding: 0 var(--ts-space-4); background: var(--ts-white); border: 1.5px solid var(--ts-border); border-radius: var(--ts-radius); font-size: var(--ts-font-size-base); color: var(--ts-text); transition: border-color var(--ts-transition), box-shadow var(--ts-transition); }
.ts-input::placeholder { color: var(--ts-text-hint); }
.ts-input:focus { outline: none; border-color: var(--ts-red); box-shadow: 0 0 0 3px var(--ts-red-pale); }
.ts-input.error { border-color: var(--ts-red); }
.ts-input:disabled { background: var(--ts-bg-cream); color: var(--ts-text-hint); cursor: not-allowed; }

.ts-textarea { width: 100%; padding: var(--ts-space-3) var(--ts-space-4); background: var(--ts-white); border: 1.5px solid var(--ts-border); border-radius: var(--ts-radius); font-size: var(--ts-font-size-base); color: var(--ts-text); resize: vertical; min-height: 100px; transition: border-color var(--ts-transition), box-shadow var(--ts-transition); }
.ts-textarea::placeholder { color: var(--ts-text-hint); }
.ts-textarea:focus { outline: none; border-color: var(--ts-red); box-shadow: 0 0 0 3px var(--ts-red-pale); }

.ts-select { width: 100%; height: 46px; padding: 0 var(--ts-space-8) 0 var(--ts-space-4); background: var(--ts-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7067' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1.5px solid var(--ts-border); border-radius: var(--ts-radius); font-size: var(--ts-font-size-base); color: var(--ts-text); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color var(--ts-transition); }
.ts-select:focus { outline: none; border-color: var(--ts-red); box-shadow: 0 0 0 3px var(--ts-red-pale); }

/* 체크박스 & 라디오 */
.ts-check { display: flex; align-items: center; gap: var(--ts-space-2); cursor: pointer; }
.ts-check input[type="checkbox"], .ts-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--ts-red); cursor: pointer; flex-shrink: 0; }
.ts-check span { font-size: var(--ts-font-size-base); color: var(--ts-text); }

/* 검색 인풋 래퍼 */
.ts-search-wrap { position: relative; display: flex; align-items: center; }
.ts-search-wrap .ts-input { padding-right: 44px; }
.ts-search-wrap .ts-search-btn { position: absolute; right: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; color: var(--ts-text-sub); }
.ts-search-wrap .ts-search-btn:hover { color: var(--ts-red); }

/* ==========================================================================
   10. 카드
   ========================================================================== */
.ts-card { background: var(--ts-white); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-card); overflow: hidden; transition: box-shadow var(--ts-transition-md), transform var(--ts-transition-md); }
.ts-card:hover { box-shadow: var(--ts-shadow-md); transform: translateY(-2px); }
.ts-card-flat { background: var(--ts-white); border-radius: var(--ts-radius-md); border: 1px solid var(--ts-border-light); overflow: hidden; }
.ts-card-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--ts-bg-cream); }
.ts-card-img-sq { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--ts-bg-cream); }
.ts-card-body { padding: var(--ts-space-3) var(--ts-space-4); }
.ts-card-footer { padding: var(--ts-space-3) var(--ts-space-4); border-top: 1px solid var(--ts-border-light); }

/* 가게 카드 */
.ts-store-card { background: var(--ts-white); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-card); overflow: hidden; cursor: pointer; transition: box-shadow var(--ts-transition-md), transform var(--ts-transition-md); }
.ts-store-card:hover { box-shadow: var(--ts-shadow-md); transform: translateY(-2px); }
.ts-store-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--ts-bg-cream); position: relative; }
.ts-store-card-body { padding: var(--ts-space-3) var(--ts-space-4) var(--ts-space-4); }
.ts-store-card-name { font-size: var(--ts-font-size-md); font-weight: 700; color: var(--ts-text); margin-bottom: var(--ts-space-1); }
.ts-store-card-meta { display: flex; align-items: center; gap: var(--ts-space-3); font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); }
.ts-store-card-tags { display: flex; gap: var(--ts-space-2); margin-top: var(--ts-space-2); flex-wrap: wrap; }

/* 메뉴 카드 */
.ts-menu-card { display: flex; align-items: flex-start; gap: var(--ts-space-3); padding: var(--ts-space-4); background: var(--ts-white); border-radius: var(--ts-radius); border: 1px solid var(--ts-border-light); cursor: pointer; transition: border-color var(--ts-transition), box-shadow var(--ts-transition); }
.ts-menu-card:hover { border-color: var(--ts-red-light); box-shadow: var(--ts-shadow-sm); }
.ts-menu-card-img { width: 80px; height: 80px; border-radius: var(--ts-radius-sm); object-fit: cover; flex-shrink: 0; background: var(--ts-bg-cream); }
.ts-menu-card-info { flex: 1; min-width: 0; }
.ts-menu-card-name { font-size: var(--ts-font-size-base); font-weight: 600; color: var(--ts-text); margin-bottom: var(--ts-space-1); }
.ts-menu-card-desc { font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); margin-bottom: var(--ts-space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-menu-card-price { font-size: var(--ts-font-size-md); font-weight: 700; color: var(--ts-text); }

/* ==========================================================================
   11. 배지 & 태그
   ========================================================================== */
.ts-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--ts-space-2); border-radius: var(--ts-radius-full); font-size: 10px; font-weight: 600; white-space: nowrap; }
.ts-badge-primary { background: var(--ts-red); color: var(--ts-white); }
.ts-badge-soft { background: var(--ts-red-pale); color: var(--ts-red); }
.ts-badge-gray { background: var(--ts-bg-cream); color: var(--ts-text-sub); }
.ts-badge-green { background: #EDF4E8; color: var(--ts-green); }
.ts-badge-brown { background: #F2EDE7; color: var(--ts-brown); }
.ts-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--ts-space-3); background: var(--ts-bg-cream); color: var(--ts-text-sub); border-radius: var(--ts-radius-full); font-size: var(--ts-font-size-xs); font-weight: 500; }
.ts-tag-outline { background: transparent; border: 1px solid var(--ts-border); color: var(--ts-text-sub); }
.ts-tag-active { background: var(--ts-red-pale); color: var(--ts-red); border-color: var(--ts-red-light); }

/* 품절 오버레이 */
.ts-soldout-overlay { position: absolute; inset: 0; background: rgba(245,240,235,0.80); display: flex; align-items: center; justify-content: center; }
.ts-soldout-label { background: var(--ts-text); color: var(--ts-white); font-size: var(--ts-font-size-sm); font-weight: 700; padding: var(--ts-space-1) var(--ts-space-3); border-radius: var(--ts-radius-full); }

/* ==========================================================================
   12. 평점 & 별
   ========================================================================== */
.ts-stars { display: inline-flex; align-items: center; gap: 1px; color: #F5B63A; font-size: 14px; line-height: 1; }
.ts-stars .empty { color: var(--ts-beige); }
.ts-rating { display: inline-flex; align-items: center; gap: var(--ts-space-1); }
.ts-rating-score { font-size: var(--ts-font-size-sm); font-weight: 700; color: var(--ts-text); }
.ts-rating-count { font-size: var(--ts-font-size-xs); color: var(--ts-text-hint); }

/* ==========================================================================
   13. 이미지 유틸
   ========================================================================== */
.ts-img-cover { width: 100%; height: 100%; object-fit: cover; }
.ts-img-contain { width: 100%; height: 100%; object-fit: contain; }
.ts-img-circle { border-radius: 50%; }
.ts-img-rounded { border-radius: var(--ts-radius); }
.ts-ratio-16-9 { aspect-ratio: 16/9; overflow: hidden; }
.ts-ratio-4-3 { aspect-ratio: 4/3; overflow: hidden; }
.ts-ratio-1-1 { aspect-ratio: 1/1; overflow: hidden; }
.ts-img-placeholder { background: var(--ts-bg-cream); display: flex; align-items: center; justify-content: center; color: var(--ts-text-hint); }

/* ==========================================================================
   14. 헤더
   ========================================================================== */
.ts-header { position: sticky; top: 0; z-index: 100; background: var(--ts-white); border-bottom: 1px solid var(--ts-border-light); height: var(--ts-header-h); padding-top: 12px; }
.ts-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ts-space-3); }
.ts-logo { display: flex; align-items: center; gap: var(--ts-space-2); flex-shrink: 0; }
.ts-logo-text { font-size: var(--ts-font-size-lg); font-weight: 700; color: var(--ts-red); letter-spacing: -0.02em; }
.ts-logo-sub { font-size: var(--ts-font-size-xs); color: var(--ts-text-hint); font-weight: 400; }
.ts-header-actions { display: flex; align-items: center; gap: var(--ts-space-2); flex-shrink: 0; }
.ts-header-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ts-radius-sm); color: var(--ts-text); transition: background var(--ts-transition), color var(--ts-transition); }
.ts-header-btn:hover { background: var(--ts-bg-cream); color: var(--ts-red); }

/* PC 전용 헤더 검색 */
.ts-header-search { flex: 1; max-width: 400px; display: none; }
.ts-header-nav { display: none; align-items: center; gap: var(--ts-space-1); }
.ts-header-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--ts-space-3); font-size: var(--ts-font-size-sm); font-weight: 500; color: var(--ts-text-sub); border-radius: var(--ts-radius-sm); transition: background var(--ts-transition), color var(--ts-transition); white-space: nowrap; }
.ts-header-nav a:hover { background: var(--ts-bg-cream); color: var(--ts-red); }
.ts-header-nav a.active { color: var(--ts-red); font-weight: 600; }

/* PC 커뮤니티 드롭다운 */
.ts-header-nav .ts-dropdown { position: relative; }
.ts-dropdown-toggle { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.ts-dropdown-toggle .ts-caret { width: 10px; height: 10px; transition: transform var(--ts-transition); flex-shrink: 0; }
.ts-dropdown.open .ts-dropdown-toggle .ts-caret,
.ts-dropdown:hover .ts-dropdown-toggle .ts-caret { transform: rotate(180deg); }
.ts-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 170px; background: var(--ts-white); border: 1px solid var(--ts-border-light); border-radius: var(--ts-radius); box-shadow: 0 8px 24px rgba(61,53,50,0.12); z-index: 110; padding: var(--ts-space-2) 0; }
.ts-dropdown-menu::before { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--ts-border-light); }
.ts-dropdown-menu::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--ts-white); }
.ts-dropdown-item { display: flex; align-items: center; padding: 10px var(--ts-space-5); font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); white-space: nowrap; transition: background var(--ts-transition), color var(--ts-transition); height: auto !important; border-radius: 0 !important; }
.ts-dropdown-item:hover { background: var(--ts-bg-cream); color: var(--ts-red); }
.ts-dropdown-item.active { color: var(--ts-red); font-weight: 600; background: var(--ts-bg-cream); }
@keyframes tsDropdownIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.ts-dropdown:hover .ts-dropdown-menu,
.ts-dropdown.open .ts-dropdown-menu { display: block; animation: tsDropdownIn 0.14s ease; }

/* 모바일 검색바 (헤더 아래) */
.ts-header-search-mobile { background: var(--ts-white); border-bottom: 1px solid var(--ts-border-light); padding: var(--ts-space-2) var(--ts-space-4); }

/* 햄버거 */
.ts-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: var(--ts-radius-sm); cursor: pointer; }
.ts-hamburger span { display: block; height: 2px; background: var(--ts-text); border-radius: 2px; transition: transform var(--ts-transition), opacity var(--ts-transition); }
.ts-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ts-hamburger.open span:nth-child(2) { opacity: 0; }
.ts-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 드로어 */
.ts-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 280px; max-width: 85vw; background: var(--ts-white); box-shadow: var(--ts-shadow-lg); z-index: 200; transform: translateX(100%); transition: transform var(--ts-transition-md); overflow-y: auto; }
.ts-drawer.open { transform: translateX(0); }
.ts-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 199; opacity: 0; pointer-events: none; transition: opacity var(--ts-transition-md); }
.ts-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.ts-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--ts-space-4) var(--ts-space-5); border-bottom: 1px solid var(--ts-border-light); }
.ts-drawer-nav { padding: var(--ts-space-4) 0; }
.ts-drawer-nav a { display: flex; align-items: center; gap: var(--ts-space-3); padding: var(--ts-space-3) var(--ts-space-5); font-size: var(--ts-font-size-base); color: var(--ts-text); transition: background var(--ts-transition); }
.ts-drawer-nav a:hover { background: var(--ts-bg-cream); color: var(--ts-red); }
.ts-drawer-section { padding: var(--ts-space-3) var(--ts-space-5); border-top: 1px solid var(--ts-border-light); margin-top: var(--ts-space-2); }
.ts-drawer-section-title { font-size: var(--ts-font-size-xs); font-weight: 600; color: var(--ts-text-hint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--ts-space-2); }

@media (min-width: 768px) {
  :root { --ts-header-h: 74px; }
  .ts-header { padding-top: 18px; }
  .ts-header-search { display: block; }
  .ts-header-search-mobile { display: none !important; }
}

@media (min-width: 1025px) {
  :root { --ts-header-h: 86px; }
  .ts-header { padding-top: 22px; }
  .ts-header-nav { display: flex; }
  .ts-hamburger { display: none; }
}

/* ==========================================================================
   15. 카테고리 내비
   ========================================================================== */
.ts-cat-nav { background: var(--ts-white); border-bottom: 1px solid var(--ts-border-light); }
.ts-cat-nav-inner { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--ts-space-4); gap: var(--ts-space-1); }
.ts-cat-nav-inner::-webkit-scrollbar { display: none; }
.ts-cat-item { display: flex; flex-direction: column; align-items: center; gap: var(--ts-space-1); padding: var(--ts-space-3) var(--ts-space-3); min-width: 64px; cursor: pointer; border-radius: var(--ts-radius); transition: background var(--ts-transition); flex-shrink: 0; }
.ts-cat-item:hover { background: var(--ts-bg-cream); }
.ts-cat-item.active { background: var(--ts-red-pale); }
.ts-cat-item.active .ts-cat-icon { color: var(--ts-red); }
.ts-cat-item.active .ts-cat-name { color: var(--ts-red); font-weight: 600; }
.ts-cat-icon { width: 28px; height: 28px; color: var(--ts-brown); transition: color var(--ts-transition); }
.ts-cat-name { font-size: 11px; font-weight: 500; color: var(--ts-text-sub); white-space: nowrap; transition: color var(--ts-transition); }

@media (min-width: 768px) {
  .ts-cat-nav-inner { justify-content: center; padding: 0 var(--ts-space-6); }
  .ts-cat-item { padding: var(--ts-space-3) var(--ts-space-4); min-width: 72px; }
  .ts-cat-icon { width: 32px; height: 32px; }
  .ts-cat-name { font-size: var(--ts-font-size-xs); }
}

/* ==========================================================================
   16. 모바일 하단 탭
   ========================================================================== */
.ts-mobile-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--ts-mobile-nav); background: var(--ts-white); border-top: 1px solid var(--ts-border-light); display: flex; z-index: 100; box-shadow: 0 -2px 8px rgba(61,53,50,0.06); }
.ts-mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; transition: color var(--ts-transition); color: var(--ts-text-hint); text-decoration: none; }
.ts-mobile-nav-item.active { color: var(--ts-red); }
.ts-mobile-nav-item:hover { color: var(--ts-red); }
.ts-mobile-nav-icon { width: 24px; height: 24px; flex-shrink: 0; }
.ts-mobile-nav-label { font-size: 10px; font-weight: 500; line-height: 1; }
.ts-mobile-nav-badge { position: relative; }
.ts-mobile-nav-badge::after { content: attr(data-count); position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; background: var(--ts-red); color: var(--ts-white); border-radius: var(--ts-radius-full); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* PC에서 모바일 탭 숨김, 본문 하단 여백 제거 */
@media (min-width: 1025px) {
  .ts-mobile-nav { display: none; }
  .ts-main-content { padding-bottom: 0 !important; }
}

/* ==========================================================================
   17. 푸터
   ========================================================================== */
.ts-footer { background: var(--ts-bg-cream); border-top: 1px solid var(--ts-border); margin-top: auto; }
.ts-footer-top { padding: var(--ts-space-8) 0 var(--ts-space-6); }
.ts-footer-logo { font-size: var(--ts-font-size-lg); font-weight: 700; color: var(--ts-red); margin-bottom: var(--ts-space-3); }
.ts-footer-desc { font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); line-height: 1.7; }
.ts-footer-nav-title { font-size: var(--ts-font-size-sm); font-weight: 700; color: var(--ts-text); margin-bottom: var(--ts-space-3); }
.ts-footer-nav { display: flex; flex-direction: column; gap: var(--ts-space-2); }
.ts-footer-nav a { font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); transition: color var(--ts-transition); }
.ts-footer-nav a:hover { color: var(--ts-red); }
.ts-footer-bottom { border-top: 1px solid var(--ts-border); padding: var(--ts-space-4) 0; }
.ts-footer-copy { font-size: var(--ts-font-size-xs); color: var(--ts-text-hint); }
.ts-footer-links { display: flex; flex-wrap: wrap; gap: var(--ts-space-4); }
.ts-footer-links a { font-size: var(--ts-font-size-xs); color: var(--ts-text-sub); transition: color var(--ts-transition); }
.ts-footer-links a:hover { color: var(--ts-red); }
.ts-footer-cs { background: var(--ts-white); border-radius: var(--ts-radius); padding: var(--ts-space-4); margin-top: var(--ts-space-4); border: 1px solid var(--ts-border-light); }
.ts-footer-cs-num { font-size: var(--ts-font-size-xl); font-weight: 700; color: var(--ts-text); letter-spacing: 0.02em; }
.ts-footer-cs-hours { font-size: var(--ts-font-size-xs); color: var(--ts-text-sub); margin-top: var(--ts-space-1); }

/* ==========================================================================
   18. 섹션 공통
   ========================================================================== */
.ts-section { padding: var(--ts-space-8) 0; }
.ts-section-sm { padding: var(--ts-space-6) 0; }
.ts-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--ts-space-5); }
.ts-section-title { font-size: var(--ts-font-size-xl); font-weight: 700; color: var(--ts-text); letter-spacing: -0.01em; }
.ts-section-sub { font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); margin-top: var(--ts-space-1); }
.ts-section-more { font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); font-weight: 500; display: flex; align-items: center; gap: 2px; transition: color var(--ts-transition); }
.ts-section-more:hover { color: var(--ts-red); }
.ts-section-divider { background: var(--ts-bg-cream); padding: var(--ts-space-2) 0; }

@media (min-width: 768px) {
  .ts-section { padding: var(--ts-space-12) 0; }
  .ts-section-title { font-size: var(--ts-font-size-2xl); }
}

/* ==========================================================================
   19. 히어로 배너
   ========================================================================== */
.ts-hero { position: relative; overflow: hidden; background: var(--ts-bg-cream); }
.ts-hero-slider { position: relative; }
.ts-hero-slide { position: relative; aspect-ratio: 375/200; background: var(--ts-bg-cream); }
.ts-hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.ts-hero-text { position: absolute; bottom: var(--ts-space-6); left: var(--ts-space-5); right: var(--ts-space-5); }
.ts-hero-kicker { font-size: var(--ts-font-size-xs); font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--ts-space-1); }
.ts-hero-title { font-size: var(--ts-font-size-2xl); font-weight: 700; color: var(--ts-white); line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ts-hero-cta { margin-top: var(--ts-space-4); }
.ts-hero-dots { position: absolute; bottom: var(--ts-space-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--ts-space-1); }
.ts-hero-dot { width: 6px; height: 6px; border-radius: var(--ts-radius-full); background: rgba(255,255,255,0.5); transition: background var(--ts-transition), width var(--ts-transition); }
.ts-hero-dot.active { background: var(--ts-white); width: 18px; }

@media (min-width: 768px) {
  .ts-hero-slide { aspect-ratio: 1200/400; }
  .ts-hero-title { font-size: var(--ts-font-size-3xl); }
  .ts-hero-text { bottom: var(--ts-space-10); left: var(--ts-space-10); }
}

/* ==========================================================================
   20. 가로 스크롤 리스트
   ========================================================================== */
.ts-scroll-list { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--ts-space-3); padding: 0 var(--ts-space-4) var(--ts-space-2); }
.ts-scroll-list::-webkit-scrollbar { display: none; }
.ts-scroll-list-item { flex-shrink: 0; width: 160px; }
.ts-scroll-list-item-lg { flex-shrink: 0; width: 220px; }

@media (min-width: 768px) {
  .ts-scroll-list { padding: 0 var(--ts-space-6) var(--ts-space-2); }
  .ts-scroll-list-item { width: 200px; }
  .ts-scroll-list-item-lg { width: 260px; }
}

/* ==========================================================================
   21. 알림 & 토스트
   ========================================================================== */
.ts-alert { display: flex; align-items: flex-start; gap: var(--ts-space-3); padding: var(--ts-space-4); border-radius: var(--ts-radius); font-size: var(--ts-font-size-sm); }
.ts-alert-info { background: #EDF4FB; color: #2C6FAC; border-left: 3px solid #5BA4D8; }
.ts-alert-success { background: #EDF4E8; color: #3D7332; border-left: 3px solid var(--ts-green); }
.ts-alert-warning { background: #FEF7EC; color: #8A6200; border-left: 3px solid #F5B63A; }
.ts-alert-error { background: var(--ts-red-pale); color: var(--ts-red-dark); border-left: 3px solid var(--ts-red); }

.ts-toast-container { position: fixed; top: calc(var(--ts-header-h) + var(--ts-space-4)); right: var(--ts-space-4); z-index: 300; display: flex; flex-direction: column; gap: var(--ts-space-2); max-width: 320px; width: calc(100vw - var(--ts-space-8)); }
.ts-toast { background: var(--ts-white); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow-md); padding: var(--ts-space-3) var(--ts-space-4); font-size: var(--ts-font-size-sm); display: flex; align-items: flex-start; gap: var(--ts-space-3); animation: tsToastIn 0.2s ease; }
@keyframes tsToastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.ts-toast-success { border-left: 3px solid var(--ts-green); }
.ts-toast-error { border-left: 3px solid var(--ts-red); }
.ts-toast-warning { border-left: 3px solid #F5B63A; }
.ts-toast-info { border-left: 3px solid #5BA4D8; }

/* ==========================================================================
   22. 모달
   ========================================================================== */
.ts-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 250; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--ts-transition-md); }
.ts-modal-overlay.open { opacity: 1; pointer-events: auto; }
.ts-modal { background: var(--ts-white); border-radius: var(--ts-radius-xl) var(--ts-radius-xl) 0 0; width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(100%); transition: transform var(--ts-transition-md); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ts-modal-overlay.open .ts-modal { transform: translateY(0); }
.ts-modal-handle { width: 36px; height: 4px; background: var(--ts-beige); border-radius: var(--ts-radius-full); margin: var(--ts-space-3) auto; }
.ts-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--ts-space-5) var(--ts-space-4); }
.ts-modal-title { font-size: var(--ts-font-size-lg); font-weight: 700; color: var(--ts-text); }
.ts-modal-body { padding: 0 var(--ts-space-5) var(--ts-space-5); }
.ts-modal-footer { padding: var(--ts-space-4) var(--ts-space-5); border-top: 1px solid var(--ts-border-light); display: flex; gap: var(--ts-space-3); }

@media (min-width: 768px) {
  .ts-modal-overlay { align-items: center; }
  .ts-modal { border-radius: var(--ts-radius-xl); max-width: 480px; transform: scale(0.95); }
  .ts-modal-overlay.open .ts-modal { transform: scale(1); }
  .ts-modal-handle { display: none; }
}

/* ==========================================================================
   23. 로딩 & 스켈레톤
   ========================================================================== */
.ts-spinner { width: 24px; height: 24px; border: 2.5px solid var(--ts-border); border-top-color: var(--ts-red); border-radius: 50%; animation: tsSpin 0.7s linear infinite; }
.ts-spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.ts-spinner-lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes tsSpin { to { transform: rotate(360deg); } }

.ts-skeleton { background: linear-gradient(90deg, var(--ts-bg-cream) 25%, var(--ts-beige) 50%, var(--ts-bg-cream) 75%); background-size: 200% 100%; animation: tsSkeleton 1.4s infinite; border-radius: var(--ts-radius-sm); }
@keyframes tsSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ts-skeleton-text { height: 14px; border-radius: 4px; }
.ts-skeleton-title { height: 20px; border-radius: 4px; }
.ts-skeleton-img { aspect-ratio: 4/3; }

/* ==========================================================================
   24. 페이지네이션
   ========================================================================== */
.ts-pagination { display: flex; align-items: center; justify-content: center; gap: var(--ts-space-1); flex-wrap: wrap; }
.ts-page-item { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--ts-space-2); border-radius: var(--ts-radius-sm); font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); background: var(--ts-white); border: 1px solid var(--ts-border-light); cursor: pointer; transition: background var(--ts-transition), color var(--ts-transition), border-color var(--ts-transition); }
.ts-page-item:hover { background: var(--ts-bg-cream); border-color: var(--ts-beige); color: var(--ts-text); }
.ts-page-item.active { background: var(--ts-red); color: var(--ts-white); border-color: var(--ts-red); font-weight: 700; }
.ts-page-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   25. 딜리버리 정보 바
   ========================================================================== */
.ts-delivery-bar { display: flex; align-items: center; gap: var(--ts-space-4); padding: var(--ts-space-3) var(--ts-space-4); background: var(--ts-bg-cream); border-radius: var(--ts-radius); font-size: var(--ts-font-size-sm); }
.ts-delivery-item { display: flex; align-items: center; gap: var(--ts-space-2); color: var(--ts-text-sub); }
.ts-delivery-item strong { color: var(--ts-text); font-weight: 600; }
.ts-delivery-divider { width: 1px; height: 14px; background: var(--ts-border); }

/* ==========================================================================
   26. 플래시 메시지
   ========================================================================== */
.ts-flash { padding: var(--ts-space-3) var(--ts-space-4); font-size: var(--ts-font-size-sm); font-weight: 500; text-align: center; }
.ts-flash-success { background: #EDF4E8; color: #3D7332; }
.ts-flash-error { background: var(--ts-red-pale); color: var(--ts-red-dark); }
.ts-flash-warning { background: #FEF7EC; color: #8A6200; }
.ts-flash-info { background: #EDF4FB; color: #2C6FAC; }

/* ==========================================================================
   27. 빈 상태
   ========================================================================== */
.ts-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ts-space-12) var(--ts-space-6); text-align: center; gap: var(--ts-space-4); }
.ts-empty-icon { width: 64px; height: 64px; color: var(--ts-beige); }
.ts-empty-title { font-size: var(--ts-font-size-lg); font-weight: 600; color: var(--ts-text-sub); }
.ts-empty-desc { font-size: var(--ts-font-size-sm); color: var(--ts-text-hint); }

/* ==========================================================================
   28. 주문 상태 칩
   ========================================================================== */
.ts-order-status { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--ts-space-3); border-radius: var(--ts-radius-full); font-size: var(--ts-font-size-xs); font-weight: 600; }
.ts-order-status-pending { background: #FEF7EC; color: #8A6200; }
.ts-order-status-paid { background: #EDF4E8; color: #3D7332; }
.ts-order-status-confirmed { background: #EDF4E8; color: #3D7332; }
.ts-order-status-making { background: var(--ts-red-pale); color: var(--ts-red-dark); }
.ts-order-status-ready { background: var(--ts-red-pale); color: var(--ts-red-dark); }
.ts-order-status-delivering { background: #EDF4FB; color: #2C6FAC; }
.ts-order-status-completed { background: var(--ts-bg-cream); color: var(--ts-text-sub); }
.ts-order-status-cancelled { background: var(--ts-bg-cream); color: var(--ts-text-hint); }

/* ==========================================================================
   29. 페이지 래퍼
   ========================================================================== */
.ts-page { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: var(--ts-mobile-nav); }
.ts-main-content { flex: 1; }
.ts-page-header { padding: var(--ts-space-6) 0 var(--ts-space-4); }
.ts-page-title { font-size: var(--ts-font-size-2xl); font-weight: 700; color: var(--ts-text); }
.ts-breadcrumb { display: flex; align-items: center; gap: var(--ts-space-2); font-size: var(--ts-font-size-sm); color: var(--ts-text-sub); margin-bottom: var(--ts-space-2); }
.ts-breadcrumb a { color: var(--ts-text-sub); }
.ts-breadcrumb a:hover { color: var(--ts-red); }
.ts-breadcrumb .sep { color: var(--ts-border); }

@media (min-width: 1025px) {
  .ts-page { padding-bottom: 0; }
}

/* ==========================================================================
   30. 가시성 유틸
   ========================================================================== */
.ts-hidden { display: none !important; }
.ts-invisible { visibility: hidden; }
.ts-show-mobile { display: block; }
.ts-show-tablet { display: none; }
.ts-show-desktop { display: none; }

/* 기본값: 모바일에서 숨김, 태블릿+에서 표시 */
.ts-hide-mobile { display: none; }

@media (min-width: 768px) {
  .ts-hide-mobile { display: block; }
  .ts-hide-mobile.ts-header-btn { display: flex; }
  .ts-hide-mobile.ts-btn { display: inline-flex; }
  .ts-show-tablet { display: block; }
}

@media (min-width: 1025px) {
  .ts-hide-tablet { display: none !important; }
  .ts-show-desktop { display: block; }
}

/* ==========================================================================
   31. 기타 유틸리티
   ========================================================================== */
.ts-rounded { border-radius: var(--ts-radius); }
.ts-rounded-sm { border-radius: var(--ts-radius-sm); }
.ts-rounded-lg { border-radius: var(--ts-radius-lg); }
.ts-rounded-full { border-radius: var(--ts-radius-full); }
.ts-overflow-hidden { overflow: hidden; }
.ts-relative { position: relative; }
.ts-absolute-fill { position: absolute; inset: 0; }
.ts-pointer { cursor: pointer; }
.ts-no-pointer { pointer-events: none; }
.ts-select-none { user-select: none; }
.ts-w-full { width: 100%; }
.ts-h-full { height: 100%; }
.ts-bg-white { background: var(--ts-white); }
.ts-bg-cream { background: var(--ts-bg-cream); }
.ts-bg-beige { background: var(--ts-beige); }
.ts-divider { height: var(--ts-space-2); background: var(--ts-bg-cream); margin: 0 calc(-1 * var(--ts-space-4)); }
.ts-sticky-top { position: sticky; top: var(--ts-header-h); z-index: 50; }
.ts-z-10 { z-index: 10; }
.ts-z-50 { z-index: 50; }
.ts-transition { transition: all var(--ts-transition); }

/* ══════════════════════════════════════════════════════════════
   리뷰 시스템 — 소비자 작성/수정 + 점주 관리 공통 스타일
   ══════════════════════════════════════════════════════════════ */

/* ── 리뷰 작성 페이지 래퍼 ── */
.review-page { max-width: 640px; margin: 0 auto; padding: 0 0 40px; }

/* ── 주문 요약 헤더 ── */
.review-order-header { background: var(--ts-white); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; border: 1px solid var(--ts-border); }
.review-order-store { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--ts-text); margin-bottom: 4px; }
.review-order-store svg { width: 16px; height: 16px; color: var(--ts-red); flex-shrink: 0; }
.review-order-number { font-size: 12px; color: var(--ts-text-sub); margin-bottom: 12px; }
.review-order-items { display: flex; gap: 10px; flex-wrap: wrap; }
.review-order-item { display: flex; align-items: center; gap: 6px; background: var(--ts-bg-cream); border-radius: 8px; padding: 6px 10px; }
.review-order-item img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.review-order-item-noimg { width: 32px; height: 32px; border-radius: 6px; background: var(--ts-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-order-item-noimg svg { width: 16px; height: 16px; color: var(--ts-text-hint); }
.review-order-item-name { font-size: 12.5px; font-weight: 500; color: var(--ts-text); }
.review-order-item-qty { font-size: 11px; color: var(--ts-text-hint); }
.review-order-item-more { font-size: 12px; color: var(--ts-text-hint); align-self: center; }

/* ── 플래시 ── */
.review-flash { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13.5px; font-weight: 500; }
.review-flash svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.review-flash-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.review-flash-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }

/* ── 리뷰 카드 (작성/수정 폼) ── */
.review-card { background: var(--ts-white); border-radius: 18px; border: 1px solid var(--ts-border); overflow: hidden; }
.review-edit-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ts-bg-cream); color: var(--ts-text-sub); font-size: 12px; font-weight: 600; padding: 8px 16px; border-bottom: 1px solid var(--ts-border); width: 100%; }
.review-edit-badge svg { width: 14px; height: 14px; }

/* ── 폼 섹션 ── */
.review-section { padding: 22px 20px; border-bottom: 1px solid var(--ts-border-light); }
.review-section:last-of-type { border-bottom: none; }
.review-section-label { font-size: 14px; font-weight: 700; color: var(--ts-text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.review-label-opt { font-size: 12px; font-weight: 400; color: var(--ts-text-hint); }

/* ══════════════════════════════════════════════════════════════
   별점 인터랙션
   ══════════════════════════════════════════════════════════════ */
.review-stars-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.review-stars { display: flex; gap: 8px; }

.review-star-btn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 50%; line-height: 0; transition: transform 0.15s; }
.review-star-btn:hover { transform: scale(1.15); }
.review-star-btn:focus-visible { outline: 2px solid var(--ts-red); outline-offset: 2px; }

.review-star-svg { width: 44px; height: 44px; stroke: var(--ts-border); stroke-width: 1.5; fill: transparent; transition: fill 0.18s, stroke 0.18s, transform 0.18s; display: block; }
.review-star-btn.hovered  .review-star-svg { fill: rgba(196,115,110,0.25); stroke: var(--ts-red); }
.review-star-btn.selected .review-star-svg { fill: var(--ts-red); stroke: var(--ts-red); }

/* 클릭 바운스 */
@keyframes starBounce { 0%,100%{transform:scale(1)} 40%{transform:scale(1.35)} 70%{transform:scale(0.92)} }
.review-star-btn.bounce { animation: starBounce 0.35s ease; }

/* 별점 흔들기 (미선택 경고) */
@keyframes starsShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.review-stars.shake { animation: starsShake 0.5s ease; }

/* 별점 피드백 텍스트 */
.review-rating-feedback { min-height: 24px; }
.review-rating-hint { font-size: 16px; font-weight: 700; color: var(--ts-text); display: block; text-align: center; transition: opacity 0.15s; }
.review-rating-hint.hidden { display: none; }

/* 모바일: 별 좀 더 크게 */
@media (max-width: 480px) { .review-star-svg { width: 52px; height: 52px; } }

/* ══════════════════════════════════════════════════════════════
   텍스트 영역
   ══════════════════════════════════════════════════════════════ */
.review-textarea-wrap { position: relative; }
.review-textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--ts-border); border-radius: 12px; font-size: 14.5px; color: var(--ts-text); font-family: inherit; resize: none; line-height: 1.65; transition: border-color 0.15s, box-shadow 0.15s; background: var(--ts-white); }
.review-textarea::placeholder { color: var(--ts-text-hint); }
.review-textarea:focus { outline: none; border-color: var(--ts-red); box-shadow: 0 0 0 3px rgba(196,115,110,0.12); }
.review-textarea-counter { text-align: right; font-size: 12px; color: var(--ts-text-hint); margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════
   이미지 업로드 영역
   ══════════════════════════════════════════════════════════════ */
.review-image-upload-area { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border: 2px dashed var(--ts-border); border-radius: 14px; min-height: 90px; transition: border-color 0.2s, background 0.2s; }
.review-image-upload-area.dragover { border-color: var(--ts-red); background: rgba(196,115,110,0.04); }

.review-image-add-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 88px; height: 88px; border-radius: 12px; background: var(--ts-bg-cream); border: 1.5px dashed var(--ts-border); cursor: pointer; font-size: 11px; color: var(--ts-text-sub); transition: background 0.15s, border-color 0.15s; flex-shrink: 0; }
.review-image-add-btn:hover { background: var(--ts-beige); border-color: var(--ts-red); color: var(--ts-red); }
.review-image-add-btn svg { width: 22px; height: 22px; }
.review-image-add-count { font-size: 10px; color: var(--ts-text-hint); }

.review-image-preview-grid { display: contents; }
.review-image-preview-item { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.review-image-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-image-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,0.6); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.review-image-remove svg { width: 12px; height: 12px; color: #fff; display: block; }
.review-image-hint { font-size: 12px; color: var(--ts-text-hint); margin-top: 8px; }

/* ── 기존 이미지 (수정 폼) ── */
.review-existing-images { display: flex; flex-wrap: wrap; gap: 10px; }
.review-existing-item { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; flex-shrink: 0; transition: opacity 0.2s; }
.review-existing-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-existing-item.marked-delete { opacity: 0.45; }
.review-existing-item.marked-delete img { filter: grayscale(0.5); }
.review-existing-delete-label { position: absolute; inset: 0; cursor: pointer; }
.review-existing-delete-label input { position: absolute; opacity: 0; pointer-events: none; }
.review-existing-delete-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(239,68,68,0.0); transition: background 0.2s; font-size: 11px; font-weight: 700; color: transparent; }
.review-existing-delete-label:hover .review-existing-delete-overlay { background: rgba(239,68,68,0.35); color: #fff; }
.review-existing-item.marked-delete .review-existing-delete-overlay { background: rgba(239,68,68,0.5); color: #fff; }
.review-existing-delete-overlay svg { width: 18px; height: 18px; display: block; }

/* ── 제출 버튼 영역 ── */
.review-submit-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 18px 20px; border-top: 1px solid var(--ts-border-light); }
.review-cancel-btn { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ts-text-sub); text-decoration: none; background: var(--ts-bg-cream); border: 1px solid var(--ts-border); transition: background 0.15s; }
.review-cancel-btn:hover { background: var(--ts-beige); }
.review-submit-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 28px; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ts-red) 0%, #B85C57 100%); border: none; cursor: pointer; transition: opacity 0.15s, transform 0.1s; box-shadow: 0 4px 16px rgba(196,115,110,0.3); }
.review-submit-btn:hover { opacity: 0.88; }
.review-submit-btn:active { transform: scale(0.98); }
.review-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.review-submit-btn svg { width: 16px; height: 16px; }

/* 스피너 */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   리뷰 카드 (소비자 매장 상세 + 점주 관리 공통)
   ══════════════════════════════════════════════════════════════ */
.review-card-owner { margin-bottom: 16px; overflow: visible; }
.review-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 0; }
.review-card-user { display: flex; align-items: center; gap: 10px; }
.review-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ow-brown-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.review-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-user-avatar svg { width: 18px; height: 18px; color: var(--ow-brown); }
.review-user-name { font-size: 13.5px; font-weight: 600; color: var(--ow-text); }
.review-user-date { font-size: 11.5px; color: var(--ow-text-hint); margin-top: 1px; }
.review-card-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.review-mini-star { width: 14px; height: 14px; }
.review-mini-star.filled { color: #F59E0B; fill: #F59E0B; }
.review-mini-star.empty { color: var(--ow-border); fill: var(--ow-border); }
.review-rating-num { font-size: 12px; font-weight: 700; color: var(--ow-text); margin-left: 3px; }
.review-card-content { padding: 12px 18px; font-size: 14px; color: var(--ow-text); line-height: 1.7; }
.review-card-images { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.review-thumb-btn { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: none; cursor: pointer; padding: 0; flex-shrink: 0; }
.review-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.review-thumb-btn:hover img { transform: scale(1.06); }

/* ── 점주 답변 블록 ── */
.review-reply-section { padding: 0 18px 16px; }
.review-reply-block { background: var(--ow-brown-pale); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; border-left: 3px solid var(--ow-brown); }
.review-reply-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.review-reply-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ow-brown); }
.review-reply-badge svg { width: 14px; height: 14px; }
.review-reply-date { font-size: 11.5px; color: var(--ow-text-hint); }
.review-reply-actions { margin-left: auto; display: flex; gap: 4px; }
.review-reply-text { font-size: 13.5px; color: var(--ow-text); line-height: 1.65; margin: 0; }

/* ── 답변 폼 ── */
.review-reply-form { margin-top: 4px; }
.review-reply-form.hidden { display: none; }
.review-reply-form-inner { background: var(--ow-card-bg); border: 1.5px solid var(--ow-border); border-radius: 10px; overflow: hidden; }
.review-reply-textarea-wrap { position: relative; }
.review-reply-textarea { width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--ow-border-light); font-size: 13.5px; color: var(--ow-text); font-family: inherit; resize: none; line-height: 1.6; background: transparent; box-sizing: border-box; }
.review-reply-textarea:focus { outline: none; background: rgba(168,146,121,0.04); }
.review-reply-textarea::placeholder { color: var(--ow-text-hint); }
.review-reply-counter { text-align: right; font-size: 11px; color: var(--ow-text-hint); padding: 4px 12px; }
.review-reply-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; background: var(--ow-brown-pale); }

/* ── 답변 유도 버튼 ── */
.review-reply-open-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: none; border: 1.5px solid var(--ow-border); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ow-brown); cursor: pointer; transition: all 0.15s; width: 100%; justify-content: center; }
.review-reply-open-btn:hover { background: var(--ow-brown-pale); border-color: var(--ow-brown); }
.review-reply-open-btn svg { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════
   평점 요약 (점주 관리 페이지)
   ══════════════════════════════════════════════════════════════ */
.review-rating-summary { display: flex; gap: 32px; padding: 22px 24px; align-items: center; flex-wrap: wrap; }
.review-summary-score { text-align: center; flex-shrink: 0; }
.review-summary-avg { font-size: 52px; font-weight: 900; color: var(--ow-text); line-height: 1; letter-spacing: -0.03em; }
.review-summary-stars { display: flex; gap: 3px; justify-content: center; margin: 6px 0 4px; }
.review-summary-star { width: 18px; height: 18px; }
.review-summary-star.filled { fill: #F59E0B; color: #F59E0B; }
.review-summary-star.empty { fill: var(--ow-border); color: var(--ow-border); }
.review-summary-total { font-size: 12px; color: var(--ow-text-hint); }
.review-summary-dist { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.review-dist-row { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 3px 0; border-radius: 4px; }
.review-dist-row:hover { opacity: 0.75; }
.review-dist-row.active-rating .review-dist-label { font-weight: 700; color: var(--ow-red); }
.review-dist-label { font-size: 12px; color: var(--ow-text-sub); width: 26px; flex-shrink: 0; }
.review-dist-bar-wrap { flex: 1; height: 8px; background: var(--ow-border-light); border-radius: 4px; overflow: hidden; }
.review-dist-bar { height: 100%; background: var(--ow-red); border-radius: 4px; transition: width 0.4s ease; }
.review-dist-count { font-size: 12px; color: var(--ow-text-hint); width: 28px; text-align: right; flex-shrink: 0; }
.review-dist-clear { font-size: 12px; color: var(--ow-brown); text-decoration: underline; align-self: flex-start; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════
   라이트박스
   ══════════════════════════════════════════════════════════════ */
.lightbox-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 300; align-items: center; justify-content: center; padding: 20px; }
.lightbox-backdrop.open { display: flex; }
#lightboxImg { max-width: min(90vw, 700px); max-height: 85vh; border-radius: 8px; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.15); border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-close svg { width: 18px; height: 18px; color: #fff; display: block; }

/* ══════════════════════════════════════════════════════════════
   소비자 리뷰 카드 (매장 상세 / 마이페이지)
   ══════════════════════════════════════════════════════════════ */
.review-list { display: flex; flex-direction: column; gap: 0; }

/* 소비자 리뷰 카드 (ts- prefix 버전) */
.ts-review-card { background: var(--ts-white); border-bottom: 1px solid var(--ts-border-light); padding: 18px 0; }
.ts-review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ts-review-user { display: flex; align-items: center; gap: 8px; }
.ts-review-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ts-bg-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.ts-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-review-avatar svg { width: 17px; height: 17px; color: var(--ts-text-hint); }
.ts-review-nickname { font-size: 13.5px; font-weight: 600; color: var(--ts-text); }
.ts-review-date { font-size: 11.5px; color: var(--ts-text-hint); }
.ts-review-stars { display: flex; gap: 2px; }
.ts-review-star { width: 14px; height: 14px; }
.ts-review-star.filled { fill: #F59E0B; color: #F59E0B; }
.ts-review-star.empty  { fill: var(--ts-border); color: var(--ts-border); }
.ts-review-content { font-size: 14px; color: var(--ts-text); line-height: 1.7; margin: 0 0 10px; }
.ts-review-images { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.ts-review-thumb { width: 68px; height: 68px; border-radius: 9px; object-fit: cover; cursor: pointer; border: none; padding: 0; transition: transform 0.2s; }
.ts-review-thumb:hover { transform: scale(1.04); }

/* 점주 답변 (소비자 뷰) */
.ts-review-reply { background: var(--ts-bg-cream); border-radius: 10px; padding: 12px 14px; margin-top: 2px; border-left: 3px solid var(--ts-border); }
.ts-review-reply-label { font-size: 12px; font-weight: 700; color: var(--ts-text-sub); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.ts-review-reply-label svg { width: 13px; height: 13px; }
.ts-review-reply-text { font-size: 13.5px; color: var(--ts-text); line-height: 1.65; margin: 0; }

/* ── 미답변 탭 카운트 강조 ── */
.ow-tab-count.urgent { background: var(--ow-red-pale); color: var(--ow-red); }

/* ── 반응형 ── */
@media (max-width: 640px) {
  .review-rating-summary { flex-direction: column; gap: 18px; align-items: flex-start; }
  .review-summary-avg { font-size: 44px; }
  .review-page { padding: 0 0 32px; }
  .review-star-svg { width: 48px; height: 48px; }
  .review-section { padding: 18px 16px; }
  .review-card-header { flex-direction: column; gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════
   마이페이지 (mp-* prefix)
   ─────────────────────────────────────────────────────────────
   색상 변수 재사용: --ts-red #C4736E  --ts-bg-cream #FAFAF8
                     --ts-text-primary #3D3532  --ts-border #EAE4DC
   ═══════════════════════════════════════════════════════════════ */

/* ── 공통 래퍼 ── */
.mp-wrap { max-width: 640px; margin: 0 auto; padding: 0 0 80px; }

/* ── 플래시 메시지 ── */
.mp-flash { display: flex; align-items: center; gap: 8px; padding: 12px 16px; margin: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.mp-flash svg { width: 18px; height: 18px; flex-shrink: 0; }
.mp-flash-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.mp-flash-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* ── 페이지 헤더 (서브 페이지 공통) ── */
.mp-page-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.mp-back-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ts-bg-cream); border: 1px solid var(--ts-border); color: var(--ts-text-secondary); flex-shrink: 0; }
.mp-back-btn svg { width: 18px; height: 18px; }
.mp-page-title { font-size: 18px; font-weight: 700; color: var(--ts-text-primary); flex: 1; }
.mp-page-title-count { font-size: 14px; font-weight: 500; color: var(--ts-text-hint); margin-left: 4px; }
.mp-page-header-btn { display: flex; align-items: center; gap: 4px; padding: 7px 12px; background: var(--ts-red); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mp-page-header-btn svg { width: 15px; height: 15px; }

/* ── 카드 ── */
.mp-card { margin: 8px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--ts-border); overflow: hidden; }
.mp-card-title { font-size: 15px; font-weight: 700; color: var(--ts-text-primary); padding: 16px 18px 12px; display: flex; align-items: center; gap: 6px; }
.mp-card-title-count { font-size: 13px; font-weight: 500; color: var(--ts-text-hint); }
.mp-card-social-info { display: flex; align-items: center; gap: 8px; padding: 14px 18px; color: var(--ts-text-secondary); font-size: 13px; }
.mp-card-social-info svg { width: 16px; height: 16px; color: #60A5FA; flex-shrink: 0; }

/* ── 폼 요소 ── */
.mp-form-group { padding: 0 18px 14px; }
.mp-form-row { display: flex; gap: 12px; }
.mp-form-group-flex { flex: 1; min-width: 0; }
.mp-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ts-text-secondary); margin-bottom: 6px; }
.mp-required { color: var(--ts-red); }
.mp-form-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--ts-border); border-radius: 10px; font-size: 15px; color: var(--ts-text-primary); background: #fff; box-sizing: border-box; transition: border-color 0.15s; outline: none; }
.mp-form-input:focus { border-color: var(--ts-red); }
.mp-form-input-readonly { background: var(--ts-bg-cream); color: var(--ts-text-hint); cursor: default; }
.mp-form-hint { font-size: 12px; color: var(--ts-text-hint); margin-top: 4px; }
.mp-form-hint-error { color: var(--ts-red); }
.mp-form-zipcode-row { display: flex; gap: 8px; align-items: center; }
.mp-form-zipcode-row .mp-form-input { flex: 1; min-width: 0; }
.mp-form-check { display: flex; align-items: center; gap: 8px; padding: 0 18px 16px; }
.mp-form-checkbox { width: 16px; height: 16px; accent-color: var(--ts-red); cursor: pointer; }
.mp-form-check-label { font-size: 14px; color: var(--ts-text-secondary); cursor: pointer; }
.mp-input-eye-wrap { position: relative; }
.mp-input-eye-wrap .mp-form-input { padding-right: 44px; }
.mp-input-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--ts-text-hint); padding: 2px; }
.mp-input-eye svg { width: 18px; height: 18px; }
.mp-input-eye.active { color: var(--ts-red); }

/* 비밀번호 강도 */
.mp-pw-strength-bar { height: 4px; background: var(--ts-border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.mp-pw-strength-fill { height: 100%; border-radius: 2px; width: 0; transition: width 0.3s, background 0.3s; }
.mp-pw-strength-text { font-size: 11px; font-weight: 600; margin-top: 3px; transition: color 0.3s; }

/* ── 버튼 ── */
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s, transform 0.1s; }
.mp-btn:active { transform: scale(0.97); }
.mp-btn-primary { background: var(--ts-red); color: #fff; }
.mp-btn-primary:hover { opacity: 0.88; }
.mp-btn-secondary { background: var(--ts-bg-cream); color: var(--ts-text-primary); border: 1.5px solid var(--ts-border); }
.mp-btn-secondary:hover { background: #F0EBE3; }
.mp-btn-danger { background: #EF4444; color: #fff; }
.mp-btn-danger:hover { background: #DC2626; }
.mp-btn-full { width: calc(100% - 36px); margin: 0 18px 18px; box-sizing: border-box; padding: 13px 20px; font-size: 15px; }
.mp-btn-sm { padding: 7px 14px; font-size: 13px; }
.hidden { display: none !important; }

/* ── 모달 ── */
.mp-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: flex-end; justify-content: center; }
.mp-modal-backdrop.open { display: flex; }
@media (min-width: 480px) { .mp-modal-backdrop { align-items: center; } }
.mp-modal { background: #fff; border-radius: 20px 20px 0 0; width: 100%; max-height: 90vh; overflow-y: auto; }
@media (min-width: 480px) { .mp-modal { border-radius: 20px; max-width: 460px; max-height: 80vh; } }
.mp-modal-lg { max-width: 560px; }
.mp-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 0; }
.mp-modal-title { font-size: 17px; font-weight: 700; color: var(--ts-text-primary); }
.mp-modal-title-danger { color: #DC2626; }
.mp-modal-close { background: none; border: none; cursor: pointer; color: var(--ts-text-hint); padding: 4px; }
.mp-modal-close svg { width: 20px; height: 20px; }
.mp-modal-body { padding: 14px 0 0; }
.mp-modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px 18px; }
.mp-delete-confirm-text { padding: 8px 18px 4px; font-size: 15px; color: var(--ts-text-primary); line-height: 1.6; }

/* 탈퇴 경고 */
.mp-withdraw-warning { display: flex; gap: 10px; align-items: flex-start; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 12px 14px; margin: 8px 18px 14px; }
.mp-withdraw-warning svg { width: 18px; height: 18px; color: #EF4444; flex-shrink: 0; margin-top: 1px; }
.mp-withdraw-warning p { font-size: 13px; color: #991B1B; line-height: 1.5; margin: 0; }

/* ── 마이페이지 메인 ── */
/* 프로필 카드 */
.mp-profile-card { margin: 12px 16px; background: #fff; border-radius: 18px; border: 1px solid var(--ts-border); padding: 22px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mp-profile-avatar-wrap { position: relative; }
.mp-profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ts-border); }
.mp-profile-avatar-default { display: flex; align-items: center; justify-content: center; background: var(--ts-bg-cream); }
.mp-profile-avatar-default svg { width: 44px; height: 44px; color: var(--ts-text-hint); }
.mp-profile-edit-badge { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ts-red); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.mp-profile-edit-badge svg { width: 12px; height: 12px; }
.mp-profile-info { text-align: center; }
.mp-profile-name { font-size: 18px; font-weight: 700; color: var(--ts-text-primary); display: flex; align-items: center; justify-content: center; gap: 6px; }
.mp-social-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.mp-social-kakao { background: #F9E000; color: #3A1D1D; }
.mp-social-naver { background: #03C75A; color: #fff; }
.mp-social-google { background: #EA4335; color: #fff; }
.mp-social-apple { background: #000; color: #fff; }
.mp-profile-email { font-size: 13px; color: var(--ts-text-hint); margin-top: 3px; }
.mp-profile-edit-link { font-size: 12px; color: var(--ts-text-hint); text-decoration: underline; margin-top: 4px; display: inline-block; }
.mp-profile-stats { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--ts-bg-cream); border-radius: 12px; padding: 12px 0; margin-top: 4px; }
.mp-profile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; cursor: pointer; }
.mp-profile-stat-value { font-size: 18px; font-weight: 700; color: var(--ts-red); }
.mp-profile-stat-label { font-size: 12px; color: var(--ts-text-hint); }
.mp-profile-stat-divider { width: 1px; height: 30px; background: var(--ts-border); }

/* 주문 트래커 */
.mp-order-tracker { margin: 8px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--ts-border); padding: 16px 0 12px; }
.mp-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 12px; }
.mp-section-title { font-size: 15px; font-weight: 700; color: var(--ts-text-primary); }
.mp-section-more { font-size: 13px; color: var(--ts-text-hint); }
.mp-order-steps { display: flex; align-items: center; padding: 0 12px; }
.mp-order-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; cursor: pointer; }
.mp-order-step-icon { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ts-bg-cream); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--ts-border); color: var(--ts-text-hint); transition: background 0.2s, border-color 0.2s; }
.mp-order-step-icon svg { width: 22px; height: 22px; }
.mp-order-step-icon.active { background: #FFF0EF; border-color: var(--ts-red); color: var(--ts-red); }
.mp-order-step-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ts-red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }
.mp-order-step-label { font-size: 11px; color: var(--ts-text-hint); text-align: center; }
.mp-order-step-arrow { color: var(--ts-border); flex-shrink: 0; }
.mp-order-step-arrow svg { width: 14px; height: 14px; }

/* 리뷰 유도 배너 */
.mp-review-nudge { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 10px; padding: 11px 14px; font-size: 14px; color: #92400E; text-decoration: none; }
.mp-review-nudge svg:first-child { width: 18px; height: 18px; color: #F59E0B; flex-shrink: 0; }
.mp-review-nudge svg:last-child { width: 16px; height: 16px; }
.mp-review-nudge strong { color: var(--ts-red); }

/* 빠른 메뉴 그리드 */
.mp-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 8px 16px; background: #fff; border-radius: 16px; border: 1px solid var(--ts-border); overflow: hidden; }
.mp-quick-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 8px; cursor: pointer; position: relative; transition: background 0.15s; }
.mp-quick-item:nth-child(n+5) { border-top: 1px solid var(--ts-border); }
.mp-quick-item:not(:nth-child(4n)) { border-right: 1px solid var(--ts-border); }
.mp-quick-item:hover { background: var(--ts-bg-cream); }
.mp-quick-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; position: relative; }
.mp-quick-icon svg { width: 24px; height: 24px; }
.mp-quick-icon-brown { background: #FDF6F0; color: #9B6B4B; }
.mp-quick-icon-red { background: #FFF0EF; color: var(--ts-red); }
.mp-quick-icon-pink { background: #FFF0F0; color: #E57373; }
.mp-quick-icon-yellow { background: #FFFBEB; color: #D97706; }
.mp-quick-icon-green { background: #F0FDF4; color: #16A34A; }
.mp-quick-icon-blue { background: #EFF6FF; color: #2563EB; }
.mp-quick-icon-slate { background: #F8FAFC; color: #475569; }
.mp-quick-icon-teal { background: #F0FDFA; color: #0D9488; }
.mp-quick-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ts-red); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }
.mp-quick-item span:last-child { font-size: 12px; font-weight: 500; color: var(--ts-text-secondary); text-align: center; }

/* 하단 링크 */
.mp-footer-links { margin: 8px 16px 0; background: #fff; border-radius: 16px; border: 1px solid var(--ts-border); overflow: hidden; }
.mp-footer-link { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14px; color: var(--ts-text-secondary); border-bottom: 1px solid var(--ts-border); background: none; width: 100%; text-align: left; cursor: pointer; }
.mp-footer-link:last-child { border-bottom: none; }
.mp-footer-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ts-text-hint); }
.mp-footer-link:hover { background: var(--ts-bg-cream); }
.mp-footer-link-logout { color: #DC2626; }
.mp-footer-link-logout svg { color: #DC2626; }
.mp-footer-link-withdraw { color: var(--ts-text-hint); font-size: 13px; }

/* ── 프로필 편집 ── */
.mp-profile-img-edit { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 18px 20px; }
.mp-profile-img-preview-wrap { position: relative; }
.mp-profile-img-preview { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ts-border); }
.mp-profile-img-empty { display: flex; align-items: center; justify-content: center; background: var(--ts-bg-cream); }
.mp-profile-img-empty svg { width: 52px; height: 52px; color: var(--ts-text-hint); }
.mp-profile-img-change-btn { position: absolute; bottom: 2px; right: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--ts-red); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #fff; }
.mp-profile-img-change-btn svg { width: 14px; height: 14px; }
.mp-profile-img-hint { font-size: 12px; color: var(--ts-text-hint); }
.mp-withdraw-link-wrap { text-align: center; padding: 20px 0 8px; }
.mp-withdraw-link { background: none; border: none; font-size: 13px; color: var(--ts-text-hint); cursor: pointer; text-decoration: underline; }

/* ── 배달지 관리 ── */
.mp-addr-count-hint { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ts-text-hint); padding: 8px 20px 4px; }
.mp-addr-count-hint svg { width: 14px; height: 14px; }
.mp-addr-count-full { color: #EF4444; font-weight: 600; margin-left: 4px; }
.mp-addr-list { margin: 4px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.mp-addr-card { background: #fff; border-radius: 14px; border: 1.5px solid var(--ts-border); padding: 14px 16px; transition: border-color 0.15s; }
.mp-addr-card-default { border-color: var(--ts-red); background: #FFFCFC; }
.mp-addr-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mp-addr-label-wrap { display: flex; align-items: center; gap: 6px; }
.mp-addr-label { font-size: 14px; font-weight: 700; color: var(--ts-text-primary); }
.mp-addr-default-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; background: var(--ts-red); color: #fff; border-radius: 20px; }
.mp-addr-set-default-btn { font-size: 12px; color: var(--ts-text-hint); background: none; border: 1px solid var(--ts-border); border-radius: 20px; padding: 2px 8px; cursor: pointer; }
.mp-addr-set-default-btn:hover { border-color: var(--ts-red); color: var(--ts-red); }
.mp-addr-actions { display: flex; gap: 4px; }
.mp-addr-action-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--ts-bg-cream); border: 1px solid var(--ts-border); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ts-text-secondary); }
.mp-addr-action-btn svg { width: 15px; height: 15px; }
.mp-addr-action-btn:hover { background: #EDE6DC; }
.mp-addr-action-delete:hover { color: #DC2626; background: #FEF2F2; border-color: #FECACA; }
.mp-addr-recipient { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ts-text-primary); font-weight: 500; margin-bottom: 6px; }
.mp-addr-recipient svg { width: 14px; height: 14px; color: var(--ts-text-hint); }
.mp-addr-phone { color: var(--ts-text-hint); font-weight: 400; font-size: 13px; margin-left: 4px; }
.mp-addr-address { display: flex; gap: 6px; font-size: 13px; color: var(--ts-text-secondary); }
.mp-addr-address svg { width: 14px; height: 14px; color: var(--ts-text-hint); margin-top: 2px; flex-shrink: 0; }
.mp-addr-address1 { font-weight: 500; color: var(--ts-text-primary); }
.mp-addr-address2 { color: var(--ts-text-secondary); }
.mp-addr-zipcode { color: var(--ts-text-hint); font-size: 12px; }
.mp-addr-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 12px 16px; padding: 13px; border: 2px dashed var(--ts-border); border-radius: 14px; background: none; font-size: 14px; font-weight: 600; color: var(--ts-text-hint); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.mp-addr-add-btn svg { width: 18px; height: 18px; }
.mp-addr-add-btn:hover { border-color: var(--ts-red); color: var(--ts-red); }

/* ── 위시리스트 ── */
.mp-wish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 0; }
.mp-wish-card { position: relative; background: #fff; border-radius: 14px; border: 1px solid var(--ts-border); overflow: hidden; transition: opacity 0.35s, transform 0.35s; }
.mp-wish-card-removing { opacity: 0; transform: scale(0.95); pointer-events: none; }
.mp-wish-card-closed .mp-wish-card-thumb img { filter: brightness(0.65); }
.mp-wish-card-thumb-link { display: block; }
.mp-wish-card-thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--ts-bg-cream); }
.mp-wish-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.mp-wish-card:hover .mp-wish-card-thumb img { transform: scale(1.04); }
.mp-wish-card-no-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mp-wish-card-no-thumb svg { width: 40px; height: 40px; }
.mp-wish-card-closed-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.38); display: flex; align-items: center; justify-content: center; }
.mp-wish-card-closed-overlay span { background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.mp-wish-card-body { padding: 10px 12px 38px; }
.mp-wish-card-name { display: block; font-size: 14px; font-weight: 700; color: var(--ts-text-primary); line-height: 1.35; margin-bottom: 5px; }
.mp-wish-card-rating { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: #D97706; margin-bottom: 4px; }
.mp-wish-card-rating svg { width: 13px; height: 13px; }
.mp-wish-card-review-cnt { font-weight: 400; color: var(--ts-text-hint); }
.mp-wish-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ts-text-hint); flex-wrap: wrap; margin-bottom: 2px; }
.mp-wish-card-region { display: flex; align-items: center; gap: 2px; }
.mp-wish-card-region svg { width: 10px; height: 10px; }
.mp-wish-card-fee { font-size: 12px; color: var(--ts-text-hint); }
.mp-wish-card-fee-free { color: #16A34A; font-weight: 600; }
.mp-wish-card-min-order { font-size: 11px; color: var(--ts-text-hint); }
.mp-wish-heart-btn { position: absolute; bottom: 8px; right: 10px; background: none; border: none; cursor: pointer; color: #D1D5DB; padding: 4px; transition: color 0.2s, transform 0.15s; }
.mp-wish-heart-btn svg { width: 20px; height: 20px; }
.mp-wish-heart-btn.active { color: var(--ts-red); }
.mp-wish-heart-btn:active { transform: scale(1.2); }

/* ── 포인트 ── */
.mp-point-balance-card { margin: 12px 16px; background: linear-gradient(135deg, #C4736E 0%, #B5625D 100%); border-radius: 18px; padding: 26px 22px 22px; color: #fff; }
.mp-point-balance-label { font-size: 13px; font-weight: 500; opacity: 0.85; margin-bottom: 6px; }
.mp-point-balance-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.mp-point-balance-num { font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.mp-point-balance-unit { font-size: 20px; font-weight: 700; opacity: 0.8; }
.mp-point-balance-sub { font-size: 12px; opacity: 0.75; margin-bottom: 14px; }
.mp-point-info-tags { display: flex; flex-direction: column; gap: 5px; }
.mp-point-info-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }
.mp-point-info-tag svg { width: 14px; height: 14px; flex-shrink: 0; }

/* 포인트 내역 */
.mp-point-log-list { padding: 0 0 4px; }
.mp-point-log-date { font-size: 12px; font-weight: 600; color: var(--ts-text-hint); padding: 10px 18px 6px; background: var(--ts-bg-cream); border-top: 1px solid var(--ts-border); }
.mp-point-log-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #F5F0EB; }
.mp-point-log-item:last-child { border-bottom: none; }
.mp-point-log-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp-point-log-icon svg { width: 16px; height: 16px; }
.mp-point-log-icon-plus { background: #F0FDF4; color: #16A34A; }
.mp-point-log-icon-minus { background: #FEF2F2; color: #EF4444; }
.mp-point-log-info { flex: 1; min-width: 0; }
.mp-point-log-desc { font-size: 14px; color: var(--ts-text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-point-log-time { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.mp-point-log-type-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.mp-point-log-type-badge-plus { background: #DCFCE7; color: #15803D; }
.mp-point-log-type-badge-minus { background: #FEE2E2; color: #B91C1C; }
.mp-point-log-amount { font-size: 15px; font-weight: 700; flex-shrink: 0; }
.mp-point-log-amount-plus { color: #16A34A; }
.mp-point-log-amount-minus { color: #EF4444; }
.mp-point-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 18px 28px; text-align: center; }
.mp-point-empty svg { width: 64px; height: 64px; }
.mp-point-empty p { font-size: 15px; font-weight: 600; color: var(--ts-text-secondary); margin: 0; }
.mp-point-empty-sub { font-size: 13px; color: var(--ts-text-hint); margin: 0; }
.mp-point-policy { margin: 8px 16px 0; padding: 16px 18px; background: var(--ts-bg-cream); border-radius: 14px; border: 1px solid var(--ts-border); }
.mp-point-policy-title { font-size: 13px; font-weight: 700; color: var(--ts-text-secondary); margin-bottom: 8px; }
.mp-point-policy-list { margin: 0; padding-left: 18px; }
.mp-point-policy-list li { font-size: 12px; color: var(--ts-text-hint); line-height: 1.8; }

/* ── 빈 상태 공통 ── */
.mp-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 52px 24px 40px; text-align: center; }
.mp-empty-state svg { width: 80px; height: 80px; }
.mp-empty-state-text { font-size: 16px; font-weight: 700; color: var(--ts-text-secondary); margin: 0; }
.mp-empty-state-sub { font-size: 13px; color: var(--ts-text-hint); margin: 0; line-height: 1.6; }

/* ── 페이지네이션 공통 ── */
.mp-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 20px 16px 8px; }
.mp-page-btn { width: 36px; height: 36px; border-radius: 10px; background: var(--ts-bg-cream); border: 1px solid var(--ts-border); display: flex; align-items: center; justify-content: center; color: var(--ts-text-secondary); }
.mp-page-btn svg { width: 16px; height: 16px; }
.mp-page-num { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ts-text-secondary); border: 1px solid var(--ts-border); background: #fff; }
.mp-page-num.active { background: var(--ts-red); color: #fff; border-color: var(--ts-red); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   마이페이지 반응형
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .mp-quick-grid { grid-template-columns: repeat(4, 1fr); }
  .mp-quick-icon { width: 44px; height: 44px; border-radius: 12px; }
  .mp-quick-icon svg { width: 22px; height: 22px; }
  .mp-quick-item span:last-child { font-size: 11px; }
  .mp-wish-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px 0; }
  .mp-point-balance-num { font-size: 30px; }
  .mp-form-row { flex-direction: column; }
}

@media (min-width: 640px) {
  .mp-wrap { padding: 12px 0 80px; }
  .mp-wish-grid { grid-template-columns: repeat(3, 1fr); }
  .mp-profile-card { flex-direction: row; align-items: flex-start; gap: 18px; }
  .mp-profile-info { text-align: left; }
  .mp-profile-stats { margin-top: 12px; }
}

/* ==========================================================================
   모바일 헤더 로그인/회원가입 버튼 숨기기
   - 768px 이하에서 .ts-header-actions 내 .ts-hide-mobile 강제 숨김
   - inline style="display:flex" 오버라이드 목적으로 !important 사용
   ========================================================================== */
@media (max-width: 767px) {
  .ts-header-actions .ts-hide-mobile {
    display: none !important;
  }
}