/* ══════════════════════════════════════════
   LAYOUT — NAV / HERO / GRIDS / FOOTER
══════════════════════════════════════════ */

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.nav.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.22)}

/* 상단줄: 로고 + 검색 + 액션 */
.nav__top{
  display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s6);height:58px;
}
.nav__logo{
  font-size:18px;
  font-weight:900;
  color:#fff;
  letter-spacing:-0.5px;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:var(--s2);
  white-space:nowrap;
  min-width:max-content;
}
.nav__logo em{color:#6ee7b7;font-style:normal}
.nav__logo-fee{
  font-size:10px;
  font-weight:700;
  color:rgba(255,255,255,.55);
  letter-spacing:0;
  padding:2px 6px;
  border:1px solid rgba(110,231,183,.35);
  border-radius:4px;
  margin-left:4px;
  white-space:nowrap;
}
.nav__searchbar{
  flex:1;
  min-width:0;
  max-width:360px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);overflow:hidden;transition:all var(--fast);
}
.nav__searchbar:focus-within{background:rgba(255,255,255,.18);border-color:rgba(110,231,183,.5)}
.nav__search-inp{
  flex:1;background:none;border:none;outline:none;
  padding:9px 14px;color:#fff;font-size:13px;font-family:var(--f);
}
.nav__search-inp::placeholder{color:rgba(255,255,255,.45)}
.nav__search-btn{
  background:none;border:none;padding:9px 12px;
  cursor:pointer;color:rgba(255,255,255,.65);transition:color var(--fast);
  display:flex;align-items:center;
}
.nav__search-btn:hover{color:#6ee7b7}
.nav__search-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.nav__actions{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;margin-left:auto}

/* NAV 아이콘 버튼 — 흰배경 오버라이드 */
.nav .icon-btn{
  width:36px;height:36px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.8);
}
.nav .icon-btn:hover{background:rgba(255,255,255,.22);color:#6ee7b7;border-color:rgba(110,231,183,.4)}
.nav .icon-btn__dot{border-color:var(--brand)}

/* 로그인/사전신청 버튼 */
.nav-btn-login{
  background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.25);
  font-size:12px;font-weight:700;padding:7px 14px;
  border-radius:var(--radius);cursor:pointer;transition:all var(--fast);
  font-family:var(--f);
}
.nav-btn-login:hover{background:rgba(255,255,255,.25)}
/* 사전신청 = 3% 그린 */
.nav-btn-join{
  background:var(--three);color:#fff;
  border:none;font-size:12px;font-weight:800;
  padding:7px 16px;border-radius:var(--radius);
  cursor:pointer;transition:all var(--fast);font-family:var(--f);
}
.nav-btn-join:hover{background:var(--three-d);transform:translateY(-1px)}

