:root{
  --bar-h:56px;
  --footer-h:64px;
  --chip-bg:#f5f5f7;
  --chip-bd:#e6e6ea;

  /* 상품 카드용 변수 */
  --thumb-w: clamp(120px, 28vw, 220px);
  --row-gap: 6px;
}

*{ box-sizing:border-box; }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  margin:0;
  color:#222;
  background:#fff;
}

a{ color:inherit; text-decoration:none; }

.wrap{ padding-bottom:var(--footer-h); }

/* 상단바 */
.topbar{
  height:var(--bar-h);
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eee;
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
}

.brand{ font-weight:700; font-size:16px; line-height:1.2; }
.brand small{ display:block; font-weight:500; font-size:12px; color:#666; }

.icon-btn{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px; border:1px solid #eee;
  background:#fff; cursor:pointer;
}

/* 검색 시트 */
.search-sheet{
  display:none;
  border-bottom:1px solid #eee;
  padding:10px 12px;
  background:#fff;
  position:sticky;
  top:var(--bar-h);
  z-index:19;
}
.search-row{ display:flex; gap:8px; }
.search-row input{
  flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px;
}
.search-row button{
  padding:10px 14px; border:1px solid #111; background:#111; color:#fff; border-radius:10px;
}

/* 카테고리 칩 바 */
.catbar{
  display:flex; gap:8px; overflow-x:auto;
  padding:10px 12px; border-bottom:1px solid #eee; background:#fff;
  position:sticky; top:var(--bar-h); z-index:18;
}
.chip{
  white-space:nowrap; padding:8px 12px;
  background:var(--chip-bg); border:1px solid var(--chip-bd);
  border-radius:999px; font-size:14px;
}
.chip.primary{ background:#111; color:#fff; border-color:#111; }
.chip-group{ position:relative; }
.chip-menu{
  display:none; position:absolute; top:42px; left:0; background:#fff;
  border:1px solid #ddd; border-radius:12px; padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.chip-menu a{ display:block; padding:8px 10px; border-radius:8px; }
.chip-menu a:hover{ background:#f2f2f7; }

/* 리스트/카드 (기존 레이아웃에서 사용) */
.list{ padding:12px; }

.card{
  border:1px solid #eee; border-radius:14px;
  padding:12px; margin:12px 0; background:#fff;
  display:flex; gap:12px; align-items:flex-start;
}

/* (구) img 자체에 붙던 .thumb 규칙
   이제는 .thumb를 래퍼(div)로 쓰는 경우가 있으므로 기본값 유지 */
img.thumb:not(.square){
  width:120px; height:90px;
  border-radius:10px;
  object-fit:cover;
  background:#fafafa; border:1px solid #f0f0f0; display:block;
}

/* ✅ 새 구조: 래퍼가 .thumb.square 일 때는 고정 크기 해제하고 정사각형으로 */
.thumb.square{
  width: var(--thumb-w);    /* 카드 레이아웃 폭만 고정 */
  height: auto;             /* 높이는 aspect-ratio/폴백이 결정 */
  padding: 0;               /* 혹시 있을 패딩 제거 */
  border: none;             /* .square 스타일을 신뢰 */
  background: transparent;  /* .square 배경 사용 */
  border-radius: 0;         /* .square가 처리 */
}

/* 카드 레이아웃 내에서 명시 (가독성) */
.card .thumb.square{ width: var(--thumb-w); }

/* 플레이스홀더는 중앙정렬 유지 */
.thumb--placeholder{ display:grid; place-items:center; font-size:12px; color:#bbb; }

.card-body{ flex:1; min-width:0; }
.title{ margin:0 0 4px; font-size:16px; }
.meta{ margin:0; color:#666; font-size:12px; }

.badges{ margin:6px 0 10px; display:flex; gap:6px; flex-wrap:wrap; }
.badge{ font-size:11px; background:#f5f5f7; border:1px solid #eee; padding:4px 8px; border-radius:999px; }

.row-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row-actions .btn{ padding:8px 10px; border-radius:10px; border:1px solid #ddd; background:#fff; }
.row-actions .btn.primary{ background:#111; color:#fff; border-color:#111; }
.muted{ color:#777; font-size:12px; }
.days-input{ width:70px; padding:6px 8px; border:1px solid #ddd; border-radius:8px; }

/* 하단 탭바 */
.tabbar{
  height:var(--footer-h);
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid #eee;
  display:flex; align-items:center; justify-content:space-around; z-index:30;
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; padding:6px 8px; }
.sprout{
  position:relative; margin-left:6px; width:18px; height:18px;
  display:inline-grid; place-items:center; border-radius:999px;
  border:1px solid #e6efe6; background:#f4fbf4; font-size:13px; cursor:pointer;
}
.quick{
  position:absolute; bottom:calc(var(--footer-h) + 8px); right:12px;
  background:#fff; border:1px solid #ddd; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12); padding:8px; display:none; z-index:40; min-width:180px;
}
.quick a{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; }
.quick a:hover{ background:#f5f5f7; }

/* --- 상품 카드: 1~6 레이아웃 --- */
.item-card{
  display: grid;
  grid-template-columns: var(--thumb-w) 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--row-gap) 16px;                    /* 행 간격 줄이기 */
  padding:14px 16px;
  border:1px solid #e8e8ec;
  border-radius:14px;
  background:#fff;
  align-items: start;
}

.item-card .thumb-wrap{
  grid-column: 1;
  grid-row: 1 / span 3;                        /* 썸네일이 3행 전체 차지 */
  width: var(--thumb-w);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.item-card img.item-thumb{
  width: var(--thumb-w);
  height: var(--thumb-w);           /* 정사각형으로 고정 */
  display: block;
  object-fit: cover;                /* 여백 없이 꽉 채움 */
  object-position: center;
  border-radius: 12px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}

/* 상태 배지를 썸네일 폭에 맞춤 */
.item-card .state-badge{
  width: 100%;
  min-width: auto;
  text-align:center;
  padding:6px 10px; border-radius:8px;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  background:#ff7f00; color:#fff;   /* 오렌지 바탕 + 흰 글씨 */
}
.item-card .state-badge.hidden{ display:none; }

/* 3: 제목(굵고 크게) */
.item-card .title{
  grid-column:2; grid-row:1;
  font-size:18px; font-weight:800;
  line-height:1.25; margin-top:2px;
}

/* 4: 가격(왼쪽) | 5: 위치(오른쪽, 한 줄 유지) */
.item-meta{
  grid-column:2; grid-row:2;
  display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
}
.item-meta .price{ font-size:15px; font-weight:600; }
.item-meta .loc{ font-size:13px; color:#666; text-align:right; white-space:nowrap; }

/* 6: 한줄 설명 */
.item-card .desc{
  grid-column:2; grid-row:3;
  font-size:14px; color:#333;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* hover */
.item-card.link{ cursor:pointer; transition:box-shadow .15s ease; }
.item-card.link:hover{ box-shadow:0 4px 14px rgba(0,0,0,.06); }

/* 카드 전체를 클릭 영역으로 만드는 커버 링크 */
.item-card {
  display: grid;                     /* 기존 그대로 */
  text-decoration: none;             /* 밑줄 제거 */
  color: inherit;                    /* 글자색 유지 */
  border-radius: 14px;               /* 이미 있음: 재확인용 */
  background: #fff;
}

/* 시각적 피드백 */
.item-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); }

/* === 이미지 꽉 채우기 유틸 === */
/* 최신 브라우저: aspect-ratio 사용 */
.square {
  aspect-ratio: 1 / 1;         /* 정사각형 영역 보장 */
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;          /* 카드 모서리 일관 */
  background: #f4f5f7;          /* 로딩 중 바탕 */
}
.square > img,
.square > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* 핵심: 여백 없이 꽉 채움 */
  object-position: center;
  display: block;
}

/* ⬇⬇⬇ 옵션 2) 폴백: aspect-ratio 미지원 브라우저용 */
@supports not (aspect-ratio: 1 / 1) {
  .square { aspect-ratio: auto; }   /* 무시되게 */
  .square::before {
    content: "";
    display: block;
    padding-top: 100%;              /* 1:1 비율 확보 */
  }
  .square > img,
  .square > picture > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
  }
}

/* 배경이미지(div)로 쓸 경우 */
.bg-cover {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 상세용 큰 정사각형 */
.square-lg{
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #f4f5f7;
}
.square-lg > img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}

/* 대표 이미지 컨테이너: 정해진 비율 + 오버플로 숨김 */
.hero-box {
  width: 100%;
  aspect-ratio: 1 / 1;     /* 정사각형. 4:3 원하면 4 / 3 */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f5f7;
}

/* 대표 이미지: 컨테이너를 꽉 채우기 */
#hero {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 핵심: 여백 없이 꽉 채움 (일부 영역은 잘릴 수 있음) */
  display: block;
}

/* 슬라이드 버튼이 겹쳐 보이도록 */
.hero-box .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
@supports not (aspect-ratio: 1 / 1) {
  .hero-box { position: relative; }
  .hero-box::before {
    content: "";
    display: block;
    padding-top: 100%;   /* 1:1 비율. 4:3이면 75% */
  }
  #hero {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
}

/* ===============================
   ✅ 레벨 스택 (윗줄 Lv / 아랫줄 큐브)
   =============================== */
.level-stack{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  user-select:none;
  z-index:2;
  width:44px; /* 기본 sm */
}
.level-stack.sm{ width:44px; }
.level-stack.lg{ width:56px; }

/* 기본 배치: 썸네일(.square) 우상단 */
.square .level-stack{
  top:8px; right:8px;
}

/* Lv 텍스트 캡슐 */
.level-stack__label{
  font-weight:800; font-size:12px; line-height:1;
  color:#111;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* 큐브 이미지 */
.level-stack__cube{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* 상세 페이지 판매자 줄: 오른쪽 중앙 고정 */
.seller-row{ position:relative; }
.seller-row .level-stack{
  top:50%; right:12px; transform:translateY(-50%);
}
/* === 모바일 스크롤 강제 허용 & iOS 튜닝 === */
html, body{
  min-height: 100%;
  height: auto;
  overflow-y: auto;                 /* 모바일에서 body 스크롤 활성화 */
  -webkit-overflow-scrolling: touch;/* iOS 부드러운 스크롤 */
}

/* 페이지 래퍼가 콘텐츠를 잡아주도록(고정 높이 대신 늘어나는 레이아웃) */
.wrap{
  min-height: 100svh;               /* 100vh 대신 svh/dvh: iOS 주소창 대응 */
  display: flex;
  flex-direction: column;
}

/* 본문 컨테이너는 남는 공간을 차지하고, 하단 탭바만큼 패딩 확보 */
main.list{
  flex: 1 0 auto;
  overflow: visible;                 /* 혹시 다른 곳에서 숨겼다면 해제 */
  padding-bottom: var(--footer-h);
  -webkit-overflow-scrolling: touch;
}

/* 숨겨진 오버레이가 터치 막지 않도록 — 숨길 땐 display:none 권장 */
#searchSheet[aria-hidden="true"],
#moreMenu[aria-hidden="true"],
#quickMenu[aria-hidden="true"]{
  pointer-events: none;
}
@media (max-width: 768px){
  :root{ --list-scale: 1 !important; }
  body[data-route="index"] main.list{
    transform: none !important;
  }
}