/* ============================================================================
   GiftTalk — 공통 컴포넌트 + 레이아웃
   ========================================================================== */

/* ── 뼈대 ─────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.page { padding: var(--s7) 0 var(--s10); min-height: 60vh; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.gap1 { gap: var(--s1) } .gap2 { gap: var(--s2) } .gap3 { gap: var(--s3) }
.gap4 { gap: var(--s4) } .gap5 { gap: var(--s5) } .gap6 { gap: var(--s6) }
.grow { flex: 1; min-width: 0; }
.wrapx { flex-wrap: wrap; }
.hide { display: none !important; }
.center { text-align: center; }
.muted { color: var(--text-2); }
.muted2 { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.scroll-x::-webkit-scrollbar { height: 6px; }

/* ── 헤더 ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: rgba(9, 12, 19, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-name { font-size: var(--f-lg); font-weight: 800; letter-spacing: .04em; }

.gnb { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.gnb a {
  padding: 8px 11px; border-radius: var(--r-sm); white-space: nowrap;
  font-size: var(--f-md); font-weight: 600; color: var(--text-2);
  letter-spacing: .02em; transition: color .15s var(--ease), background .15s var(--ease);
}
.gnb a:hover { color: var(--text); background: var(--surface-2); }
.gnb a.on { color: var(--text); background: var(--surface-3); }

.hdr-r { display: flex; align-items: center; gap: var(--s2); margin-left: auto; flex-shrink: 0; }

/* 헤더 검색 */
.hsearch { position: relative; width: clamp(150px, 17vw, 250px); }
.hsearch input {
  width: 100%; height: 38px; padding: 0 34px 0 34px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); font-size: var(--f-md); color: var(--text);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.hsearch input::placeholder { color: var(--text-4); }
.hsearch input:focus { outline: none; border-color: var(--accent-line); background: var(--surface-2); }
.hsearch .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.hsearch .clr { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); padding: 4px; line-height: 0; }

/* 아이콘 버튼 */
.iconbtn {
  position: relative; width: 38px; height: 38px; border-radius: var(--r-full);
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent; transition: .15s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }
.iconbtn .dot {
  position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800; display: grid; place-items: center;
  border: 2px solid var(--bg);
}

/* ── 버튼 ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 40px; padding: 0 var(--s4); border-radius: var(--r-sm);
  font-size: var(--f-md); font-weight: 700; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger-soft); border-color: rgba(224,90,90,.35); color: #F08585; }
.btn-danger:hover { background: rgba(224,90,90,.2); }
.btn-tg { background: #2AA0DA; border-color: #2AA0DA; color: #04121E; }
.btn-tg:hover { background: #2490c6; border-color: #2490c6; }
.btn-lg { height: 48px; padding: 0 var(--s6); font-size: var(--f-lg); border-radius: var(--r-md); }
.btn-sm { height: 32px; padding: 0 var(--s3); font-size: var(--f-sm); border-radius: var(--r-xs); }
.btn-full { width: 100%; }
.btn-icon { padding: 0; width: 40px; }
.btn-icon.btn-sm { width: 32px; }

/* ── 입력 ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); }
.field .hint { font-size: var(--f-xs); color: var(--text-3); line-height: 1.5; }
.field .err { font-size: var(--f-xs); color: #F08585; }

.input, .select, .textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); color: var(--text); font-size: var(--f-base);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.input, .select { height: 42px; padding: 0 var(--s3); }
.textarea { padding: 11px var(--s3); min-height: 110px; resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-line); background: var(--surface-2); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717D95' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.input-affix { position: relative; }
.input-affix .suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: var(--f-sm); font-weight: 700; color: var(--text-3); pointer-events: none;
}
.input-affix .input { padding-right: 52px; }

/* ── 배지 ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-xs);
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge-new      { color: var(--tier-new);      background: rgba(113,125,149,.12); border-color: rgba(113,125,149,.28); }
.badge-active   { color: var(--tier-active);   background: rgba(110,155,196,.12); border-color: rgba(110,155,196,.3); }
.badge-trusted  { color: var(--tier-trusted);  background: var(--ok-soft);        border-color: rgba(52,188,133,.32); }
.badge-verified { color: var(--tier-verified); background: var(--accent-soft);    border-color: var(--accent-line); }
.badge-top      { color: var(--tier-top);      background: var(--gold-soft);      border-color: rgba(199,167,106,.34); }
.badge-tg       { color: #56B6E8; background: rgba(42,160,218,.13); border-color: rgba(42,160,218,.32); }
.badge-warn     { color: var(--warn); background: var(--warn-soft); border-color: rgba(217,166,60,.3); }
.badge-mock     { color: var(--text-3); background: var(--surface-3); border-color: var(--line-2); }

.st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
      border-radius: var(--r-xs); font-size: var(--f-xs); font-weight: 800; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-AVAILABLE { color: var(--ok); background: var(--ok-soft); }
.st-RESERVED  { color: var(--warn); background: var(--warn-soft); }
.st-SOLD      { color: var(--text-3); background: var(--surface-3); }
.st-CANCELLED { color: var(--text-4); background: var(--surface-3); }

/* ── 아바타 ───────────────────────────────────────────────────────── */
.av { border-radius: 50%; background: var(--surface-3); object-fit: cover; flex-shrink: 0; display: block; }
.av-16 { width: 16px; height: 16px } .av-20 { width: 20px; height: 20px }
.av-24 { width: 24px; height: 24px } .av-28 { width: 28px; height: 28px }
.av-32 { width: 32px; height: 32px } .av-40 { width: 40px; height: 40px }
.av-48 { width: 48px; height: 48px } .av-72 { width: 72px; height: 72px }
.av-96 { width: 96px; height: 96px }
.av-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent-line); }

