/* BASIC css start */
@charset "utf-8";
/* ============================================================
   파인 스토어 메인 — DJI 스타일 템플릿
   · 모든 선택자에 fs- 프리픽스 → common.css 와 충돌 없음
   · #contentWrapper 가 min-width:1200px 이므로 고정폭 1200 기준
   · main.html 과 짝입니다. 되돌릴 때 두 파일을 함께 되돌리세요.
   ============================================================ */

#fs-main{
    /* 뉴트럴 — DJI 스토어와 동일 계열의 쿨 그레이 */
    --g:#F0F1F2;          /* 페이지 바탕 */
    --s:#FFFFFF;          /* 카드·밴드 */
    --panel:#16181B;      /* 다크 카드 */
    --line:#E2E5E8;

    --ink:#16181B;
    --ink2:#5C636C;
    --ink3:#8B929B;

    /* 브랜드 — 로고 PNG 에서 추출한 파인 오렌지 */
    --brand:#FC671A;
    --brand-deep:#C94E0B;
    --brand-tint:#FFF0E6;

    --sale:#E4262B;       /* 할인율 전용 */

    --kr:'Noto Sans KR','Nanum Gothic',sans-serif;
    --la:'Archivo','Noto Sans KR',Helvetica,Arial,sans-serif;
}

#fs-main{
    font-family:var(--kr);font-size:15px;line-height:1.6;
    color:var(--ink);letter-spacing:-0.01em;background:var(--g);
}
#fs-main *{box-sizing:border-box}
#fs-main a{color:inherit;text-decoration:none}
#fs-main img{display:block;max-width:100%;border:0}
#fs-main p{margin:0}
#fs-main h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-0.035em;line-height:1.25}
#fs-main a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

#fs-main .fs-wrap{width:1200px;margin:0 auto}

#fs-main .fs-band{width:100%;background:var(--g);padding:60px 0}
#fs-main .fs-band-alt{background:var(--s)}

#fs-main .fs-sechead{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;margin-bottom:24px;
}
#fs-main .fs-eyebrow{
    display:block;font-family:var(--la);font-weight:600;font-size:11px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;
}
#fs-main .fs-more{
    font-size:13.5px;color:var(--ink2);white-space:nowrap;padding-bottom:4px;
}
#fs-main .fs-more:hover{color:var(--brand)}

/* ---------- 버튼 (DJI 의 필 버튼) ---------- */
#fs-main .fs-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:46px;padding:0 28px;border-radius:999px;border:1px solid transparent;
    font-family:var(--kr);font-size:14.5px;font-weight:700;white-space:nowrap;
    transition:background .15s ease,border-color .15s ease;
}
#fs-main .fs-btn-sm{height:36px;padding:0 18px;font-size:13px}
#fs-main .fs-btn-light{background:#fff;color:#16181B}
#fs-main .fs-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.36)}
#fs-main .fs-btn{text-decoration:none}
/* 버튼이 그 자체로 <a> 인 경우(히어로)와, <a> 안의 <span> 인 경우(그 외)
   둘 다 마우스를 올렸을 때 반응하도록 두 가지를 모두 적어 둡니다. */
#fs-main a:hover .fs-btn-light,
#fs-main a.fs-btn-light:hover{background:#E9EAEC}
#fs-main a:hover .fs-btn-ghost,
#fs-main a.fs-btn-ghost:hover{border-color:#fff}


/* ══════════════ 1. 히어로 ══════════════
   이미지 1920 × 620 · 좌측 46% 는 텍스트가 덮음 */
#fs-main .fs-hero{position:relative;width:100%;overflow:hidden;background:#0D0F11}

/* ── 슬라이드 무대 ──
   ⚠ 예전에는 bxSlider 가 이 부분을 만들어 줬습니다. 지금은 main.js 가
      직접 만들고 직접 굴립니다. 클래스 이름(bx-wrapper · bx-viewport ·
      bx-pager)은 아래 페이저 디자인을 그대로 쓰려고 유지한 것입니다.

   배너 4장을 같은 자리에 겹쳐 놓고 투명도로 바꿉니다.
   그래서 무대 높이를 이미지 비율(1920:620)로 미리 잡아 둡니다.
   이게 없으면 겹친 순간 높이가 0 이 되어 배너가 사라집니다. */
