/* ═══ FIP — 앱 테마 (소스 오브 트루스: DESIGN.md) ═══
   2026-08-14 사장님 지시로 메인 사이트(디자인 E, 그린)와 전면 통일 — 앱 악센트를 그린으로 전환.
   (오렌지 #F97316는 2026-08-13~08-14 사용, 이번에 블루 #2563EB로 대체(2026-09-01 사이트 통일).)
   bg #FFFFFF / text #1A1A1A / line #E5E7EB — 메인 main.html 팔레트와 동일.
   악센트 블루 #2563EB — UI 액션 전용, 판정(BUY/WATCH/AVOID) 표시 금지.
   판정(인쇄 잉크 톤): BUY 초록 / WATCH 앰버 / AVOID 적 — 악센트와 분리(시맨틱).
   ※ 판정 BUY(--buy #0E6B45 진초록)와 악센트 그린은 톤을 달리해 혼동 방지. */

:root {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --muted: #71717A;
  --line: #E5E7EB;
  --buy: #0E6B45;
  --watch: #8A6A00;
  --avoid: #A03028;
  --accent: #2563EB;
  --carbon: #18181B;
  --hilite: #EEF3FF;
  --slate: #3F3F46;   /* 랭킹 탭 등 어두운 칩 — 파랑 제거, 중립 다크로(2026-08-13) */
  --slate2: #71717A;
  --buy-bg: #E4F1EA;
  --watch-bg: #F5EEDA;
  --avoid-bg: #F6E6E4;
  --radius: 10px;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --font-display: "Archivo", var(--font-body);
  --font-mono: "IBM Plex Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.mono { font-family: var(--font-mono); }
/* 원화 기호 전용 — Plex Mono에 없는 ₩ 글리프를 body 폰트로. 폭 보정으로 숫자와 자연스럽게 붙임 */
.won { font-family: var(--font-body); font-weight: inherit; margin-right: 0.5px; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; font-size: 15px; }

/* ═══ 인증 화면 ═══ */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(340px, 440px);
  gap: 56px;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(1200px 600px at 80% -10%, #EAEFF5 0%, transparent 60%),
    var(--paper);
}
.auth-panel {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 24px rgba(27, 36, 32, 0.06);
}
.auth-brand { display: flex; align-items: baseline; gap: 10px; margin-bottom: 32px; }
.logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  padding: 1px 8px;
  border-radius: 6px;
}
.logo-mark.small { font-size: 18px; border-width: 2px; }
.logo-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.auth-headline {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.auth-desc { color: var(--muted); font-size: 14.5px; margin-bottom: 30px; }

.auth-tabs { display: flex; gap: 4px; background: var(--paper); border-radius: 8px; padding: 4px; margin-bottom: 22px; }
.auth-tab {
  flex: 1; padding: 9px 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 14px;
}
.auth-tab.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field select {
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

.btn-primary {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 14px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.form-error { color: var(--avoid); font-size: 13.5px; margin-bottom: 12px; }
/* 소셜 로그인 */
.social-login { margin-top: 14px; }
.social-div { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; color: var(--muted); font-size: 12px; }
.social-div::before, .social-div::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: #1a1a1a; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.btn-google:hover { border-color: #b8b8b0; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.btn-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-google svg { flex: 0 0 auto; }
.btn-kakao {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 1px solid #FEE500; border-radius: 7px; background: #FEE500;
  color: #1a1a1a; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  margin-top: 8px; transition: filter 120ms ease;
}
.btn-kakao:hover { filter: brightness(0.96); }
.btn-kakao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-kakao svg { flex: 0 0 auto; }

/* 인증 화면 스탬프 (시그니처 요소) */
.auth-stamp {
  position: absolute;
  right: -18px;
  bottom: -14px; /* 구글 버튼 추가로 패널이 길어져 겹침 방지 — 아래로 내림 */
  transform: rotate(-12deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--buy);
  border: 3px solid var(--buy);
  border-radius: 8px;
  padding: 10px 16px;
  opacity: 0.28;
  pointer-events: none;
}

/* ═══ 앱 레이아웃 ═══ */
.app-wrap { display: flex; min-height: 100vh; }
.sidebar {
  width: 210px;
  flex-shrink: 0;
  background: var(--ink);
  color: #C3CDDC;
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { padding: 0 8px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
/* 발굴 목록으로 돌아가는 문(2026-09-03) — 마이페이지에서 나가는 길이 로그아웃뿐이면
   파는 물건이 있는 화면으로 사용자가 스스로 URL을 쳐야 한다. */
.sidebar-back { font-size: .82rem; font-weight: 600; color: var(--muted, #71717A); text-decoration: none; }
.sidebar-back:hover { color: var(--accent, #2563EB); }
.sidebar .logo-mark { color: var(--paper); border-color: var(--paper); }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #9AA7BC;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--paper); }
.nav-item.active { background: rgba(255,255,255,0.12); color: var(--paper); }
.badge {
  background: var(--watch); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; margin-left: auto;
}
.sidebar-foot { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.user-email { font-size: 12px; color: #8494A7; word-break: break-all; padding: 0 4px; }
.sidebar-foot .btn-ghost { border-color: rgba(255,255,255,0.2); color: #9AA7BC; }
.sidebar-foot .btn-ghost:hover { border-color: var(--paper); color: var(--paper); }

.main { flex: 1; padding: 26px 34px 60px; max-width: 1080px; }

/* 상단 지표 스트립 */
.strip {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 22px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.strip-cell { display: flex; flex-direction: column; gap: 1px; }
.strip-cell.wide { min-width: 180px; }
.strip-cell.right { margin-left: auto; }
.strip-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.strip-value { font-size: 18px; font-weight: 700; }
.strip-note { font-size: 11.5px; color: var(--muted); }
.strip-divider { width: 1px; height: 30px; background: var(--line); }
.verdict-buy { color: var(--buy); }
.verdict-watch { color: var(--watch); }
.verdict-avoid { color: var(--avoid); }

/* 패널 */
.panel-head { margin-bottom: 20px; }
.panel-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.panel-sub { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* ═══ 판정 카드 (시그니처) ═══ */
.queue-list { display: flex; flex-direction: column; gap: 14px; }
.pcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  position: relative;
}
.pcard-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.pcard-meta { font-size: 14px; color: var(--muted); margin-top: 2px; }
.pcard-meta .tier { font-weight: 700; color: var(--ink); }

/* 호버 프리뷰 팝오버 — 티어 배지에 마우스를 올리면(또는 포커스) 등급 설명이 카드로 뜬다.
   레퍼런스: X @byJWXN "hover state" (2026-07-20) — 단어 위에 뜨는 커넥터형 프리뷰 카드.
   포인터가 없는 터치 기기는 :hover가 아예 안 걸리므로 탭도 그대로 동작(팝오버만 못 봄 — 정보 손실 없음, 배지 텍스트 자체가 이미 "티어 A"). */
.tier-hoverable { position: relative; cursor: default; border-bottom: 1px dotted var(--muted); }
.tier-popover {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px) scale(.96);
  width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 12px 14px; text-align: left; z-index: 30;
  opacity: 0; pointer-events: none; transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
}
.tier-popover::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-left: 0;
  rotate: 45deg; margin-top: -5px;
}
.tier-popover b { display: block; font-size: 12.5px; margin-bottom: 4px; color: var(--ink); }
.tier-popover span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; font-weight: 400; }
.tier-hoverable:hover .tier-popover, .tier-hoverable:focus-visible .tier-popover {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}

/* 상품 카드 제목 줄 — 공유·삭제 버튼과 나란히 */
.pcard-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard-delete, .pcard-share {
  position: relative;
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; color: var(--muted); font-size: 16px; line-height: 1; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s var(--ease-out), color .15s var(--ease-out);
}
/* 커서 스포트라이트 링 — 아이콘 버튼에 마우스를 올리면 원형 링이 확장되며 나타난다.
   레퍼런스: 프로젝트 리스트 호버 데모(2026-07-22 업로드 영상)의 커서 링 인터랙션. */
.pcard-delete::before, .pcard-share::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0; transform: scale(.5);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .pcard-delete:hover { background: var(--avoid-bg); color: var(--avoid); }
  .pcard-share:hover { background: var(--paper); color: var(--accent); }
  .pcard-delete:hover::before, .pcard-share:hover::before { opacity: .5; transform: scale(1); }
}
.pcard-delete:active, .pcard-share:active { transform: scale(.9); }
/* 온보딩 샘플 상품 표기 */
.sample-badge {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--accent); background: #E6F2EA; border-radius: 4px; padding: 2px 7px;
}

/* 고무 스탬프 판정 (시그니처) — -2° 회전, 잉크 노이즈, 확정 순간 "쿵" */
.stamp {
  position: relative;
  align-self: start;
  justify-self: end;
  transform: rotate(-2deg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.12em;
  border: 3.5px solid currentColor;
  border-radius: 6px;
  padding: 5px 14px 4px;
  line-height: 1.15;
  text-align: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.92 0.08'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-size: 120px;
}
.stamp .stamp-score { display: block; font-size: 10.5px; letter-spacing: 0.06em; font-weight: 700; opacity: 0.85; }
.stamp.buy { color: var(--buy); }
.stamp.watch { color: var(--watch); }
.stamp.avoid { color: var(--avoid); }
.stamp.nodata { color: var(--muted); border-style: dashed; border-width: 2px; transform: rotate(0); font-size: 12px; mask-image: none; }
/* 판정 확정 순간에만 부여 — 다른 요소 재사용 금지 */
@keyframes stampThunk {
  0% { transform: rotate(-2deg) scale(1.6); opacity: 0; }
  60% { transform: rotate(-2deg) scale(0.96); opacity: 1; }
  100% { transform: rotate(-2deg) scale(1); }
}
.stamp.stamped { animation: stampThunk 220ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }

/* 버튼 클릭 스프링 바운스 — app.js가 클릭 위임으로 .btn-bounce를 붙였다 뗀다(재생 가능하게) */
@keyframes btnBounce {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  70% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.btn-bounce { animation: btnBounce 320ms cubic-bezier(.34, 1.56, .64, 1) both; }

/* BUY 확정 순간의 짧은 후광 펄스 — 좋은 소식에만("후킹"은 정직한 결과에만 붙는다, 판정 자체를 과장하지 않음) */
.stamp.buy.stamped::after {
  content: ""; position: absolute; inset: -10px; border-radius: 10px;
  background: radial-gradient(circle, var(--buy) 0%, transparent 70%);
  opacity: 0; animation: buyGlowBurst 620ms ease-out 60ms both; pointer-events: none; z-index: -1;
}
@keyframes buyGlowBurst {
  0% { opacity: 0; transform: scale(0.7); }
  35% { opacity: 0.35; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* 로딩 스켈레톤 — pcard와 같은 높이감의 무정보 블록. opacity 펄스만(레이아웃 속성 아님) */
.pcard.skel { pointer-events: none; }
.skel-line, .skel-stamp {
  background: var(--line); border-radius: 4px;
  animation: skelPulse 1.3s ease-in-out infinite;
}
.skel-title { width: 220px; height: 18px; margin-bottom: 10px; }
.skel-meta { width: 320px; height: 13px; }
.skel-stamp { width: 88px; height: 56px; border-radius: 8px; justify-self: end; }
@keyframes skelPulse { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .skel-line, .skel-stamp { animation: none; opacity: .5; }
}

/* 전표형 마진 내역서 (시그니처 2) — 계산 과정을 숨기지 않는다 */
.receipt {
  grid-column: 1 / -1;
  margin-top: 12px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  max-width: 400px;
  position: relative;
}
.receipt-title {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px; font-weight: 500;
}
.receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.receipt-row .neg { color: var(--avoid); }
.receipt-row.subtle { color: var(--muted); font-size: 12.5px; }
.receipt-rule { border-top: 1px solid var(--line); margin: 7px 0; }
.receipt-total {
  display: flex; justify-content: space-between; gap: 16px;
  font-weight: 600; font-size: 15px;
  border-top: 3px double var(--ink); margin-top: 8px; padding-top: 7px;
}
.receipt-total .pos { color: var(--buy); }
.receipt-total .neg { color: var(--avoid); }
.receipt-foot { font-size: 12px; color: var(--muted); margin-top: 8px; }

.pcard-reasons { grid-column: 1 / -1; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chip {
  font-size: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 11px;
  color: var(--muted);
}
.pcard-conf { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 6px; }
.conf-track { display: inline-block; width: 90px; height: 5px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; vertical-align: middle; margin: 0 6px; overflow: hidden; }
.conf-fill { display: block; height: 100%; background: var(--carbon); } /* 데이터 표시 — 악센트(액션 전용) 금지 */

/* 실전 검증 루프 — "샀나요/팔렸나요"(outcome) */
.outcome-row { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outcome-tag { font-size: 12px; font-weight: 700; color: var(--carbon); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 3px 11px; }
.outcome-price-input { flex: 1; min-width: 140px; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 6px; font-size: 13px; }
.outcome-done { font-size: 12.5px; color: var(--buy); font-weight: 600; }

/* 노스스타(WASV) 요약 바 */
.north-star {
  font-size: 12.5px; color: var(--muted); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 14px; margin-bottom: 14px;
}
.north-star b { color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 상품 등록 폼 */
.add-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; max-width: 720px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.form-grid .span2 { grid-column: 1 / -1; }
.add-form .btn-primary { width: auto; padding: 12px 28px; margin-top: 8px; }

/* 가격 조사 대기열 */
.pending-list { display: flex; flex-direction: column; gap: 12px; }
.pending-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pending-info { flex: 1; min-width: 220px; }
.pending-title { font-weight: 700; font-size: 15px; }
.pending-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pending-breakeven { text-align: right; }
.pending-breakeven .strip-label { display: block; }
.pending-breakeven .mono { font-size: 15px; font-weight: 600; }
.pending-input-row { display: flex; gap: 8px; align-items: center; }
.pending-input-row input {
  width: 150px; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: 7px;
}
.pending-input-row input:focus { outline: none; border-color: var(--accent); }
.btn-small {
  padding: 9px 16px; border: 0; border-radius: 7px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13px;
}
.btn-small:hover { opacity: 0.88; }

/* 연동 설정 */
.settings-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; max-width: 720px; }
.key-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 22px; }
.key-value {
  background: var(--paper); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 14px; font-size: 13px; word-break: break-all; flex: 1;
}
.code-block { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.code-title { background: var(--paper); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 14px; }
.code-block pre { padding: 14px; font-size: 12px; line-height: 1.6; overflow-x: auto; background: #FBFAF7; }
.settings-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* 공통 */
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty .btn-primary { width: auto; margin-top: 16px; padding: 11px 24px; }
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: 11px 22px; border-radius: 8px; font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25); z-index: 50;
  /* 아래 모서리에서 들어오고 같은 방향으로 나감(spatial) — transform/opacity만 */
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ═══ 모바일 하단 탭바 — bestdesignsonx.com 레퍼런스(2026-07-22) 참고:
   채워진/윤곽 아이콘 대비로 활성 탭 표시, 중앙 등록 버튼만 살짝 띄움.
   기본은 display:none — 760px 이하에서만 flex로 전환(아래 미디어쿼리).
   주의: 이 전체 규칙(display:none 포함)이 아래 @media(max-width:760px) 블록보다
   파일상 먼저 와야 한다 — 뒤에 오면 같은 우선순위 캐스케이드에서 display:none이
   미디어쿼리의 display:flex를 덮어써 버린다(2026-07-22 실측 발견·수정, 이 순서
   뒤집지 말 것). ═══ */
.mobile-tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around; align-items: flex-end;
}
.tab-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border: 0; background: transparent; color: var(--muted);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
}
.tab-item.active { color: var(--ink); }
.tab-item:active { transform: scale(.94); }
.tab-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.tab-icon svg { width: 100%; height: 100%; }
.tab-item-add .tab-icon {
  width: 42px; height: 42px; margin-top: -18px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 4px 10px rgba(22,32,44,0.28);
}
.tab-badge-dot {
  position: absolute; top: 2px; right: 18%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--watch);
}
.tab-item { position: relative; }

/* 더보기 시트 — 하단에서 올라오는 패널 */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(22,32,44,0.4);
  display: flex; align-items: flex-end;
}
.sheet-panel {
  width: 100%; background: var(--card); border-radius: 16px 16px 0 0;
  padding: 10px 8px calc(16px + env(safe-area-inset-bottom, 0px));
  max-height: 75vh; overflow-y: auto;
}
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 12px; }
.sheet-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 13px 14px; border: 0; background: transparent; border-radius: 9px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.sheet-item:active { background: var(--paper); }
.sheet-item-logout { color: var(--avoid); margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 16px; }

/* 모바일 앱 레이아웃 — 사이드바/앱 관련 반응형 규칙은 전부 이 블록 하나에만 둔다.
   과거 이 규칙들이 760px·720px 두 블록에 나뉘어 중복 정의된 적이 있었고, 그중 하나가
   .sidebar-foot을 display:none으로 완전히 숨겨버려 모바일에서 로그아웃 버튼이 사라지는
   사고로 이어졌다(2026-07-22 실측 발견·수정). 같은 실수가 반복되지 않도록 이 셀렉터들을
   건드릴 땐 새 @media 블록을 만들지 말고 반드시 여기에 추가할 것. */
@media (max-width: 760px) {
  .app-wrap { flex-direction: column; }
  /* 데스크톱 사이드바는 하단 탭바로 완전히 대체(모바일 전용 네비게이션) */
  .sidebar { display: none; }
  .mobile-tabbar { display: flex; }
  .main { padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .form-grid { grid-template-columns: 1fr; }
  .strip { gap: 16px; }
  .strip-divider { display: none; }
  .auth-headline { font-size: 30px; }
  .pcard { grid-template-columns: 1fr; }
  .stamp { justify-self: start; }
  .offer-row { row-gap: 4px; }
  .offer-sizes { flex-basis: 100%; order: 3; }
  .gap-basis { flex-basis: 100%; }
  .btn-send-queue { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 괴리 스캐너 */
.scan-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.scan-mode { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pcard-meta a { color: var(--accent); font-weight: 600; }

/* 재고 크롤링 */
.crawl-input {
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; background: var(--card); min-width: 220px;
}
.crawl-head-row { display: flex; gap: 14px; align-items: flex-start; }
.crawl-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; }
.offer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.offer-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--paper); border-radius: 8px; font-size: 13px;
}
.offer-shop { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; min-width: 64px; }
.offer-stock.in { color: var(--buy); font-weight: 700; }
.offer-stock.out { color: var(--avoid); font-weight: 700; }
.offer-sizes { display: flex; gap: 4px; flex-wrap: wrap; }
.size-chip {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 7px;
  border-radius: 5px; border: 1px solid var(--line);
}
.size-chip.in { background: var(--buy-bg); color: var(--buy); border-color: transparent; }
.size-chip.out { background: var(--avoid-bg); color: var(--avoid); border-color: transparent; text-decoration: line-through; opacity: 0.7; }
.offer-row a { color: var(--accent); font-weight: 600; margin-left: auto; }
/* 신뢰도 칩(offerConfidence.mjs의 tier) — 등급별로 명확히 구분되는 3가지 톤.
   2026-07-26: 이전엔 "확정 소싱"(.match-badge.ok)에 대응 CSS가 없어 다른 모든 등급과
   똑같은 노란색으로 보이던 버그가 있었음 — 확정=초록(신뢰), 참고=회색(정보), 그 외=노랑(주의). */
.conf-chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.conf-chip.conf-ok { color: var(--buy); background: var(--buy-bg); }
.conf-chip.conf-ref { color: #6b7686; background: #eef1f5; border: 1px solid #dfe3ea; }
.conf-chip.conf-warn { color: var(--watch); background: var(--watch-bg); }

/* 웹 검색 판매처 후보 — 어댑터가 못 찾았을 때의 보조 정보, 확정 재고와 시각적으로 분리 */
.websource-block { grid-column: 1 / -1; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.websource-label { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.websource-caveat { font-weight: 500; color: var(--watch); }
.websource-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.websource-row a { color: var(--accent); font-weight: 600; }

/* 요금제 */
.usage-strip { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; flex-wrap: wrap; }
.usage-cell { background: var(--card); padding: 14px 18px; flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 4px; }
.usage-val { font-size: 20px; font-weight: 700; }
.plan-payments { margin-top: 26px; }
.pay-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.pay-row { display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: var(--card); border: 1px solid var(--line); border-top: none; font-size: 13px; }
.pay-row:first-child { border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.pay-row:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.pay-row:only-child { border-radius: var(--radius); }
.pay-date { color: var(--muted); font-size: 12px; min-width: 84px; }
.pay-desc { flex: 1; word-break: keep-all; }
.pay-amt { font-weight: 700; }
.pay-status { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pay-status.pay-paid { color: var(--buy); border-color: var(--buy); }
.pay-status.pay-failed { color: var(--avoid); border-color: var(--avoid); }
.plan-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; position: relative; }
.plan-card.feat { border-color: var(--accent); border-width: 2px; }
.plan-card.active { box-shadow: 0 0 0 2px var(--buy) inset; }
.plan-ribbon { position: absolute; top: -10px; left: 20px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 5px; }
.plan-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.plan-price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 14px; }
.plan-price span { font-size: 14px; font-weight: 600; color: var(--muted); }
.plan-feats { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; flex: 1; }
.plan-feats li { padding-left: 18px; position: relative; }
.plan-feats li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); }
.plan-card .btn-primary, .plan-card .btn-ghost { width: 100%; }

/* 데이터 소스 상태 (크롤 탭) */
.crawl-sources { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 12.5px; }
.src-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.src-chip { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: 20px; }
.src-chip.on { background: var(--buy-bg); color: var(--buy); }
.src-chip.off { background: var(--line); color: var(--muted); }
.src-fresh { color: var(--muted); margin-left: auto; }
/* 수집 일시 대기 안내 — 견출지 하이라이트(판정 3색은 일반 UI 금지 원칙) */
.src-cooldown { color: var(--ink); background: var(--hilite); padding: 3px 9px; border-radius: 5px; font-size: 12.5px; }

/* 누적 카탈로그 */
/* 카탈로그 반응형 그리드 — 넓은 화면 2열로 밀도↑, 좁으면 1열 */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 560px){ .catalog-grid { grid-template-columns: 1fr; } }
.brand-section-head {
  grid-column: 1 / -1; font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  color: var(--ink); letter-spacing: .02em; padding: 18px 2px 4px; border-bottom: 1.5px solid var(--line);
  margin-bottom: 2px;
}
.brand-section-head:first-child { padding-top: 2px; }
/* 수동 크롤 접기 — 자동 크롤이 기본이라 평소엔 접어둔다 */
.manual-crawl { margin-top: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel, #fafafa); }
.manual-crawl > summary { cursor: pointer; padding: 12px 16px; font-size: 13.5px; font-weight: 600; color: var(--slate, #33455e); list-style: none; user-select: none; }
.manual-crawl > summary::-webkit-details-marker { display: none; }
.manual-crawl > summary::before { content: "▸ "; color: var(--mist, #8a93a3); }
.manual-crawl[open] > summary::before { content: "▾ "; }
.manual-crawl > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.manual-crawl > *:last-child { margin-bottom: 16px; }
.catalog-head { margin: 16px 0 8px; font-size: 14px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.catalog-head b { color: var(--buy); }
.catalog-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 8px; }

/* 카테고리 탭(칩) — 실제 수집된 KREAM 카테고리만, 값 지어내지 않음 */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.pcard-actions { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
/* 단순 가격차 — 전표의 pos/neg 의미 체계를 따르되 판정 스탬프/배지와는 구분되는 한 줄 지표 */
.gap-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 6px 0 2px; font-size: 14px; }
.gap-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-family: "IBM Plex Mono", monospace; }
.gap-value { font-size: 16px; font-weight: 600; }
.gap-value.pos { color: var(--buy); }
.gap-value.neg { color: var(--avoid); }
.gap-basis { font-size: 12.5px; color: var(--muted); }
/* 가격 하락 배지 — 하이라이트 견출지 톤, 판정 3색 미사용 */
.drop-badge { display: inline-flex; align-items: baseline; gap: 6px; background: var(--hilite); color: var(--ink); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; margin: 4px 0; }
.drop-badge b { font-size: 13.5px; }
.drop-badge span { font-weight: 400; color: var(--muted); }
/* 예상 순마진(개략) — 판정색 사용하되 '개략'이라 스탬프(확정 판정)와는 구분. */
.est-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 6px 0 2px; font-size: 14px; }
.est-verdict { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.04em; }
.est-verdict.buy { background: var(--buy-bg); color: var(--buy); }
.est-verdict.watch { background: var(--watch-bg); color: var(--watch); }
.est-verdict.avoid { background: var(--avoid-bg); color: var(--avoid); }
.est-label { color: var(--muted); font-size: 12.5px; }
.est-value { font-variant-numeric: tabular-nums; font-weight: 700; }
.est-value.pos { color: var(--buy); } .est-value.neg { color: var(--avoid); }
.est-target { font-size: 12px; color: var(--muted); }
.est-target b { color: var(--ink); font-variant-numeric: tabular-nums; }
.est-note { flex-basis: 100%; font-size: 11px; color: var(--soft, #8a99ae); }
/* 가격 추이 스파크라인 — Supabase price_snapshots. 판정색·인주 주홍 미사용(중립 잉크 계열).
   상승=경고(프리미엄 오름=기회 커짐)로 오해 없게 색은 절제, 정보 위주. */
.trend-box { margin: 8px 0 4px; padding: 8px 10px; background: var(--panel, #fafafa); border: 1px solid var(--line, #eaeae4); border-radius: 8px; }
.trend-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.trend-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.trend-delta { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 12px; }
.trend-delta.up { color: #1f7a4d; }      /* 프리미엄율 상승 = 기회 확대 */
.trend-delta.down { color: #9a6b1f; }     /* 하락 = 기회 축소 */
.trend-delta.flat { color: var(--muted); }
.trend-svg { display: block; width: 100%; height: 40px; margin: 4px 0 2px; }
.trend-svg path { stroke: #6b7280; }
.trend-svg.up path { stroke: #1f7a4d; }
.trend-svg.down path { stroke: #9a6b1f; }
.trend-svg circle { fill: currentColor; }
.trend-svg.up circle { fill: #1f7a4d; }
.trend-svg.down circle { fill: #9a6b1f; }
.trend-svg.flat circle { fill: #6b7280; }
.trend-foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.trend-foot b { font-variant-numeric: tabular-nums; color: var(--ink); }
/* 분석 인사이트 패널 — 카테고리별 프리미엄율 집계(Supabase). 판정색 미사용, 정보 위주. */
.insights-panel { margin: 6px 0 10px; padding: 12px 14px; background: var(--panel, #fafafa); border: 1px solid var(--line, #eaeae4); border-radius: 10px; }
.ins-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ins-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.ins-list { display: flex; flex-direction: column; gap: 6px; }
.ins-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ins-cat { flex: 0 0 84px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar { flex: 1; height: 8px; background: var(--hilite, #efeee9); border-radius: 4px; overflow: hidden; }
.ins-fill { display: block; height: 100%; background: #6b7280; border-radius: 4px; }
.ins-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--ink); }
.ins-max { color: var(--muted); font-weight: 400; }
.ins-trend { margin-top: 10px; font-size: 12px; color: var(--muted); }
/* 워치리스트(관심 상품) 패널 */
.watchlist-panel { margin: 6px 0 10px; padding: 12px 14px; background: var(--panel, #fafafa); border: 1px solid var(--line, #eaeae4); border-radius: 10px; }
.wl-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.wl-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.wl-list { display: flex; flex-direction: column; gap: 8px; }
.wl-row { display: flex; align-items: center; gap: 10px; }
.wl-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: 0 0 40px; background: var(--hilite, #efeee9); }
.wl-noimg { display: block; }
.wl-info { flex: 1; min-width: 0; }
.wl-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-meta { font-size: 11.5px; color: var(--muted); }
.wl-stat { flex: 0 0 auto; font-size: 12.5px; color: var(--ink); text-align: right; }
.wl-stat b { font-variant-numeric: tabular-nums; }
.wl-wait { color: var(--muted); font-size: 11.5px; }
.wl-chg { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-size: 11.5px; margin-left: 4px; }
.wl-chg.up { color: #1f7a4d; } .wl-chg.down { color: #9a6b1f; } .wl-chg.flat { color: var(--muted); }
.wl-remove { flex: 0 0 auto; border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.wl-remove:hover { background: var(--hilite, #efeee9); color: var(--ink); }
/* 실시간 소싱 레이더 패널 — 소싱처·소싱가 미노출(상품명·프리미엄율만). 판정색 미사용. */
.radar-panel { margin: 6px 0 10px; padding: 12px 14px; background: var(--panel, #fafafa); border: 1px solid var(--line, #eaeae4); border-radius: 10px; }
.rd-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.rd-sub { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.rd-live { color: #1f7a4d; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; margin-right: 4px; animation: rd-pulse 2s ease-in-out infinite; }
@keyframes rd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .rd-live { animation: none; } }
.rd-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.rd-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line, #f0f0ea); }
.rd-row:last-child { border-bottom: none; }
.rd-body { flex: 1; min-width: 0; color: var(--ink); }
.rd-body b { font-weight: 600; }
.rd-tag { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.rd-tag.drop { background: #eaf5ee; color: #1f7a4d; }
.rd-tag.high { background: #f3eee4; color: #9a6b1f; }
.rd-num { font-variant-numeric: tabular-nums; color: var(--muted); }
.rd-ago { flex: 0 0 auto; font-size: 11px; color: var(--muted); }
/* ── 데일리 카테고리 랭킹 탭 ── */
.nav-lock { font-size: 11px; margin-left: 2px; }
.pro-badge { font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 11px; font-weight: 700; color: var(--vermil, #2563EB); border: 1px solid var(--vermil, #2563EB); border-radius: 5px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; letter-spacing: 0.06em; }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.rk-tab { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--slate, #33455e); cursor: pointer; }
.rk-tab.active { background: var(--slate, #33455e); color: #fff; border-color: var(--slate, #33455e); }
.rk-tab-buy { border-color: var(--buy); color: var(--buy); font-weight: 700; }
.rk-tab-buy.active { background: var(--buy); border-color: var(--buy); color: #fff; }
.rk-cattag { font-size: 10.5px; font-weight: 700; color: var(--slate2, #4c6484); background: var(--hilite, #eef0f4); border-radius: 4px; padding: 1px 6px; margin-right: 5px; vertical-align: 1px; }
/* 홈 '오늘의 BUY' 배너 */
.today-buy { margin-bottom: 14px; }
.tb-inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--buy-bg); border: 1px solid var(--buy); border-radius: 11px; }
.tb-inner.tb-lock { background: var(--panel, #f7f8fa); border-color: var(--line); }
.tb-icon { font-size: 18px; flex: 0 0 auto; }
.tb-text { flex: 1; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.tb-text b { font-weight: 700; }
.tb-inner:not(.tb-lock) .tb-text b { color: var(--buy); }
.tb-btn { flex: 0 0 auto; border: none; background: var(--buy); color: #fff; border-radius: 8px; padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tb-inner.tb-lock .tb-btn { background: var(--accent, #2563EB); }
.tb-btn:hover { opacity: 0.9; }
.rk-tab-n { font-family: var(--font-mono, monospace); font-size: 11px; opacity: 0.7; margin-left: 3px; }
.rk-datehead { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rk-datehead .rk-sub { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.rk-list { display: flex; flex-direction: column; gap: 2px; }
.rk-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.rk-row:hover { background: var(--panel, #fafafa); border-color: var(--line); }
.rk-rank { flex: 0 0 30px; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--slate2, #4c6484); }
.rk-thumb { width: 44px; height: 44px; flex: 0 0 44px; object-fit: cover; border-radius: 7px; background: var(--hilite, #efeee9); }
.rk-noimg { display: block; }
.rk-info { flex: 1; min-width: 0; }
.rk-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-brand { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-wait { color: var(--muted); font-style: italic; }
.rk-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.rk-prem { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; min-width: 52px; text-align: right; }
.rk-prem.pos { color: #1f7a4d; } .rk-prem.neg { color: var(--muted); }
.rk-prem.wait { color: var(--mist, #b9bcc4); font-size: 11.5px; font-weight: 500; }
.rk-verdict { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.03em; min-width: 46px; text-align: center; }
.rk-verdict.buy { background: var(--buy-bg); color: var(--buy); }
.rk-verdict.watch { background: var(--watch-bg); color: var(--watch); }
.rk-verdict.avoid { background: var(--avoid-bg); color: var(--avoid); }
.rk-verdict.none { background: transparent; color: var(--mist, #c8ccd4); }
.rk-margin { color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-filter { margin-left: 10px; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--slate, #33455e); cursor: pointer; }
.rk-filter.active { background: var(--buy-bg); border-color: var(--buy); color: var(--buy); }
/* 비구독자 자물쇠 화면 */
.rk-locked { text-align: center; padding: 40px 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; max-width: 560px; margin: 10px auto; }
.rk-lock-icon { font-size: 40px; margin-bottom: 10px; }
.rk-locked h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.01em; }
.rk-locked > p { color: var(--slate, #33455e); font-size: 14px; max-width: 44ch; margin: 0 auto 18px; line-height: 1.6; }
.rk-lockcats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.rk-lockcat { display: flex; align-items: center; gap: 8px; background: var(--panel, #fafafa); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; filter: blur(0.4px); }
.rk-lockcat-name { font-size: 12.5px; font-weight: 600; color: var(--slate2, #4c6484); }
.rk-lockcat-n { font-size: 11px; color: var(--mist, #8a93a3); font-variant-numeric: tabular-nums; }
.rk-upgrade { width: auto !important; padding: 12px 26px !important; }
/* 관심 키워드 — 소스 칩과 같은 줄 문법, 본인 등록분만 삭제 x */
.crawl-keywords { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; font-size: 13px; }
.kw-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.kw-del { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 14px; padding: 0 2px; line-height: 1; }
.kw-del:hover { color: var(--accent); }
.kw-form { display: inline-flex; gap: 6px; align-items: center; }
.kw-input { width: 130px; padding: 6px 10px; font-size: 13px; }

/* 홈 소싱 기회 위젯 — 카드 톤 유지, 행 전체가 크롤 탭으로 가는 버튼 */
/* 주간 소싱 리포트 — 다크 대비 배너로 눈에 띄게(구독 유도) */
.weekly-report { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.wr-head { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.wr-sub { font-weight: 400; color: #9AA7BC; font-size: 12px; margin-left: 6px; }
.wr-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.wr-stat { display: flex; flex-direction: column; gap: 2px; }
.wr-stat b { font-size: 22px; font-weight: 700; }
.wr-stat span { font-size: 12px; color: #9AA7BC; }
.wr-locked { background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 0; }
.wr-locked b { font-size: 22px; }
.wr-locked span { font-size: 12px; color: var(--hilite); font-weight: 600; }

.sourcing-opps { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.opps-head { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.opps-sub { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.opp-row { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.opp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.opp-basis { color: var(--muted); font-size: 12.5px; margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .opp-row:hover { background: var(--paper); } }
/* 프리미엄 티저 잠금 — 가치를 보여주되 수치는 흐림. 악센트(인주)는 CTA 전용 원칙 준수 */
.gap-lock-blur { filter: blur(5px); user-select: none; color: var(--muted); }
.opp-locked { cursor: default; opacity: .85; }
.gap-locked .gap-label { opacity: .8; }
.gap-unlock, .opp-unlock { background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 2px 0; text-align: left; }
.opp-unlock { display: block; margin-top: 6px; font-size: 13px; }
@media (max-width: 720px) { .opp-name { max-width: 60%; } .opp-basis { flex-basis: 100%; margin-left: 0; } .opp-row { flex-wrap: wrap; row-gap: 2px; } }
.pcard-actions .btn-send-queue { font-size: 13px; padding: 8px 14px; }
.chip-sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.brand-chips { margin-top: -8px; }
.chip-group-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-right: 2px; }
.cat-chip {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out);
}
.cat-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .cat-chip:hover { border-color: var(--accent); color: var(--accent); }
  .cat-chip.active:hover { color: var(--paper); }
}
.cat-chip:active { transform: scale(.96); }

/* 출처 표기 */
.source-note { font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.source-note a { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════
   v1.7 POLISH LAYER — 깊이·모션·타이포 정제 (정체성 유지)
   ═══════════════════════════════════════════════ */
:root {
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(27,36,32,.04), 0 1px 3px rgba(27,36,32,.06);
  --shadow-md: 0 2px 4px rgba(27,36,32,.04), 0 8px 24px rgba(27,36,32,.07);
  --shadow-lg: 0 8px 40px rgba(27,36,32,.12);
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* 강한 ease-out — 진입·호버·프레스(빌트인 커브는 약함) */
  --accent-2: #DE5633; /* 인주 밝은 톤 — 다크(사이드바) 배경 위 액션 표시용 */
}
body { background:
  radial-gradient(900px 500px at 100% -5%, #F1F0EA 0%, transparent 55%),
  radial-gradient(700px 500px at -10% 110%, #EFEEE8 0%, transparent 50%),
  var(--paper); background-attachment: fixed; }
::selection { background: rgba(193,58,27,.16); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #D2CDBE; border-radius: 8px; border: 3px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background: #BEB8A6; }

/* 부드러운 전환 공통 — transform/opacity/색만(레이아웃 속성 애니메이션 금지, GPU 합성) */
.btn-primary, .btn-ghost, .btn-small, .nav-item, .field input, .field select,
.auth-tab, .pcard, .plan-card, .settings-card, .pending-card, .offer-row, .src-chip {
  transition: transform .16s var(--ease-out), box-shadow .18s var(--ease-out),
              border-color .15s var(--ease-out), background-color .15s var(--ease-out),
              color .15s var(--ease-out), opacity .15s var(--ease-out);
}

/* 버튼 — 깊이 + 프레스 */
.btn-primary {
  background: linear-gradient(180deg, #2A332E 0%, var(--ink) 100%);
  box-shadow: 0 1px 2px rgba(27,36,32,.18), inset 0 1px 0 rgba(255,255,255,.06);
  letter-spacing: .01em;
}
.btn-primary:hover { opacity: 1; box-shadow: 0 4px 14px rgba(27,36,32,.22); }
/* 프레스 피드백 — 눌리는 물성(scale). 모든 눌리는 요소에 적용, 미세하게 */
.btn-primary:active { transform: scale(.98); box-shadow: 0 1px 2px rgba(27,36,32,.2); }
.btn-small:active, .btn-ghost:active, .nav-item:active { transform: scale(.98); }

/* 입력 포커스 글로우 */
.field input:focus, .field select:focus, .crawl-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(193,58,27,.13);
}
.field input, .field select { border-width: 1.5px; }

/* 카드 깊이 + 호버 리프트(리프트는 아래 hover 게이트에서) */
.pcard, .settings-card { box-shadow: var(--shadow-sm); }
.pcard:hover { box-shadow: var(--shadow-md); border-color: #CFC9B8; }

/* 상단 스트립 — 카드감 */
.strip { box-shadow: var(--shadow-sm); padding: 16px 24px; }
.strip-value { letter-spacing: -.01em; }

/* 사이드바 — 그라데이션 + 활성 인디케이터 */
.sidebar { background: linear-gradient(185deg, #232D28 0%, var(--ink) 55%, #161D19 100%); }
.nav-item { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px; border-radius: 3px; background: var(--accent-2);
}
/* 요금제 카드 리프트(리프트는 아래 hover 게이트에서) */
.plan-card:hover { box-shadow: var(--shadow-md); }
.plan-card.feat { box-shadow: 0 6px 30px rgba(193,58,27,.12); }

/* 호버 이동은 마우스(정밀 포인터)에서만 — 터치는 탭 시 가짜 hover가 들러붙음 */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .pcard:hover { transform: translateY(-2px); }
  .nav-item:hover { transform: translateX(2px); }
  .plan-card:hover { transform: translateY(-3px); }
}

/* 재고 오퍼 행 호버 */
.offer-row:hover { background: #EDF1F6; }

/* 패널 등장 — 잦은 내비게이션이라 짧고 반응성 있게(300ms 미만, 강한 ease-out) */
.panel:not(.hidden) { animation: fipFade .2s var(--ease-out); }
@keyframes fipFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 타이포 정제 */
.panel-head h2 { font-family: var(--font-display); letter-spacing: -.02em; }
.pcard-title { letter-spacing: -.015em; }

/* ═══ 로그인 화면 강화 (첫인상·전환) ═══ */
.auth-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
/* ═══ 랜딩 가치 영역 — 무슨 서비스인지 3초 안에: 헤드라인 → 판정 데모 → 벤핏 3 → 가격 ═══ */
.landing-value { max-width: 560px; }
.landing-value .auth-desc { font-size: 16px; line-height: 1.65; }
.landing-demo { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 22px 0; max-width: 430px; position: relative; }
.ld-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ld-name { font-weight: 700; font-size: 14.5px; }
.ld-stamp { font-family: Archivo, Pretendard, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--watch); border: 2.5px solid currentColor; padding: 2px 9px; transform: rotate(-2deg); }
.ld-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
.ld-row.muted { color: var(--muted); }
.ld-row.total { border-top: 3px double var(--ink); margin-top: 7px; padding-top: 8px; font-weight: 800; }
.ld-row.total .mono { color: var(--buy); }
.ld-row.total em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12px; }
.ld-foot { color: var(--muted); font-size: 12px; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 9px; }
.landing-points { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 14px; }
.lp b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.lp span { color: var(--muted); font-size: 13px; }
.landing-price { color: var(--muted); font-size: 13px; border-left: 3px solid var(--hilite); padding-left: 10px; }
@media (max-width: 980px) {
  .auth-wrap { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
  .landing-value { max-width: 440px; }
}
.auth-headline {
  font-family: var(--font-display); font-size: 36px; letter-spacing: -.03em;
}
.auth-headline .hl { color: var(--accent); }
.auth-feats { display: flex; flex-wrap: wrap; gap: 7px; margin: -12px 0 26px; }
.auth-feat {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px;
}
.auth-feat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--buy); }
.auth-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent);
}

/* 모바일 사이드바/앱 레이아웃 규칙은 위쪽 max-width:760px 블록 하나로 통합됨(중복 정의 제거, 2026-07-22) */
@media (max-width: 760px) { .auth-headline { font-size: 30px; } }

@media (prefers-reduced-motion: reduce) {
  *, .panel:not(.hidden) { animation: none !important; transition: none !important; }
  .btn-primary:hover, .pcard:hover, .plan-card:hover, .nav-item:hover { transform: none; }
}

/* 링크형 버튼 (비밀번호 찾기) */
.link-btn { display: block; width: 100%; margin-top: 12px; background: none; border: 0; color: var(--muted); font-size: 13px; text-align: center; }
.link-btn:hover { color: var(--accent); text-decoration: underline; }
/* 세일가 감지 배지 — 편집샵 세일 오퍼(compare_at_price 대비 할인) */
.sale-badge { display: inline-block; background: #FDECEC; color: #C0392B; border: 1px solid #F0C0BC; border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.sale-badge.sm { padding: 1px 6px; font-size: 10.5px; margin-left: 4px; }
/* 소싱 기록 조회/다운로드 */
.sourcing-log-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.slb-label { font-weight: 700; font-size: 13.5px; }
.slb-note { font-size: 11.5px; color: var(--muted); flex-basis: 100%; }
.sourcing-log { margin-bottom: 16px; }
.slog-head { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.slog-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.slog-table { width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.slog-table th, .slog-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.slog-table th { background: var(--panel, #f7f8fa); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; position: sticky; top: 0; }
.slog-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.slog-table td.pos { color: #1f7a4d; } .slog-table td.neg { color: var(--muted); }
.slog-table tbody tr:hover { background: var(--panel, #fafafa); }
.slog-type { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.slog-type.ok { background: #E7F5EC; color: #12924F; }
.slog-type.ref { background: #eef1f5; color: #6b7686; }

/* ═══ 기회 대시보드 (v2.2) — 고밀도·판정 우선. DESIGN.md Slate Blue v3 준수 ═══ */
.opps-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.opps-stat {
  background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7); border-radius: 8px;
  padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 110px;
}
.opps-stat .mono { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.opps-stat-k { font-size: 12px; color: var(--muted, #46566A); letter-spacing: 0.02em; }
.opps-stat.wide { min-width: 200px; }

.opp-section { margin-bottom: 32px; }
.opp-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.opp-section-head h3 { font-size: 17px; margin: 0; font-family: Archivo, Pretendard, sans-serif; }
.opp-section-head span { font-size: 12.5px; color: var(--muted, #46566A); }

.opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.opp-card {
  display: flex; gap: 12px; background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7);
  border-radius: 8px; padding: 12px; overflow: hidden;
}
.opp-card.locked { opacity: 0.85; }
.opp-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--paper, #F5F7FA); }
.opp-thumb.ph { display: block; }
.opp-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.opp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.opp-brand { font-size: 12px; color: var(--muted, #46566A); text-transform: uppercase; letter-spacing: 0.04em; }
.opp-score {
  font-size: 15px; font-weight: 700; padding: 1px 8px; border: 2px solid currentColor; border-radius: 4px;
  transform: rotate(-2deg); font-variant-numeric: tabular-nums;
}
.opp-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-starline { font-size: 13px; display: flex; gap: 8px; align-items: center; }
.opp-stars { letter-spacing: 0.1em; color: var(--ink, #16202C); }
.opp-reco { font-weight: 700; font-size: 12.5px; }
.opp-nums { font-size: 13px; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.opp-nums > div { display: flex; justify-content: space-between; gap: 10px; }
.opp-k { color: var(--muted, #46566A); font-size: 12px; font-family: Pretendard, sans-serif; }
.opp-net { font-weight: 700; border-top: 1px dashed var(--line, #D9DFE7); padding-top: 3px; margin-top: 2px; }
.opp-net .pos { color: var(--buy, #0E6B45); } .opp-net .neg { color: var(--avoid, #A03028); }
.sale-tag { font-style: normal; font-size: 11px; color: var(--accent, #2563EB); font-weight: 700; }
.opp-reasons { font-size: 12px; color: var(--muted, #46566A); display: flex; flex-direction: column; }
.opp-drop { font-size: 12.5px; color: var(--buy, #0E6B45); font-weight: 700; }
.opp-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted, #46566A); margin-top: auto; padding-top: 4px; }
.opp-sources { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opp-updated { flex-shrink: 0; }
.opp-actions { display: flex; gap: 6px; margin-top: 4px; }
.btn-sm { padding: 4px 10px; font-size: 12px; width: auto; }
.opp-lock { font-size: 13px; color: var(--muted, #46566A); display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.brand-row { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-chip {
  background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7); border-radius: 999px;
  padding: 6px 14px; font-size: 13px;
}
.brand-chip em { font-style: normal; color: var(--muted, #46566A); font-size: 12px; }

/* 카탈로그 카드 인라인 점수 */
.opp-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 6px 0 2px; }
.opp-inline-reason { color: var(--muted, #46566A); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 스마트 검색 */
.catalog-search-bar { margin: 10px 0; }
#catalog-search { width: 100%; max-width: 460px; }

/* ROI 계산기 */
.calc-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.calc-result .receipt { position: sticky; top: 16px; }
.calc-result .pos { color: var(--buy, #0E6B45); } .calc-result .neg { color: var(--avoid, #A03028); }
.calc-result .receipt-row.total { font-weight: 800; font-size: 17px; }

@media (max-width: 880px) {
  .calc-wrap { grid-template-columns: 1fr; }
  .opp-grid { grid-template-columns: 1fr; }
  .opps-stat { flex: 1; min-width: 90px; }
}

/* ═══ 상품 상세 모달 (v2.2 2단계) ═══ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(22, 32, 44, 0.45); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto;
}
.modal-panel {
  position: relative; background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7);
  border-radius: 12px; max-width: 760px; width: 100%; padding: 24px; margin-bottom: 4vh;
  box-shadow: 0 20px 60px rgba(22, 32, 44, 0.25);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px; border: 1px solid var(--line, #D9DFE7); background: var(--paper, #F5F7FA);
  border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: var(--muted, #46566A);
}
.modal-close::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid var(--accent, #2563EB); opacity: 0; transform: scale(.5);
  transition: opacity .2s var(--ease-out, ease-out), transform .2s var(--ease-out, ease-out); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover::before { opacity: .4; transform: scale(1); }
}
.modal-close:hover { color: var(--ink, #16202C); }
.detail-head { display: flex; gap: 16px; margin-bottom: 16px; }
.detail-img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--paper, #F5F7FA); flex-shrink: 0; display: block; }
.detail-thumbs { display: flex; gap: 6px; margin-top: 6px; width: 120px; flex-wrap: wrap; }
.detail-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 1.5px solid var(--line, #D9DFE7); opacity: 0.75; transition: opacity .12s, border-color .12s; }
.detail-thumb:hover { opacity: 1; border-color: var(--accent, #2563EB); }
.detail-title h3 { margin: 2px 0 6px; font-size: 20px; font-family: Archivo, Pretendard, sans-serif; }
.detail-title { min-width: 0; }
.detail-chart { border: 1px solid var(--line, #D9DFE7); border-radius: 8px; padding: 12px; margin-bottom: 16px; background: var(--paper, #F5F7FA); }
.detail-chart-head { font-size: 13px; font-weight: 700; display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.detail-chart svg { width: 100%; height: 150px; display: block; }
.line-kream { stroke: var(--ink, #16202C); }
.line-offer { stroke: var(--accent, #2563EB); }
.legend { font-size: 11.5px; color: var(--muted, #46566A); display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.legend i { width: 14px; height: 2px; display: inline-block; }
.legend .lg-kream, .lg-kream { background: var(--ink, #16202C); }
.legend .lg-offer, .lg-offer { background: var(--accent, #2563EB); }
.detail-chart-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted, #46566A); margin-top: 4px; }
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 12px; }
.detail-cols h4, #detail-body h4 { margin: 0 0 8px; font-size: 14.5px; }
.detail-receipt { font-size: 13.5px; }
.detail-receipt .pos { color: var(--buy, #0E6B45); } .detail-receipt .neg { color: var(--avoid, #A03028); }
.detail-receipt .receipt-row.total { font-weight: 800; font-size: 16px; }
.detail-offer { padding: 7px 0; border-bottom: 1px dashed var(--line, #D9DFE7); font-size: 13.5px; }
/* 샵명·신뢰도 칩·가격 위치를 행마다 고정해 스프레드시트처럼 스캔하기 쉽게(2026-07-26 정리) */
.detail-offer-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-offer-shop { font-weight: 600; min-width: 72px; }
.detail-offer-price { margin-left: auto; text-align: right; }
.detail-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted, #46566A); border-top: 1px solid var(--line, #D9DFE7); padding-top: 10px; margin: 8px 0 16px; flex-wrap: wrap; }
.opp-card.clickable { cursor: pointer; transition: border-color 120ms ease-out; }
.opp-card.clickable:hover { border-color: var(--accent, #2563EB); }

/* ═══ 주간 리포트 ═══ */
.report-summary {
  background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7); border-left: 4px solid var(--accent, #2563EB);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 28px;
}
.report-summary-head { font-weight: 800; font-family: Archivo, Pretendard, sans-serif; margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; }
.report-summary p { margin: 4px 0; font-size: 14.5px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card, #fff); border: 1px solid var(--line, #D9DFE7); border-radius: 8px; overflow: hidden; }
.report-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #46566A); background: var(--paper, #F5F7FA); padding: 8px 12px; font-family: "IBM Plex Mono", monospace; }
.report-table td { padding: 8px 12px; border-top: 1px solid var(--line, #D9DFE7); }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .pos { color: var(--buy, #0E6B45); font-weight: 700; }
.report-table .neg { color: var(--avoid, #A03028); font-weight: 700; }
.report-table .ellip { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .detail-cols { grid-template-columns: 1fr; }
  .detail-head { flex-direction: column; }
  .modal-panel { padding: 16px; }
  .report-table .ellip { max-width: 140px; }
}

/* 레이더 태그 — 재입고·고득점 (v2.2 3단계) */
.rd-tag.restock { background: #DCE6FB; color: #2563EB; }
.rd-tag.score { background: #E4F1EA; color: #0E6B45; }

/* ISSUE-002: 한글 라벨 중간 줄바꿈 방지 — 금액 라벨·버튼이 "순수 익"처럼 끊기지 않게 */
.opp-k, .opp-lock, .btn-sm, .opps-stat-k { word-break: keep-all; }
.opp-k { white-space: nowrap; }

/* ── 가입·로그인 화면 헤더(2026-09-09) ─────────────────────────────
   /signup에 우측 카테고리란이 없다는 지적에 붙였다. 메인 헤더와 같은 항목·같은 순서.
   인증 화면 전용이라 대시보드 셸과 겹치지 않는다(sitehead.js가 표시를 제어). */
.fip-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E7E9EE}
.fip-head-in{max-width:1180px;margin:0 auto;padding:0 24px;height:58px;
  display:flex;align-items:center;gap:22px}
.fip-logo{font-weight:900;font-size:20px;letter-spacing:-.03em;color:#111;text-decoration:none}
.fip-logo b{color:#2563EB}
.fip-nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.fip-nav>a{font-size:14px;font-weight:600;color:#4A5160;text-decoration:none}
.fip-nav>a:hover{color:#111}
.fip-cta{background:#111;color:#fff!important;padding:8px 16px;border-radius:8px;font-weight:700}
.fip-catwrap{position:relative}
.fip-catbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font-size:14px;font-weight:600;color:#4A5160;font-family:inherit;padding:0}
.fip-catbtn:hover{color:#111}
.fip-catwrap.open .fip-catbtn{color:#111}
.fip-catmenu{position:absolute;right:0;top:calc(100% + 12px);min-width:186px;padding:6px;
  background:#fff;border:1px solid #E7E9EE;border-radius:12px;box-shadow:0 14px 34px rgba(16,24,40,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s}
.fip-catwrap.open .fip-catmenu{opacity:1;visibility:visible;transform:none}
.fip-catmenu a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;
  font-size:14px;font-weight:600;color:#2B3140;text-decoration:none;white-space:nowrap}
.fip-catmenu a:hover{background:#F3F5F9}
.fip-catmenu a i{margin-left:auto;font-style:normal;font-size:12px;color:#98A0AE;
  font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .fip-head-in{padding:0 16px;gap:14px;height:52px}
  .fip-nav{gap:14px}
  .fip-nav>a:not(.fip-cta){display:none}   /* 좁은 화면에선 카테고리와 구독만 남긴다 */
}

/* 로그인 단축(2026-09-29) — 휴대폰에서 소개 문구가 입력칸을 한참 밀어냈다. 입력·소셜 버튼을 먼저, 소개는 아래로 */
@media (max-width: 860px) {
  .auth-wrap { display: flex; flex-direction: column; }
  .auth-wrap .auth-panel { order: 1; }
  .auth-wrap .landing-value { order: 2; }
  .auth-wrap .auth-feats { display: none; }
}
#social-login .btn-kakao, #social-login .btn-google { min-height: 48px; font-size: 15px; }
#social-login { margin-bottom: 14px; }

/* ═══ 회원가입 절차(2026-09-30) — 약관 동의 상자·비밀번호 확인·칸별 오류. 인증 카드 기존 톤 그대로 ═══ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field-err { color: var(--avoid); font-size: 12.5px; line-height: 1.45; }
.field-err:empty { display: none; }
.field input[aria-invalid="true"] { border-color: var(--avoid); }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; min-width: 0; padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.pw-toggle:hover { color: var(--ink); background: var(--hilite); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-rules { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.pw-rules li::before { content: "○"; margin-right: 4px; }
.pw-rules li.ok { color: var(--ink); }
.pw-rules li.ok::before { content: "✓"; color: var(--accent); font-weight: 700; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary:disabled:hover { opacity: 0.35; }
.soc-hint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 8px; }
.soc-notice { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; line-height: 1.5; }
.soc-notice a, .cs-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.soc-notice a:hover, .cs-note a:hover { color: var(--accent); }
#social-login .is-disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
#social-login .is-disabled:hover { box-shadow: none; filter: grayscale(0.4); }

.consent-box { border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px 10px; margin-bottom: 16px; }
.cs-title { font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 10px; }
.consent-box input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.consent-box input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-all { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cs-all label { display: flex; flex-direction: column; font-size: 14.5px; cursor: pointer; }
.cs-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.cs-list { list-style: none; padding-top: 4px; }
.cs-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 13.5px; }
.cs-row label { flex: 1; min-width: 0; cursor: pointer; line-height: 1.45; }
.cs-tag { font-style: normal; font-weight: 700; color: var(--accent); margin-right: 2px; }
.cs-tag.opt { color: var(--muted); }
.cs-view {
  flex: 0 0 auto; background: none; border: 0; padding: 0 2px; font-size: 12.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; min-height: 24px;
}
.cs-view:hover { color: var(--accent); }
.cs-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-detail { margin: 0 0 6px 28px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; }
.cs-table th, .cs-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.cs-table th { width: 64px; background: #F7F8FA; color: var(--muted); font-weight: 600; white-space: nowrap; }
.cs-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.consent-box .field-err { margin-top: 4px; }
@media (max-width: 480px) {
  .auth-panel { padding: 32px 20px; }
  .cs-detail { margin-left: 0; }
}