/* workup · design system */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Black&family=Bebas+Neue&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* neutrals — warm off-white + ink */
  --wu-bg: #F2F2F0;
  --wu-paper: #FFFFFF;
  --wu-ink: #1A1A1A;
  --wu-ink-2: #2D2D2D;
  --wu-mute: #888888;
  --wu-line: #E0E0E0;

  /* accent — WORKUP brand orange + black */
  --wu-lime: #FF6600;
  --wu-lime-ink: #FFFFFF;
  --wu-orange: #FF6600;
  --wu-tag: #1A1A1A;

  /* type */
  --wu-display: 'Archivo Black', 'Pretendard', system-ui, sans-serif;
  --wu-sans: 'Archivo', 'Pretendard', system-ui, sans-serif;
  --wu-kr: 'Pretendard', system-ui, sans-serif;
  --wu-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
#root { width: 100%; max-width: 100vw; overflow-x: hidden; }

.wu {
  font-family: var(--wu-sans);
  color: var(--wu-ink);
  background: var(--wu-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.wu .kr { font-family: var(--wu-kr); letter-spacing: -0.01em; }
.wu .mono { font-family: var(--wu-mono); }
.wu .display { font-family: var(--wu-display); letter-spacing: -0.03em; text-transform: uppercase; }

.wu button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
.wu input, .wu textarea { font-family: inherit; }

/* placeholder imagery — striped */
.wu-placeholder {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(14,14,12,0.06) 10px 11px),
    linear-gradient(180deg, #E9E5DC 0%, #DCD7CC 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--wu-mute); font-family: var(--wu-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  position: relative;
}
.wu-placeholder.dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 10px, rgba(255,255,255,0.06) 10px 11px),
    linear-gradient(180deg, #1C1C19 0%, #111110 100%);
  color: #6b675e;
}
.wu-placeholder .label {
  padding: 4px 8px; border: 1px dashed currentColor; border-radius: 0;
}

.wu-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 999px;
  font-family: var(--wu-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--wu-tag); color: var(--wu-lime);
}
.wu-tag.lime { background: var(--wu-lime); color: #fff; }
.wu-tag.orange { background: var(--wu-orange); color: #fff; }
.wu-tag.ghost { background: transparent; color: var(--wu-ink); border: 1px solid var(--wu-ink); }

.wu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border-radius: 999px;
  font-family: var(--wu-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--wu-ink); color: var(--wu-paper);
  transition: transform .08s ease;
}
.wu-btn:active { transform: translateY(1px); }
.wu-btn.lime { background: var(--wu-lime); color: #fff; }
.wu-btn.ghost { background: transparent; color: var(--wu-ink); border: 1.5px solid var(--wu-ink); }
.wu-btn.block { width: 100%; padding: 16px; font-size: 14px; }

.wu-divider { height: 1px; background: var(--wu-line); }

/* scrollbar invis */
.wu-scroll::-webkit-scrollbar { display: none; }
.wu-scroll { scrollbar-width: none; }

/* ticker */
@keyframes wu-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wu-ticker-track {
  display: inline-flex; white-space: nowrap;
  animation: wu-ticker 40s linear infinite;
}

/* ── iOS safe area & mobile fixes ── */
.wu-safe-top { padding-top: calc(env(safe-area-inset-top, 20px) + 12px) !important; }
.wu img { max-width: 100%; }
.wu-no-hscroll { overflow-x: hidden !important; max-width: 100vw; }

/* ══ RESPONSIVE — PC / MOBILE 전환 ══ */
.wu-consumer-wrap {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: var(--wu-bg);
  min-height: 100vh;
}

/* ── MOBILE 모드 (540px 제한) ── */
.wu-mode-mobile .wu-consumer-wrap {
  max-width: 540px;
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  border-left: 1px solid var(--wu-line);
  border-right: 1px solid var(--wu-line);
}
.wu-mode-mobile body,
body.wu-mode-mobile { background: #E8E8E6; }
.wu-mode-mobile .wu-hero-img { aspect-ratio: 4/5 !important; }

/* ── PC 모드 (풀와이드, 무신사 스타일) ── */
.wu-mode-pc .wu-consumer-wrap {
  max-width: 100%;
  box-shadow: none;
  border: none;
}
.wu-mode-pc .wu-hero-img { aspect-ratio: 21/9 !important; }
/* PC 모드 상품 그리드 — 4열 */
.wu-mode-pc .wu-grid-products { gap: 16px !important; }
.wu-mode-pc .wu-grid-products > * { width: calc(25% - 12px) !important; }
/* PC 모드 NEW/BEST 그리드 — 5열 */
.wu-mode-pc .wu-grid-new > * { width: calc(20% - 8px) !important; }
/* PC 모드 하단 탭바 — 너비 제한 */
.wu-mode-pc .wu-bottom-bar { max-width: 100%; }

/* HQ 관리자 화면은 항상 너비 제한 없음 */
.wu-hq-wrap { max-width: none; box-shadow: none; border: none; }

/* ── 실제 모바일 기기 (767px 이하) — 항상 모바일 스타일 ── */
@media (max-width: 767px) {
  .wu-consumer-wrap { max-width: 100% !important; box-shadow: none !important; border: none !important; }
  .wu-hero-img { aspect-ratio: 4/5 !important; }
  .wu-mode-toggle { display: none !important; }
}

/* ── PC/MOBILE 전환 버튼 ── */
.wu-mode-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 8px) + 10px);
  right: 16px;
  z-index: 9990;
  display: flex;
  background: var(--wu-ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}
.wu-mode-toggle button {
  padding: 6px 12px;
  font-family: var(--wu-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.wu-mode-toggle button.active {
  background: var(--wu-orange);
  color: #fff;
}
.wu-mode-toggle button:not(.active) {
  background: transparent;
  color: #888;
}