#fs-main .fs-hero .bx-wrapper{position:relative;margin:0;border:0;box-shadow:none;background:transparent}
#fs-main .fs-hero .bx-viewport{position:relative;border:0;left:0;background:transparent;overflow:hidden}
#fs-main .fs-hero ul.bxslider{
    position:relative;margin:0;padding:0;list-style:none;
    width:100%;aspect-ratio:1920 / 620;min-height:420px;
}
#fs-main .fs-hero ul.bxslider > li{
    position:absolute;top:0;left:0;right:0;bottom:0;
    margin:0;padding:0;list-style:none;
    opacity:0;pointer-events:none;
    transition:opacity .7s ease;
}
#fs-main .fs-hero ul.bxslider > li.fs-on{opacity:1;pointer-events:auto}

#fs-main .fs-hero-slide{position:absolute;top:0;left:0;right:0;bottom:0;display:block}
#fs-main .fs-hero-slide > img{width:100%;height:100%;object-fit:cover;display:block}
/* ── 배너 전체를 덮는 링크 ──
   버튼 두 개가 서로 다른 곳으로 갈 수 있어야 해서
   슬라이드를 <a> 로 감싸지 않고, 대신 투명한 링크 한 장을 깔았습니다.
   (<a> 안에 <a> 는 HTML 규칙 위반이라 마크업이 깨집니다) */
#fs-main .fs-hero-link{
    position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
    display:block;text-indent:-9999px;overflow:hidden;
}
/* ══════════════ 배너 글자 테마 (4종) ══════════════
   main.js 표에서 이미지 앞에 이름을 붙여 고릅니다.  예) 검은글자+판:hero_04.jpg

     흰글자        (기본, 안 붙여도 됨)  어두운 사진
     흰글자+판                          어두운데 밝은 부분이 섞인 사진
     검은글자                            아주 깨끗한 흰 배경 사진
     검은글자+판                         흰 배경이지만 무늬·그림자가 있는 사진

   "판" = 글자 뒤에 까는 그라데이션. 왼쪽만 덮고 오른쪽 제품 쪽은 건드리지 않습니다.
   진하기를 바꾸려면 아래 rgba 의 마지막 숫자(0~1)만 고치세요. */

/* 판 — 어두운 쪽 */
#fs-main .fs-hero-slide.is-scrim-dark:after{
    content:'';position:absolute;top:0;left:0;bottom:0;width:62%;
    background:linear-gradient(to right, rgba(8,10,12,.72) 0%, rgba(8,10,12,.48) 55%, rgba(8,10,12,0) 100%);
    z-index:1;pointer-events:none;
}
/* 판 — 밝은 쪽 */
#fs-main .fs-hero-slide.is-scrim-light:after{
    content:'';position:absolute;top:0;left:0;bottom:0;width:62%;
    background:linear-gradient(to right, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,0) 100%);
    z-index:1;pointer-events:none;
}

/* 글자 — 검은 글자 계열 */
#fs-main .fs-hero-slide.is-ink .fs-hero-txt strong{color:#16181B;text-shadow:none}
#fs-main .fs-hero-slide.is-ink .fs-hero-txt em{color:#4A5159;text-shadow:none}
#fs-main .fs-hero-slide.is-ink .fs-tag{
    background:rgba(252,103,26,.12);border-color:rgba(252,103,26,.45);color:#D8500F;
}
/* 버튼도 뒤집습니다 — 흰 배경에 흰 버튼은 안 보입니다 */
#fs-main .fs-hero-slide.is-ink .fs-btn-light{background:#16181B;color:#fff}
#fs-main .fs-hero-slide.is-ink a.fs-btn-light:hover{background:#000}
#fs-main .fs-hero-slide.is-ink .fs-btn-ghost{color:#16181B;border-color:rgba(22,24,27,.38)}
#fs-main .fs-hero-slide.is-ink a.fs-btn-ghost:hover{border-color:#16181B}

/* 검은 글자 배너일 때는 하단 페이저 바도 어둡게 */
#fs-main .fs-hero .bx-wrapper .bx-pager.is-ink .bx-pager-link:before{background:rgba(22,24,27,.28)}
#fs-main .fs-hero .bx-wrapper .bx-pager.is-ink .bx-pager-link.active:before,
#fs-main .fs-hero .bx-wrapper .bx-pager.is-ink .bx-pager-link:hover:before{background:#16181B}

