@charset "utf-8";
/* 메인 상품 진열 — 2026-08-24
 * myfile/main_layout.html 시안의 네 가지 진열(슬라이드 캐러셀 · 랭킹 리스트 · 신상품 · 탭+컴팩트 그리드)을
 * 황금곳간 색감으로 옮긴 것이다. 타임딜은 요청에 따라 넣지 않는다.
 *
 * ★ 이 파일은 팔레트(_palette/) 밖이다 (gm-cs.css 와 같다).
 *   색은 var(--point) / var(--point-dark) / var(--line) / var(--txt) / var(--txt-sub) 로만 쓴다.
 *   변수로 못 쓰는 옅은 금색 바탕(#fffdf3 · #f8f5e9)은 gm-cs.css 와 같은 값을 그대로 쓴다.
 *
 * ★ 섹션 겉틀(.gm-section / .gm-section-head)과 상품카드(.gm-prod-*) · 뱃지 · 하트는 gm.css 에 있다.
 *   같은 셀렉터를 두 파일에 두지 않는다 (website.md 18항 — 나중에 로드된 쪽이 이긴다).
 *   여기에는 새 셀렉터만 넣는다.
 */

/* ================= ① 슬라이드 캐러셀 ================= */
.gm-slid{position:relative;}
.gm-slid-body{position:relative;}
/* 카드에 마우스를 올리면 5px 떠오르는데(.gm-prod-cell:hover, gm.css) 그 5px 가 잘리지 않게
   위쪽에 여유를 두고 같은 만큼 음수 여백으로 당겨 둔다. 가로는 그대로 잘라야 캐러셀이 된다. */
.gm-slid-view{overflow:hidden;padding-top:8px;margin-top:-8px;}
.gm-slid-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.gm-slid-track .gm-prod-cell{flex:0 0 calc((100% - 60px)/4);min-width:0;}
.gm-slid-arrow{
  position:absolute;top:50%;margin-top:-42px;width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;color:var(--txt);
  z-index:5;cursor:pointer;padding:0;transition:background .2s,border-color .2s,color .2s;
}
.gm-slid-arrow:hover{background:var(--point);border-color:var(--point);color:#fff;}
.gm-slid-arrow svg{width:15px;height:15px;}
.gm-slid-arrow.prev{left:-16px;}
.gm-slid-arrow.next{right:-16px;}
.gm-slid-arrow[disabled]{opacity:.3;pointer-events:none;}
.gm-slid-dots{display:flex;justify-content:center;gap:6px;margin-top:20px;}
.gm-slid-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:5px;background:#dcdcd6;
  cursor:pointer;transition:width .25s,background .25s;
}
.gm-slid-dots button.on{width:22px;background:var(--point);}