/* 하단 메뉴바 */
.nav__bottom{
  background:rgba(0,0,0,.2);border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;height:38px;padding:0 var(--s6);
}
.nav__links{display:flex;align-items:center;list-style:none;height:100%}
.nav__item{position:relative;height:100%}
.nav__link,.nav__trigger{
  display:flex;align-items:center;gap:4px;height:100%;
  padding:0 var(--s3);font-size:13px;font-weight:600;
  color:rgba(255,255,255,.72);cursor:pointer;
  background:none;border:none;font-family:var(--f);white-space:nowrap;
  transition:color var(--fast),background var(--fast);
  border-bottom:2px solid transparent;
}
.nav__link:hover,.nav__trigger:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav__link.act{color:#6ee7b7;border-bottom-color:#6ee7b7}
.nav__arr{font-size:9px;opacity:.55;transition:transform var(--fast)}
.nav__item:hover .nav__arr{transform:rotate(180deg)}
.nav__dropdown{
  position:absolute;top:calc(100% + 4px);left:0;min-width:170px;
  background:#fff;border:1px solid var(--border);
  box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all var(--fast);z-index:10;
}
.nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dd-link{
  display:block;padding:10px 16px;font-size:13px;font-weight:500;
  color:var(--text-sub);border-bottom:1px solid var(--border);
  transition:all var(--fast);cursor:pointer;
}
.nav__dd-link:last-child{border-bottom:none}
.nav__dd-link:hover{color:var(--three);background:var(--three-l);padding-left:20px}

/* 햄버거 */
.nav__hbg{
  display:none;flex-direction:column;gap:4px;
  background:none;border:none;cursor:pointer;
  padding:var(--s2);min-width:36px;min-height:36px;
  align-items:center;justify-content:center;
}
.nav__bar{width:20px;height:2px;background:#fff;border-radius:2px;transition:all var(--fast)}
.nav__hbg.open .nav__bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__hbg.open .nav__bar:nth-child(2){opacity:0}
.nav__hbg.open .nav__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hide-mobile{display:flex}

/* ── MOBILE DRAWER ── */
.drawer{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:#fff;z-index:var(--z-drawer);
  transform:translateX(-100%);transition:transform .25s ease;
  overflow-y:auto;padding:var(--s5);
}
.drawer.open{transform:translateX(0)}
.drawer__link{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) 0;font-size:15px;font-weight:700;border-bottom:1px solid var(--border);cursor:pointer;min-height:48px;color:var(--text)}
.drawer__link em{font-size:11px;color:var(--text-mute);font-style:normal}
.drawer__sec{font-size:11px;font-weight:700;color:var(--text-mute);margin:var(--s4) 0 var(--s2);letter-spacing:.5px}
.drawer__sub{display:flex;align-items:center;padding:var(--s2) var(--s2);font-size:13px;color:var(--text-sub);border-bottom:1px solid var(--border);cursor:pointer;min-height:40px;border-radius:6px;margin-bottom:2px}
.drawer__sub:hover{background:var(--three-l);color:var(--three)}
.drawer__actions{display:flex;gap:var(--s3);margin-top:var(--s5)}
.drawer__actions .btn{flex:1}

/* ── SEARCH OVERLAY ── */
.search-ov{position:fixed;inset:0;background:rgba(30,58,95,.9);backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;flex-direction:column;align-items:center;padding-top:var(--s16);opacity:0;visibility:hidden;transition:all var(--base)}
.search-ov.open{opacity:1;visibility:visible}
.search-inner{width:100%;max-width:560px;padding:0 var(--s5)}
.search-row{display:flex;align-items:center;background:#fff;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--s5);box-shadow:var(--shadow-lg)}
.search-inp{flex:1;background:none;border:none;outline:none;font-family:var(--f);font-size:18px;color:var(--text);padding:var(--s3) var(--s4)}
.search-inp::placeholder{color:var(--text-mute)}
.search-close{background:none;border:none;color:var(--text-sub);font-size:22px;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
.search-label{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:var(--s2);letter-spacing:.5px}
.search-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.search-chip{padding:6px 14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12px;color:#fff;cursor:pointer;transition:all var(--fast);border-radius:20px}
.search-chip:hover{background:rgba(110,231,183,.25);border-color:#6ee7b7;color:#6ee7b7}

/* ── PAGE SYSTEM ── */
.page{display:none;min-height:100vh;padding-top:var(--nav-h)}
.page.active{display:block;animation:pgIn .22s ease}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.page-hd{background:#fff;border-bottom:1px solid var(--border)}
.page-hd__inner{max-width:var(--max-w);margin:0 auto;padding:var(--s5) var(--s5)}
.page-hd__title{font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:var(--s2)}
.page-hd__title::before{content:'';width:4px;height:20px;background:var(--three);border-radius:2px}

/* ══════════════════════════════════════════
   HERO — 데이터 + 거래 + 수익 플랫폼
   구조: 좌측 텍스트+KPI / 우측 피드
══════════════════════════════════════════ */
.hero{
  min-height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:1fr 400px;
  background:var(--bg);
}

/* 히어로 좌측 */
.hero__content{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s12) var(--s8);
}
.hero__eye{
  display:flex;align-items:center;gap:var(--s2);
  font-size:11px;font-weight:700;color:var(--three);
  margin-bottom:var(--s4);letter-spacing:.8px;
}
.hero__eye::before{content:'';width:3px;height:12px;background:var(--three);border-radius:2px}
.hero__title{
  font-size:clamp(28px,3.8vw,46px);font-weight:900;
  color:var(--text);line-height:1.2;margin-bottom:var(--s4);
  word-break:keep-all;
}
.hero__title .text-three{color:var(--three)}
.hero__sub{
  font-size:14px;line-height:1.8;color:var(--text-sub);
  max-width:420px;margin-bottom:var(--s6);word-break:keep-all;
}
.hero__btns{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s6)}

/* KPI 카드 4개 */
.hero__kpi{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
}
.kpi-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s3) var(--s4);
  box-shadow:var(--shadow-sm);transition:all var(--fast);
}
.kpi-card:hover{border-color:var(--three);box-shadow:0 4px 12px rgba(5,150,105,.1);transform:translateY(-2px)}
.kpi-card__label{font-size:10px;font-weight:700;color:var(--text-mute);letter-spacing:.5px;margin-bottom:4px}
.kpi-card__value{font-size:20px;font-weight:900;color:var(--text);line-height:1}
.kpi-card__change{font-size:11px;font-weight:600;margin-top:3px}
.kpi-card__change.up{color:var(--three)}
.kpi-card__change.fixed{color:var(--three)}
.kpi-card__change.dn{color:var(--red)}
/* KPI 첫번째: 3% 강조 */
.kpi-card--three{
  background:var(--three);border-color:var(--three);
}
.kpi-card--three .kpi-card__label{color:rgba(255,255,255,.75)}
.kpi-card--three .kpi-card__value{color:#fff;font-size:26px}
.kpi-card--three .kpi-card__change{color:rgba(255,255,255,.85)}

/* 히어로 라이브 */
.hero__live{display:flex;align-items:center;gap:var(--s2);font-size:12px;color:var(--text-mute)}
.live-dot{width:7px;height:7px;background:var(--red);border-radius:50%;animation:ldPulse 1.4s infinite;flex-shrink:0}
@keyframes ldPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ── 히어로 피드 패널 ── */
.hero__feed{
  background:#fff;border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  min-height:calc(100vh - var(--nav-h));
  box-shadow:-2px 0 8px rgba(0,0,0,.04);
}
.feed-hd{
  padding:var(--s3) var(--s4);border-bottom:2px solid var(--three);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--bg-soft);
}
.feed-hd__t{font-size:13px;font-weight:800;color:var(--text)}
.feed-hd__live{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red)}
.feed-hd__live span{width:6px;height:6px;background:var(--red);border-radius:50%;animation:ldPulse 1.4s infinite}
.feed-fol{padding:var(--s2) var(--s4);border-bottom:1px solid var(--border);flex-shrink:0;background:var(--bg-soft)}
.feed-fol__label{font-size:10px;font-weight:700;color:var(--text-mute);margin-bottom:5px;letter-spacing:.5px}
.feed-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.feed-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;background:#fff;border:1px solid var(--border-d);font-size:11px;font-weight:600;border-radius:20px;color:var(--text-sub)}
.feed-chip__dot{width:5px;height:5px;border-radius:50%;background:var(--three);flex-shrink:0}
.feed-list{flex:1;overflow:hidden;display:flex;flex-direction:column}
.feed-item{
  display:grid;grid-template-columns:36px 1fr auto;
  gap:var(--s2);align-items:center;
  padding:10px var(--s4);border-bottom:1px solid var(--border);
  animation:fIn .3s ease both;transition:background var(--fast);cursor:pointer;
}
.feed-item:hover{background:var(--three-l)}
@keyframes fIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.feed-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:2px solid var(--border)}
.feed-user{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}
.feed-action{font-size:11px;color:var(--text-sub);line-height:1.4}
.feed-action strong{color:var(--three);font-weight:700}
.feed-time{font-size:10px;color:var(--text-mute);margin-top:2px}
.feed-price{font-size:13px;font-weight:800;color:var(--brand);text-align:right;white-space:nowrap}
.feed-badge{font-size:9px;font-weight:700;color:var(--text-mute);text-align:right;margin-top:2px}