#fs-main .fs-hero-inner{
    position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;
    /* 글자 위를 눌러도 아래 배너 링크가 눌리도록 클릭을 통과시킵니다 */
    pointer-events:none;
}
/* 버튼만 다시 클릭을 받습니다 */
#fs-main .fs-hero-cta a{pointer-events:auto}
#fs-main .fs-hero-txt{
    width:1200px;margin:0 auto;padding:0 0 0 4px;
    display:block;color:#fff;

    /* ── 텍스트가 제품컷을 침범하지 못하게 막는 안전폭 ──
       배너 이미지는 화면 폭에 맞춰 늘어나므로, 이미지 안의
       "제품 시작선(x=900/1920)" 도 화면에서 같이 오른쪽으로 갑니다.
       반면 텍스트 블록(1200px)은 가운데 정렬이라 왼쪽 시작점이
       화면이 넓어질수록 더 오른쪽으로 밀립니다.
       → 둘 사이 간격이 화면이 커질수록 좁아지므로 계산으로 따라갑니다.

         쓸 수 있는 폭 = 596px - 3.125vw
           1200px 화면 → 558px      1920px 화면 → 536px
           2560px 화면 → 516px      3840px 화면 → 476px

       min() 으로 520px 을 넘지 않게, max() 로 400px 밑으로는
       안 내려가게 잡았습니다. 글자는 이 폭에서 자동 줄바꿈됩니다. */
    --fs-herow: max(400px, min(520px, calc(596px - 3.125vw)));
}
/* 제목 · 설명 · 버튼 모두 같은 안전폭 안에서만 흐릅니다 */
#fs-main .fs-hero-txt strong,
#fs-main .fs-hero-txt em,
#fs-main .fs-hero-cta{max-width:var(--fs-herow)}
#fs-main .fs-tag{
    display:inline-flex;align-items:center;height:26px;padding:0 12px;
    border-radius:999px;background:rgba(252,103,26,.20);border:1px solid rgba(252,103,26,.52);
    font-family:var(--la);font-weight:600;font-size:11px;letter-spacing:0.09em;
    text-transform:uppercase;color:#FFA26B;margin-bottom:16px;
}
#fs-main .fs-hero-txt strong{
    display:block;font-size:46px;font-weight:700;line-height:1.18;
    letter-spacing:-0.035em;margin-bottom:14px;
    text-shadow:0 2px 24px rgba(0,0,0,.35);
}
#fs-main .fs-hero-txt em{
    display:block;font-style:normal;font-size:16px;color:#D2D7DC;
    margin-bottom:26px;
    text-shadow:0 1px 12px rgba(0,0,0,.4);
}
#fs-main .fs-hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* 페이저 — DJI 의 얇은 바
   ⚠ z-index 를 빼지 마세요.
      배너 전체를 덮는 투명 링크(.fs-hero-link, z-index:1)와
      글자 판(.fs-hero-inner, z-index:2)이 페이저 위를 지나갑니다.
      z-index 가 없으면 페이저가 그 아래 깔려서,
      바를 눌러도 페이저가 아니라 배너 링크가 눌립니다.

   ⚠ 누르는 면적은 24px, 보이는 바는 ::before 로 그립니다.
      바가 3px 라 그대로 두면 너무 얇아서 잘 안 눌립니다. */
#fs-main .fs-hero .bx-wrapper .bx-pager{
    position:absolute;bottom:16px;left:0;right:0;padding:0;
    text-align:center;font-size:0;z-index:5;
}
#fs-main .fs-hero .bx-wrapper .bx-pager .bx-pager-item{display:inline-block;margin:0 5px}
#fs-main .fs-hero .bx-wrapper .bx-pager-link{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:24px;
    text-indent:-9999em;overflow:hidden;cursor:pointer;
    transition:width .2s ease;
}
#fs-main .fs-hero .bx-wrapper .bx-pager-link:before{
    content:'';display:block;width:100%;height:3px;border-radius:2px;
    background:rgba(255,255,255,.32);
    transition:background .2s ease;
}
#fs-main .fs-hero .bx-wrapper .bx-pager-link:hover,
#fs-main .fs-hero .bx-wrapper .bx-pager-link.active{width:56px}
#fs-main .fs-hero .bx-wrapper .bx-pager-link:hover:before,
#fs-main .fs-hero .bx-wrapper .bx-pager-link.active:before{background:#fff}