/* ── 카드 ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.card-pad { padding: var(--s5); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); }

/* ── 섹션 머리 ────────────────────────────────────────────────────── */
.sec { margin-bottom: var(--s8); }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.sec-hd h2 { font-size: var(--f-xl); }
.sec-hd .sub { font-size: var(--f-sm); color: var(--text-3); margin-top: 3px; }
.sec-more { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.sec-more:hover { color: var(--accent); }

/* ── 탭 ───────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--s5); }
.tabs button {
  padding: 10px 15px; font-size: var(--f-md); font-weight: 700; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .15s var(--ease);
}
.tabs button:hover { color: var(--text-2); }
.tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.tabs .cnt { font-size: var(--f-xs); color: var(--text-4); margin-left: 5px; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  height: 32px; padding: 0 13px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--f-sm); font-weight: 700; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px; transition: .15s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: #7CC2F5; }

/* ── 모달 · 바텀시트 ──────────────────────────────────────────────── */
.ovl {
  position: fixed; inset: 0; z-index: 200; background: rgba(4, 6, 11, .72);
  display: flex; align-items: center; justify-content: center; padding: var(--s5);
  animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }

.modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 80px);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; animation: pop .18s var(--ease);
}
.modal-lg { max-width: 720px; }
.modal-hd { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); }
.modal-hd h3 { font-size: var(--f-lg); flex: 1; }
.modal-bd { padding: var(--s2) var(--s5) var(--s5); overflow-y: auto; }
.modal-ft { display: flex; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.modal-ft .btn { flex: 1; }

/* ── 토스트 ───────────────────────────────────────────────────────── */
.toasts {
  position: fixed; z-index: 300; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--mobile-nav-h) + 16px); display: flex; flex-direction: column;
  gap: var(--s2); pointer-events: none; width: min(420px, calc(100vw - 32px));
}
@media (min-width: 861px) { .toasts { bottom: 24px; } }
.toast {
  background: var(--surface-3); border: 1px solid var(--line-2); color: var(--text);
  border-radius: var(--r-md); padding: 12px var(--s4); font-size: var(--f-md); font-weight: 600;
  box-shadow: var(--sh-3); animation: pop .18s var(--ease); display: flex; align-items: center; gap: var(--s2);
}
.toast-ok { border-color: rgba(52,188,133,.4); }
.toast-ok .ti { color: var(--ok); }
.toast-err { border-color: rgba(224,90,90,.4); }
.toast-err .ti { color: var(--danger); }
.toast .ti { flex-shrink: 0; line-height: 0; }

