/* ============================================================
 * zzimkt v2 — common.css
 * Toss Design System (TDS) tokens (D06 RESOLVED, 2026-05-20).
 * 출처: docs/specs/2026-05-19-v2-design-guide.md §2
 * ============================================================ */

/* Pretendard Variable — CDN */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* 배경 */
  --tds-bg:           #ffffff;
  --tds-bg-subtle:    #f9fafb;
  /* 텍스트 */
  --tds-text:         #191f28;
  --tds-text-muted:   #4e5968;
  --tds-text-subtle:  #8b95a1;
  /* 브랜드 */
  --tds-blue:         #3182f6;
  --tds-blue-light:   #e8f3ff;
  --tds-blue-strong:  #1a64d4;
  /* 상태 */
  --tds-success:      #00c896;
  --tds-warning:      #f4ac3a;
  --tds-error:        #f04452;
  /* 선 */
  --tds-line:         #e5e8eb;
  --tds-line-strong:  #d1d6db;
  /* 신뢰 등급 (D12) */
  --tds-bronze:       #cd7f32;
  --tds-silver:       #c0c0c0;
  --tds-gold:         #ffd700;
  --tds-platinum:     #e5e4e2;
  /* Shadow */
  --tds-shadow-card:  0 1px 3px rgba(25, 31, 40, 0.05), 0 1px 2px rgba(25, 31, 40, 0.08);
  --tds-shadow-float: 0 4px 12px rgba(25, 31, 40, 0.08);
  --tds-shadow-modal: 0 10px 40px rgba(25, 31, 40, 0.15);
}

/* Reset / Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 2026-05-26 모바일 UX (사용자 명시 — 재요청 후속):
   본문 텍스트 long-press 시 "글자로 검색" / 텍스트 선택 메뉴 완전 차단.
   1차 적용 (user-select: text override) 에서 안 막혔다는 사용자 보고 →
   override 제거 + 전역 차단 + Android Chrome 의 추가 hint 까지 강화. */
*, *::before, *::after {
  -webkit-touch-callout: none;       /* iOS Safari long-press 메뉴 */
  -webkit-user-select: none;          /* 글자 선택 자체 차단 (Safari/Chrome) */
  -moz-user-select: none;             /* Firefox */
  -ms-user-select: none;              /* IE/Edge legacy */
  user-select: none;                  /* 표준 */
  -webkit-tap-highlight-color: transparent;
}

html, body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--tds-bg);
  color: var(--tds-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum';
  /* 더블탭 zoom + 핀치 zoom 차단 — lightbox 안 에서만 pinch-zoom override (mutual.css). */
  touch-action: manipulation;
}

/* 입력 필드 / 편집 가능 영역만 user-select 허용 (사용자 입력 위해 필수). */
input, textarea, select, [contenteditable], [contenteditable] * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

a {
  color: var(--tds-blue);
  text-decoration: none;
}
/* a:hover underline 제거 — SPA 메뉴 / 카드 link 의 button-like 동작에 어울리지 않음.
   underline 이 필요한 곳은 명시적 `.link-underline` 클래스로 처리 (필요 시 추가). */

/* 크레딧 표시 (CLAUDE.md 컨벤션) */
.credit-amount::after {
  content: ' C';
  font-weight: 600;
  color: var(--tds-text-muted);
}

/* Button (디자인가이드 §3.3) */
.btn-primary {
  background: var(--tds-blue);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:hover { background: var(--tds-blue-strong); }

.btn-secondary {
  background: var(--tds-bg-subtle);
  color: var(--tds-text-muted);
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Input (디자인가이드 §3.4) */
.input {
  background: var(--tds-bg-subtle);
  border: none;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 16px;
  width: 100%;
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--tds-blue);
}

/* Chip (디자인가이드 §3.7) */
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--tds-bg-subtle);
  color: var(--tds-text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chip.active {
  background: var(--tds-blue);
  color: #fff;
}

/* Trust badges (D12 + 디자인가이드 §3.2) */
.trust-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}
.trust-badge.bronze   { background: var(--tds-bronze);   color: #fff; }
.trust-badge.silver   { background: var(--tds-silver);   color: #fff; }
.trust-badge.gold     { background: var(--tds-gold);     color: var(--tds-text); }
.trust-badge.platinum { background: linear-gradient(135deg, var(--tds-platinum), #fff); color: var(--tds-text); }

/* 2026-05-26: 거절 사유 modal — mutual_list / mutual_detail 공용 (RejectModalMixin). */
.zzimkt-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.zzimkt-modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.zzimkt-modal-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--tds-text, #191f28);
}
.zzimkt-modal-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tds-line, #e5e8eb);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.zzimkt-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 페이지네이션 (디자인 가이드 §5) */
.pagination-bar {
  display: flex; gap: 4px; justify-content: center; align-items: center;
  margin: 24px 0; flex-wrap: wrap;
}
.pagination-bar .pg-btn {
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--tds-line, #e5e8eb); border-radius: 8px;
  background: #fff; color: var(--tds-text-muted, #4e5968);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.pagination-bar .pg-btn:hover:not(:disabled) { border-color: var(--tds-blue, #3182f6); color: var(--tds-blue, #3182f6); }
.pagination-bar .pg-btn.active {
  background: var(--tds-blue, #3182f6); color: #fff; border-color: var(--tds-blue, #3182f6);
}
.pagination-bar .pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 인앱 알림 (D28) */
.notif-clickable:hover { background: var(--tds-blue-light, #e8f3ff); }
.notif-unread { background: #fafcff; }

/* 토글 스위치 (D29 보완) — on=파랑, off=회색 */
.tds-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; vertical-align: middle; }
.tds-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.tds-switch .tds-switch-track { position: absolute; inset: 0; background: #d1d6db; border-radius: 999px; transition: background .18s; cursor: pointer; }
.tds-switch .tds-switch-track::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.tds-switch input:checked + .tds-switch-track { background: #3182f6; }
.tds-switch input:checked + .tds-switch-track::before { transform: translateX(20px); }
.tds-switch input:disabled + .tds-switch-track { opacity: .5; cursor: default; }