/* ══════════════ 2. 카테고리 레일 ══════════════
   제품 컷아웃 300 × 300 투명 PNG · 9장
   ------------------------------------------------------------
   선 아이콘이 아니라 실제 제품 사진(배경 제거)입니다.
   그래서 96px 로 씁니다 — 78px 에서는 제품 디테일이 뭉갭니다.
   1200px 안에 9칸이 들어가므로 한 칸이 133px, 96 + 좌우 여백으로
   딱 맞습니다. 이보다 키우면 칸이 붙어 보입니다.
   ------------------------------------------------------------
   object-fit:contain 이라 파일이 정사각형이 아니어도 잘리지는
   않습니다. 다만 9장의 "프레임 안 제품 크기" 가 다르면 여기서
   보정할 방법이 없으니 이미지 쪽에서 맞춰야 합니다. */
#fs-main .fs-catrail{width:100%;background:var(--s);border-bottom:1px solid var(--line)}
#fs-main .fs-catrail-track{display:flex;padding:24px 0 22px}
#fs-main .fs-catrail-track a{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:9px;
    padding:10px 4px;border-radius:12px;
}
#fs-main .fs-catrail-track a:hover{background:var(--g)}
#fs-main .fs-catrail-track img{
    width:96px;height:96px;object-fit:contain;
    transition:transform .2s ease;
}
#fs-main .fs-catrail-track a:hover img{transform:scale(1.05)}
#fs-main .fs-catrail-track span{
    font-size:13px;font-weight:500;line-height:1.4;text-align:center;color:var(--ink);
    /* 라벨이 1줄인 항목과 2줄인 항목의 높이를 맞춥니다 (9개 정렬용) */
    min-height:2.8em;display:flex;align-items:flex-start;justify-content:center;
}


/* ══════════════ 3. 주목 제품 (이미지 블리드 카드) ══════════════
   카드 이미지 660 × 860 · 하단 48% 는 그라디언트가 덮음 */
#fs-main .fs-hotgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#fs-main .fs-hotcard{
    position:relative;display:block;overflow:hidden;
    border-radius:14px;background:var(--panel);
    aspect-ratio:3 / 4;
}
#fs-main .fs-hotcard > img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
#fs-main .fs-hotcard:hover > img{transform:scale(1.04)}
#fs-main .fs-hot-cap{
    position:absolute;left:0;right:0;bottom:0;
    display:block;padding:80px 22px 16px;color:#fff;
    background:linear-gradient(to top,
        rgba(8,9,11,.94) 0%,
        rgba(8,9,11,.78) 34%,
        rgba(8,9,11,.28) 68%,
        rgba(8,9,11,0) 100%);
}
#fs-main .fs-hot-cap strong{
    display:block;font-size:20px;font-weight:700;letter-spacing:-0.03em;
    line-height:1.3;margin-bottom:4px;
}
#fs-main .fs-hot-cap em{
    display:block;font-style:normal;font-size:13.5px;color:#C3C9CF;margin-bottom:10px;
}
/* 가격(.fs-from)을 뺐습니다. 버튼만 남아 왼쪽으로 붙습니다.
   가격이 빠진 만큼 글자 덩어리가 짧아져 카드 아래쪽으로 내려옵니다. */
#fs-main .fs-hot-foot{display:flex;align-items:center;justify-content:flex-start;gap:10px}
#fs-main .fs-from{
    font-family:var(--la);font-weight:600;font-size:14px;
    font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}


/* ══════════════ 4. 공식몰 신뢰 블록 ══════════════ */
#fs-main .fs-why{width:100%;background:var(--s);padding:56px 0;border-top:1px solid var(--line)}
#fs-main .fs-why-h{margin:0 0 26px;font-size:28px;font-weight:700;letter-spacing:-0.035em}
#fs-main .fs-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
#fs-main .fs-why-cell{background:var(--s);padding:26px 24px 28px}
#fs-main .fs-why-ic{display:block;width:34px;height:34px;margin-bottom:15px;color:var(--brand)}
#fs-main .fs-why-ic svg{
    width:34px;height:34px;display:block;
    stroke:currentColor;stroke-width:1.5;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}