/* ── 로딩 뼈대 · 빈 화면 ─────────────────────────────────────────── */
.sk { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
      background-size: 400% 100%; animation: shim 1.3s ease infinite; border-radius: var(--r-sm); }
@keyframes shim { from { background-position: 100% 50% } to { background-position: 0 50% } }
.sk-card { height: 292px; border-radius: var(--r-lg); }
.sk-line { height: 13px; }

.empty { padding: var(--s9) var(--s5); text-align: center; color: var(--text-3); }
.empty .ei { color: var(--text-4); margin-bottom: var(--s3); }
.empty h4 { font-size: var(--f-lg); color: var(--text-2); margin-bottom: 6px; }
.empty p { font-size: var(--f-md); line-height: 1.6; }
.empty .btn { margin-top: var(--s5); }

/* ── 페이지 넘기기 ────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s7); flex-wrap: wrap; }
.pager button {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: var(--f-sm); font-weight: 700;
}
.pager button:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.pager button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ── 알림줄 ───────────────────────────────────────────────────────── */
.note {
  display: flex; gap: var(--s3); padding: 13px var(--s4);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); font-size: var(--f-sm); color: var(--text-2); line-height: 1.6;
}
.note .ni { flex-shrink: 0; color: var(--text-3); line-height: 0; margin-top: 2px; }
.note-warn { background: var(--warn-soft); border-color: rgba(217,166,60,.3); color: #E3BC6B; }
.note-warn .ni { color: var(--warn); }
.note-info { background: var(--accent-soft); border-color: var(--accent-line); color: #86C4EE; }
.note-info .ni { color: var(--accent); }

/* ── 별점 ─────────────────────────────────────────────────────────── */
.stars { display: inline-flex; gap: 1px; color: var(--gold); line-height: 0; }
.stars svg { width: 14px; height: 14px; }
.stars .off { color: var(--line-3); }
.stars-lg svg { width: 20px; height: 20px; }
.rate-pick { display: inline-flex; gap: 3px; }
.rate-pick button { color: var(--line-3); line-height: 0; padding: 2px; }
.rate-pick button.on { color: var(--gold); }
.rate-pick svg { width: 26px; height: 26px; }

/* ── 모바일 하단 내비 ─────────────────────────────────────────────── */
.mnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(9,12,19,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: none; align-items: stretch;
}
.mnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--text-3); letter-spacing: .02em; position: relative;
}
.mnav a.on { color: var(--accent); }
.mnav a .dot {
  position: absolute; top: 7px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: var(--r-full);
  font-size: 9px; font-weight: 800; display: grid; place-items: center;
}
.mnav .sell { color: var(--accent); }

/* ── 바닥글 ───────────────────────────────────────────────────────── */
.ftr { border-top: 1px solid var(--line); padding: var(--s7) 0 var(--s8); margin-top: var(--s9); color: var(--text-3); font-size: var(--f-sm); }
.ftr .cols { display: flex; gap: var(--s8); flex-wrap: wrap; margin-bottom: var(--s6); }
.ftr h5 { font-size: var(--f-sm); color: var(--text-2); margin: 0 0 var(--s3); font-weight: 800; }
.ftr a { display: block; padding: 3px 0; }
.ftr a:hover { color: var(--text-2); }
.ftr .fine { line-height: 1.7; max-width: 640px; }

/* ============================================================================
   Gift 카드 · 판매자 카드
   ========================================================================== */

/* Gift 그림 뒤에 깔리는 배경 — Background 특성마다 다른 색을 쓴다.
   (CSP 때문에 화면 코드에서 style="" 을 쓰지 않는다. 클래스로만 바꾼다) */