/* ================= ② 랭킹 리스트 ================= */
.gm-rank-view{border-top:1.5px solid var(--txt);}
.gm-rank-row{
  display:flex;align-items:center;gap:16px;padding:16px 6px;
  border-bottom:1px solid var(--line);transition:background .2s;
}
.gm-rank-row:hover{background:#fbfaf5;}
.gm-rank-link{display:flex;align-items:center;gap:16px;flex:1;min-width:0;color:inherit;}
.gm-rank-no{
  flex:none;width:26px;text-align:center;font-size:16px;font-weight:900;color:#c9c9c3;
}
.gm-rank-row:nth-child(-n+3) .gm-rank-no{color:var(--point);}
.gm-rank-thumb{
  flex:none;width:66px;height:66px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:#f5f4f0;
  display:flex;align-items:center;justify-content:center;
}
.gm-rank-thumb img{width:100%;height:100%;object-fit:cover;}
.gm-rank-body{flex:1;min-width:0;}
.gm-rank-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px;}
.gm-rank-name{
  font-size:14.5px;line-height:1.45;color:var(--txt);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.gm-rank-basic{
  font-size:12px;color:var(--txt-sub);margin-top:4px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.gm-rank-price{flex:none;text-align:right;}
.gm-rank-price b{font-size:16.5px;font-weight:900;white-space:nowrap;color:var(--txt);}
.gm-rank-price b small{font-size:12.5px;font-weight:700;}
.gm-rank-row .gm-wish-btn{flex:none;}

/* 랭킹 리스트 안의 뱃지는 썸네일 위가 아니라 글 흐름 안에 놓는다 */
.gm-rank-tags .gm-badges{position:static;max-width:none;gap:5px;}
.gm-rank-tags .gm-badge{font-size:11px;padding:4px 9px;border-radius:11px;}

/* ================= ③ 신상품 — 원형 썸네일 카드 좌우 슬라이드 (2026-08-24 2차 개편) =================
   카드 한 장은 «동그란 사진 → 상품명 → 간략설명(it_basic) → 가격» 순서로 가운데 정렬이다.
   겉틀(.gm-slid-*)은 ① 추천상품 캐러셀과 같은 것을 쓰고, 안에 들어가는 칸만 여기서 정의한다.
   요청대로 다른 진열보다 한 단계씩 크게 잡았다. */
.gm-slid-track .gm-cir-cell{flex:0 0 calc((100% - 60px)/4);min-width:0;}
.gm-cir-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:inherit;padding:4px 6px 6px;
}
/* 동그란 사진 — 원으로 자르는 진열이라 cover 다 (contain 이면 원 안에 여백만 생긴다) */
.gm-cir-thumb{
  display:block;width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:#f5f4f0;
  transition:transform .25s ease, border-color .2s, box-shadow .25s;
}
.gm-cir-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.gm-cir-card:hover .gm-cir-thumb{
  transform:translateY(-5px) scale(1.03);
  border-color:var(--point);box-shadow:0 10px 24px rgba(0,0,0,.12);
}
/* 상품명은 **무슨 일이 있어도 한 줄**이다 (2026-08-24 요청).
   -webkit-line-clamp:1 이 아니라 nowrap+말줄임을 쓴다 — clamp 는 글꼴·줄높이에 따라
   두 번째 줄 윗머리가 빼꼼 보이는 일이 있는데 nowrap 은 애초에 줄이 넘어가지 않는다.
   이름이 한 줄이라 카드 높이도 모두 같아진다. */
.gm-cir-name{
  display:block;max-width:100%;margin-top:18px;
  font-size:19px;font-weight:800;line-height:1.4;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gm-cir-card:hover .gm-cir-name{color:var(--point-dark);}
/* 설명은 이름 바로 밑에 붙인다 (요청 — 둘 사이가 넓어 보였다) */
.gm-cir-basic{
  max-width:100%;margin-top:3px;
  font-size:14.5px;line-height:1.45;color:var(--txt-sub);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.gm-cir-price{display:block;margin-top:12px;font-size:24px;}
.gm-cir-price b{font-weight:900;color:var(--txt);}
.gm-cir-price b small{font-size:15px;font-weight:700;}

/* ================= ④ 탭 + 컴팩트 그리드 ================= */
.gm-tab-wrap{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 26px 28px;}
.gm-tab-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:22px;}
.gm-tab-row::-webkit-scrollbar{display:none;}
.gm-tab-btn{
  flex:none;padding:9px 17px;border-radius:19px;border:1.5px solid var(--line);background:#fff;
  font-size:13.5px;font-weight:700;color:#888;white-space:nowrap;cursor:pointer;transition:all .2s;
}
.gm-tab-btn:hover{border-color:#e3dcc2;color:var(--txt);}
.gm-tab-btn.on{background:var(--point);border-color:var(--point);color:#fff;}
.gm-tab-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px 16px;
  transition:opacity .25s,transform .25s;
}
.gm-tab-grid.fading{opacity:0;transform:translateY(6px);}
.gm-tab-grid[hidden]{display:none;}
.gm-tg-card{display:block;color:inherit;}
.gm-tg-thumb{
  position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:#f5f4f0;
}
.gm-tg-thumb img{width:100%;height:100%;object-fit:cover;}
.gm-tg-info{padding:11px 2px 0;}
.gm-tg-name{
  font-size:13px;line-height:1.45;margin-bottom:5px;color:var(--txt);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.gm-tg-price{font-size:14.5px;}
.gm-tg-price b{font-weight:900;color:var(--txt);}
.gm-tg-price b small{font-size:11.5px;font-weight:700;}
.gm-tg-card:hover .gm-tg-name{color:var(--point-dark);}
/* 좁은 카드라 뱃지는 한 단계 줄인다 */
.gm-tg-thumb .gm-badges{top:8px;left:8px;gap:4px;max-width:calc(100% - 16px);}
.gm-tg-thumb .gm-badge{font-size:11px;padding:5px 9px;border-radius:11px;}
/* 신상품 원형 카드에는 뱃지를 두지 않는다 (사진→이름→설명→가격 사이에 끼어든다) */

/* 상품이 없을 때 (관리자에게만 보이는 안내) */
.gm-lay-empty{
  border:1px dashed var(--point);border-radius:14px;background:#fffdf3;
  padding:26px 22px;font-size:13px;color:var(--txt-sub);line-height:1.8;
}
.gm-lay-empty b{color:var(--point-dark);}

/* ================= 좁은 화면 ================= */
@media (max-width:1024px){
  .gm-slid-track .gm-prod-cell{flex:0 0 calc((100% - 40px)/3);}
  .gm-slid-arrow.prev{left:-8px;}
  .gm-slid-arrow.next{right:-8px;}
  .gm-slid-track .gm-cir-cell{flex:0 0 calc((100% - 40px)/3);}
  .gm-cir-name{font-size:17.5px;margin-top:15px;}
  .gm-cir-basic{font-size:13.5px;margin-top:3px;}
  .gm-cir-price{font-size:21px;}
  .gm-tab-grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:768px){
  .gm-slid-track{gap:12px;}
  .gm-slid-track .gm-prod-cell{flex:0 0 calc((100% - 12px)/2);}
  .gm-slid-arrow{display:none;}

  .gm-rank-row{gap:11px;padding:13px 2px;}
  .gm-rank-link{gap:11px;}
  .gm-rank-no{width:18px;font-size:14px;}
  .gm-rank-thumb{width:56px;height:56px;border-radius:10px;}
  .gm-rank-name{font-size:13.5px;}
  .gm-rank-price b{font-size:15px;}
  .gm-rank-row .gm-wish-btn{display:none;}

  /* 원형 카드는 폭이 곧 사진 지름이라 2칸까지만 줄인다 (① 캐러셀과 같은 규칙) */
  .gm-slid-track .gm-cir-cell{flex:0 0 calc((100% - 12px)/2);}
  .gm-cir-name{font-size:15.5px;margin-top:12px;}
  .gm-cir-basic{font-size:12.5px;margin-top:2px;-webkit-line-clamp:2;}
  .gm-cir-price{font-size:18px;margin-top:8px;}
  .gm-cir-price b small{font-size:12.5px;}

  .gm-tab-wrap{padding:18px 16px 22px;border-radius:16px;}
  .gm-tab-grid{grid-template-columns:repeat(3,1fr);gap:18px 10px;}
  .gm-tg-thumb{border-radius:11px;}
  .gm-tg-name{font-size:12px;}
  .gm-tg-price{font-size:13px;}
}
@media (max-width:480px){
  .gm-tab-grid{grid-template-columns:repeat(2,1fr);}
}
@media (prefers-reduced-motion:reduce){
  .gm-slid-track,.gm-tab-grid{transition:none!important;}
  .gm-cir-thumb{transition:none!important;}
  .gm-cir-card:hover .gm-cir-thumb{transform:none;}
}