#fs-main .fs-why-cell strong{display:block;font-size:15px;font-weight:700;margin-bottom:7px}
/* word-break:keep-all — 한글을 단어 단위로만 끊습니다.
   이게 없으면 "구매하세 / 요." 처럼 한 글자만 다음 줄로 넘어갑니다. */
#fs-main .fs-why-cell strong{word-break:keep-all}
#fs-main .fs-why-cell p{font-size:13px;color:var(--ink2);line-height:1.6;word-break:keep-all}



/* ══════════════ 5. 시네마 · 좌 텍스트 418 / 우 영상 782 ══════════════
   밴드 1200 × 440. 우측 782 × 440 은 정확히 16:9 이므로 영상이 잘리지 않습니다.
   좌측 418 은 텍스트 전용 패널 — 배경은 CSS, 이미지 없음. */
#fs-main .fs-cinA{
    position:relative;overflow:hidden;border-radius:14px;
    aspect-ratio:1200 / 440;
    display:flex;align-items:stretch;
    background:
        radial-gradient(120% 150% at 12% 30%, #2C3238 0%, #171B1F 54%, #0C0E10 100%);
}

/* ---------- 좌측 텍스트 패널 (418px) ---------- */
#fs-main .fs-cinA-txt{
    flex:0 0 418px;max-width:418px;
    display:flex;flex-direction:column;justify-content:center;
    padding:0 22px 0 38px;color:#fff;
}
#fs-main .fs-cinA-txt strong{
    display:block;font-size:28px;font-weight:700;line-height:1.26;
    letter-spacing:-0.038em;margin-bottom:15px;
}
#fs-main .fs-cinA-spec{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:19px}
#fs-main .fs-cinA-spec i{
    font-style:normal;font-size:12px;color:#DDE2E7;white-space:nowrap;
    padding:4px 10px;border-radius:999px;
    background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
}
#fs-main .fs-cinA-price{
    display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:22px;
    font-family:var(--la);font-variant-numeric:tabular-nums;color:#fff;
}
#fs-main .fs-cinA-price b{font-weight:700;font-size:27px;letter-spacing:-0.025em;white-space:nowrap}
#fs-main .fs-cinA-price b em{display:inline;font-family:var(--kr);font-style:normal;font-size:14px;font-weight:500}
#fs-main .fs-cinA-price s{font-size:13.5px;color:#A9B0B8}
#fs-main .fs-cinA-price u{
    text-decoration:none;font-weight:700;font-size:12.5px;
    color:#fff;background:var(--sale);padding:3px 7px;border-radius:4px;
}
#fs-main .fs-cinA-cta{display:flex;gap:10px;flex-wrap:wrap}
#fs-main .fs-cinA-cta .fs-btn{height:42px;padding:0 20px;font-size:14px}

/* ---------- 우측 영상 (782 × 440 = 16:9) ---------- */
#fs-main .fs-cinA-screen{
    position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:#0A0B0C;
}
#fs-main .fs-cinA-screen video{
    display:block;width:100%;height:100%;object-fit:cover;background:#0A0B0C;
}
/* 유튜브로 바꿔 끼웠을 때 (main.js 의 시네마 표에서 '영상종류 @@ 유튜브')
   ⚠ pointer-events:none 이 중요합니다. 없으면 유튜브 화면이 클릭을 먹어
      오른쪽 아래 '전체 영상' 버튼이 안 눌립니다. */
#fs-main .fs-cinA-screen iframe.fs-loop{
    display:block;width:100%;height:100%;border:0;background:#0A0B0C;
    pointer-events:none;
}
/* 좌측 패널과 영상 경계를 부드럽게 — 영상이 밝아도 붙여넣은 느낌이 안 납니다 */
#fs-main .fs-cinA-fade{
    position:absolute;left:0;top:0;bottom:0;width:70px;z-index:1;pointer-events:none;
    background:linear-gradient(to right, rgba(15,18,21,.92) 0%, rgba(15,18,21,0) 100%);
}