.gimg { position: relative; aspect-ratio: 1/1; display: grid; place-items: center;
        background: radial-gradient(circle at 50% 42%, #263149 0%, #151B29 70%); overflow: hidden; }
.gimg img, .gimg svg { width: 76%; height: 76%; object-fit: contain; }
.bgt-onyx-black    { background: radial-gradient(circle at 50% 42%, #23262E 0%, #0E1014 72%); }
.bgt-deep-navy     { background: radial-gradient(circle at 50% 42%, #1E2E52 0%, #0D1424 72%); }
.bgt-charcoal      { background: radial-gradient(circle at 50% 42%, #2E3340 0%, #14171E 72%); }
.bgt-midnight-blue { background: radial-gradient(circle at 50% 42%, #1B3A63 0%, #0B1729 72%); }
.bgt-cocoa         { background: radial-gradient(circle at 50% 42%, #3D2C24 0%, #1A1310 72%); }
.bgt-ivory         { background: radial-gradient(circle at 50% 42%, #4A473F 0%, #22211D 72%); }
.bgt-steel-grey    { background: radial-gradient(circle at 50% 42%, #333A44 0%, #171A20 72%); }
.bgt-emerald       { background: radial-gradient(circle at 50% 42%, #1B4438 0%, #0C1F1A 72%); }
.bgt-burgundy      { background: radial-gradient(circle at 50% 42%, #4A2130 0%, #1F0F16 72%); }
.bgt-sand          { background: radial-gradient(circle at 50% 42%, #46402F 0%, #1E1B15 72%); }

.gcard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.gcard:hover { border-color: var(--line-3); transform: translateY(-2px); box-shadow: var(--sh-2); }
.gimg > .st { position: absolute; top: 9px; left: 9px; }
.detail-img .gimg > .st { top: 14px; left: 14px; }
.gcard .fav {
  position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-2);
  background: rgba(9,12,19,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.07);
  transition: .15s var(--ease);
}
.gcard .fav:hover { color: var(--text); background: rgba(9,12,19,.8); }
.gcard .fav.on { color: #F0716F; }
.gcard-bd { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gcard-nm { font-size: var(--f-md); font-weight: 700; line-height: 1.35; }
.gcard-nm .num { color: var(--text-3); font-weight: 600; }
.gtraits { display: flex; gap: 4px; flex-wrap: wrap; }
.gtrait {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs);
  padding: 2px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gprice { font-size: var(--f-lg); font-weight: 800; letter-spacing: -.01em; margin-top: auto; }
.gprice .u { font-size: var(--f-sm); font-weight: 700; color: var(--text-3); margin-left: 3px; }
.gseller { display: flex; align-items: center; gap: 6px; padding-top: 9px; border-top: 1px solid var(--line); }
.gseller .nm { font-size: var(--f-sm); font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gseller .rt { font-size: var(--f-xs); color: var(--text-3); margin-left: auto; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.gtime { font-size: var(--f-xs); color: var(--text-4); }

.gcard-row { display: flex; gap: var(--s3); padding: var(--s3); align-items: center; }
.gcard-row .gimg { width: 68px; height: 68px; border-radius: var(--r-sm); flex-shrink: 0; aspect-ratio: auto; }

/* 그리드 */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--s4); }
/* 첫 화면처럼 '한 줄에 딱 맞아야' 하는 곳은 칸 수를 고정한다 (8개 = 4+4) */
.ggrid-4c { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
/* 첫 화면 맨 아래 두 칸 (WTB · COMMUNITY) */
.homefoot { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s4); }
.homefoot h2 { font-size: var(--f-lg); }
.homefoot .row-b > a, .homefoot .stack > a { padding: 5px 0; }
.ggrid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.grail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr); gap: var(--s4); overflow-x: auto; padding-bottom: 4px; }

/* 판매자 카드 */
.scard { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
         transition: border-color .16s var(--ease), transform .16s var(--ease); }
.scard:hover { border-color: var(--line-3); transform: translateY(-2px); }
.scard-top { display: flex; align-items: center; gap: var(--s3); }
.scard-nm { font-size: var(--f-base); font-weight: 800; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.scard-tg { font-size: var(--f-xs); color: var(--text-3); }
.scard-stats { display: flex; gap: var(--s4); font-size: var(--f-xs); color: var(--text-3); }
.scard-stats b { display: block; font-size: var(--f-md); color: var(--text); font-weight: 800; }

/* 신뢰 요약 한 줄 */
.trust { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--f-sm); color: var(--text-2); }
.trust .dv { color: var(--line-3); }

/* ============================================================================
   HOME
   ========================================================================== */
.hero { padding: var(--s9) 0 var(--s8); text-align: center; position: relative; }
/* 화면 위쪽의 옅은 빛. 예전에는 좌우로 20% 삐져나가게 했더니 문서 폭이 늘어나
   폰에서 가로로 밀리는 느낌이 났다. 이제 폭 안에 두고 그라디언트만 넓게 편다. */
.hero::before {
  content: ''; position: absolute; inset: -10% 0 auto; height: 380px; z-index: -1;
  background: radial-gradient(ellipse 92% 100% at 50% 0%, rgba(61,158,232,.09), transparent 72%);
}
.hero h1 { font-size: var(--f-4xl); letter-spacing: -.02em; margin-bottom: var(--s3); }
.hero .lead { font-size: var(--f-lg); color: var(--text-2); max-width: 620px; margin: 0 auto var(--s6); line-height: 1.6; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--s4);
  padding: 5px 13px; border-radius: var(--r-full); font-size: var(--f-xs); font-weight: 800;
  letter-spacing: .06em; color: #86C4EE; background: var(--accent-soft); border: 1px solid var(--accent-line);
}

.bigsearch { position: relative; max-width: 660px; margin: 0 auto; }
.bigsearch input {
  width: 100%; height: 58px; padding: 0 128px 0 50px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full);
  font-size: var(--f-lg); color: var(--text); box-shadow: var(--sh-2);
  transition: border-color .16s var(--ease);
}
.bigsearch input:focus { outline: none; border-color: var(--accent-line); }
.bigsearch input::placeholder { color: var(--text-4); }
.bigsearch .ico { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.bigsearch .go { position: absolute; right: 7px; top: 7px; height: 44px; padding: 0 var(--s5); border-radius: var(--r-full); }
.bigsearch-scope { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s3); }

.examples { display: flex; justify-content: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.examples span { font-size: var(--f-sm); color: var(--text-4); align-self: center; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s8) 0 var(--s9); }
.stat { padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.stat b { display: block; font-size: var(--f-2xl); font-weight: 800; letter-spacing: -.02em; }
.stat span { font-size: var(--f-xs); color: var(--text-3); font-weight: 700; letter-spacing: .04em; }

/* 검색 미리보기 */
.sugg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 90;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  box-shadow: var(--sh-3); overflow: hidden; max-height: 440px; overflow-y: auto;
}
.sugg-h { padding: 9px var(--s4) 5px; font-size: 11px; font-weight: 800; color: var(--text-4); letter-spacing: .06em; }
.sugg-i { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s4); cursor: pointer; }
.sugg-i:hover, .sugg-i.on { background: var(--surface-2); }
.sugg-i .gimg { width: 36px; height: 36px; border-radius: var(--r-xs); aspect-ratio: auto; flex-shrink: 0; }
.sugg-i .t { font-size: var(--f-md); font-weight: 700; }
.sugg-i .s { font-size: var(--f-xs); color: var(--text-3); }
.sugg-i .p { margin-left: auto; font-size: var(--f-md); font-weight: 800; white-space: nowrap; }

/* 후기 카드 */
.rvcard { padding: var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
          display: flex; flex-direction: column; gap: var(--s2); }
.rvcard .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.6; }
.rvcard .meta { font-size: var(--f-xs); color: var(--text-4); }

/* ============================================================================
   MARKET
   ========================================================================== */
.market { display: grid; grid-template-columns: 244px 1fr; gap: var(--s6); align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); }
.fgroup { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup > h4 { font-size: var(--f-sm); font-weight: 800; color: var(--text-2); margin-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; }
.fgroup .opts { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; }
.fopt {
  display: flex; align-items: center; gap: var(--s2); padding: 6px 8px; border-radius: var(--r-xs);
  font-size: var(--f-sm); color: var(--text-2); cursor: pointer; transition: background .13s var(--ease);
}
.fopt:hover { background: var(--surface-2); color: var(--text); }
.fopt.on { background: var(--accent-soft); color: #7CC2F5; font-weight: 700; }
.fopt .c { margin-left: auto; font-size: var(--f-xs); color: var(--text-4); }
.fprice { display: flex; align-items: center; gap: 6px; }
.fprice .input { height: 36px; font-size: var(--f-sm); }
.fprice span { color: var(--text-4); }

.mbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.mbar .select, .mbar .input { width: auto; min-width: 150px; }
.mbar #mfilter { display: none; }   /* 필터는 옆에 펼쳐져 있으므로 PC 에서는 단추가 필요 없다 */
.mbar .cnt { font-size: var(--f-md); color: var(--text-2); font-weight: 600; }
.mbar .cnt b { color: var(--text); font-weight: 800; }
.mbar .spacer { flex: 1; }
.applied { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s4); }
.applied .chip { height: 28px; font-size: var(--f-xs); }

/* ============================================================================
   매물 상세
   ========================================================================== */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--s7); align-items: start; }
.detail-img { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.detail-img .gimg { aspect-ratio: 1/1; }
.detail h1 { font-size: var(--f-3xl); letter-spacing: -.02em; }
.detail h1 .num { color: var(--text-3); font-weight: 700; }
.price-big { font-size: var(--f-4xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.price-big .u { font-size: var(--f-xl); color: var(--text-3); margin-left: 6px; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: 10px var(--s4); font-size: var(--f-md); }
.kv dt { color: var(--text-3); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; }

.sellerbox { padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.sellerbox .top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.sellerbox .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); text-align: center; }
.sellerbox .grid div { padding: 9px 4px; background: var(--surface); border-radius: var(--r-xs); }
.sellerbox .grid b { display: block; font-size: var(--f-base); font-weight: 800; }
.sellerbox .grid span { font-size: 11px; color: var(--text-3); }

.actionbar { display: flex; gap: var(--s2); }
.copybox {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--s3); font-size: var(--f-sm); color: var(--text-2); line-height: 1.65;
  white-space: pre-wrap; margin-bottom: var(--s3);
}

/* ============================================================================
   판매자 프로필
   ========================================================================== */
.profile-hd { display: flex; gap: var(--s5); align-items: flex-start; padding-bottom: var(--s6); flex-wrap: wrap; }
.profile-hd .who { flex: 1; min-width: 240px; }
.profile-hd h1 { font-size: var(--f-2xl); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ratebox { display: flex; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5);
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.ratebox .big { font-size: var(--f-3xl); font-weight: 800; line-height: 1; }
.ratebox .brk { display: flex; gap: var(--s5); font-size: var(--f-xs); color: var(--text-3); }
.ratebox .brk b { display: block; font-size: var(--f-md); color: var(--text); }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.mini-stats div { padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: center; }
.mini-stats b { display: block; font-size: var(--f-lg); font-weight: 800; }
.mini-stats span { font-size: 11px; color: var(--text-3); }

.review { padding: var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); }
.review:last-child { border-bottom: 0; }
.review .bd { flex: 1; min-width: 0; }
.review .hd { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: 5px; }
.review .who { font-size: var(--f-md); font-weight: 700; }
.review .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.65; }
.review .sub { font-size: var(--f-xs); color: var(--text-4); margin-top: 5px; }

/* ============================================================================
   커뮤니티
   ========================================================================== */
.plist { border-top: 1px solid var(--line); }
.pitem { display: flex; gap: var(--s4); padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line); transition: background .13s var(--ease); }
.pitem:hover { background: var(--surface); }
.pitem .bd { flex: 1; min-width: 0; }
.pitem .cat { font-size: var(--f-xs); font-weight: 800; color: var(--accent); letter-spacing: .04em; }
.pitem h3 { font-size: var(--f-base); margin: 3px 0 5px; }
.pitem .ex { font-size: var(--f-sm); color: var(--text-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pitem .meta { display: flex; align-items: center; gap: var(--s3); font-size: var(--f-xs); color: var(--text-4); margin-top: 8px; flex-wrap: wrap; }
.pitem .thumb { width: 82px; height: 82px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; background: var(--surface-2); }

.postbody { font-size: var(--f-base); line-height: 1.8; color: var(--text); white-space: pre-wrap; }
.postbody img { border-radius: var(--r-md); margin: var(--s3) 0; display: block; }

.cmt { display: flex; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.cmt.reply { padding-left: var(--s7); }
.cmt .bd { flex: 1; min-width: 0; }
.cmt .who { font-size: var(--f-sm); font-weight: 700; }
.cmt .txt { font-size: var(--f-md); color: var(--text-2); line-height: 1.65; white-space: pre-wrap; margin-top: 3px; }
.cmt .acts { display: flex; gap: var(--s3); margin-top: 7px; font-size: var(--f-xs); color: var(--text-4); }
.cmt .acts button:hover { color: var(--text-2); }
.cmt .acts button.on { color: var(--accent); }

/* 글 안의 매물 미리보기 카드 */
.gpv { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3);
       background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); margin-top: var(--s3); max-width: 420px; }
.gpv .gimg { width: 48px; height: 48px; border-radius: var(--r-xs); aspect-ratio: auto; flex-shrink: 0; }
.gpv .t { font-size: var(--f-sm); font-weight: 700; }
.gpv .s { font-size: var(--f-xs); color: var(--text-3); }
.gpv .p { margin-left: auto; font-size: var(--f-md); font-weight: 800; white-space: nowrap; }

/* ── 알림 목록 ────────────────────────────────────────────────────── */
.nitem { display: flex; gap: var(--s3); padding: var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.nitem.unread { background: var(--accent-soft); }
.nitem .ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center;
             background: var(--surface-3); color: var(--text-2); flex-shrink: 0; }
.nitem .t { font-size: var(--f-md); font-weight: 700; }
.nitem .b { font-size: var(--f-sm); color: var(--text-3); margin-top: 2px; }
.nitem .w { font-size: var(--f-xs); color: var(--text-4); margin-top: 4px; }

/* ── 관리자 ───────────────────────────────────────────────────────── */
.adm { display: grid; grid-template-columns: 210px 1fr; gap: var(--s6); align-items: start; }
.admnav { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 2px; }
.admnav button {
  display: flex; align-items: center; gap: var(--s2); padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--f-md); font-weight: 700; color: var(--text-2); text-align: left; width: 100%;
}
.admnav button:hover { background: var(--surface-2); color: var(--text); }
.admnav button.on { background: var(--surface-3); color: var(--text); }
.admnav .n { margin-left: auto; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: var(--r-full);
             background: var(--danger); color: #fff; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.dtable { font-size: var(--f-sm); }
.dtable th { text-align: left; font-size: var(--f-xs); color: var(--text-3); font-weight: 800;
             padding: 9px var(--s3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.dtable td { padding: 11px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tr:hover td { background: var(--surface-2); }
.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

/* ============================================================================
   반응형 — 모바일이 PC보다 중요하다
   ========================================================================== */
/* 헤더가 좁아지면 검색창부터 접는다 — 메뉴 글자가 두 줄로 꺾이는 것을 막는다 */
@media (max-width: 1180px) { .hsearch { display: none; } }

@media (max-width: 1100px) {
  .detail { grid-template-columns: 1fr; }
  .detail-img { max-width: 460px; }
  .ggrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ggrid-4c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .market { grid-template-columns: 1fr; }
  .filters { display: none; }
  .mbar #mfilter { display: inline-flex; }
  .adm { grid-template-columns: 1fr; }
  .admnav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .admnav button { white-space: nowrap; width: auto; }
}

/* 위쪽 메뉴(7칸)가 헤더 안에 다 못 들어가는 폭부터는 아래쪽 메뉴로 바꾼다.
   860 에서 바꿨더니 861~950 사이에서 「매물등록」 단추가 화면 밖으로 밀려
   가로 스크롤이 생겼다(실측 76px). 그래서 기준을 980 으로 올렸다. */
@media (max-width: 980px) {
  .gnb { display: none; }
  .mnav { display: flex; }
  .page { padding-bottom: calc(var(--mobile-nav-h) + var(--s8)); }
  .ftr { margin-bottom: var(--mobile-nav-h); }
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
  .wrap { padding: 0 var(--s4); }
  .page { padding: var(--s5) 0 calc(var(--mobile-nav-h) + var(--s8)); }
  .hsearch { display: none; }

  .hero { padding: var(--s7) 0 var(--s6); }
  .hero h1 { font-size: var(--f-2xl); }
  .hero .lead { font-size: var(--f-md); margin-bottom: var(--s5); }
  .bigsearch input { height: 50px; font-size: var(--f-base); padding: 0 16px 0 44px; }
  .bigsearch .go { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin: var(--s6) 0 var(--s7); }
  .stat { padding: var(--s3) var(--s4); }
  .stat b { font-size: var(--f-xl); }

  /* 태블릿 폭에서는 아직 세 칸이 들어간다 — 두 칸으로 줄이면 카드가 너무 커진다 */
  .ggrid, .ggrid-4c { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .homefoot { grid-template-columns: 1fr; }
  .grail { grid-auto-columns: 34%; gap: var(--s3); }
  .gcard-bd { padding: 10px 11px 11px; gap: 6px; }
  .gcard-nm { font-size: var(--f-sm); }
  .gprice { font-size: var(--f-base); }
  .sec { margin-bottom: var(--s7); }
  .sec-hd h2 { font-size: var(--f-lg); }

  .detail h1 { font-size: var(--f-xl); }
  .price-big { font-size: var(--f-2xl); }
  .detail-img { max-width: 100%; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .profile-hd { gap: var(--s4); }

  /* 모달은 아래에서 올라오는 시트로 */
  .ovl { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0;
           border-left: 0; border-right: 0; border-bottom: 0; animation: slideup .22s var(--ease);
           padding-bottom: env(safe-area-inset-bottom); }
  .modal-ft { position: sticky; bottom: 0; background: var(--surface); }

  .pitem .thumb { width: 64px; height: 64px; }
  .ftr .cols { gap: var(--s6); }
}

/* 폰 — 두 칸. 판매자 카드는 정보가 많아 한 칸으로 편다. */
@media (max-width: 620px) {
  .ggrid, .ggrid-4c { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ggrid-4 { grid-template-columns: 1fr; }
  .grail { grid-auto-columns: 46%; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .gtraits { display: none; }   /* 아주 좁은 화면에서는 특성 칩을 접는다 */
}

/* 터치 기기: 손가락이 닿는 최소 크기 보장 */
@media (hover: none) {
  .btn-sm { height: 36px; }
  .fav { width: 34px; height: 34px; }
  .cmt .acts button { padding: 4px 0; }
}

/* ============================================================================
   텔레그램 선물 주소로 한 번에 채우기 (매물 등록 맨 위)
   ========================================================================== */
.tgbox {
  border-color: rgba(42, 160, 218, .32);
  background: linear-gradient(180deg, rgba(42, 160, 218, .07), transparent 62%), var(--surface);
}
.tgbox .tgrow { align-items: stretch; }
.tgbox .tgrow .input { min-width: 200px; }
.tgbox .btn-tg { flex-shrink: 0; }
.tgfound { align-items: flex-start; }
.tgtraits { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 4px; }
.tgtraits .gtrait { font-size: var(--f-xs); }

/* 매물 상세 — 원본에서 가져온 값 */
.srcline {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--f-sm); color: var(--text-3);
}
.srcline a { color: #56B6E8; font-weight: 700; }
.srcline a:hover { text-decoration: underline; }
.addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--f-xs); color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 2px 7px;
  overflow-wrap: anywhere;
}
.kv dd .rar { font-size: var(--f-xs); color: var(--text-3); font-weight: 700; margin-left: 5px; }

@media (max-width: 620px) {
  .tgbox .tgrow { flex-direction: column; }
  .tgbox .tgrow .btn { width: 100%; }
}

/* 매물 등록 — Gift 이미지는 보여주기만 한다 (직접 올리기 없음) */
.imgrow { align-items: center; }
.imgrow #imgNote b { font-size: var(--f-md); }