/* 피드 신뢰 정보 (판매자 온도, 거래수) */
.feed-trust{display:flex;align-items:center;gap:4px;margin-top:3px}
.feed-trust__temp{font-size:10px;font-weight:700;color:var(--amber)}
.feed-trust__cnt{font-size:10px;color:var(--text-mute)}
.feed-trust__verified{font-size:9px;font-weight:700;color:var(--three);background:var(--three-l);padding:1px 5px;border-radius:3px}

.feed-foot{
  padding:var(--s3) var(--s4);background:var(--bg-soft);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.feed-foot__s{font-size:12px;color:var(--text-sub);font-weight:500}
.feed-foot__s strong{color:var(--three);font-weight:800}

/* ── MARQUEE ── */
.mq{border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;padding:6px 0;background:#fff}
.mq__track{display:flex;animation:mqS 26s linear infinite;width:max-content}
@keyframes mqS{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq__item{font-size:12px;font-weight:600;color:var(--text-mute);padding:0 var(--s5);white-space:nowrap}
.mq__item.hi{color:var(--three)}

/* ── 홈 섹션 헤더 ── */
.sec-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--s5);gap:var(--s4);
}
.sec-hd .section-h{margin-bottom:0}

/* ── 실시간 거래 바 ── */
.trade-bar{
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--three);
  border-radius:var(--radius);padding:var(--s3) var(--s5);
  display:flex;align-items:center;gap:var(--s5);
  margin-bottom:var(--s6);flex-wrap:wrap;box-shadow:var(--shadow-sm);
}
.trade-bar__item{display:flex;align-items:center;gap:var(--s2);font-size:13px;font-weight:600;color:var(--text-sub)}
.trade-bar__num{font-size:18px;font-weight:900;color:var(--three)}
.trade-bar__num.brand{color:var(--brand)}
.trade-bar__div{width:1px;height:20px;background:var(--border);flex-shrink:0}
.live-tag{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red);background:#fef2f2;padding:3px 8px;border-radius:4px;flex-shrink:0}
.live-tag span{width:6px;height:6px;background:var(--red);border-radius:50%;animation:ldPulse 1.4s infinite}

