/* 메인 모듈 2종 (트렌비 홈 위젯 구성 참고): ① 큰 배너 + 상품 3줄(.fx) ② 끊김 없이 흐르는 상품 캐러셀(.cr) */
.fx button,.cr button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.fx a,.cr a{color:inherit;text-decoration:none}
.fx-box,.cr{--ink2:#21272a}
/* ============ feature module (트렌비 홈 위젯 구성 참고): 큰 배너 + 상품 3줄 ============ */
.fx{padding:56px 0 0}
.fx-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.fx-box{display:flex;gap:24px;height:475px}
.fx .fx-banner{position:relative;flex:0 0 720px;display:flex;align-items:flex-end;border-radius:18px;overflow:hidden;background:#e9ecef;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.10);isolation:isolate}
.fx-banner .fx-img{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-banner:hover .fx-img{transform:scale(1.04)}
.fx-banner::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(0,0,0,0) 12%,rgba(0,0,0,.28) 42%,rgba(0,0,0,.72) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fx-text{position:absolute;z-index:1;left:32px;right:32px;bottom:48px;text-align:left}
.fx-title{text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.7);display:block;font-size:32px;line-height:42px;font-weight:700;letter-spacing:-.02em}
.fx-sub{text-shadow:0 1px 8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.7);display:block;margin:12px 0 24px;font-size:16px;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fx-list{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}
/* 한 줄 = 격자(썸네일 | 정보 | 하트): 하트는 줄 높이의 가운데에 자동으로 맞춰짐 (고정 좌표 없음) */
.fx-row{display:grid;grid-template-columns:131px minmax(0,1fr) 40px;align-items:center}
.fx-row+.fx-row{margin-top:20px;padding-top:20px;border-top:1px solid #e9ecef}
.fx-thumb{position:relative;display:block;width:131px;height:131px;border-radius:var(--r-img);overflow:hidden;background:#f1f3f5}
.fx-pic{position:absolute;inset:0;transition:transform .5s}
.fx-row:hover .fx-pic{transform:scale(1.06)}
.fx-info{display:block;min-width:0;margin-left:30px;color:#21272a;font-size:16px;line-height:24px}
.fx-brand{font-weight:700;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fx-price em{font-style:normal;color:var(--red);margin-right:6px}
.fx-wish{width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.fx-wish svg{width:24px;height:24px;fill:#cfd5db;transition:fill .2s,transform .2s}
.fx-wish:hover svg{fill:#adb5bd}
.fx-wish.on svg{fill:#e03131}
.fx-wish:active svg{transform:scale(.88)}
@media(max-width:1000px){
  .fx-box{height:auto;flex-direction:column;gap:8px}
  .fx .fx-banner{flex:none;height:340px;border-radius:16px}
  .fx-text{left:24px;right:24px;bottom:40px}
  .fx-title{font-size:28px;line-height:36px}
  .fx-sub{margin:12px 0 0;font-size:14px;line-height:22px}
  .fx-list{flex-direction:row;align-items:flex-start;gap:6px}
  /* 모바일: 썸네일(정방형) 위에 하트를 같은 칸에 겹쳐 우측 하단에 고정, 정보는 그 아래 */
  .fx-row,.fx-row+.fx-row{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;align-items:start;margin:0;padding:0;border:0}
  .fx-thumb{grid-area:1/1;width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--r-img)}
  .fx-wish{grid-area:1/1;align-self:end;justify-self:end;width:32px;height:32px;margin:0 2px 2px 0}
  .fx-wish svg{width:20px;height:20px}
  .fx-info{grid-area:2/1;margin:6px 0 0;font-size:14px;line-height:22px}
  .fx-price{white-space:nowrap;font-size:13px}
  .fx-price em{margin-right:4px}
}
@media(max-width:720px){.fx{padding-top:40px}.fx-wrap{padding:0 20px}}
/* ============ product carousel module (트렌비 홈 위젯 구성 참고): 제목 + 가로 상품 캐러셀 ============ */
.cr{padding:56px 0 0}
.cr-wrap{max-width:1200px;margin:0 auto;padding:0 20px;position:relative}
.cr-title{display:flex;align-items:center;margin:0 0 24px;font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#21272a}
.cr-viewport{position:relative}
.cr-clip{margin:0 -12px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cr-clip.drag{cursor:grabbing}
.cr-track{display:flex;width:max-content;will-change:transform}
.cr-item{flex:none;width:204px;padding:0 12px;color:#21272a}
.cr-card{position:relative}
.cr-thumb{position:relative;display:block;width:100%;aspect-ratio:1/1;border-radius:var(--r-img);overflow:hidden;background:#f5f6f8}
.cr-pic{position:absolute;inset:0;transition:transform .5s}
.cr-item:hover .cr-pic{transform:scale(1.05)}
.cr-wish{position:absolute;right:3px;bottom:3px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.cr-wish svg{width:22px;height:22px;fill:#cfd5db;transition:fill .2s,transform .2s}
.cr-wish:hover svg{fill:#adb5bd}
.cr-wish.on svg{fill:#e03131}
.cr-wish:active svg{transform:scale(.88)}
.cr-info{display:block;margin-top:8px;font-size:16px;line-height:24px}
.cr-brand{font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cr-name{margin:1px 0 2px;font-size:14px;line-height:20px;color:#495057;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}   /* 상품명(옵션): 최대 2줄, 넘치면 … */
.cr-price{white-space:nowrap}
.cr-price em{font-style:normal;color:var(--red);margin-right:6px}
.cr-arrow{position:absolute;top:90px;width:24px;height:48px;margin-top:-24px;display:grid;place-items:center;z-index:2;transition:opacity .2s}
.cr-arrow svg{width:12px;height:24px;fill:none;stroke:#495057;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cr-arrow:hover svg{stroke:#111}
.cr-arrow.prev{left:-46px}.cr-arrow.next{right:-46px}
@media(max-width:1340px){   /* 화면이 좁으면 화살표를 안쪽(이미지 위)으로 */
  .cr-arrow{width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
  .cr-arrow svg{width:10px;height:20px}
  .cr-arrow.prev{left:-8px}.cr-arrow.next{right:-8px}
}
@media(max-width:720px){
  .cr{padding-top:40px}
  .cr-wrap{padding:0 0 0 20px}
  .cr-title{font-size:20px;margin-bottom:16px}
  .cr-clip{margin:0 0 0 -20px}
  .cr-track{padding-left:20px}
  .cr-item{width:165px;padding:0 5px 0 0}
  .cr-info{font-size:14px;line-height:22px}
  .cr-name{font-size:13px;line-height:18px;min-height:36px}
  .cr-price em{margin-right:4px}
  .cr-wish{width:30px;height:30px;right:2px;bottom:2px}
  .cr-wish svg{width:18px;height:18px}
  .cr-arrow{display:none}
}

/* ============ For You: 패널 슬라이드 (제목 · 1/2 · 이전/다음 + 패널마다 상품 6개) ============ */
.fy { padding: 56px 0 0; }
.fy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.fy-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.fy-title small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.fy-nav { display: flex; align-items: center; gap: 14px; flex: none; }
.fy-count { font-size: 14px; color: #8a8a8a; } .fy-count b { color: var(--ink); font-weight: 700; }
.fy-prev, .fy-next { width: 40px; height: 40px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; transition: border-color .2s, opacity .2s; }
.fy-prev { border-radius: 8px 0 0 8px; margin-right: -14px; border-right-color: var(--line); } .fy-next { border-radius: 0 8px 8px 0; }
.fy-prev:hover:not(:disabled), .fy-next:hover:not(:disabled) { border-color: var(--ink); }
.fy-prev:disabled, .fy-next:disabled { opacity: .4; cursor: default; }
.fy-prev svg, .fy-next svg { width: 16px; height: 16px; fill: #333; }
.fy.fy-single .fy-nav { display: none; }
.fy-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.fy-view::-webkit-scrollbar { display: none; }
.fy-view.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fy-track { display: flex; gap: 16px; }
.fy-panel { flex: 0 0 calc((100% - 16px) / 2); min-width: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 22px; padding: 20px; background: #fff; display: flex; flex-direction: column; }
.fy-ptitle { display: flex; align-items: center; gap: 10px; background: #f5f5f3; border-radius: 12px; padding: 9px 12px; font-size: 14px; margin-bottom: 18px; }
.fy-ptitle strong { color: var(--accent); font-weight: 700; }
.fy-ic { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.fy-ic svg { width: 16px; height: 16px; fill: none; stroke: #333; stroke-width: 2; stroke-linecap: round; }
.fy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; flex: 1; }
.fy-item { display: block; min-width: 0; }
.fy-item { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.fy-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-img); overflow: hidden; margin-bottom: 10px; box-shadow: 0 2px 7px rgba(0,0,0,.10); transition: box-shadow .28s; }
.fy-pic { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fy-item:hover { transform: translateY(-4px); }   /* 상품에 마우스를 올리면 살짝 떠오르고 사진이 부드럽게 확대돼요 */
.fy-item:hover .fy-img { box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.fy-item:hover .fy-pic { transform: scale(1.07); }
.fy-wish { position: absolute; top: 6px; right: 6px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; background: none; display: grid; place-items: center; font-size: 24px; line-height: 1; color: #b5b5b5; text-shadow: 0 0 1px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.18); cursor: pointer; transition: transform .15s, color .15s; }   /* 찜 하트: 상품 카드와 같은 모양 (회색 빈 하트 → 찜하면 빨강) */
.fy-wish:hover { transform: scale(1.12); } .fy-wish.on { color: #e5252a; }
.fy-ttext { animation: fyBlink 3.4s ease-in-out infinite; }   /* "지금 뜨는 ○○의 인기상품" 글자가 천천히 깜빡여요 */
@keyframes fyBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fy-item:hover { transform: none; } .fy-item:hover .fy-pic { transform: none; } }
.fy-brand { display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fy-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 4px; font-size: 13px; line-height: 1.4; color: #333; word-break: keep-all; min-height: 36px; }
.fy-price { display: block; font-size: 14px; font-weight: 800; }
.fy-price em { font-style: normal; color: var(--red); margin-right: 5px; }
.fy-item:hover .fy-name { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.fy-more { align-self: center; margin-top: 22px; min-width: 100px; padding: 12px 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: center; font-size: 14px; transition: border-color .2s; }
.fy-more:hover { border-color: var(--ink); }
@media (max-width: 900px) {   /* 태블릿·모바일: 1패널씩, 할인율은 숨기고 글자·여백을 줄임 */
  .fy { padding-top: 40px; }
  .fy-head { margin-bottom: 14px; }
  .fy-title small { font-size: 13px; }
}
@media (max-width: 720px) { .fy-title { font-size: 20px; } }   /* 다른 모듈 제목과 같은 크기 */
@media (max-width: 900px) {
  .fy-panel { flex-basis: 100%; padding: 14px 14px 16px; border-radius: 18px; }
  .fy-ptitle { padding: 7px 10px; font-size: 13px; margin-bottom: 14px; gap: 8px; }
  .fy-ic { width: 28px; height: 28px; } .fy-ic svg { width: 14px; height: 14px; }
  .fy-grid { gap: 16px 8px; }
  .fy-img { margin-bottom: 8px; }
  .fy-wish { top: 3px; right: 3px; width: 30px; height: 30px; font-size: 20px; }
  .fy-brand { font-size: 11px; }
  .fy-name { font-size: 12px; line-height: 1.35; min-height: 32px; margin: 2px 0 3px; }
  .fy-price { font-size: 13px; }
  .fy-price em { display: none; }   /* 작은 화면에서는 할인율(%)을 숨김 */
  .fy-more { margin-top: 18px; padding: 10px 24px; font-size: 13px; }
  .fy-prev, .fy-next { width: 36px; height: 36px; } .fy-prev { margin-right: -12px; }
}
@media (max-width: 400px) {   /* 아주 좁은 화면 */
  .fy-panel { padding: 12px 10px 14px; }
  .fy-grid { gap: 14px 6px; }
  .fy-name { font-size: 11.5px; }
  .fy-price { font-size: 12.5px; }
}
.fy-noloop .fy-clone { display: none; }