/* SinFarm Core front-end styles */
:root {
  --green: #1e8a4c;
  --green-dark: #166b3a;
  --green-light: #e8f5ed;
  --live: #e53935;
  --navy: #0f1b2d;
  --text: #1c1c1c;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f6f7f8;
  --radius: 12px;
  --container: 1520px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  line-height: 1.5;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0 8px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.section-head .more { font-size: 13px; color: var(--muted); }
.badge-live {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--live); color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 6px; letter-spacing: .3px;
}
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 8px; font-weight: 700; font-size: 14px;
  padding: 10px 18px; background: var(--green); color: #fff; transition: background .15s;
}
.btn:hover { background: var(--green-dark); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-pill { border-radius: 999px; padding: 12px 24px; font-size: 15px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
}
.brand-mark svg { display: block; }
.brand-name { font-size: 22px; font-weight: 900; color: var(--green-dark); letter-spacing: -.5px; }
.brand { gap: 9px; flex-shrink: 0; }
.brand-word { display: block; height: 30px; width: auto; }
.brand-sep { width: 1px; height: 22px; background: #cbd2da; margin: 0 3px 0 5px; flex-shrink: 0; }
.brand-tag { font-size: 14px; font-weight: 500; white-space: nowrap; color: #6b7480; letter-spacing: -.2px; }
.sc-top .brand-word, .bc .brand-word { height: 24px; }
.sc-top .brand { gap: 7px; }

.gnb { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gnb a { display: block; white-space: nowrap; padding: 20px 12px; font-size: 15px; font-weight: 600; color: #333; border-bottom: 2px solid transparent; }
.gnb a.active, .gnb a:hover { color: var(--green); border-bottom-color: var(--green); }
.search { margin-left: auto; display: flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 0 16px; height: 40px; width: 290px; }
.search input { border: 0; background: transparent; flex: 1; font-size: 13px; outline: none; font-family: inherit; }
.search button { border: 0; background: transparent; width: 32px; height: 32px; display: grid; place-items: center; color: #555; }
.user-links { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #444; white-space: nowrap; }
.user-links a { display: inline-flex; align-items: center; gap: 4px; }
.menu-toggle { display: none; border: 0; background: transparent; width: 40px; height: 40px; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: #0f2a3d center/cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,30,48,.85) 0%, rgba(8,30,48,.55) 45%, rgba(8,30,48,.35) 100%); }
.hero-inner > *, .live-grid > *, .live-thumbs > a, .two-col > * { min-width: 0; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1fr 520px; gap: 40px; align-items: center; padding: 56px 20px; }
.hero-copy .eyebrow { font-size: 15px; opacity: .9; margin: 0 0 14px; }
.hero-copy h1 { font-size: 40px; line-height: 1.3; font-weight: 900; margin: 0 0 24px; letter-spacing: -1px; }
.hero-copy h1 em { font-style: normal; color: #7fe3a3; }
.hero-feats { display: flex; gap: 22px; margin: 0 0 28px; padding: 0; list-style: none; }
.hero-feats li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; }
.hero-feats .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex-shrink: 0; }

/* Live panel */
.live-panel { background: var(--navy); border-radius: 16px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.live-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; color: #c7d0dc; }
.live-top h3 { margin-left: auto; font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 0 auto; }
.live-grid { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.player { position: relative; height: 100%; min-height: 220px; border-radius: 10px; overflow: hidden; background: #000; }
.player img, .player video, .player iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.player-ctl { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; }
.player-ctl span { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; font-size: 12px; }
.bid-card { background: #16233a; border-radius: 10px; padding: 12px; color: #fff; font-size: 12px; }
.bid-card .thumb { width: 100%; aspect-ratio: 4/3; border-radius: 8px; object-fit: cover; margin-bottom: 8px; }
.bid-card .name { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.bid-card .label { color: #9aa7b8; font-size: 11px; }
.bid-card .price { font-size: 22px; font-weight: 900; color: #7fe3a3; line-height: 1.1; }
.bid-card .start { color: #9aa7b8; font-size: 11px; margin-top: 2px; }
.bid-card hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 10px 0; }
.bid-card .timer { display: flex; justify-content: space-between; align-items: center; }
.bid-card .timer b { color: #ff6b6b; font-variant-numeric: tabular-nums; }
.bid-card .input { display: flex; align-items: center; background: #fff; border-radius: 6px; margin: 8px 0; padding: 0 8px; height: 32px; }
.bid-card .input input { flex: 1; border: 0; outline: none; font-weight: 800; color: #111; text-align: right; font-size: 14px; width: 60px; }
.bid-card .input span { color: #555; font-size: 12px; margin-left: 4px; }
.bid-card .btn { width: 100%; }
.live-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.live-thumbs a { font-size: 11px; color: #fff; }
.live-thumbs .t { display: block; position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.live-thumbs .t img { width: 100%; height: 100%; object-fit: cover; }
.live-thumbs .t .badge-live { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 2px 6px; }
.live-thumbs .n { font-weight: 700; display: block; }
.live-thumbs .p { display: flex; justify-content: space-between; }
.live-thumbs .p i { font-style: normal; color: #ff6b6b; font-size: 10px; }

/* ---------- Category ---------- */
.cat-row { display: grid; grid-template-columns: repeat(5, 1fr) 1.55fr; gap: 16px; align-items: stretch; }
.cat-card { display: flex; flex-direction: column; }
.cat-card img { flex: 1; min-height: 120px; }
.cat-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: #fff; transition: box-shadow .15s; }
.cat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.cat-card img { aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; margin-bottom: 12px; width: 100%; }
.cat-card b { display: block; font-size: 15px; }
.cat-card .d { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-top: 2px; }
.app-banner { background: var(--green-light); border-radius: var(--radius); padding: 22px; display: flex; align-items: center; gap: 12px; }
.app-banner b { display: block; font-size: 17px; margin-bottom: 6px; }
.app-banner p { font-size: 12px; color: var(--muted); margin: 0 0 14px; }
.app-banner .phone { width: 110px; height: 150px; border-radius: 14px; background: var(--navy); margin-left: auto; flex-shrink: 0; position: relative; overflow: hidden; }
.app-banner .phone::after { content: "LIVE"; position: absolute; top: 12px; right: 10px; background: var(--live); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 4px; }

/* ---------- Products + Auction list ---------- */
.two-col { display: grid; grid-template-columns: 1fr 440px; gap: 32px; }
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (min-width: 1400px) { .two-col { grid-template-columns: 1fr 520px; } .cat-row { grid-template-columns: repeat(5, 1fr) 1.6fr; } }
.prod-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: #fff; position: relative; }
.prod-card .thumb { display: block; position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod-card .tag { position: absolute; top: 8px; left: 8px; background: var(--green); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; }
.prod-card .name { display: block; font-weight: 700; font-size: 14px; }
.prod-card .desc { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.prod-card .price { display: block; font-weight: 900; font-size: 16px; }
.prod-card .price small { font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 3px; }
.prod-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.prod-card .cart { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; background: #fff; color: #555; }
.auc-list { display: flex; flex-direction: column; gap: 10px; }
.auc-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #fff; }
.auc-item img { width: 64px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.auc-item .info { flex: 1; min-width: 0; }
.auc-item .n { font-weight: 700; font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-item .m { font-size: 12px; color: var(--muted); display: flex; gap: 12px; margin-top: 2px; }
.auc-item .m b { color: var(--text); }
.auc-item .m i { font-style: normal; color: var(--live); font-variant-numeric: tabular-nums; }

/* 이미지 로딩 전 배경 */
.player, .live-thumbs .t, .prod-card .thumb, .cat-card img, .bid-card .thumb, .auc-item img, .hero-bg { background-color: #cfd8dc; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 56px; background: var(--bg); border-top: 1px solid var(--line); padding: 36px 0 28px; font-size: 12px; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-inner b { color: var(--text); font-size: 14px; display: block; margin-bottom: 6px; }
.footer-links { display: flex; gap: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px; }
  .hero-copy h1 { font-size: 30px; }
  .cat-row { grid-template-columns: repeat(3, 1fr); }
  .app-banner { grid-column: span 3; }
  .two-col { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .search { width: 220px; }
}
@media (max-width: 720px) {
  .header-inner { height: 56px; gap: 10px; }
  .gnb, .search, .user-links .join { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .gnb.open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 56px; background: #fff; border-bottom: 1px solid var(--line); }
  .gnb.open a { padding: 14px 20px; border-bottom: 0; }
  .brand-tag { display: none; }
  .hero-copy { order: 2; }
  .live-panel { order: 1; padding: 12px; }
  .hero-copy h1 { font-size: 26px; margin-bottom: 16px; }
  .hero-feats { gap: 12px; }
  .hero-feats li { font-size: 11px; }
  .hero-feats .ico { width: 36px; height: 36px; }
  .live-grid { grid-template-columns: 1fr; }
  .player { aspect-ratio: 16/9; height: auto; min-height: 0; }
  .live-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .live-thumbs .p { flex-direction: column; }
  .cat-row { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .cat-row::-webkit-scrollbar { display: none; }
  .cat-card { flex: 0 0 140px; }
  .app-banner { flex: 0 0 280px; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .section { padding: 32px 0 0; }
}

/* ---------- Auth (로그인/회원가입) ---------- */
.auth { background: var(--bg); padding: 48px 16px; min-height: 60vh; }
.auth-box { max-width: 420px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 32px; }
.auth-wide { max-width: 640px; }
.auth h1 { margin: 0 0 6px; font-size: 24px; font-weight: 900; }
.auth-sub { margin: 0 0 24px; font-size: 13px; color: var(--muted); }
.alert { background: #fdecec; color: #b3261e; border: 1px solid #f6c6c2; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.alert.ok { background: var(--green-light); color: var(--green-dark); border-color: #bfe3cd; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input, .addr input, .profile-form input[type=password] { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font-size: 14px; font-family: inherit; outline: none; }
.field input:focus, .addr input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,138,76,.12); }
.field input:disabled { background: var(--bg); color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 4px 0 20px; }
.check a { color: var(--green); text-decoration: underline; }
.btn-block { width: 100%; height: 48px; font-size: 15px; }
.btn-outline { background: #fff; color: var(--green); border: 1px solid var(--green); }
.btn-outline:hover { background: var(--green-light); }
.auth-links { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); }
.auth-links a { color: var(--text); font-weight: 600; margin: 0 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.type-switch label { border: 2px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; font-weight: 700; font-size: 14px; }
.type-switch label.on { border-color: var(--green); background: var(--green-light); }
.type-switch input { margin-right: 6px; }
.type-switch small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 4px; }
.addr { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; margin: 6px 0 18px; }
.addr legend { font-size: 13px; font-weight: 700; padding: 0 6px; }
.addr legend small { font-weight: 400; color: var(--muted); }
.addr input { margin-top: 8px; }
.zip-row { display: flex; gap: 8px; margin-top: 0; }
.zip-row input { flex: 1; margin-top: 0; }
.zip-row .btn { height: 44px; white-space: nowrap; }

/* ---------- Mypage ---------- */
.mypage { background: var(--bg); padding: 36px 0 60px; }
.mypage-grid { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.my-side > div, .my-nav { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.my-profile { padding: 24px; text-align: center; }
.my-profile .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; font-weight: 900; display: grid; place-items: center; margin: 0 auto 12px; }
.my-profile b { display: block; font-size: 17px; }
.my-profile small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); margin-top: 8px; }
.chip.pending { background: #fff4e0; color: #b26a00; }
.chip.approved { background: var(--green-light); color: var(--green-dark); }
.chip.rejected { background: #fdecec; color: #b3261e; }
.my-points { padding: 18px 20px; margin-top: 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 2px; }
.my-points span { font-size: 12px; color: var(--muted); }
.my-points b { font-size: 20px; font-weight: 900; color: var(--green-dark); }
.my-points .btn { grid-row: 1 / 3; }
.my-nav { margin-top: 12px; padding: 8px; display: flex; flex-direction: column; }
.my-nav a { padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #333; }
.my-nav a.on, .my-nav a:hover { background: var(--green-light); color: var(--green-dark); }
.my-main { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.my-main h2 { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.my-main h3 { margin: 24px 0 12px; font-size: 15px; font-weight: 800; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.stat { background: var(--bg); border-radius: 10px; padding: 16px; }
.stat span { display: block; font-size: 12px; color: var(--muted); }
.stat b { font-size: 22px; font-weight: 900; }
.order-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.order-row b { display: block; font-size: 14px; }
.order-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.order-row .plus { color: var(--green-dark); }
.order-row .minus { color: #b3261e; }
.empty { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; }
.empty a { color: var(--green); font-weight: 700; }
.charge-box { background: var(--bg); border-radius: 12px; padding: 20px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; }
.charge-box > div:first-child span { display: block; font-size: 12px; color: var(--muted); }
.charge-box > div:first-child b { font-size: 26px; font-weight: 900; color: var(--green-dark); }
.sf-charge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-charge p { width: 100%; margin: 0; font-size: 13px; }
.sf-charge input { height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; width: 140px; font-family: inherit; }
.sf-charge button { height: 40px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-weight: 700; padding: 0 16px; }

@media (max-width: 860px) {
  .mypage-grid { grid-template-columns: 1fr; }
  .my-main { padding: 20px 16px; }
  .stat-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stat b { font-size: 18px; }
  .charge-box { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .auth { padding: 24px 16px; }
  .auth-box { padding: 28px 20px; }
  .grid2 { grid-template-columns: 1fr; }
  .type-switch { grid-template-columns: 1fr; }
}

/* ---------- Category / Auction pages ---------- */
.cat-page { padding: 0 0 40px; }
.cat-page .hero + .container { margin-top: 36px; }
.cat-page .container + .container { margin-top: 36px; }
.theme-green { --accent: #1e8a4c; --accent-dark: #166b3a; --accent-light: #e8f5ed; --accent-soft: #d2ecdc; }
.theme-blue  { --accent: #1769d6; --accent-dark: #0f4fa8; --accent-light: #e8f0fb; --accent-soft: #cfe0f7; }
.theme-red   { --accent: #b9472c; --accent-dark: #8f3420; --accent-light: #fbefea; --accent-soft: #f4d6cb; }
.cat-page .btn { background: var(--accent); }
.cat-page .btn:hover { background: var(--accent-dark); }
.cat-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; }
.cat-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.1) 100%); }
.cat-hero-dark::before { background: linear-gradient(90deg, rgba(8,20,40,.85), rgba(8,20,40,.45)); }
.cat-hero-full { min-height: 460px; display: flex; align-items: center; }
.cat-hero-full .hero-bg::after { background: linear-gradient(90deg, rgba(8,30,48,.82) 0%, rgba(8,30,48,.5) 50%, rgba(8,30,48,.2) 100%); }
.cat-hero-full .cat-hero-copy { position: relative; padding: 70px 20px; max-width: var(--container); width: 100%; }
.cat-hero-full h1 { font-size: 46px; }
.cat-hero-full p { font-size: 17px; }
.cat-hero-copy { position: relative; padding: 40px 44px; max-width: 560px; }
.cat-hero-copy h1 { font-size: 36px; font-weight: 900; line-height: 1.25; margin: 10px 0 14px; letter-spacing: -1px; }
.cat-hero-copy h1 em { font-style: normal; color: #9af0b8; }
.theme-blue .cat-hero-copy h1 em { color: #8ec5ff; } .theme-red .cat-hero-copy h1 em { color: #ffc6a8; }
.cat-hero-copy p { font-size: 15px; line-height: 1.6; margin: 0 0 22px; opacity: .95; }
.cat-body { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.cat-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: sticky; top: 80px; }
.cat-side-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--accent-dark); padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.cat-side-head .ico, .feat-bar .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.cat-side a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #333; }
.cat-side a.on, .cat-side a:hover { background: var(--accent-light); color: var(--accent-dark); }
.live-wide > * { min-width: 0; }
.live-wide { display: grid; grid-template-columns: 1fr 300px; gap: 14px; background: var(--navy); border-radius: 16px; padding: 14px; color: #fff; }
.live-wide .player { height: 100%; min-height: 420px; aspect-ratio: auto; }
.live-tags { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; align-items: center; }
.live-tags .viewers { background: rgba(0,0,0,.55); border-radius: 6px; padding: 3px 8px; font-size: 11px; display: inline-flex; gap: 4px; align-items: center; }
.live-caption { position: absolute; left: 14px; bottom: 44px; }
.live-caption .tag { display: inline-block; background: var(--accent); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; }
.live-caption b { display: block; font-size: 18px; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.live-caption small { font-size: 12px; opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.live-side { display: flex; flex-direction: column; gap: 12px; }
.live-side .bid-card { background: #16233a; border-radius: 12px; padding: 16px; }
.live-side .bid-card .name { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.live-side .bid-card .row { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; font-size: 13px; }
.live-side .bid-card .label { color: #9aa7b8; font-size: 12px; }
.live-side .bid-card .price { font-size: 26px; font-weight: 900; color: #ff6b6b; }
.live-side .bid-card .timer { color: #ff6b6b; font-size: 16px; font-variant-numeric: tabular-nums; }
.live-side .bid-card .btn { margin-top: 10px; }
.live-side .chat { background: #16233a; border-radius: 12px; padding: 14px 16px; flex: 1; display: flex; flex-direction: column; min-height: 180px; }
.chat > b { font-size: 13px; margin-bottom: 8px; }
.chat ul { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; font-size: 12px; color: #d5dce6; max-height: 160px; }
.chat li { padding: 4px 0; }
.chat .who { color: #9af0b8; font-weight: 700; margin-right: 6px; }
.theme-blue .chat .who { color: #8ec5ff; }
.chat-input { display: flex; gap: 6px; margin-top: 10px; }
.chat-input input { flex: 1; height: 36px; border: 0; border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 12px; outline: none; }
.chat-input button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { display: inline-block; border: 0; background: transparent; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on, .tabs button.on { color: var(--accent-dark); border-bottom-color: var(--accent); }
.section-head .count { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.tabs-inline { border: 0; margin: 0; }
.auc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.auc-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #fff; }
.auc-card .thumb { display: block; position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: #cfd8dc; }
.auc-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.auc-card .thumb .badge-live { position: absolute; top: 8px; right: 8px; font-size: 10px; }
.auc-card .viewers-mini { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; display: inline-flex; gap: 3px; align-items: center; }
.auc-card .name { font-size: 14px; font-weight: 700; }
.auc-card .origin { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.auc-card .cur { font-size: 12px; color: var(--muted); }
.auc-card .cur b { color: var(--live); font-size: 15px; font-weight: 900; margin-left: 2px; }
.auc-card .st { font-size: 11px; color: var(--muted); }
.auc-card .left { font-size: 12px; color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; margin: 6px 0 10px; }
.auc-card .btn { margin-top: auto; }
.feat-bar { background: var(--accent-light); border-radius: 16px; padding: 22px 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat-bar > div { display: flex; align-items: center; gap: 12px; }
.feat-bar .ico { width: 40px; height: 40px; background: #fff; color: var(--accent); }
.feat-bar b { display: block; font-size: 14px; }
.feat-bar small { font-size: 12px; color: var(--muted); }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.how-grid > div { background: var(--bg); border-radius: 12px; padding: 20px; }
.how-grid .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 10px; }
.how-grid b { display: block; font-size: 15px; margin-bottom: 4px; }
.how-grid small { font-size: 12px; color: var(--muted); }

@media (max-width: 1024px) {
  .cat-body { grid-template-columns: 1fr; }
  .cat-side { position: static; display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .cat-side-head { border: 0; margin: 0; white-space: nowrap; }
  .cat-side a { white-space: nowrap; }
  .live-wide { grid-template-columns: 1fr; }
  .live-wide .player { min-height: 0; height: auto; aspect-ratio: 16/9; }
  .auc-grid { grid-template-columns: repeat(3, 1fr); }
  .how-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .cat-hero { min-height: 220px; border-radius: 14px; }
  .cat-hero-full { min-height: 300px; }
  .cat-hero-full .cat-hero-copy { padding: 40px 20px; }
  .cat-hero-full h1 { font-size: 30px; }
  .cat-hero-full p { font-size: 14px; }
  .cat-hero-copy { padding: 24px 20px; }
  .cat-hero-copy h1 { font-size: 26px; }
  .cat-hero-copy p { font-size: 13px; }
  .auc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feat-bar { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
}


/* =====================================================
 *  Motion: reveal, hover, carousel
 * ===================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-26px); }
.reveal-scale { transform: scale(.94); }

/* hero entrance + slow zoom */
.hero-bg { animation: sf-kenburns 18s ease-in-out infinite alternate; transform-origin: center; }
@keyframes sf-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-copy > *, .cat-hero-copy > * { opacity: 0; animation: sf-up .7s cubic-bezier(.22,.61,.36,1) forwards; }
.hero-copy > :nth-child(1), .cat-hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2), .cat-hero-copy > :nth-child(2) { animation-delay: .18s; }
.hero-copy > :nth-child(3), .cat-hero-copy > :nth-child(3) { animation-delay: .31s; }
.hero-copy > :nth-child(4), .cat-hero-copy > :nth-child(4) { animation-delay: .44s; }
@keyframes sf-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.live-panel, .live-wide { opacity: 0; animation: sf-pop .8s cubic-bezier(.22,.61,.36,1) .25s forwards; }
@keyframes sf-pop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* live badge pulse */
.badge-live::before { animation: sf-blink 1.2s ease-in-out infinite; }
@keyframes sf-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.live-panel .badge-live, .live-wide .badge-live, .live-tags .badge-live { box-shadow: 0 0 0 0 rgba(229,57,53,.6); animation: sf-ring 1.8s ease-out infinite; }
@keyframes sf-ring { 0% { box-shadow: 0 0 0 0 rgba(229,57,53,.55); } 100% { box-shadow: 0 0 0 10px rgba(229,57,53,0); } }

/* hover lift + image zoom */
.cat-card, .prod-card, .auc-card, .auc-item, .live-thumbs a, .stat, .how-grid > div { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s; }
.cat-card:hover, .prod-card:hover, .auc-card:hover, .auc-item:hover, .how-grid > div:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15,27,45,.12); border-color: transparent; }
.live-thumbs a:hover { transform: translateY(-4px); }
.cat-card img, .prod-card .thumb img, .auc-card .thumb img, .live-thumbs .t img, .auc-item img, .bid-card .thumb { transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .4s; }
.cat-card:hover img, .prod-card:hover .thumb img, .auc-card:hover .thumb img, .live-thumbs a:hover .t img, .auc-item:hover img { transform: scale(1.08); }
.prod-card .cart { transition: background .25s, color .25s, transform .25s; }
.prod-card:hover .cart { background: var(--green); color: #fff; border-color: var(--green); transform: rotate(-8deg); }
.cat-card .d svg, .section-head .more svg, .btn svg { transition: transform .3s; }
.cat-card:hover .d svg, .section-head .more:hover svg, .btn:hover svg { transform: translateX(4px); }
.btn { transition: background .2s, transform .15s, box-shadow .2s; }
.btn:hover { box-shadow: 0 8px 20px rgba(30,138,76,.3); }
.btn:active { transform: scale(.97); }
.gnb a { transition: color .2s, border-color .2s; }
.cat-side a, .my-nav a, .tabs a { transition: background .2s, color .2s, padding-left .2s; }
.cat-side a:hover { padding-left: 20px; }
.app-banner .phone { animation: sf-float 4s ease-in-out infinite; }
@keyframes sf-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.chat li { animation: sf-up .4s ease-out; }
.price.flash, [data-current].flash { animation: sf-flash .7s ease-out; }
@keyframes sf-flash { 0% { color: #fff; text-shadow: 0 0 16px #7fe3a3; transform: scale(1.12); } 100% { transform: none; } }

/* carousel */
.carousel { position: relative; }
.carousel .track { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 14px; margin: -6px -2px -14px; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .track > * { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap, 16px)) / var(--per)); scroll-snap-align: start; }
.carousel .cat-row > .app-banner { flex-basis: calc((100% - (var(--per) - 1) * 16px) / var(--per) * 1.55); }
.car-btn { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #333; font-size: 22px; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.12); display: grid; place-items: center; opacity: 0; transition: opacity .25s, transform .25s, background .2s; }
.car-btn.prev { left: -14px; } .car-btn.next { right: -14px; }
.carousel:hover .car-btn { opacity: 1; }
.car-btn:hover { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.08); }
.car-btn[disabled] { opacity: 0 !important; pointer-events: none; }
.carousel .auc-grid { --gap: 14px; }
.carousel .prod-grid { --gap: 16px; }

@media (max-width: 1024px) { .carousel { --per: 3 !important; } .carousel .cat-row { --per: 3 !important; } }
@media (max-width: 720px) {
  .carousel { --per: 2 !important; }
  .carousel .cat-row { --per: 2.2 !important; }
  .carousel .cat-row { display: flex; }
  .car-btn { display: none; }
  .cat-card { flex: initial; }
}
@media (hover: none) { .car-btn { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg, .hero-copy > *, .cat-hero-copy > *, .live-panel, .live-wide, .app-banner .phone, .badge-live::before { animation: none; opacity: 1; }
  .carousel .track { scroll-behavior: auto; }
}

/* =====================================================
 *  Auction Studio (/auction) : 풀스크린 다크 레이아웃
 * ===================================================== */
.studio { background: #0b1526; color: #fff; padding: 20px 0 32px; }
.studio-wrap { max-width: 1520px; margin: 0 auto; padding: 0 20px; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px 290px; gap: 14px; align-items: stretch; }
.studio .badge-live.big { font-size: 15px; padding: 7px 14px; border-radius: 8px; }
.studio .viewers { background: rgba(0,0,0,.55); border-radius: 8px; padding: 6px 10px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }

/* player */
.st-player { position: relative; border-radius: 14px; overflow: hidden; background: #000; min-height: 520px; }
.st-player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; animation: sf-kenburns 20s ease-in-out infinite alternate; }
.st-player::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.st-player > * { position: relative; z-index: 1; }
.st-top { position: absolute; top: 16px; left: 16px; display: flex; gap: 10px; align-items: center; }
.st-title { position: absolute; left: 24px; top: 110px; }
.st-title small { display: inline-block; font-size: 15px; font-weight: 700; color: #7fe3a3; margin-bottom: 6px; padding-bottom: 2px; border-bottom: 2px solid #7fe3a3; }
.st-title b { display: block; font-size: 44px; font-weight: 900; line-height: 1.15; letter-spacing: -1px; background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 8px; margin-left: -12px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.st-title span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.st-now { position: absolute; left: 20px; bottom: 60px; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.55); border-radius: 12px; padding: 8px 14px 8px 8px; backdrop-filter: blur(4px); }
.st-now .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.st-now small { display: inline-block; font-size: 11px; background: var(--green); padding: 2px 7px; border-radius: 5px; margin-bottom: 3px; }
.st-now b { display: block; font-size: 15px; }
.st-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); font-size: 12px; }
.st-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: sf-blink 1.2s infinite; }
.st-bar em { font-style: normal; font-weight: 800; color: #ff8a80; }
.st-bar .seek { flex: 1; height: 4px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.st-bar .seek div { width: 28%; height: 100%; background: var(--live); position: relative; }
.st-bar .seek div::after { content: ""; position: absolute; right: -5px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--live); }
.st-bar .r { opacity: .85; }

/* wide header on studio page */
.sf-wide .header-inner { max-width: 1520px; }

/* bid panel */
.st-bid { background: #101c33; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.st-head { display: flex; align-items: center; gap: 8px; }
.st-head .pill { background: var(--green); font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 7px; }
.st-head .lbl { margin-left: auto; font-size: 12px; color: #9aa7b8; }
.st-head .timer { font-size: 18px; font-weight: 900; color: #ff6b6b; background: rgba(229,57,53,.15); border: 1px solid rgba(229,57,53,.5); padding: 4px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.st-product { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 12px; background: #16233a; border-radius: 12px; padding: 12px; }
.st-product img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; }
.st-product .name { display: block; font-size: 17px; font-weight: 800; }
.st-product .tags { display: flex; gap: 6px; margin: 6px 0 10px; }
.st-product .tags span { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(23,105,214,.25); color: #8ec5ff; }
.st-product .lbl { color: #9aa7b8; font-size: 12px; }
.st-product .price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 8px; white-space: nowrap; }
.st-product .price span { font-size: 24px; font-weight: 900; color: #ff6b6b; }
.st-product .price em { font-style: normal; font-size: 12px; color: #ff8a80; }
.st-product dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin: 0; font-size: 11px; }
.st-product dt { color: #9aa7b8; } .st-product dd { margin: 0; text-align: right; }
.btn-bid { height: 50px; font-size: 17px; border-radius: 10px; }
.st-bids { background: #16233a; border-radius: 12px; padding: 12px; flex: 1; }
.st-bids .sh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.st-bids .sh a { font-size: 11px; color: #9aa7b8; }
.st-bids ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.st-bids li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 7px; }
.st-bids li b { font-weight: 800; } .st-bids li span { color: #9aa7b8; font-size: 11px; } .st-bids li em { font-style: normal; text-align: right; color: #c7d0dc; font-size: 12px; }
.st-bids li.top { background: rgba(255,255,255,.06); }
.st-bids li.top b { font-size: 15px; }

/* chat */
.st-chat { background: #101c33; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.st-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.08); }
.st-tabs button { flex: 1; border: 0; background: transparent; color: #9aa7b8; padding: 14px 8px; font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.st-tabs button.on { color: #fff; border-bottom-color: var(--green); }
.tab-pane { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tab-pane.on { display: flex; }
.st-chat ul { list-style: none; margin: 0; padding: 12px; flex: 1; overflow-y: auto; max-height: 560px; }
.st-chat li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.st-chat .av { width: 32px; height: 32px; border-radius: 50%; background: #243654; display: grid; place-items: center; flex-shrink: 0; color: #8ec5ff; }
.st-chat li b { font-size: 12px; margin-right: 6px; } .st-chat li time { font-size: 11px; color: #9aa7b8; } .st-chat li p { margin: 3px 0 0; color: #e3e8ef; }
.st-chat .chat-input { padding: 12px; margin: 0; border-top: 1px solid rgba(255,255,255,.08); }
.st-chat .chat-input input { height: 42px; background: #16233a; color: #fff; border: 1px solid rgba(255,255,255,.1); }
.st-chat .chat-input input::placeholder { color: #7f8ca0; }
.st-chat .chat-input button { width: 42px; height: 42px; }
.guide { margin: 0; padding: 16px 16px 16px 36px; font-size: 13px; }
.guide li { margin-bottom: 14px; } .guide b { display: block; } .guide span { color: #9aa7b8; font-size: 12px; }
.note { margin: 0 16px 16px; font-size: 12px; color: #ff8a80; background: rgba(229,57,53,.1); padding: 10px; border-radius: 8px; }

/* list */
.st-list { margin-top: 14px; background: #101c33; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 18px 18px; }
.st-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.st-list-head h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.st-filters { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.st-filters a { padding: 6px 12px; border-radius: 999px; color: #c7d0dc; transition: background .2s, color .2s; }
.st-filters a.on, .st-filters a:hover { background: rgba(255,255,255,.1); color: #fff; }
.st-filters .sep { width: 1px; height: 16px; background: rgba(255,255,255,.15); margin: 0 8px; }
.st-filters .more { color: #9aa7b8; font-size: 12px; }
.st-cards { gap: 12px; }
.st-card { display: flex; flex-direction: column; background: #fff; color: var(--text); border-radius: 12px; padding: 8px 8px 10px; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
.st-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.st-card .thumb { display: block; position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: #cfd8dc; margin-bottom: 8px; }
.st-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.st-card:hover .thumb img { transform: scale(1.08); }
.st-card .thumb .badge-live { position: absolute; top: 6px; right: 6px; font-size: 9px; }
.st-card .name { font-size: 14px; font-weight: 800; }
.st-card small { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.st-card .cur { font-size: 16px; font-weight: 900; } .st-card .cur em { font-style: normal; font-size: 11px; color: var(--live); margin-left: 6px; }
.st-card .left { font-size: 12px; color: var(--live); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.st-card .btn { margin-top: auto; }
.studio .car-btn { background: rgba(255,255,255,.95); }
.studio .car-btn.prev { left: -10px; } .studio .car-btn.next { right: -10px; }

/* band */
.st-band { margin-top: 14px; border-radius: 14px; overflow: hidden; position: relative; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; }
.st-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,30,20,.9), rgba(10,30,20,.6)); }
.st-band > * { position: relative; }
.st-band .items { display: flex; gap: 28px; flex-wrap: wrap; }
.st-band .items > div { display: flex; align-items: center; gap: 10px; }
.st-band .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.st-band b { display: block; font-size: 15px; } .st-band small { font-size: 12px; color: #d5e5da; }
.st-band .cta { display: flex; align-items: center; gap: 16px; }
.st-band .cta small { display: block; font-size: 12px; color: #d5e5da; } .st-band .cta b { font-size: 15px; }

@media (max-width: 1280px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .st-chat { grid-column: 1 / -1; }
  .st-chat ul { max-height: 260px; }
}
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .st-player { min-height: 0; aspect-ratio: 16/10; }
  .st-title { top: 60px; left: 16px; } .st-title b { font-size: 26px; } .st-title span { font-size: 13px; }
  .st-now { bottom: 52px; }
  .st-band { flex-direction: column; align-items: flex-start; }
  .st-band .items { gap: 14px; }
  .studio .car-btn { display: none; }
  .studio { --per: 2 !important; }
}

/* =====================================================
 *  Shop pages (/agri, /sea) : 직거래 레이아웃
 * ===================================================== */
.shop { padding: 20px 0 40px; }
.shop .container + .container { margin-top: 28px; }
.shop .btn { background: var(--accent); } .shop .btn:hover { background: var(--accent-dark); }
.shop .btn.btn-outline { background: #fff; color: var(--accent-dark, var(--green)); border: 1px solid var(--accent, var(--green)); } .shop .btn.btn-outline:hover { background: var(--accent-light, var(--green-light)); }
.shop-hero { position: relative; border-radius: 20px; overflow: hidden; min-height: 400px; background-size: cover; background-position: center right; display: flex; align-items: center; color: #fff; }
.shop-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 75%); }
.shop-hero .copy { position: relative; padding: 48px 56px; max-width: 640px; }
.shop-hero h1 { font-size: 34px; line-height: 1.3; font-weight: 900; margin: 0 0 14px; letter-spacing: -1px; }
.shop-hero h1 em { font-style: normal; display: block; font-size: 40px; }
.theme-green .shop-hero h1 em { color: #a6f0bf; } .theme-blue .shop-hero h1 em { color: #a9d4ff; } .theme-red .shop-hero h1 em { color: #ffc6a8; }
.shop-hero p { font-size: 15px; line-height: 1.6; margin: 0 0 22px; opacity: .95; }
.shop-hero .hand { position: absolute; right: 36px; top: 30px; font-size: 14px; font-style: italic; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); transform: rotate(-4deg); z-index: 1; opacity: 0; animation: sf-up .8s .5s forwards; }
.shop-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.shop-body > *, .pd-grid > *, .pd-left > * { min-width: 0; }
.shop-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: sticky; top: 80px; }
.shop-side .head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--accent-dark); padding: 10px 12px; margin-bottom: 4px; }
.shop-side .head .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.shop-side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #333; }
.shop-side a .ci { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-light); color: var(--accent-dark); display: grid; place-items: center; flex-shrink: 0; transition: background .2s, color .2s; }
.shop-side a.on, .shop-side a:hover { background: var(--accent-light); color: var(--accent-dark); }
.shop-side a.on .ci, .shop-side a:hover .ci { background: var(--accent); color: #fff; }
.shop-feats { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.shop-feats > div { display: flex; align-items: center; gap: 12px; }
.shop-feats > div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.shop-feats .ico, .shop-band .ico, .pd-feats .ico, .pd-mini .ico { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-light); color: var(--accent-dark); display: grid; place-items: center; flex-shrink: 0; }
.shop-feats b, .shop-band b { display: block; font-size: 14px; } .shop-feats small, .shop-band small { font-size: 12px; color: var(--muted); }
.section-head .ico-sm { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; }

/* direct-trade card */
.dt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (min-width: 1400px) { .shop-main .dt-grid:not(.track), .shop .carousel { --per: 6; } .shop-main .dt-grid:not(.track) { grid-template-columns: repeat(6, 1fr); } }
.dt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; position: relative; transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
.dt-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15,27,45,.12); }
.dt-card .thumb { display: block; position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: #cfd8dc; margin-bottom: 10px; }
.dt-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.dt-card:hover .thumb img { transform: scale(1.08); }
.dt-card .bd { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; }
.dt-card .bd.hot { left: auto; right: 8px; background: #ff7a1a; } .dt-card .bd.live { left: auto; right: 8px; background: var(--live); }
.dt-card .heart { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.9); color: #777; display: grid; place-items: center; transition: color .2s, transform .2s; }
.dt-card:hover .heart { color: var(--live); transform: scale(1.1); }
.dt-card .name { font-size: 14px; font-weight: 800; }
.dt-card .meta { font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.dt-card .price { font-size: 16px; font-weight: 900; color: var(--accent-dark); }
.dt-card .price s { font-size: 11px; font-weight: 400; color: #aaa; margin-left: 6px; }
.dt-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.dt-card .rate { color: #f5a623; font-weight: 700; } .dt-card .rate em { font-style: normal; color: var(--muted); font-weight: 400; }
.dt-card .cart { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: #555; transition: background .25s, color .25s, transform .25s; }
.dt-card:hover .cart { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(-8deg); }
.carousel .dt-grid { --gap: 14px; }

.shop-promo { position: relative; border-radius: 20px; overflow: hidden; background: var(--accent-light); display: grid; grid-template-columns: 1fr 1fr; min-height: 220px; }
.shop-promo .copy { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.shop-promo h3 { margin: 0 0 10px; font-size: 26px; font-weight: 900; color: var(--accent-dark); line-height: 1.3; }
.shop-promo p { margin: 0 0 18px; font-size: 14px; color: #444; line-height: 1.6; }
.shop-promo .pic { background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%); mask-image: linear-gradient(90deg, transparent, #000 25%); animation: sf-kenburns 16s ease-in-out infinite alternate; }
.shop-band { background: var(--accent-light); border-radius: 16px; padding: 22px 30px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.shop-band > div { display: flex; align-items: center; gap: 12px; }
.shop-band .ico { background: #fff; color: var(--accent); }

@media (max-width: 1024px) {
  .shop-body { grid-template-columns: 1fr; }
  .shop-side { position: static; display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .shop-side .head, .shop-side a { white-space: nowrap; }
  .shop-feats { grid-template-columns: 1fr 1fr; }
  .shop-feats > div + div { border: 0; padding: 0; }
  .dt-grid { grid-template-columns: repeat(3, 1fr); }
  .shop-promo { grid-template-columns: 1fr; } .shop-promo .pic { min-height: 180px; mask-image: none; -webkit-mask-image: none; }
}
@media (max-width: 720px) {
  .shop-hero { min-height: 240px; border-radius: 14px; }
  .shop-hero .copy { padding: 24px 20px; }
  .shop-hero h1 { font-size: 22px; } .shop-hero h1 em { font-size: 26px; }
  .shop-hero .hand { display: none; }
  .shop-feats { grid-template-columns: 1fr; padding: 14px; }
  .dt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-promo h3 { font-size: 20px; }
}

/* =====================================================
 *  Product detail (/item/*, /product/*)
 * ===================================================== */
.pd { padding: 14px 0 50px; background: var(--bg); }
.pd .btn { background: var(--accent); } .pd .btn:hover { background: var(--accent-dark); }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumb em { font-style: normal; } .crumb em:last-child { color: var(--text); font-weight: 600; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.pd-gallery { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.pd-gallery .thumbs { display: flex; flex-direction: column; gap: 8px; }
.pd-gallery .thumbs button { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 0; overflow: hidden; aspect-ratio: 1/1; background: #cfd8dc; cursor: pointer; transition: border-color .2s, transform .2s; }
.pd-gallery .thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-gallery .thumbs button.on { border-color: var(--accent); } .pd-gallery .thumbs button:hover { transform: scale(1.04); }
.pd-gallery .thumbs .pl { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; }
.pd-gallery .thumbs .more-arrow { text-align: center; color: var(--muted); font-size: 18px; line-height: 1; }
.pd-gallery .main { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: #cfd8dc; color: #fff; }
.pd-gallery .main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.pd-gallery .main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%, rgba(0,0,0,.55)); pointer-events: none; }
.pd-gallery .main > div { position: absolute; z-index: 1; }
.ov-top { top: 14px; left: 14px; right: 14px; display: flex; gap: 8px; align-items: center; }
.ov-top .lv { background: rgba(229,57,53,.85); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.ov-top .sp { margin-left: auto; background: rgba(0,0,0,.55); font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.ov-copy { left: 26px; top: 20%; max-width: 60%; }
.ov-copy small { display: inline-block; font-size: 14px; background: rgba(0,0,0,.4); padding: 3px 10px; border-radius: 6px; margin-bottom: 8px; }
.ov-copy b { display: block; font-size: 40px; font-weight: 900; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.6); letter-spacing: -1px; }
.ov-copy span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.ov-bottom { left: 14px; right: 14px; bottom: 14px; display: flex; gap: 8px; align-items: center; }
.ov-bottom span { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.5); font-size: 12px; padding: 5px 10px 5px 5px; border-radius: 999px; }
.ov-bottom span i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.ov-bottom .cnt { margin-left: auto; font-style: normal; font-size: 12px; background: rgba(0,0,0,.5); padding: 4px 10px; border-radius: 999px; }
.pd-feats { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pd-feats > div { display: flex; align-items: center; gap: 10px; } .pd-feats > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.pd-feats b { display: block; font-size: 13px; } .pd-feats small { font-size: 11px; color: var(--muted); }
.pd-tabs { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; gap: 4px; }
.pd-tabs button { flex: 1; border: 0; background: transparent; padding: 11px 8px; font-size: 14px; font-weight: 700; color: var(--muted); border-radius: 8px; transition: background .2s, color .2s; }
.pd-tabs button.on { background: var(--accent); color: #fff; }
.pd-pane { display: none; } .pd-pane.on { display: block; }
.pd-banner { margin-top: 16px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; position: relative; padding: 36px 32px; color: #fff; min-height: 180px; }
.pd-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.2)); }
.pd-banner > * { position: relative; }
.pd-banner .pill { display: inline-block; background: var(--accent); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; margin-bottom: 10px; }
.pd-banner b { display: block; font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.pd-banner p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .95; }
.pd-mini { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.pd-mini > div { display: flex; align-items: center; gap: 10px; } .pd-mini > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.pd-mini b { display: block; font-size: 13px; } .pd-mini small { font-size: 11px; color: var(--muted); }
.pd-left h3, .pd-right h3 { font-size: 17px; font-weight: 800; margin: 26px 0 12px; }
.pd-spec-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-spec { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; }
.pd-spec th, .pd-spec td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.pd-spec th { width: 32%; background: var(--bg); color: var(--muted); font-weight: 600; }
.pd-spec tr:last-child th, .pd-spec tr:last-child td { border-bottom: 0; }
.pd-reco { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 13px; }
.pd-reco > b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--accent-dark); margin-bottom: 10px; }
.pd-reco > b.mt { margin-top: 16px; }
.pd-reco ul { margin: 0; padding: 0; list-style: none; } .pd-reco li { padding: 4px 0 4px 20px; position: relative; color: #444; }
.pd-reco li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.pd-reco .ways { display: flex; gap: 10px; } .pd-reco .ways span { text-align: center; font-size: 12px; }
.pd-reco .ways img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 4px; background: #cfd8dc; }
.pd-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pd-reviews.col { grid-template-columns: 1fr; }
.rv { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 13px; }
.rv img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #cfd8dc; }
.rv .stars { display: block; color: #f5a623; font-size: 12px; font-weight: 700; }
.rv b { font-size: 12px; } .rv small { font-size: 11px; color: var(--muted); margin-left: 6px; } .rv p { margin: 6px 0 0; color: #444; line-height: 1.5; }
.pd-content { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-top: 16px; font-size: 14px; line-height: 1.7; }
.pd-content h4 { margin: 0 0 6px; font-size: 15px; } .pd-content h4 + p { margin-bottom: 18px; }
.pd-content img { border-radius: 8px; }

/* right panel */
.pd-right { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; }
.pd-buy { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.pd-buy .tags { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.pd-buy .tags span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pd-buy .t1 { background: var(--accent); color: #fff; } .pd-buy .t2 { background: var(--accent-light); color: var(--accent-dark); }
.pd-buy .acts { margin-left: auto; display: flex; gap: 6px; background: none !important; padding: 0 !important; }
.pd-buy .acts i { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: #666; cursor: pointer; transition: color .2s, border-color .2s; }
.pd-buy .acts i:hover { color: var(--live); border-color: var(--live); }
.pd-buy h1 { margin: 0 0 6px; font-size: 24px; font-weight: 900; letter-spacing: -.5px; }
.pd-buy .sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.pd-buy .rating { font-size: 13px; margin-bottom: 14px; } .pd-buy .rating b { color: #f5a623; } .pd-buy .rating .sep { margin-left: 12px; color: var(--muted); }
.pd-buy .price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pd-buy .price b { font-size: 30px; font-weight: 900; } .pd-buy .price s { color: #aaa; font-size: 13px; }
.pd-buy .price em { font-style: normal; background: var(--live); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; }
.pd-auction { margin: 16px 0; background: var(--accent-light); border: 1px solid var(--accent-soft); border-radius: 12px; padding: 14px 16px; font-size: 13px; }
.pd-auction .h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pd-auction .h b { font-size: 14px; color: var(--accent-dark); }
.pd-auction .row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--accent-soft); }
.pd-auction .row span { color: var(--muted); flex: 1; } .pd-auction .row b { font-weight: 800; }
.pd-auction .row.big b { font-size: 22px; color: var(--live); font-variant-numeric: tabular-nums; }
.pd-auction .row .cur { font-size: 18px; color: var(--live); } .pd-auction .row em { font-style: normal; font-size: 11px; color: var(--live); }
.pd-auction .btn-bid { margin-top: 12px; height: 46px; font-size: 15px; }
.pd-buy .qty { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 13px; }
.pd-buy .qty > div { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pd-buy .qty button { width: 34px; height: 36px; border: 0; background: var(--bg); font-size: 16px; }
.pd-buy .qty input { width: 48px; border: 0; text-align: center; font-weight: 700; font-family: inherit; -moz-appearance: textfield; }
.pd-buy .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pd-buy .qty b { margin-left: auto; font-size: 18px; font-weight: 900; }
.pd-buy .cta { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.pd-buy .cta .btn { height: 48px; font-size: 15px; }
.pd .btn-outline { background: #fff; color: var(--accent-dark); border: 1px solid var(--accent); } .pd .btn-outline:hover { background: var(--accent-light); }
.pd-lives { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.pd-lives .section-head { margin-bottom: 8px; } .pd-lives h3 { margin: 0; font-size: 15px; }
.pd-lives .lv { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; transition: background .2s; }
.pd-lives .lv:last-child { border-bottom: 0; }
.pd-lives .lv img { width: 56px; height: 48px; object-fit: cover; border-radius: 8px; background: #cfd8dc; }
.pd-lives .lv b { display: block; font-size: 13px; } .pd-lives .lv small { color: var(--muted); } .pd-lives .lv strong { color: var(--text); }
.pd-lives .lv .r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; } .pd-lives .lv .r small { display: block; line-height: 1; } .pd-lives .lv .r i { font-style: normal; color: var(--live); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-lives .lv .r .btn { display: inline-flex; margin: 0; padding: 5px 12px; font-size: 12px; }
.pd-live-promo { border-radius: 16px; overflow: hidden; position: relative; background-size: cover; background-position: center; padding: 26px 22px; color: #fff; min-height: 170px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.pd-live-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,30,20,.85), rgba(10,30,20,.3)); }
.pd-live-promo > * { position: relative; }
.pd-live-promo b { font-size: 20px; font-weight: 900; line-height: 1.3; } .pd-live-promo p { margin: 8px 0 14px; font-size: 13px; opacity: .95; line-height: 1.5; }
.pd-live-promo .btn { background: #fff; color: var(--accent-dark); } .pd-live-promo .btn:hover { background: var(--accent-light); }

@media (max-width: 1024px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-right { position: static; }
  .pd-spec-wrap, .pd-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-gallery .thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .pd-gallery .thumbs button { flex: 0 0 56px; } .pd-gallery .thumbs .more-arrow { display: none; }
  .ov-copy { top: 16%; max-width: 80%; } .ov-copy b { font-size: 24px; } .ov-copy span { font-size: 12px; }
  .ov-bottom span:nth-child(2), .ov-bottom span:nth-child(3) { display: none; }
  .pd-feats, .pd-mini { grid-template-columns: 1fr 1fr; } .pd-feats > div + div, .pd-mini > div + div { border: 0; padding: 0; }
  .pd-tabs button { font-size: 12px; padding: 10px 4px; }
  .pd-buy { padding: 18px; } .pd-buy h1 { font-size: 20px; }
}

/* toast */
.sf-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px); background: #1c1c1c; color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .3s, transform .3s; z-index: 999; pointer-events: none; }
.sf-toast.show { opacity: 1; transform: translateX(-50%); }

/* =====================================================
 *  Support (/support) : 고객센터
 * ===================================================== */
.cs { padding-bottom: 50px; background: var(--bg); }
.cs .container + .container { margin-top: 24px; }
.cs-hero { position: relative; min-height: 300px; background-size: cover; background-position: center; display: flex; align-items: center; color: #0f2a4a; overflow: hidden; }
.cs-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236,245,255,.95) 0%, rgba(236,245,255,.75) 45%, rgba(236,245,255,.1) 100%); }
.cs-hero .container { position: relative; width: 100%; padding-top: 40px; padding-bottom: 40px; }
.cs-hero .eyebrow { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #1f4f8a; }
.cs-hero h1 { margin: 0 0 16px; font-size: 54px; font-weight: 900; letter-spacing: -2px; line-height: 1.1; }
.cs-hero .desc { margin: 0; font-size: 16px; line-height: 1.7; color: #243b55; }
.cs-hero .hand { position: absolute; left: 40%; top: 46%; transform: translateY(-50%) rotate(-8deg); font-size: 20px; font-style: italic; font-weight: 700; color: #1e8a4c; line-height: 1.4; opacity: 0; animation: sf-up .9s .5s forwards; }
.cs-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -40px; position: relative; z-index: 1; }
.cs-quick a { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; padding: 22px 22px; border-radius: 16px; border: 1px solid var(--line); background: #fff; transition: transform .3s, box-shadow .3s; }
.cs-quick a:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(15,27,45,.12); }
.cs-quick .ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.cs-quick b { display: block; font-size: 17px; margin-bottom: 4px; } .cs-quick small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cs-quick .q1 { background: #eef8f1; } .cs-quick .q1 .ico { background: #d6f0df; color: #1e8a4c; } .cs-quick .q1 b { color: #166b3a; }
.cs-quick .q2 { background: #ecf3fd; } .cs-quick .q2 .ico { background: #d6e5fb; color: #1769d6; } .cs-quick .q2 b { color: #0f4fa8; }
.cs-quick .q3 { background: #f3effc; } .cs-quick .q3 .ico { background: #e4dbf8; color: #6a3fc9; } .cs-quick .q3 b { color: #4e2ba0; }
.cs-quick .q4 { background: #eef8f1; } .cs-quick .q4 .ico { background: #d6f0df; color: #1e8a4c; } .cs-quick .q4 b { color: #166b3a; }
.cs-quick svg:last-child { color: var(--muted); }
.cs-body { display: grid; grid-template-columns: 250px minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.cs-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-side .head { background: #0f2a4a; color: #fff; font-weight: 800; font-size: 16px; padding: 16px 20px; }
.cs-side a { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 14px; font-weight: 600; color: #333; border-bottom: 1px solid var(--line); transition: background .2s, color .2s, padding-left .2s; }
.cs-side a svg { opacity: 0; transition: opacity .2s; }
.cs-side a.on, .cs-side a:hover { background: #ecf3fd; color: #0f4fa8; padding-left: 24px; }
.cs-side a.on svg, .cs-side a:hover svg { opacity: 1; }
.cs-side .side-pic { height: 140px; background-size: cover; background-position: center; position: relative; }
.cs-side .side-pic::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.1)); }
.cs-side .side-pic span { position: relative; display: block; padding: 18px; font-size: 14px; font-style: italic; color: #166b3a; line-height: 1.4; } .cs-side .side-pic b { font-size: 18px; }
.cs-main { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; }
.cs-main h2 { margin: 0 0 6px; font-size: 24px; font-weight: 900; }
.cs-main .sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.cs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cs-chips a { padding: 8px 16px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; color: #444; transition: background .2s, color .2s; }
.cs-chips a.on, .cs-chips a:hover { background: #1769d6; color: #fff; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 8px; cursor: pointer; font-size: 15px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .t { flex: 1; } .faq summary svg { transform: rotate(90deg); color: var(--muted); transition: transform .25s; }
.faq details[open] summary svg { transform: rotate(-90deg); }
.faq .q { width: 26px; height: 26px; border-radius: 50%; background: #1769d6; color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; }
.faq .a { display: flex; gap: 12px; padding: 4px 8px 18px 8px; background: #f7f9fc; margin: 0 -8px; padding-left: 16px; padding-right: 16px; border-radius: 8px; }
.faq .a-mark { background: #1e8a4c; }
.faq .a p { margin: 3px 0 0; font-size: 14px; line-height: 1.7; color: #444; }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.pager span, .pager b { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--muted); }
.pager b { background: #1769d6; color: #fff; border-color: #1769d6; }
.cs-form .field select, .cs-form .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; }
.cs-form .field select { height: 44px; } .cs-form .field textarea { resize: vertical; }
.cs-form .btn { min-width: 160px; height: 46px; background: #1769d6; } .cs-form .btn:hover { background: #0f4fa8; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide-grid > div { background: var(--bg); border-radius: 12px; padding: 18px; }
.guide-grid .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1769d6; color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.guide-grid b { display: block; font-size: 15px; margin-bottom: 4px; } .guide-grid p { margin: 0; font-size: 13px; color: #555; line-height: 1.6; }
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list a { display: flex; align-items: center; gap: 14px; padding: 15px 8px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .2s; }
.notice-list a:hover { background: #f7f9fc; } .notice-list .d { font-size: 12px; color: var(--muted); flex-shrink: 0; } .notice-list b { flex: 1; font-weight: 600; }
.cs-right { display: flex; flex-direction: column; gap: 14px; }
.cs-right > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.cs-right .ico { width: 44px; height: 44px; border-radius: 50%; background: #ecf3fd; color: #1769d6; display: grid; place-items: center; }
.cs-right .call { position: relative; }
.cs-right .call .ico { position: absolute; left: 22px; top: 22px; }
.cs-right .call small { display: block; margin-left: 56px; font-size: 14px; font-weight: 700; color: #0f2a4a; }
.cs-right .call b { display: block; margin-left: 56px; font-size: 34px; font-weight: 900; color: #0f4fa8; letter-spacing: -1px; margin-bottom: 8px; }
.cs-right .call p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.cs-right .inq { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: #ecf3fd !important; border-color: #d6e5fb !important; }
.cs-right .inq .ico { background: #1769d6; color: #fff; }
.cs-right .inq b { display: block; font-size: 15px; } .cs-right .inq small { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cs-right .inq .btn { background: #1769d6; } .cs-right .inq .btn:hover { background: #0f4fa8; }
.cs-right .hours b { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 10px; }
.cs-right .hours dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; } .cs-right .hours dt { color: var(--muted); } .cs-right .hours dd { margin: 0; }
.cs-banner { position: relative; overflow: hidden; background-size: cover; background-position: center; color: #fff; min-height: 150px; border: 0 !important; }
.cs-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,42,74,.9), rgba(15,42,74,.35)); }
.cs-banner > * { position: relative; }
.cs-banner small { display: block; font-size: 13px; margin-bottom: 4px; } .cs-banner b { display: block; font-size: 20px; font-weight: 900; line-height: 1.3; margin-bottom: 14px; }
.cs-banner .btn { background: #0f4fa8; } .cs-banner .btn:hover { background: #1769d6; }
@media (max-width: 1280px) { .cs-body { grid-template-columns: 220px minmax(0, 1fr); } .cs-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) { .cs-quick { grid-template-columns: 1fr 1fr; } .cs-hero .hand { display: none; } }
@media (max-width: 720px) {
  .cs-hero { min-height: 220px; } .cs-hero h1 { font-size: 36px; } .cs-hero .desc { font-size: 13px; }
  .cs-quick { grid-template-columns: 1fr; margin-top: 16px; } .cs-quick a { padding: 16px; grid-template-columns: 56px 1fr auto; } .cs-quick .ico { width: 56px; height: 56px; }
  .cs-body { grid-template-columns: 1fr; } .cs-side .side-pic { display: none; }
  .cs-side { display: flex; overflow-x: auto; scrollbar-width: none; } .cs-side .head, .cs-side a { white-space: nowrap; border: 0; } .cs-side a svg { display: none; }
  .cs-main { padding: 20px 16px; } .cs-right { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
}

/* =====================================================
 *  Header cart
 * ===================================================== */
.cart-link { position: relative; width: 36px; height: 36px; border-radius: 50%; display: inline-grid !important; place-items: center; color: #333; transition: background .2s; }
.cart-link:hover { background: var(--bg); }
.cart-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; animation: sf-pop .3s; }
.dt-card .heart.on, .pd-buy .acts i.on { color: var(--live); border-color: var(--live); }
.dt-card .heart.on svg, .pd-buy .acts i.on svg { fill: var(--live); }

/* =====================================================
 *  Mypage (redesign)
 * ===================================================== */
.my { background: #eef3f8; padding: 24px 0 60px; }
.my-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.my-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.my-main > .my-card + .my-card, .my-main > .my-card + .my-coupon, .my-main > .my-stats + .my-card { margin-top: 16px; }
.my-main h2 { margin: 0 0 16px; font-size: 20px; font-weight: 900; }
.my-main h3 { margin: 0; font-size: 17px; font-weight: 800; }
.my-main .section-head { margin-bottom: 12px; }
.my-side { display: flex; flex-direction: column; gap: 14px; }
.my-profile { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.my-profile .avatar { width: 56px; height: 56px; border-radius: 50%; background: #e2ebf5; color: #1769d6; display: grid; place-items: center; }
.my-profile b { display: block; font-size: 17px; } .my-profile small { display: block; font-size: 12px; color: var(--muted); }
.my-profile .chip { margin-top: 6px; }
.my-profile .edit { grid-column: 1 / -1; text-align: right; font-size: 12px; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.my-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.my-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #333; transition: background .2s, color .2s, padding-left .2s; }
.my-nav a svg { color: #1769d6; }
.my-nav a.on { background: #166b3a; color: #fff; } .my-nav a.on svg { color: #fff; }
.my-nav a:not(.on):hover { background: #eef3f8; padding-left: 18px; }
.my-promo { position: relative; overflow: hidden; color: #fff; min-height: 240px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-start; border: 0; }
.my-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,70,120,.85), rgba(14,70,120,.2) 70%); }
.my-promo > * { position: relative; }
.my-promo b { font-size: 18px; font-weight: 900; line-height: 1.35; } .my-promo p { margin: 8px 0 14px; font-size: 12px; opacity: .95; line-height: 1.5; }
.my-promo .btn { align-self: flex-start; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.5); }
.my-welcome { position: relative; overflow: hidden; border-radius: 16px; padding: 34px 36px; color: #fff; background-size: cover; background-position: center; min-height: 190px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.my-welcome::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,70,120,.9), rgba(14,70,120,.45) 60%, rgba(14,70,120,.1)); }
.my-welcome > * { position: relative; }
.my-welcome h2 { margin: 0 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -1px; } .my-welcome h2 em { font-style: normal; color: #a9d4ff; }
.my-welcome p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.my-welcome .btn-outline { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
.my-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.my-stats a { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; transition: transform .3s, box-shadow .3s; }
.my-stats a:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,27,45,.1); }
.my-stats .ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; background: #e2f3e8; color: #1e8a4c; display: grid; place-items: center; }
.my-stats small { font-size: 12px; color: var(--muted); } .my-stats b { font-size: 22px; font-weight: 900; }
.my-stats em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 2px; }
.my-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.my-table th { background: #f3f6fa; color: var(--muted); font-weight: 600; padding: 10px 12px; text-align: left; }
.my-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.my-table .no { color: var(--muted); font-size: 12px; }
.my-table .pn { display: flex; align-items: center; gap: 10px; } .my-table .pn img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #cfd8dc; }
.my-table .pn b { display: block; } .my-table .pn small { color: var(--muted); }
.chip.paid, .chip.preparing { background: #fff4e0; color: #b26a00; } .chip.shipped { background: #e2ebf5; color: #1769d6; } .chip.delivered { background: var(--green-light); color: var(--green-dark); } .chip.cancelled { background: #fdecec; color: #b3261e; }
.wish-grid { grid-template-columns: repeat(4, 1fr); }
.my-coupon { margin-top: 16px; background: #e8f5ed; border-radius: 16px; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center; }
.my-coupon b { display: block; font-size: 18px; font-weight: 900; color: #166b3a; } .my-coupon p { margin: 4px 0 0; font-size: 13px; color: #444; }
.my-coupon .ticket { background: #fff; border: 2px dashed #9fd6b4; border-radius: 12px; padding: 10px 18px; text-align: center; transform: rotate(-4deg); }
.my-coupon .ticket small { display: block; font-size: 11px; color: var(--muted); } .my-coupon .ticket b { font-size: 24px; } .my-coupon .ticket em { font-style: normal; font-size: 13px; }
@media (max-width: 1024px) {
  .my-grid { grid-template-columns: 1fr; } .my-promo { display: none; }
  .my-stats { grid-template-columns: 1fr 1fr; } .wish-grid { grid-template-columns: repeat(3, 1fr); }
  .my-coupon { grid-template-columns: 1fr; } .my-coupon .ticket { display: none; }
}
@media (max-width: 720px) {
  .my-card { padding: 16px; } .my-welcome { padding: 22px 20px; } .my-welcome h2 { font-size: 22px; }
  .my-stats { gap: 8px; } .my-stats a { padding: 12px; } .my-stats b { font-size: 18px; }
  .my-table th:nth-child(1), .my-table td:nth-child(1), .my-table th:nth-child(3), .my-table td:nth-child(3) { display: none; }
  .wish-grid { grid-template-columns: 1fr 1fr; }
  .my-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .my-nav a { white-space: nowrap; }
}

/* =====================================================
 *  Cart (/cart)
 * ===================================================== */
.cart-page { background: var(--bg); padding-bottom: 60px; }
.cart-hero { position: relative; min-height: 200px; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; margin-bottom: 24px; }
.cart-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,40,70,.85), rgba(10,40,70,.3)); }
.cart-hero .container { position: relative; width: 100%; }
.cart-hero h1 { margin: 0 0 8px; font-size: 40px; font-weight: 900; } .cart-hero p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .95; }
.cart-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }
.cart-top .chk { display: flex; align-items: center; gap: 8px; font-weight: 700; } .cart-top .sel { color: #1769d6; }
.cart-top .r { display: flex; gap: 16px; align-items: center; } .cart-top .link { border: 0; background: none; color: var(--muted); font-size: 13px; text-decoration: underline; }
.cart-page input[type=checkbox] { width: 18px; height: 18px; accent-color: #1769d6; }
.cart-table { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cart-table .th, .cart-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 140px 120px 120px 60px; align-items: center; gap: 10px; padding: 14px 16px; }
.cart-table .th { background: #f3f6fa; font-size: 13px; font-weight: 700; color: #444; text-align: center; } .cart-table .th span:nth-child(2) { text-align: left; }
.cart-item { border-top: 1px solid var(--line); text-align: center; font-size: 14px; }
.cart-item .info { display: flex; gap: 14px; align-items: center; text-align: left; }
.cart-item .info img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; background: #cfd8dc; flex-shrink: 0; }
.cart-item .tags { display: flex; gap: 6px; margin-bottom: 4px; } .cart-item .tags span { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e2f3e8; color: #166b3a; } .cart-item .tags span.b { background: #e2ebf5; color: #1769d6; }
.cart-item .info b { display: block; font-size: 15px; } .cart-item .info small { display: block; font-size: 12px; color: var(--muted); margin: 2px 0 4px; } .cart-item .info .p { font-weight: 800; color: #166b3a; }
.cart-item .qty { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.cart-item .qty button { width: 30px; height: 32px; border: 0; background: #fff; font-size: 15px; } .cart-item .qty input { width: 40px; border: 0; text-align: center; font-weight: 700; font-family: inherit; }
.cart-item .sub { font-weight: 900; color: #166b3a; }
.cart-item .del { border: 0; background: none; color: #999; cursor: pointer; transition: color .2s; } .cart-item .del:hover { color: var(--live); }
.cart-empty { padding: 60px 20px; text-align: center; }
.cart-empty .ico { display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--bg); color: #9aa; margin-bottom: 12px; }
.cart-empty b { display: block; font-size: 18px; } .cart-empty p { color: var(--muted); margin: 6px 0 18px; } .cart-empty .btn { margin: 0 4px; }
.cart-notice { margin-top: 16px; background: #eef3f8; border-radius: 14px; padding: 18px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; font-size: 13px; }
.cart-notice .l { display: flex; align-items: center; gap: 14px; } .cart-notice .ico { width: 48px; height: 48px; border-radius: 50%; background: #fff; color: #1e8a4c; display: grid; place-items: center; }
.cart-notice .l b { color: #1e8a4c; } .cart-notice ul { margin: 0; padding-left: 18px; color: #555; line-height: 1.8; border-left: 1px solid #d5dee8; }
.cart-bottom { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cart-bottom .coupon { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; }
.cart-bottom .coupon .ico { width: 52px; height: 52px; border-radius: 50%; background: #e2f3e8; color: #1e8a4c; display: grid; place-items: center; }
.cart-bottom .coupon small { display: block; font-size: 12px; color: var(--muted); } .cart-bottom .coupon b { font-size: 24px; font-weight: 900; color: #166b3a; } .cart-bottom .coupon em { font-style: normal; font-size: 13px; margin-left: 2px; }
.cart-bottom .total { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 22px; }
.cart-bottom .row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; } .cart-bottom .row span { color: var(--muted); }
.cart-bottom .grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; } .cart-bottom .grand span { color: var(--text); font-weight: 700; } .cart-bottom .grand b { font-size: 28px; font-weight: 900; color: #166b3a; }
.cart-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cart-actions .btn { height: 54px; font-size: 16px; border-radius: 12px; }
.cart-actions .btn-outline { background: #fff; color: #166b3a; border: 1px solid #1e8a4c; }
@media (max-width: 860px) {
  .cart-table .th { display: none; }
  .cart-item { grid-template-columns: 30px 1fr; gap: 8px 10px; }
  .cart-item .qty, .cart-item .price, .cart-item .sub, .cart-item .del { grid-column: 2; justify-self: start; }
  .cart-item .price::before { content: "판매가 "; color: var(--muted); font-size: 12px; } .cart-item .sub::before { content: "소계 "; color: var(--muted); font-size: 12px; font-weight: 400; }
  .cart-notice, .cart-bottom { grid-template-columns: 1fr; }
  .cart-hero h1 { font-size: 28px; }
}

/* =====================================================
 *  Center chrome (판매자센터 / 구매자센터)
 * ===================================================== */
body.sf-seller { background: #eef3f8; }
.sc-top { position: sticky; top: 0; z-index: 50; height: 60px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.sc-top .l { display: flex; align-items: center; gap: 14px; } .sc-top .l > b { font-size: 18px; font-weight: 800; color: var(--green-dark); }
.sc-top .sep { width: 1px; height: 22px; background: var(--line); }
.sc-top .home-link { font-size: 12px; color: var(--muted); margin-left: 6px; display: inline-flex; align-items: center; gap: 2px; }
.sc-top .r { display: flex; align-items: center; gap: 18px; font-size: 13px; color: #444; }
.sc-top .r a { display: inline-flex; align-items: center; gap: 5px; }
.sc-top .bell { position: relative; width: 36px; height: 36px; border-radius: 50%; display: inline-grid !important; place-items: center; }
.sc-top .bell:hover { background: var(--bg); }
.sc-top .bell i { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.sc-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 20px 24px 60px; max-width: 1900px; margin: 0 auto; }
.sc-nav { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 14px; }
.sc-me { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.sc-me .av { width: 48px; height: 48px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.sc-me b { display: block; font-size: 15px; } .sc-me b .chip { margin: 0 0 0 4px; font-size: 10px; padding: 2px 7px; vertical-align: middle; } .sc-me small { font-size: 11px; color: var(--muted); }
.sc-nav nav { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sc-nav nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #333; transition: background .2s, color .2s, padding-left .2s; }
.sc-nav nav a svg { color: var(--green); flex-shrink: 0; } .sc-nav nav a span { flex: 1; } .sc-nav nav a em { font-style: normal; color: #aaa; font-size: 12px; }
.sc-nav nav a.on { background: var(--green); color: #fff; } .sc-nav nav a.on svg, .sc-nav nav a.on em { color: #fff; }
.sc-nav nav a:not(.on):hover { background: #eef3f8; padding-left: 18px; }
.sc-side-promo { position: relative; overflow: hidden; border-radius: 14px; min-height: 210px; background-size: cover; background-position: center; color: #fff; padding: 20px; display: flex; flex-direction: column; }
.sc-side-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,60,40,.85), rgba(10,60,40,.15) 75%); }
.sc-side-promo > * { position: relative; } .sc-side-promo b { font-size: 17px; font-weight: 900; line-height: 1.35; } .sc-side-promo small { margin-top: 6px; font-size: 12px; opacity: .95; line-height: 1.5; }
.sc-side-promo a { margin-top: auto; align-self: flex-end; width: 32px; height: 32px; border-radius: 50%; background: #1c1c1c; color: #fff; display: grid; place-items: center; }
.sc-main .alert { margin-bottom: 14px; }
.sc-main h2 { margin: 0 0 16px; font-size: 20px; font-weight: 900; } .sc-main h3 { margin: 0; font-size: 16px; font-weight: 800; }
.sc-main .my-card + .my-card { margin-top: 16px; }

/* dashboard */
.sc-dash { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.sc-col-side { display: flex; flex-direction: column; gap: 16px; }
.sc-col-main > * + * { margin-top: 16px; }
.sc-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
.sc-welcome { position: relative; overflow: hidden; border-radius: 16px; min-height: 200px; padding: 30px 34px; color: #fff; background-size: cover; background-position: center right; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sc-welcome::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,60,40,.9), rgba(10,60,40,.55) 55%, rgba(10,60,40,.1)); }
.sc-welcome > * { position: relative; } .sc-welcome small { font-size: 13px; opacity: .95; } .sc-welcome h2 { margin: 6px 0 8px; font-size: 24px; color: #fff; } .sc-welcome h2 em { font-style: normal; color: #a6f0bf; }
.sc-welcome p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; opacity: .95; }
.sc-event { display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.sc-event .e1 { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; gap: 12px; align-items: center; }
.sc-event .e1 .ico { width: 42px; height: 42px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; }
.sc-event .e1 small { display: block; font-size: 11px; color: var(--muted); } .sc-event .e1 b { display: block; font-size: 14px; } .sc-event .e1 a { font-size: 11px; color: var(--green-dark); }
.sc-event .e2 { position: relative; overflow: hidden; background: linear-gradient(135deg, #e8f5ed, #d2ecdc); border-radius: 14px; padding: 16px; }
.sc-event .e2 small { display: block; font-size: 12px; color: var(--green-dark); } .sc-event .e2 b { display: block; font-size: 17px; font-weight: 900; color: var(--green-dark); margin: 2px 0 6px; } .sc-event .e2 span { font-size: 11px; color: #555; }
.sc-event .e2 i { position: absolute; right: 12px; bottom: 8px; font-style: normal; font-size: 40px; animation: sf-float 4s ease-in-out infinite; }
.sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sc-stats > a, .sc-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: flex; gap: 14px; align-items: center; transition: transform .3s, box-shadow .3s; }
.sc-stats > a:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,27,45,.1); }
.sc-stats .ico { width: 50px; height: 50px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; }
.sc-stats small { display: block; font-size: 12px; color: var(--muted); } .sc-stats b { display: block; font-size: 24px; font-weight: 900; line-height: 1.2; } .sc-stats b em { font-style: normal; font-size: 13px; font-weight: 600; margin-left: 2px; }
.sc-stats .d { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; } .sc-stats .d.up { color: var(--green-dark); font-weight: 700; }
.sc-row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.sc-chart .seg { display: flex; background: var(--bg); border-radius: 999px; padding: 3px; font-size: 12px; }
.sc-chart .seg span { padding: 5px 12px; border-radius: 999px; color: var(--muted); cursor: pointer; } .sc-chart .seg span.on { background: var(--green); color: #fff; font-weight: 700; }
.chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 16px; align-items: start; margin-top: 10px; }
.line-chart { width: 100%; height: 180px; display: block; }
.line-chart .line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: sf-draw 1.6s ease-out forwards; }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
.chart-wrap .x { grid-column: 1; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 0 6px; }
.chart-wrap .kpi { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 16px; padding-left: 16px; border-left: 1px solid var(--line); }
.chart-wrap .kpi small { display: block; font-size: 12px; color: var(--muted); } .chart-wrap .kpi b { display: block; font-size: 22px; font-weight: 900; } .chart-wrap .kpi b em { font-style: normal; font-size: 13px; font-weight: 600; } .chart-wrap .kpi .up { font-size: 11px; color: var(--green-dark); font-weight: 700; }
.sc-top5 ol { list-style: none; margin: 10px 0 0; padding: 0; }
.sc-top5 li { display: grid; grid-template-columns: 22px 44px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sc-top5 li:last-child { border: 0; } .sc-top5 img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #cfd8dc; }
.sc-top5 .rk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: #9aa; } .sc-top5 .r1 { background: #1e8a4c; } .sc-top5 .r2 { background: #2e9e5f; } .sc-top5 .r3 { background: #43b273; }
.sc-top5 b { display: block; font-size: 13px; } .sc-top5 small { font-size: 11px; color: var(--muted); }
.sc-notice { list-style: none; margin: 8px 0 0; padding: 0; }
.sc-notice li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .sc-notice li:last-child { border: 0; }
.sc-notice .tg { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: #555; } .sc-notice .tg.ev { background: #e2ebf5; color: #1769d6; } .sc-notice .tg.sys { background: #e2f3e8; color: #166b3a; }
.sc-notice a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-notice time { font-size: 11px; color: var(--muted); }
.sc-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.sc-quick a { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 8px; text-align: center; font-size: 12px; font-weight: 700; color: #333; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.sc-quick a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15,27,45,.1); border-color: var(--green); }
.sc-quick a span { width: 44px; height: 44px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.sc-live { position: relative; overflow: hidden; border-radius: 16px; min-height: 190px; padding: 24px; color: #fff; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.sc-live::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,40,70,.9), rgba(10,40,70,.3)); }
.sc-live > * { position: relative; } .sc-live .badge-live { position: absolute; top: -8px; right: 0; } .sc-live b { font-size: 19px; font-weight: 900; line-height: 1.3; } .sc-live p { margin: 8px 0 14px; font-size: 12px; line-height: 1.5; opacity: .95; }
.sc-live .btn { background: #fff; color: #0f2a4a; }
.sc-grid { grid-template-columns: repeat(4, 1fr); } .sc-grid .bd.pending { background: #b26a00; } .sc-grid .bd.draft { background: #b3261e; }
.sc-help { font-size: 12px; } .sc-help b { display: block; font-size: 14px; margin-bottom: 8px; } .sc-help ol { margin: 0 0 10px; padding-left: 18px; color: #555; line-height: 1.6; } .sc-help a { color: var(--green-dark); font-weight: 700; }

/* seller forms */
.sc-form h4 { margin: 22px 0 10px; font-size: 15px; font-weight: 800; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .sc-form h4:first-of-type { margin-top: 0; } .sc-form h4 small { font-weight: 400; color: var(--muted); font-size: 12px; }
.sc-form .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.sc-form .field select, .sc-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; } .sc-form .field select { height: 44px; }
.sc-form textarea { resize: vertical; }
.sc-form .field select:focus, .sc-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,138,76,.12); }
.sc-drop { display: block; border: 2px dashed #c9d3dd; border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: #fafbfc; }
.sc-drop:hover, .sc-drop.over { border-color: var(--green); background: var(--green-light); }
.sc-drop input { display: none; } .sc-drop .ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--green); margin-bottom: 8px; }
.sc-drop b { display: block; font-size: 14px; } .sc-drop small { font-size: 12px; color: var(--muted); }
.sc-drop .previews { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; } .sc-drop .previews img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.sc-drop .previews img:first-child { outline: 2px solid var(--green); }
.sc-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sc-gallery .g { position: relative; width: 110px; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 11px; background: #fff; }
.sc-gallery .g.main { border-color: var(--green); } .sc-gallery .g img { width: 100%; height: 90px; object-fit: cover; display: block; }
.sc-gallery .g .row { display: flex; justify-content: space-around; padding: 6px 4px; } .sc-gallery .g .row label { display: flex; gap: 3px; align-items: center; cursor: pointer; }
.sc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .sc-actions .btn { min-width: 160px; height: 46px; }
.sc-table .acts { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.sc-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sc-order .l b { display: block; font-size: 14px; } .sc-order .l small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sc-order .r { display: flex; gap: 6px; align-items: center; } .sc-order .r select, .sc-order .r input { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 13px; font-family: inherit; } .sc-order .r input { width: 150px; }
.stat-s { background: var(--bg); border-radius: 12px; padding: 16px; } .stat-s small { display: block; font-size: 12px; color: var(--muted); } .stat-s b { font-size: 20px; font-weight: 900; }
@media (max-width: 1400px) { .sc-dash { grid-template-columns: 1fr; } .sc-col-side { display: grid; grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 1024px) {
  .sc-wrap { grid-template-columns: minmax(0, 1fr); padding: 14px; } .sc-nav { position: static; min-width: 0; } .sc-nav nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .sc-nav nav a { white-space: nowrap; } .sc-nav nav a em, .sc-side-promo { display: none; }
  .sc-hero-row, .sc-row2 { grid-template-columns: 1fr; } .sc-stats { grid-template-columns: 1fr 1fr; } .sc-col-side { grid-template-columns: 1fr; }
  .sc-form .grid3 { grid-template-columns: 1fr 1fr; } .sc-order { grid-template-columns: 1fr; } .sc-order .r { flex-wrap: wrap; }
  .sc-top .who { display: none; }
}
@media (max-width: 720px) { .sc-stats { grid-template-columns: 1fr; } .sc-form .grid3 { grid-template-columns: 1fr; } .chart-wrap { grid-template-columns: 1fr; } .chart-wrap .kpi { grid-column: 1; grid-row: auto; border: 0; padding: 0; flex-direction: row; } .sc-top { padding: 0 14px; } .sc-top .home-link { display: none; } }

/* =====================================================
 *  Live: 시청 대기 / 채팅 시스템 메시지 / 입찰 박스 / 송출 페이지
 * ===================================================== */
.st-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.st-player .poster { transition: opacity .6s; }
.st-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(5,12,24,.55); backdrop-filter: blur(3px); text-align: center; z-index: 2; }
.st-wait .pill { background: var(--green); font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 7px; }
.st-wait b { font-size: 26px; font-weight: 900; } .st-wait small { font-size: 13px; opacity: .85; }
.st-bar .pb { border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; opacity: .85; } .st-bar .pb.on { color: #7fe3a3; }
.bid-box { background: #16233a; border-radius: 12px; padding: 12px; }
.bid-input { display: flex; align-items: center; background: #fff; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.bid-input button { width: 40px; height: 42px; border: 0; background: #eef2f6; font-size: 18px; color: #333; }
.bid-input input { flex: 1; border: 0; outline: none; text-align: right; font-size: 18px; font-weight: 900; color: #111; min-width: 0; font-family: inherit; }
.bid-input span { color: #555; font-size: 13px; padding: 0 10px 0 4px; }
.bid-box .hint { display: block; margin-top: 8px; font-size: 11px; color: #9aa7b8; line-height: 1.5; } .bid-box .hint a { color: #7fe3a3; text-decoration: underline; }
.btn-bid[disabled] { opacity: .55; cursor: not-allowed; }
.st-chat li.sys { display: block; } .st-chat .sysmsg { text-align: center; font-size: 11px; color: #9af0b8; background: rgba(127,227,163,.1); border-radius: 6px; padding: 5px 8px; }
.st-chat li.mine .av { background: var(--green); color: #fff; }
.info-product { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.info-product img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; } .info-product b { display: block; font-size: 14px; } .info-product small { color: #9aa7b8; } .info-product p { margin: 4px 0; color: #d5dce6; } .info-product a { color: #7fe3a3; }
.btn-live { background: var(--live) !important; animation: sf-ring 1.8s infinite; }
.chip.live { background: #fdecec; color: #b3261e; } .chip.scheduled { background: #fff4e0; color: #b26a00; } .chip.ended { background: var(--bg); color: var(--muted); }

/* broadcast */
.bc-status { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.bc-status[data-bc-status="live"] { background: var(--live); color: #fff; animation: sf-ring 1.8s infinite; }
.bc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 20px 24px 60px; max-width: 1700px; margin: 0 auto; }
.bc-preview { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
.bc-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-overlay { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 10px; align-items: center; color: #fff; }
.bc-overlay .viewers { background: rgba(0,0,0,.55); border-radius: 8px; padding: 5px 10px; font-size: 12px; display: inline-flex; gap: 5px; align-items: center; }
.bc-overlay .timer { margin-left: auto; background: rgba(229,57,53,.85); border-radius: 8px; padding: 5px 10px; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.bc-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #1a2436; text-align: center; padding: 20px; }
.bc-idle .ico { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; margin-bottom: 6px; }
.bc-idle b { font-size: 18px; } .bc-idle small { font-size: 13px; color: #9aa7b8; }
.bc-controls { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-top: 14px; }
.bc-controls .sel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.bc-controls .sel label span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.bc-controls .sel select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 13px; }
.bc-controls .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bc-controls .btn-go { background: var(--live); margin-left: auto; height: 46px; padding: 0 26px; font-size: 15px; } .bc-controls .btn-go:hover { background: #c62828; }
.bc-controls .btn-stop { background: #333; margin-left: auto; height: 46px; padding: 0 26px; }
.bc-controls .btn-mute { background: var(--bg); color: #333; } .bc-controls .btn-mute.on { background: #fdecec; color: #b3261e; }
.bc-msg { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.bc-obs { margin-top: 14px; } .bc-obs summary { cursor: pointer; display: flex; align-items: center; gap: 10px; list-style: none; } .bc-obs summary::-webkit-details-marker { display: none; } .bc-obs summary small { color: var(--muted); font-size: 12px; }
.bc-obs dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 14px 0 8px; font-size: 13px; } .bc-obs dt { color: var(--muted); } .bc-obs dd { margin: 0; } .bc-obs code { background: var(--bg); padding: 3px 8px; border-radius: 6px; font-size: 12px; user-select: all; }
.bc-obs p { margin: 0; font-size: 12px; color: #555; }
.bc-side { display: flex; flex-direction: column; gap: 14px; }
.bc-auction .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .bc-auction .pill { background: var(--green); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 6px; }
.bc-auction img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; background: #cfd8dc; }
.bc-auction .name { display: block; font-size: 16px; font-weight: 800; margin: 10px 0 8px; }
.bc-auction .rows div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; } .bc-auction .rows span { color: var(--muted); } .bc-auction .cur { color: var(--live); font-size: 18px; font-weight: 900; }
.state-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .state-btns .btn-stop { background: #333; }
.bc-bids ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.bc-bids li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 7px 8px; border-radius: 6px; } .bc-bids li.top { background: var(--green-light); } .bc-bids li b { font-weight: 800; } .bc-bids li span { color: var(--muted); font-size: 11px; } .bc-bids li em { font-style: normal; text-align: right; font-size: 12px; color: #555; }
.bc-bids li.empty, .st-bids li.empty { display: block; text-align: center; color: var(--muted); padding: 10px; }
.bc-chat.st-chat { background: #fff; border: 1px solid var(--line); color: var(--text); padding: 16px 18px 12px; height: 380px; }
.bc-chat.st-chat > b { display: block; margin-bottom: 6px; }
.bc-chat.st-chat ul { padding: 0; max-height: none; } .bc-chat.st-chat li { border-color: var(--line); } .bc-chat .av { background: var(--green-light); color: var(--green-dark); } .bc-chat li p { color: #333; } .bc-chat li time { color: var(--muted); }
.bc-chat .sysmsg { color: var(--green-dark); background: var(--green-light); }
.bc-chat .chat-input { padding: 10px 0 0; border-top: 1px solid var(--line); } .bc-chat .chat-input input { background: var(--bg); color: var(--text); border: 1px solid var(--line); } .bc-chat .chat-input input::placeholder { color: #999; }
@media (max-width: 1100px) { .bc { grid-template-columns: 1fr; padding: 14px; } .bc-controls .sel { grid-template-columns: 1fr; } .bc-controls .btn-go, .bc-controls .btn-stop { margin-left: 0; width: 100%; } }

/* hidden 속성 우선 */
[hidden] { display: none !important; }
.st-player .st-top, .st-player .st-title, .st-player .st-bar { z-index: 3; }
.btn-buyout { margin-top: 8px; background: #ff7a1a !important; } .btn-buyout:hover { background: #e86a0e !important; } .btn-buyout[disabled] { opacity: .5; }
.st-product dd.maxp { color: #ffb36b; font-weight: 800; }
.field .help { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.sc-table .btn-go { background: var(--live); } .sc-table .btn-go:hover { background: #c62828; }

/* =====================================================
 *  Header points + Point charge (마이페이지 → 포인트 충전)
 * ===================================================== */
.user-links .pts { display: inline-flex; align-items: center; gap: 5px; background: var(--green-light); color: var(--green-dark); padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 12px; transition: background .2s; }
.user-links .pts:hover { background: #d2ecdc; }
.user-links .pts .p-ico { width: 20px; height: 20px; border-radius: 50%; background: #f5b301; color: #fff; font-weight: 900; font-size: 11px; display: grid; place-items: center; }
.user-links .pts b { font-weight: 800; } .user-links .pts .charge { border-left: 1px solid #bfe3cd; padding-left: 6px; margin-left: 2px; }
@media (max-width: 1100px) { .user-links .pts .charge { display: none; } }
.pc-hero { position: relative; overflow: hidden; border-radius: 16px; min-height: 170px; padding: 30px 34px; color: #0f2a4a; background-size: cover; background-position: center right; display: flex; flex-direction: column; justify-content: center; }
.pc-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236,245,255,.96) 0%, rgba(236,245,255,.75) 40%, rgba(236,245,255,.05) 80%); }
.pc-hero > * { position: relative; } .pc-hero h2 { margin: 0 0 8px; font-size: 32px; font-weight: 900; letter-spacing: -1px; } .pc-hero p { margin: 0; font-size: 14px; line-height: 1.6; color: #243b55; }
.pc-hero .hand { position: absolute; left: 52%; top: 30%; font-size: 15px; font-style: italic; font-weight: 700; color: #1f4f8a; line-height: 1.4; transform: rotate(-6deg); opacity: 0; animation: sf-up .8s .4s forwards; }
.pc-hero .coin { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 50%; background: #f5b301; color: #fff; font-weight: 900; font-size: 30px; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(245,179,1,.4); animation: sf-float 4s ease-in-out infinite; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; margin-top: 18px; align-items: start; }
.pc-step { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; } .pc-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.pc-step b { display: block; font-size: 17px; } .pc-step small { font-size: 12px; color: var(--muted); }
.pc-amounts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px; }
.pc-amounts .amt { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 20px 10px 14px; text-align: center; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-amounts .amt:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15,27,45,.08); }
.pc-amounts .amt.on { border-color: var(--green); background: var(--green-light); }
.pc-amounts input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pc-amounts .chk { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: none; place-items: center; } .pc-amounts .amt.on .chk { display: grid; }
.pc-amounts b { font-size: 20px; font-weight: 900; } .pc-amounts b em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 1px; }
.pc-amounts .bonus { font-size: 14px; font-weight: 800; color: var(--green-dark); } .pc-amounts .rate { font-size: 10px; background: var(--green); color: #fff; padding: 2px 8px; border-radius: 999px; margin-top: 4px; }
.pc-amounts .custom { align-items: stretch; text-align: left; padding: 14px 12px; } .pc-amounts .custom .t { font-size: 13px; font-weight: 800; }
.pc-amounts .custom .inp { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; height: 36px; margin: 6px 0 4px; background: #fff; }
.pc-amounts .custom .inp input { border: 0; outline: none; width: 100%; font-size: 13px; font-family: inherit; text-align: right; } .pc-amounts .custom .inp em { font-style: normal; font-size: 12px; color: #555; }
.pc-amounts .custom small { font-size: 10px; color: var(--muted); }
.pc-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pc-methods .pm { position: relative; display: grid; grid-template-columns: 22px 56px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 16px 20px; cursor: pointer; transition: border-color .2s; }
.pc-methods .pm.on { border-color: var(--green); } .pc-methods .pm.soon { opacity: .6; cursor: not-allowed; }
.pc-methods input { position: absolute; opacity: 0; pointer-events: none; }
.pc-methods .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9d3dd; position: relative; } .pc-methods .pm.on .radio { border-color: var(--green); background: var(--green); } .pc-methods .pm.on .radio::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 900; }
.pc-methods .ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: #e2ebf5; } .pc-methods .ico.easy { background: #1ec800; color: #fff; font-weight: 900; }
.pc-methods b { display: block; font-size: 15px; } .pc-methods b em { font-style: normal; font-size: 10px; background: #fff4e0; color: #b26a00; padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; } .pc-methods small { font-size: 12px; color: var(--muted); }
.pc-methods .logos { display: flex; gap: 6px; } .pc-methods .logos i { font-style: normal; font-size: 10px; font-weight: 800; color: #555; background: var(--bg); padding: 4px 8px; border-radius: 6px; }
.pc-feats { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pc-feats > div { display: flex; align-items: center; gap: 10px; } .pc-feats .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.pc-feats b { display: block; font-size: 13px; } .pc-feats small { font-size: 11px; color: var(--muted); }
.pc-summary { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.pc-summary .h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .pc-summary .h .ico { width: 40px; height: 40px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; } .pc-summary .h b { font-size: 16px; }
.pc-summary .row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13px; } .pc-summary .row span { color: var(--muted); } .pc-summary .row b { font-size: 20px; font-weight: 900; } .pc-summary .row b em { font-style: normal; font-size: 12px; font-weight: 600; }
.pc-summary .row .plus { color: var(--green-dark); } .pc-summary .row.total { border-bottom: 0; padding-top: 14px; } .pc-summary .row.total span { color: var(--text); font-weight: 700; } .pc-summary .row.total b { font-size: 26px; color: var(--green-dark); }
.pc-summary .note { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 11px; color: #555; line-height: 1.6; margin: 10px 0 14px; }
.pc-summary .btn-charge { height: 52px; font-size: 16px; border-radius: 12px; } .pc-summary .lock { display: block; text-align: center; font-size: 11px; color: var(--muted); margin-top: 10px; }
.pc-done { margin-top: 14px; background: var(--green-light); border: 1px solid var(--green-soft, #bfe3cd); border-radius: 12px; padding: 14px; font-size: 12px; }
.pc-done b { display: block; font-size: 14px; color: var(--green-dark); margin-bottom: 6px; } .pc-done p { margin: 0 0 8px; line-height: 1.6; } .pc-done code { display: block; background: #fff; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; user-select: all; } .pc-done small { display: block; margin-top: 6px; color: var(--muted); }
.pc-pending { margin-top: 12px; background: #fff4e0; color: #b26a00; border-radius: 10px; padding: 10px 14px; font-size: 12px; } .pc-pending a { text-decoration: underline; margin-left: 6px; }
.pc-balance { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .pc-balance b { font-size: 20px; font-weight: 900; color: var(--green-dark); }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: 1fr; } .pc-amounts { grid-template-columns: repeat(3, 1fr); } .pc-amounts .custom { grid-column: span 3; } .pc-hero .hand, .pc-hero .coin { display: none; } }
@media (max-width: 720px) { .pc-amounts { grid-template-columns: 1fr 1fr; } .pc-amounts .custom { grid-column: span 2; } .pc-methods .pm { grid-template-columns: 22px 1fr; } .pc-methods .ico, .pc-methods .logos { display: none; } .pc-feats { grid-template-columns: 1fr; } .pc-hero h2 { font-size: 24px; } }

/* =====================================================
 *  통합 관리자 (/admin/)
 * ===================================================== */
body.sf-admin { background: #eef3f8; margin: 0; }
.ad { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; }
.ad-nav { background: #14355d; color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.ad-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.ad-brand .brand-mark { background: #fff; border-radius: 50%; width: 44px; height: 44px; } .ad-brand b { display: block; font-size: 20px; font-weight: 900; } .ad-brand small { font-size: 11px; opacity: .7; }
.ad-nav nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ad-nav nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: #d6e2f0; font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.ad-nav nav a span { flex: 1; } .ad-nav nav a svg { opacity: .85; }
.ad-nav nav a.on { background: #1769d6; color: #fff; } .ad-nav nav a:not(.on):hover { background: rgba(255,255,255,.08); color: #fff; }
.ad-nav .cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.ad-side-promo { margin: auto 12px 14px; border-radius: 12px; min-height: 200px; background-size: cover; background-position: center; position: relative; padding: 16px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.ad-side-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,53,93,.9), rgba(20,53,93,.2) 70%); }
.ad-side-promo > * { position: relative; } .ad-side-promo b { font-size: 16px; font-weight: 900; line-height: 1.35; } .ad-side-promo small { margin-top: 6px; font-size: 11px; opacity: .9; line-height: 1.5; }
.ad-body { min-width: 0; }
.ad-top { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.ad-top .l { display: flex; align-items: center; gap: 16px; } .ad-top .l > b { font-size: 15px; color: #14355d; } .ad-top .hi strong { display: block; font-size: 13px; } .ad-top .hi small { font-size: 11px; color: var(--muted); }
.ad-burger { display: none; border: 0; background: transparent; font-size: 20px; }
.ad-top .r { display: flex; align-items: center; gap: 16px; font-size: 13px; } .ad-top .date { color: var(--muted); }
.ad-top .bell { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #333; } .ad-top .bell:hover { background: var(--bg); }
.ad-top .bell i { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-style: normal; font-weight: 800; display: grid; place-items: center; }
.ad-top .who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .ad-top .av { width: 30px; height: 30px; border-radius: 50%; background: #1769d6; color: #fff; display: grid; place-items: center; }
.ad-top .out { color: var(--muted); }
.ad-main { padding: 20px 24px 60px; max-width: 1700px; }
.ad-main h2 { margin: 0; font-size: 18px; font-weight: 900; } .ad-main h2 small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; } .ad-main h3 { margin: 0; font-size: 15px; font-weight: 800; }
.ad-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.ad-card .section-head { margin-bottom: 12px; } .ad-card > h2 { margin-bottom: 14px; }
.ad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ad-col > * + * { margin-top: 16px; } .ad-side { display: flex; flex-direction: column; gap: 16px; }
.ad-hero { position: relative; overflow: hidden; border-radius: 16px; min-height: 160px; padding: 24px 28px; color: #fff; background-size: cover; background-position: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.ad-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,50,90,.92), rgba(14,50,90,.6) 50%, rgba(14,50,90,.3)); }
.ad-hero > * { position: relative; } .ad-hero h2 { color: #fff; font-size: 24px; margin-bottom: 8px; } .ad-hero p { margin: 0; font-size: 13px; line-height: 1.6; opacity: .95; }
.ad-hero .quick { display: grid; grid-template-columns: repeat(5, 104px); gap: 10px; }
.ad-hero .quick a { background: rgba(255,255,255,.95); color: #1c1c1c; border-radius: 12px; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .25s; }
.ad-hero .quick a:hover { transform: translateY(-4px); } .ad-hero .quick .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; } .ad-hero .quick .ico.g { background: var(--green-light); color: var(--green-dark); } .ad-hero .quick .ico.b { background: #e2ebf5; color: #1769d6; } .ad-hero .quick .ico.r { background: #fbefea; color: #b9472c; }
.ad-hero .quick b { font-size: 13px; } .ad-hero .quick small { font-size: 10px; color: var(--muted); }
.ad-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ad-stats > div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.ad-stats .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; }
.ad-stats small { display: block; font-size: 12px; color: var(--muted); } .ad-stats b { display: block; font-size: 22px; font-weight: 900; line-height: 1.2; } .ad-stats b em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 2px; }
.ad-stats .d { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; } .ad-stats .d.up { color: var(--green-dark); font-weight: 700; } .ad-stats .d.down { color: var(--live); } .ad-stats .d.warn { color: #b26a00; font-weight: 700; }
.ad-row2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; } .ad-row2.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ad-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ad-card .seg { display: flex; background: var(--bg); border-radius: 999px; padding: 3px; font-size: 11px; } .ad-card .seg span { padding: 4px 10px; border-radius: 999px; color: var(--muted); } .ad-card .seg span.on { background: #1769d6; color: #fff; font-weight: 700; }
.ad-card .chart svg { width: 100%; height: 190px; display: block; } .ad-card .chart .line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: sf-draw 1.8s ease-out forwards; }
.ad-card .chart .x { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding: 0 6px; }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; } .donut { width: 150px; height: 150px; }
.donut-wrap ul { list-style: none; margin: 0; padding: 0; font-size: 13px; } .donut-wrap li { display: flex; align-items: center; gap: 8px; padding: 6px 0; } .donut-wrap li i { width: 10px; height: 10px; border-radius: 50%; } .donut-wrap li b { margin-left: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-table th { background: #f3f6fa; color: var(--muted); font-weight: 600; padding: 9px 10px; text-align: left; white-space: nowrap; }
.ad-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .ad-table tr:last-child td { border-bottom: 0; }
.ad-table .no { font-size: 12px; color: var(--muted); white-space: nowrap; } .ad-table .pn { display: flex; align-items: center; gap: 10px; } .ad-table .pn img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #cfd8dc; flex-shrink: 0; }
.ad-table .pn b { display: block; } .ad-table .pn small { display: block; color: var(--muted); font-size: 11px; }
.ad-table .acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; } .ad-table .acts .btn { padding: 5px 10px; font-size: 12px; }
.ad-table .inline { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; } .ad-table .inline select, .ad-table .inline input { height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: 12px; font-family: inherit; } .ad-table .inline input[type=text] { width: 120px; }
.ad-table .rk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #9aa; color: #fff; font-size: 11px; font-weight: 800; } .ad-table .r1 { background: #f5b301; } .ad-table .r2 { background: #9e9e9e; } .ad-table .r3 { background: #cd7f32; }
.ad-table .g, .g { color: var(--green-dark); } .ad-table .bad, .bad { color: #b3261e; } .ad-table small.bad { display: block; font-size: 11px; }
details.pt summary { list-style: none; display: inline-flex; cursor: pointer; } details.pt summary::-webkit-details-marker { display: none; } details.pt[open] { display: block; width: 100%; margin-top: 6px; } details.pt form { margin-top: 6px; }
.ad-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ad-filter select, .ad-filter input { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 13px; font-family: inherit; } .ad-filter input[type=search] { width: 200px; }
.ad-list { list-style: none; margin: 0; padding: 0; } .ad-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .ad-list li:last-child { border: 0; }
.ad-list a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-list time { font-size: 11px; color: var(--muted); }
.ad-list.dot li { grid-template-columns: 1fr auto; } 
.tg { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: #555; } .tg.notice { background: #e2ebf5; color: #1769d6; } .tg.event { background: #fff4e0; color: #b26a00; }
.ad-sys { list-style: none; margin: 0; padding: 0; } .ad-sys li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .ad-sys li:last-child { border: 0; } .ad-sys b.ok { color: var(--green-dark); } .ad-sys b.bad { color: #b26a00; } .ad-sys small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }
.muted { font-size: 12px; color: var(--muted); } .ad-card > .muted { margin: 0 0 10px; }
.ad-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ad-quick a { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 4px; text-align: center; font-size: 11px; font-weight: 700; color: #333; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .25s, border-color .25s; }
.ad-quick a:hover { transform: translateY(-3px); border-color: #1769d6; } .ad-quick a span { width: 36px; height: 36px; border-radius: 50%; background: #e2ebf5; color: #1769d6; display: grid; place-items: center; }
.ad-quick a i { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-style: normal; display: grid; place-items: center; padding: 0 4px; }
.ad-log { list-style: none; margin: 0; padding: 0; } .ad-log li { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; } .ad-log li:last-child { border: 0; }
.ad-log .av { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; color: #555; } .ad-log time { color: var(--muted); font-size: 11px; } .ad-log em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--green-light); color: var(--green-dark); padding: 2px 7px; border-radius: 999px; }
.ad-cs { display: flex; gap: 14px; align-items: center; } .ad-cs .ico { width: 48px; height: 48px; border-radius: 50%; background: #e2ebf5; color: #1769d6; display: grid; place-items: center; flex-shrink: 0; } .ad-cs b { display: block; font-size: 15px; } .ad-cs small { display: block; font-size: 11px; color: var(--muted); margin: 2px 0 8px; } .ad-cs .btn { background: #1769d6; }
.ad-form .field select, .ad-form .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; } .ad-form .field select { height: 44px; }
.ad-inq { border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; margin-bottom: 10px; } .ad-inq summary { list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 14px 0; cursor: pointer; } .ad-inq summary::-webkit-details-marker { display: none; }
.ad-inq summary b { display: block; font-size: 14px; } .ad-inq summary small { display: block; font-size: 11px; color: var(--muted); } .ad-inq summary time { font-size: 11px; color: var(--muted); }
.ad-inq .body { border-top: 1px solid var(--line); padding: 14px 0 16px; font-size: 13px; line-height: 1.6; } .ad-inq textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-family: inherit; font-size: 13px; margin-bottom: 8px; }
.ad-inq .reply { background: var(--green-light); border-radius: 8px; padding: 10px 12px; } .ad-inq .reply b { color: var(--green-dark); }
.user-links .adm { background: #14355d; color: #fff !important; padding: 6px 12px; border-radius: 999px; font-size: 12px; } .user-links .adm:hover { background: #1769d6; }
.chip.publish, .chip.open { background: var(--green-light); color: var(--green-dark); } .chip.draft { background: #fdecec; color: #b3261e; } .chip.done { background: var(--bg); color: var(--muted); }
@media (max-width: 1400px) { .ad-grid { grid-template-columns: 1fr; } .ad-side { display: grid; grid-template-columns: 1fr 1fr; } .ad-hero { grid-template-columns: 1fr; } .ad-hero .quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .ad { grid-template-columns: 1fr; } .ad-nav { position: fixed; left: -260px; width: 240px; z-index: 60; transition: left .3s; } .ad-nav.open { left: 0; } .ad-burger { display: block; } .ad-top .hi, .ad-top .date { display: none; } .ad-main { padding: 14px; } .ad-stats, .ad-row2, .ad-row2.wide, .ad-row3 { grid-template-columns: 1fr; } .ad-side { grid-template-columns: 1fr; } .donut-wrap { grid-template-columns: 1fr; justify-items: center; } .ad-table { display: block; overflow-x: auto; } }
/* 기호 → 아이콘 치환용 */
.stars { display: inline-flex; gap: 1px; color: #ddd; vertical-align: middle; } .stars i { display: inline-flex; } .stars i.on { color: #f5a623; } .stars + .score { color: #f5a623; font-weight: 700; font-size: 12px; margin-left: 4px; }
.rate svg, .rating svg { color: #f5a623; vertical-align: -2px; }
.crumb .sep { display: inline-flex; color: #bbb; } .pd-gallery .more-arrow { display: flex; justify-content: center; }
.btn svg, .btn-go svg, .btn-live svg { vertical-align: -2px; } .btn-go svg, .btn-live svg { color: #fff; animation: sf-blink 1.2s infinite; }
.ad-list.dot a::before { content: ""; display: inline-block; width: 6px; height: 6px; border: 1.5px solid #1769d6; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.ad-sys b svg { vertical-align: -1px; } .sc-event .e2 i { color: #1e8a4c; opacity: .85; }
.section-head .more svg, .ad-card .more svg { vertical-align: -2px; }
.rv .stars { display: flex; margin-bottom: 2px; } .rv .score { margin-right: 6px; }

/* ---------- 주문서 / 완료 / 검색 / 404 / 품절 ---------- */
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.co-main > .my-card + .my-card { margin-top: 16px; } .co-main h2 { margin: 0 0 14px; font-size: 18px; font-weight: 900; }
.co-item { display: grid; grid-template-columns: 72px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.co-item img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: #cfd8dc; } .co-item .i b { display: block; } .co-item .i small { color: var(--muted); font-size: 12px; } .co-item .q { color: var(--muted); font-size: 13px; } .co-item .s { font-weight: 900; color: var(--green-dark); }
.co-side { position: sticky; top: 80px; } .co-form .field select { height: 44px; } .stock-warn { display: block; font-size: 12px; color: var(--live); margin: -8px 0 12px; }
.pc-summary .row b.minus { color: var(--live); }
.oc { padding: 40px 20px 60px; } .oc-box { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 40px 36px; text-align: center; }
.oc-box .ico { display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); margin-bottom: 14px; } .oc-box .ico.warn { background: #fdecec; color: #b3261e; }
.oc-box h1 { margin: 0 0 8px; font-size: 26px; font-weight: 900; } .oc-box > p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 22px; }
.oc-box .my-table { text-align: left; margin-bottom: 14px; } .oc-sum { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 10px 0; } .oc-sum b { font-size: 28px; font-weight: 900; color: var(--green-dark); } .oc-sum small { color: var(--muted); }
.oc-addr { background: var(--bg); border-radius: 10px; padding: 12px 16px; font-size: 13px; text-align: left; line-height: 1.6; } .oc-acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.oc-box .search.big { width: 100%; max-width: 420px; margin: 0 auto 10px; display: flex; }
.dt-card.sold .thumb img { filter: grayscale(.8) brightness(.8); } .dt-card .soldout { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 18px; background: rgba(0,0,0,.35); letter-spacing: 2px; }
.addr-need { border: 2px solid #f5b301; background: #fffbea; margin-bottom: 16px; } .addr-need h3 { color: #b26a00; margin-bottom: 4px; } .addr-need .sub { margin: 0 0 12px; font-size: 13px; color: #555; }
@media (max-width: 1024px) { .co-grid { grid-template-columns: 1fr; } .co-side { position: static; } .co-item { grid-template-columns: 60px 1fr; } .co-item .q, .co-item .s { grid-column: 2; } }

/* ---------- 구매 후기 ---------- */
.rv.real .av { width: 64px; height: 64px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.rv.real img { cursor: zoom-in; } .rv .prod { display: block; color: var(--green-dark); font-size: 11px; margin-top: 2px; }
.rv .reply { margin-top: 10px; background: var(--bg); border-radius: 8px; padding: 10px 12px; } .rv .reply b { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--green-dark); } .rv .reply p { margin: 4px 0 2px; font-size: 13px; } .rv .reply small { font-size: 11px; color: var(--muted); }
.rv .reply-form { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; } .rv .reply-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.rv-wrap { position: relative; } .rv-wrap .del { position: absolute; top: 12px; right: 14px; font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; } .rv-wrap .del:hover { color: var(--live); }
.rv-summary { display: grid; grid-template-columns: 160px 1fr 200px; gap: 24px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 16px 0 14px; }
.rv-summary .avg { text-align: center; } .rv-summary .avg b { display: block; font-size: 40px; font-weight: 900; line-height: 1; margin-bottom: 6px; } .rv-summary .avg .stars { justify-content: center; } .rv-summary .avg small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.rv-summary .dist { list-style: none; margin: 0; padding: 0; } .rv-summary .dist li { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; font-size: 12px; padding: 2px 0; }
.rv-summary .dist i { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; display: block; } .rv-summary .dist em { display: block; height: 100%; background: #f5a623; border-radius: 4px; } .rv-summary .dist small { color: var(--muted); text-align: right; }
.rv-summary .write { text-align: center; } .rv-summary .write small { display: block; font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.rv-write { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 0 16px; } .rv-write summary { list-style: none; display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; cursor: pointer; } .rv-write summary::-webkit-details-marker { display: none; }
.rv-write summary img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #cfd8dc; } .rv-write summary b { display: block; font-size: 14px; } .rv-write summary small { font-size: 12px; color: var(--muted); }
.rv-write[open] summary .btn { display: none; } .rv-form { border-top: 1px solid var(--line); padding: 14px 0 16px; }
.star-input { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; } .star-input label { cursor: pointer; color: #ddd; transition: transform .15s, color .15s; } .star-input label.on { color: #f5a623; } .star-input label:hover { transform: scale(1.15); } .star-input input { display: none; } .star-input .lbl { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--green-dark); }
.rv-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical; } .rv-form textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(30,138,76,.12); }
.rv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; flex-wrap: wrap; } .rv-foot .photo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; cursor: pointer; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; } .rv-foot .photo input { display: none; } .rv-foot .photo span { color: var(--green-dark); }
.rv-avg { display: flex; align-items: center; gap: 6px; font-size: 13px; } .rv-avg b { font-size: 16px; } .rv-avg small { color: var(--muted); }
@media (max-width: 860px) { .rv-summary { grid-template-columns: 1fr; gap: 14px; } .rv .reply-form { grid-template-columns: 1fr; } }


/* ===== 1.2.0: 실시간 경매 실데이터 연동 ===== */
.st-empty { background: #16233a; border-radius: 16px; padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.st-empty .pill { background: rgba(255,255,255,.1); color: #c7d0dc; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 7px; }
.st-empty b { font-size: 20px; font-weight: 800; }
.st-empty p { color: #9aa7b8; font-size: 14px; max-width: 560px; margin: 0; line-height: 1.6; }
.st-empty .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.st-empty .btn-outline { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.st-none { color: #9aa7b8; font-size: 14px; text-align: center; padding: 40px 0; background: #16233a; border-radius: 12px; }
.st-list-head h2 .cnt { font-size: 12px; color: #9aa7b8; font-weight: 600; }
.st-filters .more.on { color: #fff; }
.badge-wait { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: #37474f; color: #fff; }
.st-card.on { outline: 2px solid var(--green); outline-offset: 2px; }
.st-card .left.wait { color: #607d8b; }
.st-card .btn-outline { background: transparent; color: #37474f; border: 1px solid #cfd8dc; }
.st-bids .sh .muted { color: #9aa7b8; font-size: 11px; }
.st-bids li.new { animation: sf-bid-in .5s ease-out; }
@keyframes sf-bid-in { from { background: rgba(127,227,163,.35); transform: translateY(-4px); } to { background: rgba(255,255,255,.06); transform: none; } }
.st-chat li .av { font-size: 12px; font-weight: 800; }
.st-chat li { animation: sf-fade .35s ease-out; }
@keyframes sf-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 메인 라이브 패널: 실제 영상 + 입찰 */
.player .poster { position: absolute; inset: 0; transition: opacity .6s; z-index: 1; }
.player video { position: absolute; inset: 0; background: #000; }
.player .st-wait.mini { z-index: 2; background: rgba(5,12,24,.45); }
.player .st-wait.mini .pill { background: rgba(255,255,255,.14); }
.player-ctl { z-index: 3; }
.player-ctl button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; cursor: pointer; }
.player-ctl button.on { background: var(--green); }
.player-go { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; transition: background .2s; }
.player-go:hover { background: var(--green); }
.bid-card .input { padding: 0 4px; gap: 2px; }
.bid-card .input button { width: 24px; height: 24px; border: 0; border-radius: 5px; background: #eef2f6; color: #333; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.bid-card .input button:hover { background: #dfe6ec; }
.bid-card .timer [data-winner] { color: #fff; font-weight: 700; }
.bid-card .btn:disabled { opacity: .6; cursor: not-allowed; }
.live-thumbs a.on .t { outline: 2px solid var(--green); outline-offset: 2px; }
.ad-demo { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.ad-demo .chk { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ad-demo .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ad-demo .danger { color: var(--live); border-color: var(--live); }
.chip.demo { background: #eceff1; color: #546e7a; font-size: 10px; padding: 2px 6px; margin-left: 4px; vertical-align: middle; }
.st-player video, .player video { opacity: 0; transition: opacity .6s; }
.st-player video.on, .player video.on { opacity: 1; }


/* ===== 1.3.0 ===== */
/* 경매 안내 탭 */
.st-info { padding: 14px 14px 16px; font-size: 13px; }
.st-info h4 { margin: 16px 0 8px; font-size: 12px; color: #9aa7b8; font-weight: 700; letter-spacing: .02em; }
.si-product { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; background: #16233a; border-radius: 12px; padding: 10px; color: #fff; transition: background .2s; }
.si-product:hover { background: #1c2c47; }
.si-product img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.si-product b { display: block; font-size: 14px; } .si-product small { display: block; color: #9aa7b8; margin: 2px 0 4px; } .si-product span { color: #7fe3a3; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.si-terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.si-terms > div { background: #16233a; border-radius: 10px; padding: 10px 12px; }
.si-terms small { display: block; color: #9aa7b8; font-size: 11px; } .si-terms b { font-size: 14px; }
.si-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
.si-steps li { display: flex; gap: 12px; align-items: center; background: #16233a; border-radius: 10px; padding: 9px 12px; }
.si-steps .ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(127,227,163,.14); color: #7fe3a3; display: grid; place-items: center; flex-shrink: 0; }
.si-steps b { display: inline-block; font-size: 13px; min-width: 64px; } .si-steps small { color: #9aa7b8; font-size: 11px; }
.si-steps li > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.si-notes { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.si-notes li { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #c7d0dc; background: rgba(255,255,255,.06); border-radius: 999px; padding: 5px 10px; }
.si-more { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: #9aa7b8; } .si-more:hover { color: #fff; }

/* 공용 모달 */
.sf-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(10,18,30,.55); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s; padding: 16px; }
.sf-modal.show { opacity: 1; pointer-events: auto; }
.sf-modal-box { position: relative; width: 100%; max-width: 400px; background: #fff; border-radius: 18px; padding: 30px 26px 24px; text-align: center; transform: translateY(14px) scale(.97); transition: transform .3s cubic-bezier(.22,.61,.36,1); box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.sf-modal.show .sf-modal-box { transform: none; }
.sf-modal-box .x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: #999; cursor: pointer; }
.sf-modal-box .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; margin: 0 auto 12px; }
.sf-modal-box h3 { margin: 0 0 8px; font-size: 19px; }
.sf-modal-box .b { font-size: 13px; color: #555; line-height: 1.7; }
.sf-modal-box .acts { display: grid; gap: 8px; margin-top: 18px; }

/* 헤더 검색 드롭다운 */
.search-wrap { margin-left: auto; position: relative; }
.search-wrap .search { margin-left: 0; transition: box-shadow .2s, border-color .2s; }
.search-wrap:focus-within .search { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,138,76,.12); }
.search-drop { position: absolute; top: calc(100% + 8px); right: 0; width: 520px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,27,45,.16); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; z-index: 300; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .22s cubic-bezier(.22,.61,.36,1); }
.search-drop.show { opacity: 1; transform: none; }
.search-drop .sd-col.recent { border-left: 1px solid var(--line); padding-left: 16px; }
.sd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.sd-head b { display: inline-flex; align-items: center; gap: 4px; color: var(--green-dark); } .sd-head small { font-size: 10px; color: var(--muted); }
.sd-head button { border: 0; background: transparent; font-size: 11px; color: var(--muted); cursor: pointer; }
.sd-rank { list-style: none; margin: 0; padding: 0; }
.sd-rank li { opacity: 0; transform: translateX(-6px); animation: sf-sd-in .35s ease-out forwards; animation-delay: var(--d, 0ms); }
@keyframes sf-sd-in { to { opacity: 1; transform: none; } }
.sd-rank a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; font-size: 13px; color: var(--text); transition: background .15s; }
.sd-rank a:hover { background: var(--bg); }
.sd-rank .n { font-weight: 900; color: var(--muted); font-size: 12px; text-align: center; } .sd-rank .n.top { color: var(--green); }
.sd-rank .tr { font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; } .sd-rank .tr.up { color: var(--live); } .sd-rank .tr.down { color: #1769d6; } .sd-rank .tr.same { color: #bbb; } .sd-rank .tr.new { color: var(--green); }
.sd-recent { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow: auto; }
.sd-recent li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 5px 6px; border-radius: 8px; } .sd-recent li:hover { background: var(--bg); }
.sd-recent a { color: var(--text); } .sd-recent button { border: 0; background: transparent; color: #bbb; cursor: pointer; }
.sd-recent .empty, .sd-rank .empty { font-size: 12px; color: var(--muted); padding: 8px 6px; opacity: 1; transform: none; animation: none; }
.sd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sd-tags a { font-size: 11px; color: var(--green-dark); background: var(--green-light); padding: 4px 9px; border-radius: 999px; }
@media (max-width: 760px) { .search-drop { width: calc(100vw - 32px); grid-template-columns: 1fr; right: -40px; } .search-drop .sd-col.recent { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } }

/* 장바구니 쿠폰 */
.cart-bottom .coupon { display: block; }
.cart-bottom .coupon .c-head { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; }
.cart-bottom .coupon .more { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.cart-bottom .coupon .c-sel { display: block; margin-top: 14px; font-size: 12px; color: var(--muted); }
.cart-bottom .coupon .c-sel select { display: block; width: 100%; margin-top: 4px; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 13px; background: #fff; }
.cart-bottom .coupon .c-msg { display: block; font-size: 12px; color: var(--green-dark); min-height: 16px; margin-top: 6px; }
.c-code { display: flex; gap: 6px; margin-top: 8px; }
.c-code input { flex: 1; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 13px; }
.cart-bottom .row.disc b { color: var(--live); }
.co-side .row.coupon-row select { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 12px; max-width: 60%; background: #fff; }
.co-side .row.eta b { color: var(--green-dark); font-size: 13px; }
#co-submit.short { background: var(--live); }

/* 마이페이지 쿠폰함 / 배송조회 */
.coupon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.cp { display: grid; grid-template-columns: 110px 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.cp .v { background: var(--green); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; position: relative; }
.cp .v::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translateY(-50%); border: 1px solid var(--line); }
.cp .v b { font-size: 22px; font-weight: 900; } .cp .v small { font-size: 11px; opacity: .85; }
.cp .i { padding: 14px 16px 14px 20px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.cp .i b { font-size: 14px; } .cp .i small { color: var(--muted); } .cp .i .btn, .cp .i .chip { align-self: flex-start; margin-top: 6px; }
.cp.dead { opacity: .55; } .cp.dead .v { background: #90a4ae; }
.cp.get .v { background: var(--navy); }
.my-table td.track small { display: block; color: var(--muted); font-size: 11px; } .my-table td.track b { display: block; font-size: 12px; margin-bottom: 4px; }
.my-table .steps { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } .my-table .steps i { width: 7px; height: 7px; border-radius: 50%; background: #dfe6ec; } .my-table .steps i.on { background: var(--green); }
.my-table td.acts { white-space: nowrap; } .my-table td.acts .btn { margin: 2px 0; }
@media (max-width: 760px) { .coupon-grid { grid-template-columns: 1fr; } }

/* 메인 팝업 */
.sf-popups { position: fixed; inset: 0; z-index: 1100; display: none; align-items: flex-start; justify-content: center; gap: 22px; padding: 120px 24px 24px; background: rgba(8,14,24,.35); overflow: auto; }
.sf-popups.on { display: flex; }
.sf-pop { position: relative; width: 330px; max-width: 100%; background: #fff; border-radius: 18px; padding: 24px 22px 14px; box-shadow: 0 30px 70px rgba(0,0,0,.35); opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.22,.61,.36,1); flex-shrink: 0; }
.sf-pop.in { opacity: 1; transform: none; } .sf-pop.out { opacity: 0; transform: translateY(12px) scale(.97); }
.sf-pop.pos-left { align-self: flex-start; margin-top: 40px; } .sf-pop.pos-center { align-self: flex-start; } .sf-pop.pos-right { align-self: flex-start; margin-top: 70px; }
.sf-pop .x { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: #999; cursor: pointer; z-index: 2; }
.sf-pop .pop-img { margin: -24px -22px 14px; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16/9; background: var(--green-light); }
.sf-pop .pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-pop .pop-badge { display: inline-block; background: var(--green); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.sf-pop.theme-navy .pop-badge { background: var(--navy); } .sf-pop.theme-orange .pop-badge { background: #ff8a00; }
.sf-pop h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.sf-pop h3 + p, .sf-pop p { margin: 0 0 12px; font-size: 13px; color: #555; line-height: 1.6; }
.pop-feats { list-style: none; margin: 0 0 14px; padding: 12px; background: var(--bg); border-radius: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pop-feats li { font-size: 11px; text-align: center; color: #333; line-height: 1.4; }
.pop-feats .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); margin: 0 auto 4px; }
.pop-feats li:only-child { grid-column: span 3; }
.pop-ticket { display: grid; grid-template-columns: 1fr 60px; background: linear-gradient(135deg, #e8f6ec, #d3ecda); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.pop-ticket .l { padding: 14px 16px; } .pop-ticket .l b { display: block; font-size: 24px; font-weight: 900; color: var(--green-dark); } .pop-ticket .l small { display: block; font-size: 12px; color: #333; } .pop-ticket .l em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pop-ticket .r { background: var(--green); color: #fff; display: grid; place-items: center; }
.sf-pop .btn-navy { background: var(--navy); }
.pop-live { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; background: var(--bg); border-radius: 12px; padding: 10px; margin-bottom: 12px; color: var(--text); }
.pop-live img { width: 96px; height: 80px; object-fit: cover; border-radius: 8px; }
.pop-live .tag { font-size: 10px; background: #1769d6; color: #fff; padding: 2px 7px; border-radius: 999px; } .pop-live b { display: block; font-size: 14px; margin: 3px 0 1px; } .pop-live small { display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; }
.pop-live em { display: block; font-style: normal; font-size: 16px; font-weight: 900; color: var(--live); margin-top: 2px; } .pop-live .v { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); background: #fff; padding: 2px 7px; border-radius: 999px; margin-top: 3px; }
.pop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pop-foot label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .pop-foot button { border: 0; background: transparent; color: var(--text); font-weight: 700; cursor: pointer; font-size: 12px; }
@media (max-width: 1100px) { .sf-popups { flex-direction: column; align-items: center; padding-top: 80px; } .sf-pop.pos-left, .sf-pop.pos-right { margin-top: 0; } }

/* 관리자: 팝업 */
.pop-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 6px; display: block; } .pop-thumb.none { display: grid; place-items: center; background: var(--bg); color: var(--muted); }
.sc-ship-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.sc-ship-preview > div { background: var(--bg); border-radius: 10px; padding: 12px 14px; } .sc-ship-preview small { display: block; font-size: 11px; color: var(--muted); } .sc-ship-preview b { font-size: 14px; }
.cart-item .info small.ship { display: block; color: var(--green-dark); font-size: 11px; margin-top: 2px; }
.cart-notice .eta-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.co-item .i small.eta { display: block; color: var(--green-dark); margin-top: 2px; } .co-item .i small.eta b { font-weight: 800; }
.co-ship { display: grid; gap: 6px; margin: 4px 0 10px; } .co-ship > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; background: var(--bg); border-radius: 8px; padding: 8px 10px; flex-wrap: wrap; } .co-ship span { color: var(--muted); } .co-ship small { width: 100%; color: var(--green-dark); font-size: 11px; }


/* =====================================================
 *  모바일 앱 레이아웃 (720px 이하)
 * ===================================================== */
.m-tabbar, .m-actions, .app-banner-m { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.sf-wide { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sf-toast { bottom: 84px; }
  .sf-popups { padding-bottom: 90px; }

  /* 하단 탭바 */
  .m-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: 62px; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); z-index: 900; box-shadow: 0 -6px 20px rgba(15,27,45,.06); }
  .m-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; color: #8a94a6; }
  .m-tabbar a.on { color: var(--green); } .m-tabbar a.on .i::after { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 3px; border-radius: 3px; background: var(--green); transform: translateX(-50%); }
  .m-tabbar .i { position: relative; display: grid; place-items: center; }
  .m-tabbar em, .m-btn em { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 9px; font-weight: 800; font-style: normal; display: grid; place-items: center; }

  /* 헤더: 로고 / 검색 / 장바구니 / 메뉴 */
  .header-inner { height: 56px; gap: 8px; }
  .brand-tag, .brand-sep { display: none; }
  .brand-word { height: 25px; } .brand-mark { width: 34px; height: 34px; } .brand-mark svg { width: 34px; height: 34px; }
  .gnb, .user-links { display: none; }
  .m-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .m-btn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: #1f2b3a; border-radius: 10px; }
  .m-btn:active { background: var(--bg); }
  .menu-toggle { margin-left: 0; display: grid; }
  .search-wrap { display: none; margin: 0; }
  .search-wrap.open { display: block; position: absolute; left: 0; right: 0; top: 56px; padding: 10px 16px 12px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(15,27,45,.12); z-index: 250; }
  .search-wrap.open .search { display: flex; width: 100%; }
  .search-drop { position: static; width: 100%; margin-top: 10px; box-shadow: none; border: 0; padding: 0; grid-template-columns: 1fr; transform: none; }
  .search-drop .sd-col.recent { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .gnb.open { top: 56px; z-index: 240; }

  /* 히어로: 왼쪽 문구 + 오른쪽 라이브 카드, 아래 썸네일 4개 */
  .hero-inner { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto auto auto; gap: 10px 10px; padding: 20px 16px 18px; align-items: start; }
  .hero-copy { order: 0; grid-column: 1; grid-row: 1 / 3; }
  .hero-copy .eyebrow { font-size: 11px; margin: 0 0 8px; line-height: 1.5; }
  .hero-copy h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.5px; }
  .hero-feats { gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
  .hero-feats li { font-size: 9px; gap: 5px; } .hero-feats .ico { width: 26px; height: 26px; }
  .hero-feats .ico svg { width: 13px; height: 13px; }
  .hero-copy .btn-pill { font-size: 12px; padding: 10px 14px; height: auto; }
  .live-panel { display: contents; animation: none; opacity: 1; }
  .live-top { grid-column: 2; grid-row: 1; margin: 0; font-size: 10px; gap: 6px; background: rgba(5,12,24,.55); border-radius: 10px 10px 0 0; padding: 7px 9px 4px; }
  .live-top .badge-live { font-size: 9px; padding: 3px 7px; } .live-top h3 { display: none; }
  .live-grid { grid-column: 2; grid-row: 2; display: block; background: var(--navy); border-radius: 0 0 12px 12px; padding: 8px; }
  .live-grid .player { display: none; }
  .bid-card { padding: 0; background: transparent; position: relative; }
  .bid-card .thumb { margin-bottom: 6px; border-radius: 8px; }
  .bid-card .timer:first-of-type { position: absolute; top: 6px; right: 6px; background: rgba(229,57,53,.92); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 800; }
  .bid-card .timer:first-of-type .label { display: none; } .bid-card .timer:first-of-type b { color: #fff; }
  .bid-card .start { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bid-card .name { font-size: 12px; margin-bottom: 2px; } .bid-card .label { font-size: 10px; } .bid-card .price { font-size: 18px; } .bid-card .start { font-size: 10px; }
  .bid-card hr { margin: 6px 0; } .bid-card .timer { font-size: 10px; }
  .bid-card .input { height: 28px; margin: 4px 0; } .bid-card .input input { font-size: 12px; } .bid-card .btn { height: 34px; font-size: 13px; margin-top: 2px; }
  .live-thumbs { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
  .live-thumbs .n { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-thumbs .p { font-size: 11px; } .live-thumbs .p i { font-size: 9px; }
  .live-thumbs a:hover { transform: none; }

  /* 카테고리: 3개 + 아래 큰 배너 */
  .section { padding: 22px 0; } .section-head h2 { font-size: 18px; }
  .carousel .cat-row { --per: 3 !important; gap: 8px; }
  .cat-row .app-banner { display: none; }
  .cat-card { padding: 8px 8px 10px; } .cat-card img { aspect-ratio: 4/3; } .cat-card b { font-size: 13px; } .cat-card .d { font-size: 10px; }
  .app-banner-m { display: block; position: relative; margin-top: 14px; border-radius: 14px; overflow: hidden; padding: 18px 16px; color: #fff; background-size: cover; background-position: center; min-height: 150px; }
  .app-banner-m::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,70,40,.92) 0%, rgba(14,70,40,.55) 60%, rgba(14,70,40,.2) 100%); }
  .app-banner-m > * { position: relative; }
  .app-banner-m .badge-live { position: absolute; right: 0; top: 0; }
  .app-banner-m b { display: block; font-size: 17px; font-weight: 900; line-height: 1.35; margin-bottom: 6px; }
  .app-banner-m p { margin: 0 0 12px; font-size: 11px; opacity: .9; line-height: 1.5; }
  .app-banner-m .btn { font-size: 12px; }
  .prod-grid { --gap: 10px; } .prod-card .name { font-size: 13px; } .prod-card .price { font-size: 14px; }
  .auc-item { gap: 10px; } .auc-item .n { font-size: 13px; }

  /* 실시간 경매 스튜디오 */
  .studio { padding: 10px 0 24px; } .studio-wrap { padding: 0 12px; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-player { min-height: 0; aspect-ratio: 16/10; }
  .st-title b { font-size: 22px; } .st-title { bottom: 56px; }
  .st-chat ul { max-height: 240px; }
  .st-list-head h2 { font-size: 16px; } .st-filters { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .carousel .st-cards { --per: 2.2 !important; }
  .st-band .items { grid-template-columns: 1fr 1fr; } .st-band .cta { flex-direction: column; text-align: center; }
  .st-empty { padding: 36px 16px; } .st-empty b { font-size: 17px; }

  /* 상품 상세 / 장바구니 / 주문서 */
  .pd-buy { position: sticky; bottom: 64px; z-index: 5; }
  .cart-hero { min-height: 120px; } .cart-hero h1 { font-size: 24px; } .cart-hero p { font-size: 12px; }
  .cart-top { flex-wrap: wrap; gap: 8px; }
  .co-grid { gap: 12px; } .co-form .grid2 { grid-template-columns: 1fr; }

  /* 구매자센터 / 판매자센터 */
  .my-grid { gap: 12px; } .my-side > div:first-child { display: none; }
  .my-nav { margin: 0; padding: 6px; gap: 4px; } .my-nav a { padding: 9px 12px; font-size: 13px; }
  .sc-wrap { padding: 10px; } .sc-nav nav a { padding: 9px 12px; font-size: 13px; }
  .sc-form .grid3, .sc-form .grid2 { grid-template-columns: 1fr; }
  .sc-ship-preview { grid-template-columns: 1fr; }
  .coupon-grid { grid-template-columns: 1fr; }

  /* 고객센터 / 검색 */
  .cs-quick { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .hero-copy h1 { font-size: 19px; } .hero-feats li span:last-child { display: none; }
  .bid-card .price { font-size: 16px; }
}

/* 후기: 작은 사진 썸네일 + 포토 후기 스트립 */
.rv .rv-body { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.rv .rv-body p { margin: 0; flex: 1; }
.rv .rv-thumb { flex: 0 0 72px; } .rv .rv-thumb img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; cursor: zoom-in; transition: transform .2s; } .rv .rv-thumb:hover img { transform: scale(1.04); }
.rv .tag-photo { display: inline-flex; align-items: center; gap: 3px; background: var(--green-light); color: var(--green-dark); border-radius: 999px; padding: 1px 7px; font-size: 10px; margin-left: 6px; }
.rv-photos { margin: 14px 0; padding: 12px 14px; background: var(--bg); border-radius: 12px; }
.rv-photos > b { display: flex; align-items: center; gap: 4px; font-size: 13px; margin-bottom: 8px; } .rv-photos > b small { color: var(--muted); font-weight: 600; }
.rv-photos .strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rv-photos .strip a { position: relative; flex: 0 0 84px; } .rv-photos .strip img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; display: block; }
.rv-photos .strip span { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #ffd166; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }


/* ===== 고객 채팅 위젯 ===== */
.sf-chat { position: fixed; right: 22px; bottom: 22px; z-index: 950; font-size: 13px; }
.sf-chat-fab { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.sf-chat-fab .lbl { background: #0f1b2d; color: #fff; font-size: 12px; font-weight: 700; padding: 8px 12px; border-radius: 10px; position: relative; box-shadow: 0 8px 24px rgba(15,27,45,.25); animation: sf-pop .6s cubic-bezier(.22,.61,.36,1) 1.2s both; }
.sf-chat-fab .lbl::after { content: ""; position: absolute; right: -6px; top: 50%; border: 6px solid transparent; border-left-color: #0f1b2d; border-right: 0; transform: translateY(-50%); }
.sf-chat-fab .ic { position: relative; width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(30,138,76,.4); transition: transform .25s, background .25s; }
.sf-chat-fab:hover .ic { transform: translateY(-3px) scale(1.04); }
.sf-chat.open .sf-chat-fab .ic { background: #0f1b2d; }
.sf-chat.open .sf-chat-fab .lbl { display: none; }
.sf-chat-fab em { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--live); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; border: 2px solid #fff; }
.sf-chat-panel { position: absolute; right: 0; bottom: 72px; width: 380px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 120px); background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(15,27,45,.3); display: flex; flex-direction: column; overflow: hidden; animation: sf-pop .35s cubic-bezier(.22,.61,.36,1); }
.ch-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.ch-head .logo { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.ch-head b { display: block; font-size: 15px; } .ch-head small { color: var(--muted); font-size: 11px; }
.ch-head .x { margin-left: auto; border: 0; background: transparent; color: #999; cursor: pointer; }
.ch-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 16px 0; gap: 6px; }
.ch-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 0; font-size: 12px; font-weight: 700; color: #555; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: all .2s; }
.ch-tabs button.on { background: var(--green); border-color: var(--green); color: #fff; }
.ch-status { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 10px 12px; background: var(--green-light); border-radius: 12px; }
.ch-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(30,138,76,.15); flex-shrink: 0; } .ch-status .dot.off { background: #b0bec5; box-shadow: 0 0 0 4px rgba(176,190,197,.2); }
.ch-status b { font-size: 12px; color: var(--green-dark); } .ch-status small { display: block; font-size: 11px; color: var(--muted); } .ch-status > b + small { margin-left: auto; text-align: right; max-width: 48%; }
.ch-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: #f6f8fa; scrollbar-width: thin; }
.ch-msg { display: flex; gap: 8px; max-width: 92%; }
.ch-msg.me { align-self: flex-end; flex-direction: row-reverse; } .ch-msg.me > div { text-align: right; }
.ch-msg .av { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--green); border: 1px solid var(--line); display: grid; place-items: center; flex-shrink: 0; }
.ch-msg.s-admin .av { color: #1769d6; }
.ch-msg .who { display: block; font-size: 10px; color: var(--muted); margin: 0 0 3px 2px; } .ch-msg.me .who { display: none; }
.ch-msg .b { display: inline-block; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 10px 12px; line-height: 1.6; font-size: 13px; color: #222; word-break: break-word; }
.ch-msg.me .b { background: var(--green); color: #fff; border-color: var(--green); border-radius: 14px 14px 4px 14px; }
.ch-msg .b a { color: var(--green-dark); text-decoration: underline; } .ch-msg .b ul, .ch-msg .b ol { margin: 6px 0 2px; padding-left: 18px; } .ch-msg .b li { margin: 2px 0; }
.ch-msg time { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.ch-sys { align-self: center; font-size: 11px; color: var(--muted); background: #fff; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--line); }
.ch-typing { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; width: 52px; margin-left: 38px; }
.ch-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa7b8; animation: sf-blink 1s infinite; } .ch-typing i:nth-child(2) { animation-delay: .2s; } .ch-typing i:nth-child(3) { animation-delay: .4s; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; background: #fff; }
.ch-chips button { border: 1px solid #cfe7d8; background: var(--green-light); color: var(--green-dark); border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
.ch-chips button:hover { background: var(--green); color: #fff; }
.ch-closed { margin: 10px 16px 0; padding: 12px; background: #fff7ed; border: 1px solid #ffe0b2; border-radius: 12px; }
.ch-closed b { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #b45309; } .ch-closed small { display: block; color: #92400e; margin: 4px 0 8px; font-size: 11px; }
.ch-closed > div { display: flex; gap: 6px; } .ch-closed .btn { flex: 1; font-size: 12px; }
.ch-input { display: flex; gap: 8px; padding: 12px 16px 14px; background: #fff; border-top: 1px solid var(--line); }
.ch-input input { flex: 1; height: 42px; border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; font-family: inherit; font-size: 13px; outline: none; } .ch-input input:focus { border-color: var(--green); }
.ch-input button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; }
@media (max-width: 720px) {
  .sf-chat { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .sf-chat-fab .lbl { display: none; } .sf-chat-fab .ic { width: 52px; height: 52px; }
  .sf-chat-panel { position: fixed; inset: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; }
  .sf-chat.open .sf-chat-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 2; }
}

/* 관리자 상담 채팅 */
.ac-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; min-height: 560px; }
.ac-sessions ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 620px; }
.ac-sessions li { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.ac-sessions li:hover, .ac-sessions li.on { background: var(--green-light); }
.ac-sessions li b { font-size: 13px; display: flex; align-items: center; gap: 6px; } .ac-sessions li b em { background: var(--live); color: #fff; font-style: normal; font-size: 10px; border-radius: 999px; padding: 1px 6px; }
.ac-sessions li small { grid-column: 1; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ac-sessions li time { grid-column: 2; grid-row: 1; font-size: 10px; color: var(--muted); }
.ac-sessions .empty { cursor: default; color: var(--muted); }
.ac-room { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ac-room-head { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg); } .ac-room-head b { font-size: 14px; display: block; } .ac-room-head small { font-size: 11px; color: var(--muted); }
.ac-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; max-height: 520px; }
.ac-msg { max-width: 75%; } .ac-msg.me { align-self: flex-end; text-align: right; } .ac-msg.bot { opacity: .7; }
.ac-msg .b { display: inline-block; text-align: left; padding: 9px 12px; border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.55; } .ac-msg.me .b { background: var(--green); color: #fff; }
.ac-msg time { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.ac-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .ac-input input { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font-family: inherit; }
@media (max-width: 1024px) { .ac-grid { grid-template-columns: 1fr; } }

/* 경매 종료 결과 카드 */
.st-wait.result { background: rgba(5,12,24,.78); backdrop-filter: blur(6px); }
.st-wait .rc { width: min(440px, 92%); background: #fff; color: var(--text); border-radius: 18px; padding: 26px 24px 20px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: sf-pop .45s cubic-bezier(.22,.61,.36,1); }
.st-wait .rc .ico { width: 56px; height: 56px; border-radius: 50%; background: #eceff1; color: #546e7a; display: grid; place-items: center; margin: 0 auto 10px; }
.st-wait.won .rc .ico { background: var(--green-light); color: var(--green-dark); }
.st-wait .rc > b { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.st-wait .rc p { margin: 8px 0 14px; font-size: 13px; color: #555; line-height: 1.6; } .st-wait .rc p b { color: var(--live); }
.st-wait .rc .rw { display: block; font-size: 11px; color: var(--green-dark); margin: 8px 0 4px; }
.st-wait .rc .nx { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; background: var(--bg); border-radius: 12px; padding: 10px; margin-top: 12px; color: var(--text); text-align: left; transition: background .2s; }
.st-wait .rc .nx:hover { background: var(--green-light); }
.st-wait .rc .nx img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.st-wait .rc .nx small { display: block; font-size: 10px; color: var(--live); font-weight: 800; } .st-wait .rc .nx b { display: block; font-size: 14px; } .st-wait .rc .nx em { font-style: normal; font-size: 12px; color: var(--muted); }
.st-wait .rc .nx .go { background: var(--green); color: #fff; font-size: 12px; font-weight: 800; padding: 8px 12px; border-radius: 8px; }
.st-wait .rc .auto { margin-top: 10px; font-size: 12px; color: var(--muted); } .st-wait .rc .auto span { color: var(--live); font-weight: 900; }
.st-wait .rc .auto button { border: 0; background: transparent; color: var(--text); text-decoration: underline; cursor: pointer; font-size: 12px; margin-left: 6px; }
.st-result { background: #16233a; border-radius: 12px; padding: 16px; text-align: center; }
.st-result small { display: block; color: #9aa7b8; font-size: 11px; } .st-result b { display: block; font-size: 22px; font-weight: 900; margin: 4px 0; } .st-result span { display: block; font-size: 12px; color: #c7d0dc; margin-bottom: 10px; }
.st-result.won { background: linear-gradient(135deg, #1e8a4c, #166b3a); } .st-result.won small, .st-result.won span { color: rgba(255,255,255,.85); }

/* 후기 요청 카드 */
.sf-nudge { position: fixed; left: 22px; bottom: 22px; z-index: 940; width: 360px; max-width: calc(100vw - 32px); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(15,27,45,.22); padding: 14px 14px 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .4s cubic-bezier(.22,.61,.36,1); border: 1px solid var(--line); }
.sf-nudge.in { opacity: 1; transform: none; }
.sf-nudge .x { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: #999; cursor: pointer; }
.sf-nudge img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.sf-nudge small { display: block; font-size: 11px; color: var(--green-dark); font-weight: 700; } .sf-nudge b { display: block; font-size: 14px; margin: 2px 0; }
.sf-nudge p { margin: 0 0 8px; font-size: 12px; color: #555; } .sf-nudge p strong { color: var(--live); }
.sf-nudge .acts { display: flex; gap: 10px; align-items: center; } .sf-nudge .later { border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
@media (max-width: 720px) { .sf-nudge { left: 12px; right: 12px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
.oc-review { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; background: #fff8e1; border: 1px solid #ffe8a3; border-radius: 12px; padding: 14px 16px; margin: 16px 0; text-align: left; }
.oc-review .ico { width: 44px; height: 44px; border-radius: 50%; background: #ffd54f; color: #7a5200; display: grid; place-items: center; } .oc-review b { display: block; font-size: 14px; } .oc-review small { color: #6b5a2e; font-size: 12px; } .oc-review strong { color: var(--live); }
.my-review-strip { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; background: linear-gradient(90deg, #fff8e1, #fff); border: 1px solid #ffe8a3; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; color: var(--text); transition: transform .25s, box-shadow .25s; }
.my-review-strip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,27,45,.08); }
.my-review-strip .ico { width: 40px; height: 40px; border-radius: 50%; background: #ffd54f; color: #7a5200; display: grid; place-items: center; } .my-review-strip b { display: block; font-size: 14px; } .my-review-strip small { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) { .my-review-strip { grid-template-columns: 40px 1fr; } .my-review-strip .btn { grid-column: 2; justify-self: start; } }
.co-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b45309; background: #fff7ed; border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; } .co-hint.ok { color: var(--green-dark); background: var(--green-light); }

/* ===== 공지사항 목록 + 모달 ===== */
.nt-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
.nt-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: #555; cursor: pointer; transition: all .2s; }
.nt-tabs button.on { background: var(--green); border-color: var(--green); color: #fff; } .nt-tabs.small button { padding: 5px 11px; font-size: 12px; }
.nt-list, .nt-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nt-list a, .nt-mlist button { display: grid; grid-template-columns: 72px 1fr 18px; gap: 14px; align-items: center; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--text); cursor: pointer; font-family: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.nt-list a:hover, .nt-mlist button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,27,45,.08); border-color: #cfe7d8; }
.nt-mlist li.on button { background: var(--green-light); border-color: var(--green); }
.nt-list .th, .nt-mlist .th { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; } .nt-mlist .th { width: 64px; height: 64px; }
.nt-list .th img, .nt-mlist .th img { width: 100%; height: 100%; object-fit: cover; }
.nt-list .ph, .nt-mlist .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-style: normal; }
.ph.t-notice { background: linear-gradient(135deg, #1769d6, #5aa0ff); } .ph.t-event { background: linear-gradient(135deg, #ff8a00, #ffc46b); } .ph.t-update { background: linear-gradient(135deg, #1e8a4c, #7fe3a3); } .ph.t-general { background: linear-gradient(135deg, #546e7a, #90a4ae); }
.nt-list .tx, .nt-mlist .tx { min-width: 0; } .nt-list .tx b, .nt-mlist .tx b { display: block; font-size: 15px; margin: 4px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-mlist .tx b { font-size: 13px; }
.nt-list .tx small, .nt-mlist .tx small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-mlist .tx small { font-size: 11px; }
.nt-list .tx time, .nt-mlist .tx time { display: block; font-size: 11px; color: #9aa7b8; margin-top: 4px; }
.tg.update { background: #e6f6ec; color: var(--green-dark); } .tg.general { background: #eceff1; color: #546e7a; } .tg.pin { background: #fde7e7; color: var(--live); margin-left: 4px; display: inline-flex; align-items: center; gap: 2px; }
.nt-pages { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 16px; }
.nt-pages button { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 50%; font-weight: 700; color: #555; cursor: pointer; display: grid; place-items: center; } .nt-pages button.on { background: var(--green); color: #fff; } .nt-pages button[disabled] { opacity: .3; cursor: default; }
.nt-pages .none { font-size: 13px; color: var(--muted); }
.nt-modal { position: fixed; inset: 0; z-index: 1150; background: rgba(8,14,24,.55); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .25s; }
.nt-modal.show { opacity: 1; }
.nt-box { position: relative; width: min(1000px, 100%); height: min(760px, 100%); background: #fff; border-radius: 22px; display: grid; grid-template-columns: 420px minmax(0, 1fr); overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.4); transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.nt-modal.show .nt-box { transform: none; }
.nt-box .x { position: absolute; top: 16px; right: 16px; z-index: 3; border: 0; background: transparent; color: #666; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; } .nt-box .x:hover { background: var(--bg); }
.nt-side { padding: 24px 20px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.nt-side h3 { margin: 0; font-size: 20px; } .nt-side p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.nt-detail { padding: 28px 32px; overflow-y: auto; scrollbar-width: thin; }
.nt-detail h2 { margin: 10px 0 8px; font-size: 22px; line-height: 1.35; letter-spacing: -.3px; }
.nt-detail .meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 16px; } .nt-detail .meta span { display: inline-flex; align-items: center; gap: 4px; }
.nt-detail .meta .share { margin-left: auto; border: 0; background: transparent; color: #777; cursor: pointer; }
.nt-detail .banner { border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: var(--green-light); } .nt-detail .banner img { width: 100%; display: block; max-height: 300px; object-fit: cover; }
.nt-detail .body { font-size: 14px; line-height: 1.8; color: #333; } .nt-detail .body p { margin: 0 0 12px; } .nt-detail .body table { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: 10px; } .nt-detail .body td, .nt-detail .body th { padding: 8px 12px; font-size: 13px; text-align: left; }
.nt-detail .foot { display: flex; justify-content: flex-end; margin-top: 24px; } .nt-detail .foot .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .nt-box { grid-template-columns: 1fr; height: 100%; border-radius: 16px; }
  .nt-side { border-right: 0; } .nt-box.show-detail .nt-side { display: none; } .nt-detail { display: none; } .nt-box.show-detail .nt-detail { display: block; padding: 20px 18px; }
  .nt-modal { padding: 10px; }
}
.charge-box small.held { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } .charge-box small.held b { font-size: 13px; color: var(--green-dark); }
.cancel-box summary { list-style: none; cursor: pointer; display: inline-block; } .cancel-box summary::-webkit-details-marker { display: none; }
.cancel-box form { margin-top: 8px; display: grid; gap: 6px; background: var(--bg); border-radius: 10px; padding: 10px; min-width: 220px; text-align: left; }
.cancel-box select { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font-family: inherit; font-size: 12px; } .cancel-box small { font-size: 11px; color: var(--muted); }
.sc-order .cancel-decide { flex-wrap: wrap; gap: 6px; } .sc-order .cancel-decide input { height: 34px; }
.ad-refund { margin-top: 6px; } .ad-refund summary { font-size: 11px; color: var(--muted); cursor: pointer; } .ad-refund form { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ad-refund input[type=text] { height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: 12px; width: 110px; } .ad-refund label { font-size: 11px; }
.chip.cancel_req { background: #fff4e0; color: #b26a00; } .chip.cancelled, .chip.refunded { background: #eceff1; color: #546e7a; }

/* ===== 알림센터 (헤더 종) ===== */
.header-inner { position: relative; }
.bell-btn { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: #1f2b3a; border-radius: 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.bell-btn:hover, .bell-btn.has { border-color: #cfe7d8; background: var(--green-light); color: var(--green-dark); }
.bell-btn em, .bell-m em { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
@keyframes sf-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.bell-btn.ring svg, .bell-m.ring svg { animation: sf-ring .9s ease; transform-origin: 50% 15%; }
.bell-drop { position: absolute; right: 0; top: calc(100% + 6px); width: 380px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 27, 45, .16); z-index: 1200; overflow: hidden; animation: sf-drop .18s ease; }
@keyframes sf-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bd-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bd-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.bd-head span { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
.bd-head button, .bd-head a { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; }
.bd-head a { color: var(--green-dark); font-weight: 700; }
.bd-head .x { display: none; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #333; }
.bd-tabs { display: flex; gap: 6px; padding: 10px 12px 4px; overflow-x: auto; scrollbar-width: none; }
.bd-tabs::-webkit-scrollbar { display: none; }
.bd-tabs button { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; color: #444; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.bd-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bd-list { list-style: none; margin: 0; padding: 6px 0 8px; max-height: 440px; overflow-y: auto; }
.bd-list li.empty, .alerts-list li.empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.bd-list li a, .alerts-list li a { display: flex; gap: 12px; padding: 11px 14px; color: inherit; text-decoration: none; transition: background .12s; }
.bd-list li a:hover, .alerts-list li a:hover { background: #f7f9fb; }
.bd-list li.new a, .alerts-list li.new a { background: #f2faf5; }
.bd-list li.new a:hover, .alerts-list li.new a:hover { background: #e8f5ed; }
.bd-list .ic, .alerts-list .ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #eef2f6; color: #3b4a5c; }
.t-order .ic { background: #e8f0fb; color: #1d5fb8; } .t-auction .ic { background: #fff1ea; color: #d35a16; } .t-wish .ic { background: #fdebef; color: #d12c4e; }
.t-inquiry .ic { background: var(--green-light); color: var(--green-dark); } .t-points .ic { background: #fff7df; color: #b07c00; } .t-product .ic { background: #eaf7ee; color: #2a8d4f; }
.bd-list .tx, .alerts-list .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bd-list .tx small, .alerts-list .tx small { font-size: 11px; color: var(--muted); font-weight: 600; }
.bd-list .tx small i, .alerts-list .tx small i { font-style: normal; font-weight: 400; margin-left: 4px; }
.bd-list .tx b, .alerts-list .tx b { font-size: 13.5px; line-height: 1.35; }
.bd-list .tx span, .alerts-list .tx span { font-size: 12px; color: #4b5563; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-list li.new .tx b::after, .alerts-list li.new .tx b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); margin-left: 6px; vertical-align: 2px; }
/* 마이페이지 전체 알림 */
.alerts-page .ap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.alerts-page .ap-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.alerts-page .ap-tabs button { border: 1px solid var(--line); background: #fff; color: #444; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.alerts-page .ap-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.alerts-page .ap-head > button { border: 1px solid var(--line); background: #fff; font-size: 12px; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.alerts-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.alerts-list li + li { border-top: 1px solid #eef1f4; }
.alerts-list li a { padding: 14px 16px; }
@media (max-width: 720px) {
  .bell-drop { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; border-radius: 18px 18px 0 0; max-height: 78vh; z-index: 1300; display: flex; flex-direction: column; animation: sf-sheet .22s ease; padding-bottom: env(safe-area-inset-bottom); }
  @keyframes sf-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .bd-head .x { display: grid; }
  .bd-list { max-height: none; flex: 1; }
  body.bell-open::before { content: ""; position: fixed; inset: 0; background: rgba(15, 27, 45, .35); z-index: 1290; }
}

/* ===== 약관 동의 (회원가입) ===== */
.agree-box { border: 1px solid var(--line); border-radius: 14px; padding: 6px 14px 10px; margin: 6px 0 16px; background: #fff; }
.agree-box.shake { animation: sf-shake .4s; border-color: var(--live); }
@keyframes sf-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.agree-all { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; }
.agree-all small { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: auto; }
.agree-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 9px 0; border-bottom: 1px dashed #eef1f4; }
.agree-item:last-of-type { border-bottom: 0; }
.agree-item > label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.agree-item > label small { color: var(--muted); font-size: 11.5px; }
.agree-item em { font-style: normal; font-weight: 800; font-size: 12px; }
.agree-item em.req { color: var(--green-dark); } .agree-item em.opt { color: var(--muted); }
.agree-more { border: 0; background: none; color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; padding: 4px 2px; }
.agree-more svg { transition: transform .2s; } .agree-more.open svg { transform: rotate(180deg); }
.agree-body { grid-column: 1 / -1; max-height: 220px; overflow-y: auto; background: #f7f9fb; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.7; color: #374151; }
.agree-body h3 { font-size: 13px; margin: 10px 0 4px; color: #111; } .agree-body h3:first-child { margin-top: 0; }
.agree-body p { margin: 0 0 6px; } .agree-body ul { margin: 0 0 6px; padding-left: 18px; }
.agree-body .pol-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 6px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid #e9edf1; }
.agree-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.agree-box input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--green); flex: 0 0 auto; }
/* 재동의 배너 */
.reagree { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff8e1; border-bottom: 1px solid #f4dd8a; padding: 10px 20px; font-size: 13px; }
.reagree a { color: var(--green-dark); text-decoration: underline; }
@media (max-width: 720px) { .reagree { flex-direction: column; align-items: flex-start; } }
/* 약관 페이지 */
.policy-body { grid-template-columns: minmax(0, 1fr) 300px; }
.pol-tabs { display: flex; gap: 6px; margin: 14px 0 18px; }
.pol-tabs a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: #444; }
.pol-tabs a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.pol-title { font-size: 24px; margin: 0 0 4px; }
.policy .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.pol-doc { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 30px; font-size: 14px; line-height: 1.8; color: #2b3440; }
.pol-doc.soft { background: #f7f9fb; }
.pol-doc h3 { font-size: 15.5px; margin: 22px 0 8px; color: #111; padding-left: 10px; border-left: 3px solid var(--green); } .pol-doc h3:first-child { margin-top: 0; }
.pol-doc p { margin: 0 0 10px; } .pol-doc ul { margin: 0 0 12px; padding-left: 20px; } .pol-doc li { margin-bottom: 4px; }
.pol-doc .pol-row { display: grid; grid-template-columns: 130px 1.4fr 1fr; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #eef1f4; font-size: 13px; }
.pol-doc .pol-row:first-of-type { background: #f3f5f7; font-weight: 700; border-radius: 8px 8px 0 0; }
.pol-sub { font-size: 17px; margin: 26px 0 10px; }
.pol-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; font-size: 13px; }
.pol-side b { display: block; margin-bottom: 10px; } .pol-side ul { list-style: none; margin: 0 0 12px; padding: 0; } .pol-side li { padding: 6px 0; border-bottom: 1px dashed #eef1f4; } .pol-side li a { color: #333; }
.pol-side small { color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .policy-body { grid-template-columns: 1fr; } .pol-doc { padding: 20px 18px; } .pol-doc .pol-row { grid-template-columns: 1fr; gap: 2px; } }
/* 마이페이지: 동의 · 탈퇴 */
.consent-card { margin-top: 16px; }
.consent-list { list-style: none; margin: 0; padding: 0; }
.consent-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eef1f4; font-size: 14px; }
.consent-list li:last-child { border-bottom: 0; }
.consent-list li > span { display: flex; flex-direction: column; gap: 2px; flex: 1; } .consent-list li > span small, .mk-form span small { color: var(--muted); font-size: 12px; }
.consent-list li > span:first-child { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; } .consent-list li > span:first-child svg { color: var(--green); }
.consent-list li > a { font-size: 12px; color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.mk-form { display: flex; align-items: center; gap: 12px; flex: 1; } .mk-form span { display: flex; flex-direction: column; gap: 2px; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; background: #cfd5dc; border-radius: 999px; transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked + i { background: var(--green); } .switch input:checked + i::after { transform: translateX(18px); }
.withdraw { margin-top: 16px; } .withdraw summary { cursor: pointer; font-weight: 700; color: var(--muted); font-size: 13px; list-style: none; } .withdraw summary::-webkit-details-marker { display: none; } .withdraw summary::before { content: "+ "; }
.withdraw[open] summary::before { content: "- "; } .withdraw p { font-size: 12.5px; line-height: 1.7; margin: 10px 0; }
.wd-row { display: flex; gap: 8px; } .wd-row input { flex: 1; max-width: 280px; } .btn.danger { color: var(--live); border-color: #f3b4b1; } .btn.danger:hover { background: #fdeceb; }
.sc-top .r .sc-bell { position: relative; display: inline-flex; }
.sc-top .r .sc-bell .bell-drop { top: calc(100% + 10px); right: -60px; }
@media (max-width: 720px) { .sc-top .r .sc-bell .bell-drop { right: 0; } }

/* ===== 수수료 · 정산 ===== */
.ad-form .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ad-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0; }
.comm-kind { display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--green); }
.comm-kind.sea { border-left-color: #2563eb; } .comm-kind.auction { border-left-color: #e8762b; }
.comm-kind small { color: var(--muted); font-size: 12px; } .comm-kind b { font-size: 20px; } .comm-kind span { font-size: 12px; color: #4b5563; }
.comm-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comm-form label { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.comm-form input { width: 58px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; }
.comm-form em { font-style: normal; font-size: 11px; }
.comm-table td { vertical-align: middle; }
@media (max-width: 900px) { .ad-form .grid3, .ad-row3 { grid-template-columns: 1fr; } }

/* ===== AI 글쓰기 ===== */
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.ai-head h4 { margin: 0; }
.ai-tools { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; min-width: 260px; }
.ai-tools input { flex: 1; max-width: 360px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
.btn-ai { background: linear-gradient(135deg, #1e8a4c, #2a6bd6); border: 0; color: #fff; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn-ai:hover { filter: brightness(1.06); } .btn-ai.busy { opacity: .75; }
.btn-ai .spin { width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: sf-spin .8s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.ai-hint { font-size: 12px; color: var(--muted); margin: 6px 0 8px; }
.ai-hint .link { border: 0; background: none; color: var(--green-dark); font-weight: 700; cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 2px; }
@media (max-width: 720px) { .ai-tools { width: 100%; } .ai-tools input { max-width: none; } }

/* ===== 검색 · 필터 ===== */
.srch-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 10px 0 16px; }
.srch-head h2 { margin: 0; font-size: 22px; } .srch-head .count { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.srch-form { display: flex; gap: 6px; } .srch-form input { width: 320px; max-width: 60vw; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.srch-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.srch-side { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 16px 14px; position: sticky; top: 80px; }
.srch-mtoggle { display: none; margin: 8px 0; }
.fl-group { padding: 12px 0; border-bottom: 1px solid #eef1f4; } .fl-group:last-of-type { border-bottom: 0; }
.fl-group > b { display: block; font-size: 13px; margin-bottom: 8px; }
.fl-group > a { display: block; font-size: 13px; color: #333; padding: 5px 8px; border-radius: 8px; }
.fl-group > a:hover { background: #f5f7f9; } .fl-group > a.on { background: var(--green-light); color: var(--green-dark); font-weight: 700; }
.fl-sub { padding: 2px 0 6px 14px; display: flex; flex-wrap: wrap; gap: 4px; } .fl-sub a { font-size: 12px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: #444; } .fl-sub a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.fl-price { display: flex; align-items: center; gap: 4px; margin-top: 8px; } .fl-price input { width: 0; flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; } .fl-price span { color: var(--muted); }
.fl-tags { display: flex; flex-wrap: wrap; gap: 5px; } .fl-tags a { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: #444; } .fl-tags a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.fl-group a.chk { display: flex; align-items: center; gap: 8px; } .fl-group a.chk i { width: 16px; height: 16px; border: 1.5px solid #c7ced6; border-radius: 4px; flex: 0 0 auto; position: relative; } .fl-group a.chk.on { background: none; color: var(--green-dark); } .fl-group a.chk.on i { background: var(--green); border-color: var(--green); } .fl-group a.chk.on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fl-reset { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--live); }
.srch-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.srch-chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip-f { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 5px 10px; background: var(--green-light); color: var(--green-dark); border-radius: 999px; font-weight: 600; }
.srch-sort { display: flex; gap: 2px; flex-wrap: wrap; } .srch-sort a { font-size: 12.5px; color: var(--muted); padding: 5px 9px; border-radius: 8px; } .srch-sort a.on { color: #111; font-weight: 800; background: #f1f3f5; }
.srch-grid { grid-template-columns: repeat(4, 1fr); }
.pager { display: flex; justify-content: center; gap: 6px; margin: 26px 0 10px; } .pager a { min-width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: #333; padding: 0 8px; } .pager a.on { background: var(--navy); color: #fff; border-color: var(--navy); } .pager a.next { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 1100px) { .srch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .srch-body { grid-template-columns: 1fr; } .srch-side { position: static; } .srch-mtoggle { display: flex; } .srch-side .fl-group, .srch-side .fl-reset { display: none; } .srch-side.open .fl-group { display: block; } .srch-side.open .fl-reset { display: inline-flex; } }
@media (max-width: 720px) { .srch-grid { grid-template-columns: 1fr 1fr; } .srch-form input { width: 100%; max-width: none; } .srch-form { width: 100%; } }
/* 카드 부가 뱃지: 인증 · 시세 · 예약 */
.card-extra { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.cert-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cert-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #1d5fb8; background: #e8f0fb; border-radius: 6px; padding: 2px 7px; } .cert-badge.sm { font-size: 10px; padding: 1px 6px; }
.pd-right h1 + .cert-badges { margin: -4px 0 8px; } .pd-right .cert-badge { font-size: 12px; padding: 4px 9px; }
.mk-badge { display: inline-flex; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #f1f3f5; color: #4b5563; }
.mk-badge.cheap { background: #fdebef; color: #c81e3f; } .mk-badge.high { background: #fff4e5; color: #b45309; }
.mk-box { border-radius: 12px; padding: 12px 14px; margin: 8px 0 12px; background: #f6f8fa; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.mk-box b { font-size: 14px; } .mk-box span { font-size: 12.5px; color: #374151; } .mk-box small { font-size: 11px; color: var(--muted); }
.mk-box.cheap { background: #fff5f7; border-color: #f7c6d0; } .mk-box.cheap b { color: #c81e3f; } .mk-box.high { background: #fff9f0; border-color: #f5d7a8; }
.dt-card .bd.pre { background: #6b46c1; }
.pd-notice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; font-size: 13px; background: #fff8e1; border: 1px solid #f4dd8a; }
.pd-notice.preorder { background: #f3efff; border-color: #d9ccff; } .pd-notice span { color: var(--muted); font-size: 12px; }
.pd-harvest { font-size: 12.5px; color: #374151; margin: -4px 0 10px; display: flex; align-items: center; gap: 5px; }
/* 후기 정렬 · 신고 */
.rv-sort { display: flex; gap: 4px; margin: 0 0 12px; } .rv-sort a { font-size: 12.5px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: #444; } .rv-sort a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.rv-report { position: absolute; right: 0; top: 0; border: 0; background: none; color: #9aa3ad; font-size: 11px; cursor: pointer; } .rv-report:hover { color: var(--live); } .rv-report:disabled { color: #c5c9ce; cursor: default; }
.rv.real { position: relative; } .rv.real > div { position: relative; }
.rv-flag { display: inline-block; font-size: 11px; color: var(--live); background: #fdeceb; padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.rv-wrap.is-hidden { opacity: .55; } .rv-wrap.is-reported { outline: 2px solid #f7c6d0; border-radius: 14px; } .rv-wrap .del.ok { color: var(--green-dark); }
/* 최근 본 상품 */
.recent-strip { margin-top: 20px; } .recent-strip.home { padding-top: 0; }
.recent-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.recent-row .dt-card { flex: 0 0 180px; } .recent-row .dt-card .thumb { aspect-ratio: 1; }
.section-head .link { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.reorder { display: inline-block; }
/* 상품 등록 단계 */
.sc-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f3f5f7; color: var(--muted); font-size: 13px; cursor: pointer; }
.sc-steps li i { width: 24px; height: 24px; border-radius: 50%; background: #d9dee4; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; }
.sc-steps li.on { background: var(--green-light); color: var(--green-dark); font-weight: 700; } .sc-steps li.on i { background: var(--green); }
.sc-steps li.done { color: #333; } .sc-steps li.done i { background: var(--navy); }
.sc-step { display: none; } .sc-step.on { display: block; animation: sf-drop .2s ease; }
.sc-step-nav { display: flex; justify-content: flex-end; gap: 8px; margin: 18px 0 6px; }
.sc-form input.err, .sc-form select.err { border-color: var(--live) !important; box-shadow: 0 0 0 3px rgba(229, 57, 53, .12); }
.cert-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cert-pick input { display: none; } .cert-pick span { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; cursor: pointer; color: #333; }
.cert-pick input:checked + span { background: #e8f0fb; border-color: #9cc0f2; color: #1d5fb8; font-weight: 700; }
/* CSV · 정산 */
.csv-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .csv-up { display: inline-block; } .csv-up label { cursor: pointer; }
.csv-help { font-size: 12px; margin: 0 0 14px; line-height: 1.6; }
.statement { border: 2px solid var(--navy); }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .st-head b { font-size: 20px; display: block; } .st-head small { color: var(--muted); } .st-acts { display: flex; gap: 6px; }
.st-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .st-meta > div { background: #f7f9fb; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .st-meta small { color: var(--muted); font-size: 11px; } .st-meta b { font-size: 14px; }
.my-table tr.sum td { background: #f3f5f7; font-weight: 700; } .my-table tr.muted td { opacity: .55; }
.stat-s em { display: block; font-size: 11px; color: var(--muted); font-style: normal; margin-top: 2px; }
.cert-admin { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media print { .sc-top, .sc-nav, .site-header, .site-footer, .sf-chat, .m-tabbar, .st-acts, .my-stats, .bank-form, .sc-wrap > aside { display: none !important; } .statement { border: 0; } .sc-wrap { display: block; } body { background: #fff; } }
@media (max-width: 720px) { .sc-steps { gap: 4px; } .sc-steps li span { display: none; } .sc-steps li.on span { display: inline; } .st-meta { grid-template-columns: 1fr 1fr; } .recent-row .dt-card { flex-basis: 150px; } }
.fl-price button { flex: 0 0 auto; min-width: 44px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }

/* ===== 법정 표시 (1.7.0) ===== */
.site-footer .ft-brand b { font-size: 16px; }
.site-footer .footer-links b { font-weight: 800; }
.ft-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 18px; padding-top: 14px; font-size: 12px; line-height: 1.8; }
.ft-biz { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; }
.ft-biz span em { font-style: normal; opacity: .65; margin-right: 4px; }
.ft-biz a { text-decoration: underline; opacity: .9; font-size: 11.5px; }
.ft-escrow { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.ft-broker { margin: 8px 0 0; opacity: .85; }
.ft-copy { margin-top: 14px; font-size: 12px; opacity: .7; }
.broker-note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #f5f7fa; color: #4b5563; font-size: 12px; line-height: 1.6; }
.broker-note svg { flex: 0 0 auto; margin-top: 3px; color: var(--muted); }
/* 원산지: 제품명과 같은 크기 · 같은 색 */
.pd-buy h1 .org { display: block; font: inherit; color: inherit; margin-top: 2px; }
.dt-card .org-line { display: block; font-size: 14px; font-weight: 800; color: inherit; line-height: 1.35; margin-top: 1px; word-break: keep-all; }
.dt-card .name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
/* 반품 기준 */
.pd-return { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: #f3f6f9; color: #374151; }
.pd-return.fresh { background: #fff6e8; color: #8a4b00; }
.pd-return b { font-weight: 800; }
.co-item small .rt { font-style: normal; color: #b45309; font-weight: 700; }
/* 판매자 정보 */
.seller-legal { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.seller-legal > b { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 8px; }
.seller-legal table { width: 100%; border-collapse: collapse; font-size: 13px; }
.seller-legal th { text-align: left; width: 140px; color: var(--muted); font-weight: 600; padding: 6px 0; vertical-align: top; }
.seller-legal td { padding: 6px 0; }
.seller-legal small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.rv-policy { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); margin: 10px 0; line-height: 1.6; }
.rv-policy svg { flex: 0 0 auto; margin-top: 3px; }
/* 주문서 동의 */
.co-agree { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.co-agree.shake { animation: sf-shake .4s; border-color: var(--live); }
.co-agree .ca-all { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.co-agree .ca-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; padding: 8px 0 0; font-size: 12.5px; }
.co-agree .ca-item label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.co-agree em.req, .seller-confirm em.req { font-style: normal; font-weight: 800; color: var(--green-dark); }
.co-agree input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--green); flex: 0 0 auto; margin-top: 1px; }
.co-agree .agree-body { grid-column: 1 / -1; margin-top: 6px; }
.co-agree .agree-body p { margin: 8px 0 0; font-size: 12px; }
/* 약관 표 */
.pol-table { margin: 6px 0 14px; border: 1px solid #e6eaef; border-radius: 10px; overflow: hidden; }
.pol-table .pol-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eef1f4; font-size: 12.5px; }
.pol-table .pol-row:last-child { border-bottom: 0; }
.pol-table .pol-row:first-child { background: #f3f5f7; font-weight: 700; }
.co-agree .pol-table .pol-row:first-child { background: none; font-weight: 400; }
.co-agree .pol-table .pol-row span:first-child { color: var(--muted); }
.pol-doc .pol-row:first-of-type { border-radius: 0; }
@media (max-width: 720px) { .pol-table .pol-row { grid-template-columns: 1fr; gap: 2px; } .pol-table .pol-row span:first-child { font-weight: 700; } }
/* 가입 동의: 안내 · 광고 채널 */
.agree-item.info .info-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; }
.agree-item.info .info-l small { color: var(--muted); font-size: 11.5px; }
.agree-item em.inf { font-style: normal; font-weight: 800; font-size: 12px; color: #2563eb; }
.agree-item .mk-ch { grid-column: 1 / -1; display: flex; gap: 14px; padding-left: 26px; font-size: 12.5px; color: #374151; }
.agree-item .mk-ch label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
/* 경매 동의 모달 */
.ac-terms { margin: 0 0 10px; padding-left: 18px; text-align: left; font-size: 13px; line-height: 1.7; }
.ac-provide { text-align: left; background: #f5f7fa; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.ac-provide p { margin: 4px 0; } .ac-provide small { color: var(--muted); }
/* 판매자 확인 · 정보 */
.seller-confirm { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 4px; padding: 12px; border: 1px dashed #c9d3dd; border-radius: 10px; font-size: 12.5px; line-height: 1.6; background: #fafcfd; cursor: pointer; }
.seller-confirm input { width: 17px; height: 17px; accent-color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.seller-info-form .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.seller-info-form .seg label { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.seller-info-form .seg label.on { border-color: var(--green); background: var(--green-light); }
.seller-info-form .seg input { position: absolute; opacity: 0; }
.seller-info-form .seg small { color: var(--muted); font-size: 12px; }
/* 마이페이지 광고 수신 채널 */
.consent-list li.mk-li .mk-form { flex-wrap: wrap; gap: 8px 14px; }
.consent-list .mk-sw { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; }
/* 관리자: 법정 요건 점검 */
.legal-check ul { list-style: none; margin: 0 0 10px; padding: 0; }
.legal-check li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid #eef1f4; }
.legal-check li b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.legal-check li.ok b svg { color: var(--green); } .legal-check li.bad b svg { color: var(--live); }
.legal-check li small { color: var(--muted); padding-left: 20px; }
button.link { border: 0; background: none; color: var(--green-dark); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0 0 0 6px; }
.agree-all { flex-wrap: wrap; } .agree-all b { white-space: nowrap; } .agree-all small { flex: 1 1 100%; margin-left: 0 !important; padding-left: 25px; }
.agree-item > label { flex-wrap: wrap; } .agree-item.mk > label small { flex: 1 1 100%; padding-left: 25px; }
.price-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 10px; } .price-test small { color: var(--muted); font-size: 12px; } .price-test .alert { flex: 1 1 100%; margin: 4px 0 0; font-size: 12px; word-break: break-all; }

/* ===== 시세 (홈 시세판 · 전체 시세 · 판매자 시세 도우미) ===== */
:root { --mk-up: #d92d3a; --mk-down: #2463d1; }
.mk-chg { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk-chg.up { color: var(--mk-up); } .mk-chg.down { color: var(--mk-down); } .mk-chg.flat { color: var(--muted); font-weight: 500; }
.mk-spark { display: block; color: #5b6b7f; overflow: visible; }
.mk-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.mk-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mk-tabs button small { font-size: 11px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.mk-tabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; } .mk-tabs button.on small { color: rgba(255,255,255,.7); }
.mk-tabs button:not(.on):hover { border-color: #9ca3af; }

.mk-home .section-head h2 svg { color: var(--green); }
.mk-sub { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.mk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mk-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.mk-card:hover { border-color: #c7d2dc; box-shadow: 0 6px 18px rgba(15,27,45,.07); transform: translateY(-2px); }
.mk-card[hidden] { display: none; }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mk-top b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-top em, .mk-table .se, .mk-assist .nm em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--green-dark); background: var(--green-light); border-radius: 5px; padding: 2px 6px; flex-shrink: 0; }
.mk-table .se.rt, .mk-assist .nm em.rt { color: #92400e; background: #fef3c7; }
.mk-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.mk-mid strong { font-size: 20px; font-weight: 900; letter-spacing: -.02em; } .mk-mid strong small { font-size: 12px; font-weight: 600; margin-left: 1px; }
.mk-card .mk-spark { width: 100%; height: 26px; }
.mk-site { font-size: 12px; color: #374151; border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-site b { color: var(--green-dark); }
.mk-site.none { color: var(--muted); display: flex; align-items: center; gap: 2px; }

.mk-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.mk-page-head h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; display: flex; align-items: center; gap: 8px; } .mk-page-head h2 svg { color: var(--green); }
.mk-page-head p { margin: 0; color: #4b5563; font-size: 14px; max-width: 720px; line-height: 1.6; }
.mk-find { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 12px; height: 42px; min-width: 260px; color: var(--muted); }
.mk-find input { border: 0; outline: 0; font: inherit; font-size: 14px; flex: 1; background: transparent; color: var(--text); }
.mk-find:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,138,76,.12); }
.mk-only { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.mk-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--muted); background: #f9fafb; padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mk-table td { padding: 12px 16px; border-bottom: 1px solid #f1f2f4; vertical-align: middle; }
.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table tbody tr:hover { background: #fafbfc; }
.mk-table tr[hidden] { display: none; }
.mk-table .r { text-align: right; }
.mk-table .nm b { font-size: 15px; font-weight: 800; } .mk-table .nm small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; max-width: 360px; }
.mk-table .pr b { font-size: 16px; font-weight: 900; }
.mk-table .st small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.mk-table .go { text-align: right; white-space: nowrap; }
.mk-vs { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: #f1f3f5; color: #4b5563; }
.mk-vs.cheap { background: #fdebef; color: #c81e3f; } .mk-vs.high { background: #fff4e5; color: #b45309; }
.mk-none { padding: 30px; text-align: center; color: var(--muted); margin: 0; }
.mk-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin: 14px 2px 40px; }
.mk-page .empty-box { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 48px 20px; text-align: center; margin-bottom: 40px; }
.mk-page .empty-box p { margin: 0 0 6px; font-weight: 700; }

/* 판매자 등록 화면 */
.sc-reg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.mk-assist { position: sticky; top: 84px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.mk-as-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-as-head b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; } .mk-as-head b svg { color: var(--green); }
.mk-as-head small { color: var(--muted); font-size: 11.5px; }
.mk-as-empty { margin: 0; color: #4b5563; line-height: 1.6; }
.mk-as-sug { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-as-sug button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; color: #374151; }
.mk-as-sug button.on { border-color: var(--green); background: var(--green); color: #fff; }
.mk-as-main { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mk-as-main .nm { display: flex; align-items: center; gap: 6px; } .mk-as-main .nm b { font-size: 15px; font-weight: 800; } .mk-as-main .nm small { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.mk-as-main .pr { display: flex; align-items: baseline; gap: 4px; } .mk-as-main .pr strong { font-size: 22px; font-weight: 900; letter-spacing: -.02em; } .mk-as-main .pr > .u { color: var(--muted); font-size: 12px; margin-right: auto; }
.mk-as-main .tr { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .mk-as-main .tr small { color: var(--muted); font-size: 11px; }
.mk-as-main .vr { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 4px; }
.mk-as-main .vr li { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #4b5563; } .mk-as-main .vr b { color: var(--text); font-weight: 700; }
.mk-as-main .na { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mk-as-main .site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: #4b5563; }
.mk-as-main .site b { color: var(--green-dark); } .mk-as-main .site small { color: var(--muted); } .mk-as-main .site.none { color: var(--muted); }
.mk-as-mine { border-radius: 12px; padding: 12px; background: #f1f5f9; display: flex; flex-direction: column; gap: 6px; }
.mk-as-mine .row { display: flex; justify-content: space-between; gap: 8px; } .mk-as-mine .row span { color: #4b5563; } .mk-as-mine .row b { font-weight: 800; }
.mk-as-mine p { margin: 2px 0 0; font-size: 12px; color: #4b5563; line-height: 1.55; }
.mk-as-mine b.cheap { color: #c81e3f; } .mk-as-mine b.high { color: #b45309; }
.mk-as-mine.cheap { background: #fff5f7; } .mk-as-mine.high { background: #fff9f0; }
.mk-as-mine.hint { color: #4b5563; line-height: 1.6; font-size: 12.5px; }
.mk-as-all { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); align-self: flex-start; } .mk-as-all:hover { color: var(--green); }

@media (max-width: 1280px) { .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .sc-reg { display: block; }
  .mk-assist { position: sticky; top: auto; bottom: 0; z-index: 30; margin: 16px -4px 0; max-height: 46vh; overflow: auto; box-shadow: 0 -8px 24px rgba(15,27,45,.12); background: #fff; }
}
@media (max-width: 900px) {
  .mk-table thead { display: none; }
  .mk-table, .mk-table tbody, .mk-table tr, .mk-table td { display: block; }
  .mk-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid #f1f2f4; }
  .mk-table td { padding: 0; border: 0; }
  .mk-table .nm { grid-column: 1; } .mk-table .pr { grid-column: 2; grid-row: 1; }
  .mk-table td:nth-child(3) { grid-column: 2; text-align: right; } .mk-table td:nth-child(4) { grid-column: 1; grid-row: 2; }
  .mk-table .st { grid-column: 1 / -1; font-size: 13px; } .mk-table .go { display: none; }
  .mk-only { margin-left: 0; }
}
@media (max-width: 720px) {
  .mk-assist { max-height: 38vh; padding: 12px; gap: 8px; margin: 12px -14px 0; border-radius: 14px 14px 0 0; }
  .mk-assist .mk-as-empty, .mk-assist .mk-as-all, .mk-as-main .vr, .mk-as-main .tr { display: none; }
  .mk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; }
  .mk-card { flex: 0 0 150px; scroll-snap-align: start; }
  .mk-sub { display: block; margin: 4px 0 0; font-size: 12px; }
  .mk-home .section-head h2 { flex-wrap: wrap; }
  .mk-find { min-width: 0; width: 100%; }
  .mk-page-head h2 { font-size: 22px; }
}
@media (max-width: 720px) {
  .sc-top { padding: 0 12px; gap: 8px; } .sc-top .l { gap: 8px; min-width: 0; } .sc-top .l > b { font-size: 15px; white-space: nowrap; } .sc-top .sep, .sc-top .home-link { display: none; }
  .sc-top .r { gap: 6px; } .sc-top .r .who { max-width: 84px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block !important; } .sc-top .r .out { font-size: 0; gap: 0; }
}
@media (max-width: 720px) { .sc-table { display: block; overflow-x: auto; } }

/* 품목 비교 검색 (시세판 "상품 보기") */
.mk-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.mk-ih-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-ih-l .lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--green-dark); }
.mk-ih-l > b { font-size: 16px; font-weight: 800; }
.mk-ih-l .se { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--green-dark); background: var(--green-light); border-radius: 5px; padding: 2px 6px; } .mk-ih-l .se.rt { color: #92400e; background: #fef3c7; }
.mk-ih-l strong { font-size: 18px; font-weight: 900; } .mk-ih-l strong small { font-size: 12px; font-weight: 600; color: var(--muted); }
.mk-ih-l .dt { color: var(--muted); font-size: 12px; }
.mk-ih-r { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #374151; } .mk-ih-r b { color: var(--green-dark); }
.mk-ih-r a { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; } .mk-ih-r a:hover { color: var(--green); }
.mk-fallback { margin-bottom: 14px; }
.mk-badge.kg { background: #eef2f7; color: #1f2937; }
.alert.mk-fallback { background: #f6f8fa; color: #374151; border-color: var(--line); }
.cat-img-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.cat-img-it { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.cat-img-it img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: #e5e7eb; }
.cat-img-it b { font-size: 13px; } .cat-img-it small { font-size: 11px; color: var(--muted); line-height: 1.4; min-height: 30px; }
.cat-img-it .btn { align-self: flex-start; cursor: pointer; }
@media (max-width: 900px) { .cat-img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.pd-live-promo { display: block; color: #fff; text-decoration: none; }
.pd-reco .ways { flex-wrap: wrap; gap: 6px; } .pd-reco .ways span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: #374151; }

/* ===== 판매자 사업자 정보 ===== */
.biz-box { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px 6px; margin: 6px 0 16px; background: #fbfcfb; }
.biz-box legend { padding: 0 6px; font-size: 14px; font-weight: 800; color: var(--text); }
.biz-box legend small { font-weight: 500; color: var(--muted); font-size: 12px; margin-left: 4px; }
.biz-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.biz-kind label { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; position: relative; }
.biz-kind label.on { border-color: var(--green); background: var(--green-light); }
.biz-kind input { position: absolute; opacity: 0; pointer-events: none; }
.biz-kind b { font-size: 14px; } .biz-kind small { color: var(--muted); font-size: 12px; }
.biz-no-row { display: flex; gap: 8px; align-items: flex-end; }
.biz-no-row .field { flex: 1; margin-bottom: 0; }
.biz-no-row .btn { height: 44px; white-space: nowrap; flex-shrink: 0; }
.biz-msg { margin: 6px 2px 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; min-height: 18px; }
.biz-msg.st-ok { color: var(--green-dark); font-weight: 700; }
.biz-msg.st-invalid, .biz-msg.st-mismatch, .biz-msg.st-closed, .biz-msg.st-taken { color: #c62828; font-weight: 600; }
.biz-msg.st-unavailable { color: #b45309; }
.biz-msg.st-wait { color: #2563eb; }
.biz-box .field em { font-style: normal; }
.biz-addr { display: flex; gap: 8px; } .biz-addr input { flex: 1; min-width: 0; } .biz-addr .btn { flex-shrink: 0; }
.biz-box input[type=file] { padding: 8px; background: #fff; }
.biz-note { font-size: 12px; line-height: 1.6; margin: 4px 0 10px; }
.biz-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #374151; background: #f6f8fa; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.ad-biz { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .ad-biz a { color: var(--green-dark); text-decoration: underline; font-size: 12px; }
@media (max-width: 720px) { .biz-kind { grid-template-columns: 1fr; } .biz-no-row { flex-direction: column; align-items: stretch; } .biz-no-row .btn { width: 100%; } }
.biz-box .field .biz-addr { display: flex; gap: 8px; margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.biz-box .field .biz-addr input { flex: 1; min-width: 0; width: auto; }
.biz-box .field .biz-addr .btn { flex-shrink: 0; height: 44px; }
.biz-box select { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; background: #fff; color: var(--text); outline: none; }
.biz-box select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,138,76,.12); }

/* ===== 상단 헤더: 로고(아이콘 + Sinfarm + 문구)와 메뉴가 화면 폭에 맞게 줄어들도록 ===== */
@media (max-width: 1600px) { .site-header .header-inner { gap: 20px; } .gnb a { padding: 20px 11px; } .search { width: 260px; } }
@media (max-width: 1480px) { .site-header .brand-sep, .site-header .brand-tag { display: none; } }
@media (max-width: 1360px) { .site-header .header-inner { gap: 18px; } .gnb a { padding: 20px 9px; font-size: 14.5px; } .search { width: 230px; } }
@media (max-width: 1240px) { .site-header .header-inner { gap: 12px; } .gnb { gap: 0; } .gnb a { padding: 20px 7px; font-size: 14px; } .search { width: 170px; } .user-links { gap: 10px; } .site-header .brand-word { height: 26px; } }
@media (min-width: 721px) and (max-width: 1100px) {
  .gnb, .search-wrap { display: none; }
  .user-links { margin-left: auto; }
  .m-actions { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
  .m-actions .m-btn[aria-label="장바구니"] { display: none; }
  .m-btn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: #1f2b3a; border-radius: 10px; }
  .menu-toggle { display: grid; margin-left: 0; }
  .gnb.open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(15,27,45,.12); z-index: 250; }
  .gnb.open a { padding: 14px 24px; border-bottom: 0; }
  .search-wrap.open { display: block; position: absolute; left: 0; right: 0; top: 64px; padding: 10px 24px 12px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(15,27,45,.12); z-index: 250; margin: 0; }
  .search-wrap.open .search { display: flex; width: 100%; }
  .site-header { position: sticky; } .header-inner { position: relative; }
}

/* ===== 로고 타이핑 애니메이션 ===== */
.brand-word-wrap { position: relative; display: block; line-height: 0; }
.brand-word { overflow: visible; }
.brand-word .wl, .brand-word .wl-leaf { transform-box: fill-box; }
.brand-word .wl { transform-origin: 50% 100%; transition: opacity .1s ease, transform .26s cubic-bezier(.3, 1.6, .5, 1); }
.brand-word .wl-leaf { transform-origin: 0% 100%; transition: opacity .18s ease, transform .55s cubic-bezier(.3, 1.8, .45, 1); }
.brand.is-typing .wl { opacity: 0; transform: translateY(10%) scale(.86); }
.brand.is-typing .wl-leaf { opacity: 0; transform: scale(.1) rotate(-40deg); }
.brand.is-typing .wl.on, .brand.is-typing .wl-leaf.on { opacity: 1; transform: none; }
.brand-caret { position: absolute; left: 0; top: 18%; width: 2px; height: 78%; border-radius: 2px; background: var(--green-dark); opacity: 0; pointer-events: none; transition: left .08s linear; }
.brand.is-typing .brand-caret.show { opacity: 1; animation: sf-caret .9s steps(1) infinite; }
.brand-tag.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: #4b5563; animation: sf-caret .9s steps(1) infinite; }
.brand.is-typing .brand-tag:not(.typing) { visibility: hidden; }
@keyframes sf-caret { 0% { visibility: visible; } 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .brand.is-typing .wl, .brand.is-typing .wl-leaf { opacity: 1; transform: none; } .brand-caret { display: none; } }

/* ===== 실시간 경매: 카테고리 바 · 카테고리 전체보기 · 카드 그리드 ===== */
.ax { margin-top: 16px; color: #e7edf5; }
.ax .ci { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; background: rgba(255,255,255,.08); }
.ax .ci.k-agri { color: #7ddc9f; } .ax .ci.k-sea { color: #8cc4ff; } .ax .ci.k-meat { color: #ffaf8f; }
.ax-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: #0f1c33; border: 1.5px solid rgba(64, 214, 128, .55); box-shadow: 0 0 0 4px rgba(64, 214, 128, .08), 0 0 26px rgba(64, 214, 128, .18); position: relative; z-index: 20; }
.ax-all { position: relative; flex-shrink: 0; }
.ax-all-btn, .ax-filter-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.ax-all-btn:hover, .ax-filter-btn:hover, .ax-all-btn[aria-expanded="true"], .ax-filter-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: rgba(64,214,128,.5); }
.ax-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.ax-chips::-webkit-scrollbar { display: none; }
.ax-chips button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #c9d3df; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.ax-chips button:first-child { padding-left: 12px; }
.ax-chips button em, .ax-mega em, .ax-cat-btn em, .ax-subs em { font-style: normal; font-size: 11px; font-weight: 700; color: #8796ab; }
.ax-chips button:hover { background: rgba(255,255,255,.06); color: #fff; }
.ax-chips button.on { background: rgba(64,214,128,.16); border-color: rgba(64,214,128,.6); color: #fff; box-shadow: 0 0 14px rgba(64,214,128,.25); }
.ax-chips button.on em { color: #9be7b6; }
.ax-chips .ci { width: 24px; height: 24px; }
.ax-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #9fb0c4; transition: border-color .15s, background .15s; margin-left: 6px; }
.ax-search:focus-within { border-color: rgba(64,214,128,.7); background: rgba(255,255,255,.09); }
.ax-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.ax-search input::placeholder { color: #8293a8; }
.ax-search input::-webkit-search-cancel-button { display: none; }
.ax-search .x { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ax-filter { position: relative; flex-shrink: 0; }
.ax-filter-btn i { font-style: normal; min-width: 18px; height: 18px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; display: inline-grid; place-items: center; padding: 0 5px; }
.ax-pop, .ax-mega { position: absolute; top: calc(100% + 8px); background: #13223d; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.45); padding: 14px; z-index: 40; }
.ax-pop { right: 0; width: 320px; display: flex; flex-direction: column; gap: 8px; }
.ax-pop b { font-size: 12px; color: #93a3b8; font-weight: 700; margin-top: 4px; }
.ax-pop .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-pop .opts button { border: 1px solid rgba(255,255,255,.14); background: transparent; color: #dbe3ee; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ax-pop .opts button.on { background: var(--green); border-color: var(--green); color: #fff; }
.ax-pop .acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.ax-pop .btn-outline { background: transparent; color: #dbe3ee; border-color: rgba(255,255,255,.25); }
.ax-mega { left: 0; width: min(720px, 90vw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
.ax-mega .col { display: flex; flex-direction: column; gap: 2px; }
.ax-mega button { text-align: left; border: 0; background: transparent; color: #c9d3df; font: inherit; font-size: 13px; padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.ax-mega button:hover, .ax-mega button.on { background: rgba(64,214,128,.12); color: #fff; }
.ax-mega .hd { font-size: 15px; font-weight: 800; color: #fff; padding: 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 8px 8px 0 0; }
.ax-view { display: flex; gap: 4px; flex-shrink: 0; }
.ax-view button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #c9d3df; display: grid; place-items: center; cursor: pointer; }
.ax-view button.on { background: var(--green); border-color: var(--green); color: #fff; }

.ax-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ax-side { background: #0f1c33; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px 12px; position: sticky; top: 80px; }
.ax-side .hd { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
.ax-side .hd b { font-size: 15px; color: #fff; }
.ax-side .hd button { border: 0; background: transparent; color: #93a3b8; font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 6px; }
.ax-side .hd button.on { color: #9be7b6; }
.ax-cat { border-radius: 12px; transition: background .15s; }
.ax-cat-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border: 0; background: transparent; color: #e7edf5; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border-radius: 12px; }
.ax-cat-btn .n { flex: 1; text-align: left; }
.ax-cat-btn .arr { color: #6f8097; transition: transform .2s; display: inline-flex; }
.ax-cat-btn .ci { width: 32px; height: 32px; }
.ax-cat-btn:hover { background: rgba(255,255,255,.05); }
.ax-cat-btn.on { background: rgba(64,214,128,.14); }
.ax-cat.open .arr { transform: rotate(90deg); }
.ax-subs { display: none; flex-direction: column; padding: 2px 0 8px 50px; gap: 1px; }
.ax-cat.open .ax-subs { display: flex; }
.ax-subs button { text-align: left; border: 0; background: transparent; color: #aab8c9; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; }
.ax-subs button:hover { color: #fff; background: rgba(255,255,255,.05); } .ax-subs button.on { color: #fff; background: rgba(64,214,128,.16); }
.ax-side-shop { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 8px 2px; border-top: 1px solid rgba(255,255,255,.08); color: #93a3b8; font-size: 13px; }
.ax-side-shop:hover { color: #fff; }

.ax-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ax-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.ax-head h2 small { font-size: 13px; color: #93a3b8; font-weight: 600; }
.ax-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-tags button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(64,214,128,.45); background: rgba(64,214,128,.1); color: #d9f5e3; border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ax-tags button.all { border-color: rgba(255,255,255,.2); background: transparent; color: #aab8c9; }
.ax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.ax-card { display: flex; flex-direction: column; background: #fff; color: var(--text); border-radius: 14px; padding: 8px 8px 10px; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s; outline: none; }
.ax-card[hidden] { display: none; }
.ax-card:hover, .ax-card:focus-visible { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.ax-card.on { box-shadow: 0 0 0 3px #40d680, 0 0 22px rgba(64,214,128,.5); }
.ax-card .thumb { position: relative; display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: #cfd8dc; margin-bottom: 8px; }
.ax-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.ax-card:hover .thumb img { transform: scale(1.07); }
.ax-card .thumb .badge-live, .ax-card .thumb .badge-wait { position: absolute; top: 7px; right: 7px; font-size: 10px; }
.ax-card .thumb .now { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(30,138,76,.92); padding: 3px 7px; border-radius: 6px; }
.ax-card .info { display: flex; flex-direction: column; min-width: 0; }
.ax-card .name { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-card .name mark { background: #d9f99d; color: inherit; border-radius: 3px; padding: 0 1px; }
.ax-card small { font-size: 11px; color: var(--muted); margin: 3px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-card .k { font-weight: 800; } .ax-card .k-agri { color: #1e8a4c; } .ax-card .k-sea { color: #1769d6; } .ax-card .k-meat { color: #b9472c; }
.ax-card .cur { font-size: 17px; font-weight: 900; } .ax-card .cur em { font-style: normal; font-size: 11px; color: var(--live); margin-left: 6px; font-weight: 700; }
.ax-card .left { font-size: 12px; color: var(--live); font-weight: 700; display: inline-flex; gap: 4px; align-items: center; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.ax-card .left.wait { color: #b26a00; }
.ax-card .btn { margin-top: auto; } .ax-card .btn.btn-on { background: #0f6b3a; }
.ax-promo { border-radius: 14px; background-size: cover; background-position: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 18px; min-height: 260px; color: #fff; }
.ax-promo[hidden] { display: none; }
.ax-promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,16,.1), rgba(8,24,16,.8)); }
.ax-promo > * { position: relative; } .ax-promo b { font-size: 17px; line-height: 1.45; word-break: keep-all; } .ax-promo .btn { align-self: flex-start; white-space: nowrap; padding: 10px 16px; font-size: 13.5px; }
.ax-empty { text-align: center; padding: 50px 20px; background: #0f1c33; border: 1px dashed rgba(255,255,255,.15); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ax-empty[hidden] { display: none; }
.ax-empty .ico { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; color: #93a3b8; }
.ax-empty b { font-size: 16px; color: #fff; } .ax-empty p { margin: 0 0 6px; color: #93a3b8; font-size: 13px; }

/* 경매가 없을 때 직거래 추천 (경매 카드와 같은 모양) */
.ax-reco[hidden] { display: none; }
.ax-reco-note { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; background: rgba(64,214,128,.08); border: 1px solid rgba(64,214,128,.22); color: #cfe9da; font-size: 13.5px; line-height: 1.5; }
.ax-reco-note svg { color: #40d680; flex: none; }
.ax-reco-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ax-reco-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-reco-head .more { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: #93a3b8; }
.ax-reco-head .more:hover { color: #fff; }
.ax-card .thumb .badge-shop { position: absolute; top: 7px; right: 7px; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 6px; background: #1e8a4c; color: #fff; }
.ax-card.ax-shop .cur em { color: var(--muted); font-weight: 600; }
.ax-card .left.ship { color: #1e8a4c; }

/* 목록 보기 */
.ax-grid[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
.ax-grid[data-view="list"] .ax-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px 120px 130px; align-items: center; gap: 16px; padding: 8px 14px 8px 8px; }
.ax-grid[data-view="list"] .ax-card .thumb { margin: 0; aspect-ratio: 4/3; }
.ax-grid[data-view="list"] .ax-card .name { font-size: 15px; white-space: normal; }
.ax-grid[data-view="list"] .ax-card .left { margin: 0; }
.ax-grid[data-view="list"] .ax-card .btn { margin: 0; }
.ax-grid[data-view="list"] .ax-promo { min-height: 120px; flex-direction: row; align-items: center; justify-content: space-between; }

@media (max-width: 1180px) { .ax-bar { flex-wrap: wrap; } .ax-search { order: 5; flex-basis: 100%; margin-left: 0; } .ax-body { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ax-body { grid-template-columns: 1fr; } .ax-side { display: none; }
  .ax-all { display: none; } .ax-chips { order: 1; flex-basis: 100%; }
  .ax-filter { order: 6; } .ax-view { order: 7; margin-left: auto; }
  .ax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ax-grid[data-view="list"] .ax-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "t i" "t c" "t l" "b b"; gap: 4px 12px; }
  .ax-grid[data-view="list"] .ax-card .thumb { grid-area: t; } .ax-grid[data-view="list"] .ax-card .info { grid-area: i; } .ax-grid[data-view="list"] .ax-card .cur { grid-area: c; } .ax-grid[data-view="list"] .ax-card .left { grid-area: l; } .ax-grid[data-view="list"] .ax-card .btn { grid-area: b; margin-top: 6px; }
  .ax-promo { min-height: 200px; } .ax-pop { width: min(320px, 86vw); }
}

/* 검색창 실시간 제안 */
.search-drop.has-q { grid-template-columns: 1fr; padding: 10px; max-height: min(70vh, 640px); overflow: auto; }
.search-drop.has-q .sd-col { display: none; }
.sd-results { display: flex; flex-direction: column; gap: 2px; }
.sd-results[hidden] { display: none; }
.sd-sec { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 4px; font-size: 12px; font-weight: 800; color: var(--muted); }
.sd-sec small { font-weight: 500; }
.sd-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; color: var(--text); }
.sd-item:hover, .sd-item.sel { background: #f3f6f4; }
.sd-item .th { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #e5e7eb; }
.sd-item .th img { width: 100%; height: 100%; object-fit: cover; }
.sd-item .th i { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 9px; font-weight: 900; color: #fff; background: var(--live); text-align: center; }
.sd-item .tx { display: flex; flex-direction: column; min-width: 0; }
.sd-item .tx b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item .tx b mark { background: #d9f99d; color: inherit; border-radius: 3px; padding: 0 1px; }
.sd-item .tx small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-item .tx small em { font-style: normal; font-weight: 800; } .sd-item .k-agri { color: #1e8a4c; } .sd-item .k-sea { color: #1769d6; } .sd-item .k-meat { color: #b9472c; }
.sd-item .pr { font-size: 14px; font-weight: 900; white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.sd-item .pr small { font-size: 11px; font-weight: 500; color: var(--muted); }
.sd-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px 4px; }
.sd-cat { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--green-light); color: var(--green-dark); }
.sd-cat.sel, .sd-cat:hover { background: var(--green); color: #fff; }
.sd-all { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; padding: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--green-dark); border-radius: 0 0 10px 10px; }
.sd-all:hover, .sd-all.sel { background: #f3f6f4; }
.sd-none, .sd-loading { padding: 20px 10px; text-align: center; font-size: 13px; color: #374151; display: flex; flex-direction: column; gap: 4px; }
.sd-none small { color: var(--muted); }
@media (max-width: 720px) { .search-drop.has-q { padding: 0; max-height: 62vh; } .sd-item { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 6px 4px; } .sd-item .th { width: 44px; height: 44px; } }
.mk-card.mk-empty { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; padding: 22px; background: #fafbfa; border-style: dashed; }
.mk-card.mk-empty[hidden] { display: none; }
.mk-empty .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--muted); flex-shrink: 0; }
.mk-empty > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mk-empty b { font-size: 15px; } .mk-empty small { font-size: 13px; color: var(--muted); }
.mk-empty em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--green-dark); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 720px) { .mk-card.mk-empty { flex-wrap: wrap; } .mk-empty em { width: 100%; } }

/* 판매자 상품 등록: 분류별 상품 정보 */
.sc-spec { margin-top: 4px; }
.sc-spec h4 { display: flex; align-items: center; gap: 6px; }
.sc-spec h4 svg { color: var(--green); }
.sc-spec[data-kind-only="sea"] h4 svg { color: #1769d6; } .sc-spec[data-kind-only="meat"] h4 svg { color: #b9472c; }
.sc-spec-note { margin: -2px 0 12px; font-size: 12px; line-height: 1.6; }
.pd-specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.pd-specs span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1f5f2; color: #2b3a33; border: 1px solid var(--line); }

/* =====================================================================
   모바일 앱형 디자인 (헤더 · 햄버거 서랍 · 홈 · 상품 상세 · 경매 상세)
   ===================================================================== */
.m-back, .ma-only { display: none; }
@media (max-width: 720px) { .d-only { display: none !important; } }
@media (min-width: 721px) { .m-only { display: none !important; } }

/* ----- 햄버거 서랍 (모든 화면 공용, 열렸을 때만 보임) ----- */
.m-drawer { position: fixed; inset: 0; z-index: 1200; }
.m-drawer[hidden] { display: none; }
.md-dim { position: absolute; inset: 0; background: rgba(8, 20, 14, .45); opacity: 0; transition: opacity .25s; }
.md-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 380px); background: #fff; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); transform: translateX(100%); transition: transform .3s cubic-bezier(.22, .61, .36, 1); box-shadow: -14px 0 40px rgba(0, 0, 0, .18); border-radius: 20px 0 0 20px; }
.m-drawer.show .md-dim { opacity: 1; }
.m-drawer.show .md-panel { transform: none; }
html.md-lock, html.md-lock body { overflow: hidden; }
.md-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.md-brand { display: flex; align-items: center; gap: 10px; }
.md-brand .w { display: flex; flex-direction: column; gap: 3px; line-height: 0; }
.md-brand .w svg { height: 28px; width: auto; }
.md-brand small { font-size: 12px; color: #4b5563; line-height: 1.2; letter-spacing: -.2px; }
.md-x { width: 40px; height: 40px; border: 0; background: transparent; color: #1f2b3a; display: grid; place-items: center; border-radius: 12px; margin: -4px -8px 0 0; cursor: pointer; }
.md-x:active { background: var(--bg); }
.md-login { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 14px; background: var(--green); color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(30, 138, 76, .25); }
.md-benefit, .md-me { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #eaf6ee; color: var(--green-dark); margin-bottom: 14px; }
.md-benefit .i { color: var(--green); display: grid; }
.md-benefit .t, .md-me .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-benefit b, .md-me b { font-size: 14.5px; color: #14532d; }
.md-benefit small, .md-me small { font-size: 12px; color: #3f6b50; line-height: 1.45; }
.md-me { margin-bottom: 8px; }
.md-me .av { width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex-shrink: 0; }
.md-pts { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; font-size: 13px; color: #374151; }
.md-pts span { display: inline-flex; align-items: center; gap: 6px; flex: 1; } .md-pts span svg { color: #d4a017; }
.md-pts b { font-size: 16px; font-weight: 900; color: var(--text); }
.md-pts em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--green); padding: 4px 10px; border-radius: 999px; background: var(--green-light); }
.md-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.md-quick a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border-radius: 14px; background: #f2f8f4; font-size: 12.5px; font-weight: 600; color: #1f2b3a; transition: background .15s; }
.md-quick a:active { background: #e3f1e7; }
.md-quick .i { position: relative; color: var(--green); display: grid; }
.md-quick .i em { position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.md-quick .i em[hidden] { display: none; }
.md-list { border-top: 1px solid var(--line); padding: 6px 0; }
.md-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; font-size: 15px; font-weight: 600; color: #1f2b3a; }
.md-row .i { color: #2b3a33; display: grid; }
.md-row .t { flex: 1; min-width: 0; }
.md-row > svg:last-child { color: #a0a8b2; }
.md-row.on, .md-row.on .i { color: var(--green); }
.md-row:active { background: #f6f8f7; }
.md-promo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 16px 12px 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #eef8f0, #dcefe2); color: var(--green-dark); }
.md-promo .t { display: flex; flex-direction: column; gap: 3px; }
.md-promo b { font-size: 15px; color: #14532d; } .md-promo small { font-size: 12px; color: #3f6b50; }
.md-promo .sprout { flex-shrink: 0; }

@media (max-width: 720px) {
  /* ----- 헤더: 로고 / 검색 / 알림 / 메뉴 ----- */
  .site-header { border-bottom: 0; box-shadow: 0 1px 0 rgba(15, 27, 45, .06); }
  .header-inner { height: 60px; gap: 6px; padding: 0 12px 0 16px; }
  .brand-mark, .brand-mark svg { width: 38px; height: 38px; }
  .brand-word { height: 28px; }
  .m-actions { gap: 0; }
  .m-btn { width: 42px; height: 42px; color: #111827; }
  .m-btn em { top: 4px; right: 4px; min-width: 17px; height: 17px; font-size: 10px; border: 2px solid #fff; box-sizing: content-box; }
  .m-back { display: grid; place-items: center; width: 34px; height: 42px; margin-left: -8px; color: #111827; }
  .search-wrap.open { top: 60px; }

  /* ----- 하단 탭바 ----- */
  .m-tabbar { height: 64px; border-top: 1px solid #edf0f2; box-shadow: 0 -4px 18px rgba(15, 27, 45, .05); }
  .m-tabbar a { font-size: 11px; color: #6b7280; gap: 4px; }
  .m-tabbar a.on { color: var(--green); font-weight: 800; }
  .m-tabbar a.on .i::after { display: none; }
  .m-tabbar a.on .i svg { fill: rgba(30, 138, 76, .16); }
  .m-tabbar em { top: -7px; right: -10px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* ----- 홈 ----- */
  .home .hero, .hero { display: none; }
  .m-hero { position: relative; display: block; }
  .mh-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mh-track::-webkit-scrollbar { display: none; }
  .mh-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 292px; padding: 26px 20px 46px; color: #fff; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; }
  .mh-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 26, 40, .82) 0%, rgba(8, 26, 40, .55) 55%, rgba(8, 26, 40, .15) 100%); }
  .mh-slide > * { position: relative; }
  .mh-slide .eyebrow { margin: 0 0 8px; font-size: 13px; line-height: 1.5; opacity: .92; }
  .mh-slide h2 { margin: 0 0 16px; font-size: 26px; line-height: 1.32; font-weight: 900; letter-spacing: -.8px; }
  .mh-slide h2 em { font-style: normal; color: #7be3a0; }
  .mh-slide .badge-live { align-self: flex-start; margin-bottom: 10px; }
  .mh-p { margin: -6px 0 16px; font-size: 13px; line-height: 1.55; opacity: .9; }
  .mh-feats { display: flex; gap: 0; list-style: none; margin: 0 0 18px; padding: 0; }
  .mh-feats li { display: flex; align-items: center; gap: 7px; font-size: clamp(10.5px, 3vw, 11.5px); line-height: 1.3; padding: 0 clamp(6px, 2.4vw, 10px); border-left: 1px solid rgba(255, 255, 255, .3); white-space: nowrap; }
  .mh-feats li br { display: block; }
  .mh-feats li:first-child { padding-left: 0; border-left: 0; }
  .mh-feats .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex-shrink: 0; }
  .mh-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--green); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
  .mh-dots { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 7px; }
  .mh-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; transition: background .2s, width .2s; }
  .mh-dots button.on { background: #fff; }

  .m-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 12px 4px; }
  .m-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 2px 11px; border-radius: 14px; background: #fff; border: 1px solid #e8ece9; box-shadow: 0 2px 8px rgba(15, 27, 45, .04); font-size: 12.5px; font-weight: 700; color: #1f2b3a; }
  .m-quick .i { color: var(--green); display: grid; }
  .m-quick a:active { background: #f2f8f4; }

  .m-live { display: block; margin: 12px 12px 0; padding: 14px; border-radius: 16px; background: #101c2e; color: #fff; box-shadow: 0 10px 24px rgba(15, 27, 45, .18); }
  .ml-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .ml-top .vw { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #c7d0dc; }
  .ml-timer { margin-left: auto; font-size: 17px; font-weight: 900; color: #ff6b6b; padding: 4px 12px; border: 1.5px solid rgba(255, 107, 107, .7); border-radius: 10px; font-variant-numeric: tabular-nums; }
  .ml-body { display: grid; grid-template-columns: clamp(84px, 26vw, 104px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .ml-body img { width: 100%; height: 84px; object-fit: cover; border-radius: 10px; background: #243654; }
  .ml-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .ml-info .n { font-size: 16px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
  .ml-info .p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .ml-info .p > span { font-size: clamp(18px, 5.6vw, 22px); font-weight: 900; color: #ff6b6b; white-space: nowrap; }
  .ml-info .p em { font-style: normal; font-size: 12px; color: #ff8a80; display: inline-flex; align-items: center; gap: 2px; }
  .ml-btn { display: inline-flex; align-items: center; gap: 0; height: 38px; padding: 0 8px 0 12px; border-radius: 999px; border: 1.5px solid #4ade80; color: #4ade80; font-size: 14px; font-weight: 800; white-space: nowrap; }
  .ml-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; color: #aab5c3; }
  .ml-foot span { display: inline-flex; align-items: center; gap: 5px; }
  .ml-foot i { width: 1px; height: 11px; background: rgba(255, 255, 255, .2); }

  .section-head .more.m-only { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #6b7280; }
  .carousel .track.cat-row { --per: 4.4 !important; --gap: 10px; gap: 10px; padding-bottom: 6px; }
  .cat-card { padding: 0; border: 0; background: transparent; box-shadow: none; text-align: center; }
  .cat-card:hover { transform: none; box-shadow: none; }
  .cat-card img { aspect-ratio: 1 / 1; border-radius: 12px; margin: 0 0 7px; }
  .cat-card b { display: block; font-size: 12.5px; font-weight: 700; }
  .cat-card .d { display: none; }
  .app-banner-m { display: none; }
  .carousel .car-btn { display: none; }

  .mk-home .section-head h2 { font-size: 18px; }
  .mk-home .mk-sub { display: none; }
  .mk-home .mk-grid { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 8px; scroll-padding-left: 20px; }
  .mk-home .mk-grid::-webkit-scrollbar { display: none; }
  .mk-home .mk-card { flex: 0 0 44%; scroll-snap-align: start; padding: 12px; }
  .mk-home .mk-mid { flex-wrap: wrap; gap: 2px 6px; } .mk-home .mk-mid strong { font-size: 19px; }
  .mk-home .mk-card.mk-empty { flex-basis: 100%; }

  /* ----- 상품 상세 ----- */
  .pd .crumb { display: none; }
  .pd > .container { padding-top: 0; }
  .pd-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .footer-links { flex-wrap: wrap; gap: 8px 14px; }
  .pd-left, .pd-right { display: contents; }
  .pd-left > *, .pd-right > * { order: 6; }
  .pd-gallery { order: 1; display: block; margin: 0 -20px; }
  .pd-gallery .thumbs { display: none; }
  .pd-gallery .main { border-radius: 0; aspect-ratio: 1 / .78; }
  .pd-gallery .main::after { background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 26%, transparent 72%, rgba(0, 0, 0, .28)); }
  .pd-gallery .ov-top, .pd-gallery .ov-copy { display: none; }
  .pd-gallery .ov-bottom { left: auto !important; right: 12px; bottom: 12px; }
  .pd-gallery .ov-bottom > span { display: none; }
  .pd-gallery .ov-bottom .cnt { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: rgba(17, 24, 39, .6); }
  .m-gal-top { left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; }
  .m-gal-top .r { display: flex; gap: 8px; }
  .mg-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(17, 24, 39, .45); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); cursor: pointer; }
  .mg-btn.on svg { fill: #ff5a5f; stroke: #ff5a5f; }
  .m-gal-badges { left: 12px; bottom: 12px; display: flex; gap: 6px; }
  .m-gal-badges span { font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: #fff; color: #374151; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
  .m-gal-badges .g { background: var(--green); color: #fff; }
  .m-gal-badges .lv { background: var(--live); color: #fff; }

  .pd-buy { order: 2; position: static; border: 0; border-radius: 0; padding: 18px 0 20px; margin: 0; box-shadow: none; background: transparent; }
  .pd-buy .tags { display: none; }
  .m-kind { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--accent-dark, var(--green-dark)); margin-bottom: 6px; }
  .m-kind svg { color: var(--accent, var(--green)); }
  .m-kind em { font-style: normal; font-weight: 600; color: #6b7280; font-size: 13px; }
  .m-kind em::before { content: ""; display: inline-block; width: 1px; height: 11px; background: #d1d5db; margin: 0 8px 0 2px; vertical-align: -1px; }
  .pd-buy h1 { font-size: 24px; line-height: 1.3; letter-spacing: -.6px; margin: 0 0 6px; }
  .pd-buy h1 .org { display: none; }
  .pd-buy .sub { font-size: 14.5px; color: #4b5563; margin: 0 0 10px; }
  .pd-buy .rating { font-size: 14px; margin-bottom: 12px; }
  .pd-buy .price { margin: 0 0 14px; align-items: center; }
  .pd-buy .price b { font-size: 32px; letter-spacing: -1px; }
  .pd-buy .price s { font-size: 15px; }
  .pd-buy .price em { font-style: normal; font-size: 13px; font-weight: 800; color: #fff; background: var(--live); padding: 4px 9px; border-radius: 7px; }
  .m-ship { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 12px; background: #eaf6ee; color: var(--green-dark); margin-bottom: 14px; }
  .m-ship b { font-size: 14.5px; } .m-ship small { font-size: 12px; color: #4b6b57; font-weight: 500; }
  .m-trust { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .m-trust > div { display: flex; align-items: center; gap: 6px; padding: 0 5px; border-left: 1px solid var(--line); min-width: 0; }
  .m-trust > div:first-child { border-left: 0; padding-left: 0; }
  .m-trust .i { width: 30px; height: 30px; border-radius: 50%; background: #eaf6ee; color: var(--green); display: grid; place-items: center; flex-shrink: 0; }
  .m-trust b { display: block; font-size: 12.5px; white-space: nowrap; }
  .m-trust small { display: block; font-size: 10.5px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-trust > div > span:last-child { min-width: 0; }
  .pd-buy .pd-return { font-size: 12px; margin: 0 0 14px; }
  .pd-buy .qty { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .pd-buy .qty > span { display: none; }
  .pd-buy .qty > div { display: flex; align-items: center; height: 48px; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
  .pd-buy .qty > div button { width: 46px; height: 46px; font-size: 22px; background: #fff; border: 0; }
  .pd-buy .qty > div input { width: 52px; height: 46px; font-size: 17px; font-weight: 700; border: 0; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; text-align: center; }
  .pd-buy .qty b { display: flex; flex-direction: column; align-items: flex-end; font-size: 24px; font-weight: 900; color: var(--green-dark); }
  .pd-buy .qty b::before { content: "총 상품금액"; font-size: 12.5px; font-weight: 600; color: #4b5563; margin-bottom: 2px; }
  .pd-buy .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pd-buy .cta .btn { height: 54px; font-size: 17px; border-radius: 12px; gap: 6px; }
  .pd-buy .cta .btn-outline { border: 1.5px solid var(--green); color: var(--green-dark); background: #fff; }
  .pd-feats { display: none; }
  .pd-tabs { order: 3; position: sticky; top: 60px; z-index: 20; margin: 0 -20px; padding: 0 8px; background: #fff; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .pd-tabs button { background: transparent !important; color: #6b7280 !important; border-radius: 0; height: 50px; font-size: 14px; font-weight: 700; border-bottom: 2.5px solid transparent; padding: 0 2px; }
  .pd-tabs button.on { color: var(--green-dark) !important; border-bottom-color: var(--green); }
  .pd-pane { order: 4; padding-top: 14px; }
  .pd-banner { margin: 0 0 14px; border-radius: 14px; }

  /* ----- 경매 상세 (흰 화면) ----- */
  .studio.is-detail { background: #fff; color: var(--text); padding: 0 0 20px; }
  .studio.is-detail .studio-wrap { padding: 0; }
  .studio.is-detail .studio-grid { gap: 0; }
  .studio.is-detail .st-player { border-radius: 0; aspect-ratio: 16 / 10; }
  .studio .st-title, .studio .st-now { display: none; }
  .studio.is-detail .st-top { top: 12px; left: 12px; gap: 8px; }
  .studio.is-detail .badge-live.big { font-size: 13px; padding: 5px 10px; }
  .studio.is-detail .viewers { font-size: 12px; padding: 5px 9px; }
  .studio.is-detail .st-bid { background: transparent; border: 0; border-radius: 0; padding: 16px 16px 6px; gap: 12px; }
  .studio.is-detail .st-head, .studio.is-detail .st-product { display: none; }
  .studio.is-detail .ma-sum { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
  .ma-sum img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: #e5e7eb; }
  .ma-sum .t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
  .ma-sum .pill { align-self: flex-start; font-size: 11.5px; font-weight: 800; color: var(--green-dark); background: var(--green-light); padding: 3px 9px; border-radius: 999px; margin-bottom: 2px; }
  .ma-sum b { font-size: 20px; font-weight: 900; letter-spacing: -.5px; line-height: 1.25; }
  .ma-sum small { font-size: 13px; color: #374151; }
  .ma-sum small.f { display: inline-flex; align-items: center; gap: 4px; color: #6b7280; font-size: 12.5px; }
  .ma-sum .acts { display: flex; gap: 2px; }
  .ma-sum .acts button { width: 36px; height: 36px; border: 0; background: transparent; color: #374151; display: grid; place-items: center; border-radius: 10px; }
  .ma-sum .acts button.on svg { fill: #ff5a5f; stroke: #ff5a5f; }
  .studio.is-detail .ma-box { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 0; border-radius: 14px; background: #eef8f1; border: 1px solid #d6eedd; }
  .ma-box > div { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
  .ma-box > div + div { border-left: 1px solid #cfe5d6; }
  .ma-box small { font-size: 13px; color: #374151; font-weight: 600; }
  .ma-box b[data-current] { font-size: 28px; font-weight: 900; color: var(--green-dark); letter-spacing: -1px; white-space: nowrap; }
  .ma-box .t { display: inline-flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 900; color: #e53935; font-variant-numeric: tabular-nums; }
  .ma-box .t i { font-style: normal; }
  .studio.is-detail .ma-meta { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13.5px; color: #374151; padding: 2px 0; }
  .ma-meta span { display: inline-flex; align-items: center; gap: 5px; } .ma-meta b { font-weight: 800; color: var(--text); }
  .ma-meta i { width: 1px; height: 13px; background: #d1d5db; }
  .studio.is-detail .bid-box { display: flex; flex-direction: column; gap: 10px; background: transparent; padding: 0; border-radius: 0; }
  .studio.is-detail .bid-input { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 10px 0 16px; border: 1px solid #dfe3e7; border-radius: 16px; background: #fff; }
  .studio.is-detail .bid-input .lbl { display: block; font-size: 14px; font-weight: 700; color: #374151; white-space: nowrap; margin-right: auto; }
  .studio.is-detail .bid-input button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #eef1f4; color: #374151; display: grid; place-items: center; flex-shrink: 0; }
  .studio.is-detail .bid-input input { width: 0; flex: 1; max-width: 150px; height: 44px; border: 0; background: transparent; color: var(--text); text-align: right; font-size: 22px; font-weight: 900; padding: 0; }
  .studio.is-detail .bid-input > span:not(.lbl) { color: var(--text); font-size: 18px; font-weight: 800; margin-right: 6px; }
  .studio.is-detail .btn-bid { height: 58px; border-radius: 14px; font-size: 19px; gap: 8px; box-shadow: 0 8px 18px rgba(30, 138, 76, .22); }
  .studio.is-detail .btn-buyout { background: #fff; color: #b45309; border: 1.5px solid #f59e0b; }
  .studio.is-detail .bid-box .hint { color: #6b7280; font-size: 11.5px; line-height: 1.55; }
  .studio.is-detail .st-bids { background: #f6f8f7; color: var(--text); }
  .studio.is-detail .st-bids li.top { background: #e3f1e7; }
  .studio.is-detail .st-bids li span, .studio.is-detail .st-bids li em { color: #6b7280; }
  .studio.is-detail .st-chat { margin: 10px 16px 0; background: #f4f6f8; border: 0; border-radius: 16px; }
  .studio.is-detail .ma-chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; }
  .ma-chat-head .i { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
  .ma-chat-head b { font-size: 15px; font-weight: 800; }
  .ma-chat-head button { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: #6b7280; font-size: 12.5px; cursor: pointer; }
  .studio.is-detail .st-tabs, .studio.is-detail .st-chat [data-pane="info"] { display: none !important; }
  .studio.is-detail .st-chat ul { max-height: 170px; padding: 2px 14px 6px; overflow-y: auto; }
  .studio.is-detail .st-chat.expanded ul { max-height: 420px; }
  .studio.is-detail .st-chat li { align-items: center; gap: 8px; padding: 6px 0; border-bottom: 0; }
  .studio.is-detail .st-chat .av { width: 26px; height: 26px; font-size: 12px; background: #dbe7f5; color: #1d4f91; }
  .studio.is-detail .st-chat li > div { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .studio.is-detail .st-chat li b { order: 1; margin: 0; font-size: 12.5px; color: #374151; white-space: nowrap; }
  .studio.is-detail .st-chat li p { order: 2; margin: 0; color: var(--text); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .studio.is-detail .st-chat li time { order: 3; font-size: 11px; color: #9ca3af; }
  .studio.is-detail .st-chat .chat-input { border-top: 1px solid #e5e7eb; padding: 10px 12px 12px; }
  .studio.is-detail .st-chat .chat-input input { background: #fff; color: var(--text); border: 1px solid #e0e4e8; }
  .studio.is-detail .ma-reco { display: block; padding: 22px 16px 4px; }
  .ma-reco .h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .ma-reco .h b { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; } .ma-reco .h b svg { color: var(--green); }
  .ma-reco .h a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #6b7280; }
  .ma-reco .row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px; padding: 0 16px 4px; }
  .studio.is-detail .st-chat li.sys { display: block; padding: 4px 0; }
  .studio.is-detail .st-chat .sysmsg { color: #166b3a; background: #e3f1e7; font-size: 12px; font-weight: 600; }
  .ma-reco .row::-webkit-scrollbar { display: none; }
  .ma-reco .row a { flex: 0 0 31%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
  .ma-reco .row img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #e5e7eb; }
  .ma-reco .row b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ma-reco .row span { font-size: 13.5px; font-weight: 800; }
  .studio.is-detail .st-list { margin: 18px 16px 0; background: #f6f8f7; border: 0; color: var(--text); }
  .studio.is-detail .st-list-head h2 { color: var(--text); }
}