/* ── GRIDS ── */
.g-sellers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.g-drops{display:grid;grid-template-columns:2fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.g-drops-side{display:flex;flex-direction:column;gap:1px;background:var(--border)}
.g-rank{display:grid;grid-template-columns:1fr 300px;gap:var(--s5)}
.g-market{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
/* 인기상품: 이미지 중심 4열 */
.g-popular{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.g-drops-pg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.g-sellers-pg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}

/* ── FOOTER ── */
.site-foot{
  border-top:3px solid var(--three);
  padding:var(--s5) var(--s6);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:var(--s3);background:#fff;
}
.site-foot__logo{font-size:16px;font-weight:900;letter-spacing:4px;cursor:pointer;color:var(--brand)}
.site-foot__logo em{color:var(--three);font-style:normal}
.site-foot__copy{font-size:11px;color:var(--text-mute)}
.site-foot__links{display:flex;gap:var(--s4);list-style:none}
.site-foot__links a{font-size:12px;font-weight:500;color:var(--text-mute);cursor:pointer;transition:color var(--fast)}
.site-foot__links a:hover{color:var(--three)}
/* 좌측 로고 옆 프로필 아이콘 겹침 방지 */
.nav__top > .icon-btn:first-child {
  display: none;
}

.nav__logo {
  margin-left: 0;
}
/* 로고 왼쪽 겹침 강제 보정 */
.nav__logo {
  margin-left: 50px !important;
}
/* 왼쪽에 잘못 뜬 프로필 아이콘만 숨김 */

/* 오른쪽 액션 영역 안 프로필 아이콘은 표시 */
.nav__actions #profileBtn {
  display: flex !important;
}