/* 전체 영상 보기 */
#fs-main .fs-cinA-full{
    position:absolute;z-index:2;right:16px;bottom:16px;
    display:inline-flex;align-items:center;gap:5px;
    height:31px;padding:0 13px 0 10px;border-radius:999px;
    background:rgba(10,11,13,.58);border:1px solid rgba(255,255,255,.24);
    color:#fff;font-size:12px;font-weight:700;letter-spacing:-0.01em;
    backdrop-filter:blur(7px);
    transition:background .15s ease;
}
#fs-main .fs-cinA-full:hover{background:rgba(10,11,13,.86)}
#fs-main .fs-cinA-full svg{width:15px;height:15px;display:block;fill:currentColor;stroke:none}


/* ══════════════ 6·7·8. 브랜드 섹션 (대표 이미지 + 상품 3행) ══════════════
   대표 이미지 786 × 560 */
#fs-main .fs-split{display:grid;grid-template-columns:786px 1fr;gap:14px;align-items:stretch}
#fs-main .fs-split-rev{grid-template-columns:1fr 786px}
#fs-main .fs-split-rev .fs-feature{order:2}
#fs-main .fs-split-rev .fs-pcol{order:1}

#fs-main .fs-feature{
    position:relative;display:block;overflow:hidden;
    border-radius:14px;background:var(--panel);
}
/* 대표 패널은 사진과 영상 둘 다 받습니다 (main.js 의 구역 표에서 고릅니다) */
#fs-main .fs-feature > img,
#fs-main .fs-feature > video{
    display:block;width:100%;height:100%;object-fit:cover;background:#0A0B0C;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
#fs-main .fs-feature:hover > img,
#fs-main .fs-feature:hover > video{transform:scale(1.03)}
#fs-main .fs-feature-cap{
    position:absolute;left:0;right:0;bottom:0;
    display:block;padding:90px 30px 30px;color:#fff;
    background:linear-gradient(to top,
        rgba(8,9,11,.92) 0%,
        rgba(8,9,11,.7) 38%,
        rgba(8,9,11,.2) 72%,
        rgba(8,9,11,0) 100%);
}
#fs-main .fs-feature-cap strong{
    display:block;font-size:28px;font-weight:700;line-height:1.24;
    letter-spacing:-0.035em;margin-bottom:8px;
}
#fs-main .fs-feature-cap em{
    display:block;font-style:normal;font-size:14px;color:#C3C9CF;
}

/* 우측 상품 3행 */
#fs-main .fs-pcol{display:flex;flex-direction:column;gap:14px}
#fs-main .fs-prow{
    flex:1 1 0;display:flex;align-items:center;gap:16px;
    background:var(--s);border:1px solid var(--line);border-radius:12px;
    padding:14px 18px 14px 14px;
    transition:border-color .15s ease,box-shadow .15s ease;
}
#fs-main .fs-band-alt .fs-prow{background:var(--g);border-color:transparent}
#fs-main .fs-prow:hover{border-color:#CFD4D9;box-shadow:0 8px 22px -14px rgba(20,22,26,.28)}
#fs-main .fs-prow-thumb{
    flex:0 0 108px;width:108px;height:108px;
    background:#fff;border-radius:8px;overflow:hidden;
}
#fs-main .fs-prow-thumb img{width:100%;height:100%;object-fit:contain}
#fs-main .fs-prow-body{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;gap:7px;
}
#fs-main .fs-prow-nm{
    font-size:14.5px;font-weight:500;line-height:1.45;color:var(--ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}


/* ══════════════ 가격 표기 (공통) ══════════════ */
#fs-main .fs-price{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
    font-family:var(--la);font-variant-numeric:tabular-nums;
}
#fs-main .fs-now{font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-0.02em}
#fs-main .fs-now i{font-family:var(--kr);font-style:normal;font-size:12.5px;font-weight:500}
#fs-main .fs-was{font-size:12.5px;color:var(--ink3);text-decoration:line-through}
#fs-main .fs-off{
    font-family:var(--la);font-weight:700;font-size:12px;line-height:1.25;
    color:#fff;background:var(--sale);
    padding:3px 7px;border-radius:4px;white-space:nowrap;
}
#fs-main .fs-soldout{font-family:var(--kr);font-weight:700;font-size:14px;color:var(--ink3)}

/* 메이크샵 아이콘 이미지 (오늘출발 / NEW / BEST) */
#fs-main .fs-icons{display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1}
#fs-main .fs-icons img{height:17px;width:auto;display:inline-block}
/* BASIC css end */