/* BASIC css start */
@charset "utf-8";
/* ============================================================
   FINE 공식스토어 — 푸터 (PC 스킨)
   · footer.1.html 과 짝입니다. 되돌릴 때 함께 되돌리세요.
   · common.css 는 수정하지 않고, #footer_wrap 색만 여기서 덮습니다.
     (#footer_wrap.fs-ft 로 클래스를 하나 더 붙여 우선순위를 올렸습니다)
   · 고정폭 1200 기준
   ============================================================ */

#footer_wrap.fs-ft{
    width:100%;min-width:1200px;
    background:#0F1114;
    font-family:'Noto Sans KR','Nanum Gothic',sans-serif;
    letter-spacing:-0.01em;
    color:#8B929B;
}
#footer_wrap.fs-ft *{box-sizing:border-box}
#footer_wrap.fs-ft a{text-decoration:none;color:inherit}
#footer_wrap.fs-ft p{margin:0}
#footer_wrap.fs-ft ul{margin:0;padding:0;list-style:none}
#footer_wrap.fs-ft li{list-style:none}
#footer_wrap.fs-ft a:focus-visible{outline:2px solid #FC671A;outline-offset:2px}

#footer_wrap.fs-ft .fs-ft-inner{width:1200px;margin:0 auto}

/* ---------- 컬럼 헤딩 ---------- */
#footer_wrap.fs-ft h4{
    margin:0 0 16px;
    font-family:'Archivo','Noto Sans KR',sans-serif;
    font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
    color:#fff;
}


/* ══════════════ 1단 : 링크 가로 줄 + SNS ══════════════
   링크 5개를 가로로 펼칩니다. 늘어나면 자동으로 다음 줄로 넘어갑니다. */
#footer_wrap.fs-ft .fs-ft-top .fs-ft-inner{
    display:flex;align-items:center;justify-content:space-between;gap:40px;
    padding:26px 0;
}
#footer_wrap.fs-ft .fs-ft-nav{display:flex;flex-wrap:wrap;gap:26px}
#footer_wrap.fs-ft .fs-ft-nav a{font-size:13px;line-height:1.6;color:#C3C9CF}
#footer_wrap.fs-ft .fs-ft-nav a:hover{color:#fff}

/* SNS — 아이콘 파일(어두운 원 + 흰 그림)을 그대로 키워서 씁니다 */
#footer_wrap.fs-ft .fs-ft-sns{display:flex;flex-wrap:nowrap;gap:10px;flex:0 0 auto}
#footer_wrap.fs-ft .fs-ft-sns a{
    display:block;width:40px;height:40px;border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
    transition:opacity .15s ease;
}
#footer_wrap.fs-ft .fs-ft-sns a:hover{opacity:.75}
#footer_wrap.fs-ft .fs-ft-sns img{display:block;width:40px;height:40px;border-radius:50%}


/* ══════════════ 2단 : 왼쪽 고객센터 · 오른쪽 사업자정보 ══════════════
   왼쪽 칸만 폭을 고정하고 오른쪽은 남는 자리를 받아 오른쪽 끝에 붙입니다.
   칸이 셋 이상이 아니라서 가운데가 비는 문제가 생기지 않습니다. */
#footer_wrap.fs-ft .fs-ft-main{
    border-top:1px solid rgba(255,255,255,.09);
}
#footer_wrap.fs-ft .fs-ft-main .fs-ft-inner{
    display:flex;align-items:flex-start;justify-content:space-between;gap:80px;
    padding:34px 0 38px;
}

/* 고객센터 */
#footer_wrap.fs-ft .fs-ft-cs{flex:0 0 430px}
#footer_wrap.fs-ft .fs-ft-tel{
    font-family:'Archivo','Noto Sans KR',sans-serif;
    font-weight:700;font-size:26px;letter-spacing:-0.015em;
    color:#fff;font-variant-numeric:tabular-nums;
    margin-bottom:9px;
}
#footer_wrap.fs-ft .fs-ft-hours{font-size:12px;line-height:1.7;color:#A9B0B8}
#footer_wrap.fs-ft .fs-ft-addr{
    margin-top:14px;
    font-size:11.5px;line-height:1.7;color:#767D86;
}

/* 사업자정보 + 에스크로 (오른쪽 정렬) */
#footer_wrap.fs-ft .fs-ft-info{
    flex:1 1 auto;min-width:0;
    display:flex;flex-direction:column;align-items:flex-end;gap:20px;
    text-align:right;
}
#footer_wrap.fs-ft .fs-ft-biz p{font-size:12px;line-height:1.85;color:#767D86}
#footer_wrap.fs-ft .fs-ft-biz b{color:#C3C9CF;font-weight:700;margin-right:11px}
#footer_wrap.fs-ft .fs-ft-biz span{margin-left:12px;white-space:nowrap}


/* ══════════════ KCP 구매안전서비스 ══════════════ */
#footer_wrap.fs-ft .fs-ft-escrow{
    display:flex;align-items:center;justify-content:flex-end;gap:12px;
}
#footer_wrap.fs-ft .fs-ft-escrow a{
    flex:0 0 auto;display:block;order:-1;
    background:#fff;border-radius:5px;padding:5px 7px;line-height:0;
}
#footer_wrap.fs-ft .fs-ft-escrow img{display:block;height:44px;width:auto;border:0}
/* 배지 이미지를 못 불러왔을 때 대체 표시.
   footer.1.html 의 img onerror 가 이 클래스를 붙입니다.
   이미지를 올리시면 자동으로 원래 배지로 돌아갑니다. */
#footer_wrap.fs-ft .fs-ft-escrow a.is-noimg{
    display:flex;align-items:center;justify-content:center;
    height:54px;padding:0 14px;line-height:1.35;
}
#footer_wrap.fs-ft .fs-ft-escrow a.is-noimg:after{
    content:"구매안전서비스\A 가입사실 확인";white-space:pre-line;
    font-family:'Noto Sans KR',sans-serif;
    font-size:11.5px;font-weight:700;letter-spacing:-0.02em;
    color:#16181B;text-align:center;
}
#footer_wrap.fs-ft .fs-ft-escrow p{
    font-size:11.5px;line-height:1.6;color:#68707A;
}


/* ══════════════ 3단 : 저작권 한 줄 ══════════════ */
#footer_wrap.fs-ft .fs-ft-legal{
    border-top:1px solid rgba(255,255,255,.09);
    background:#0A0B0D;
    padding:15px 0 18px;
}
#footer_wrap.fs-ft .fs-ft-copy{
    font-family:'Archivo','Noto Sans KR',sans-serif;
    font-size:10.5px;letter-spacing:0.09em;color:#5A616A;
}


/* ══════════════════════════════════════════════════════════════════════
   ▼▼▼ 이 아래부터는 "전 페이지 공통 디자인" 입니다 ▼▼▼
   ──────────────────────────────────────────────────────────────────────
   왜 footer.1.css 에 들어있나
     메이크샵은 페이지마다 CSS 를 이 순서로 불러옵니다.
       common.css → 그 페이지 CSS → 헤더 CSS → footer.1.css
     · footer.1.css 가 <b>맨 마지막</b>이라 우선순위가 가장 높습니다.
     · 몰의 89개 디자인이 전부 include_footer(1) 을 씁니다.
       제휴 · 히든 페이지(티맵 · 티멤버십 · D10 · 보상판매 …)도 포함입니다.
       그 페이지들은 header.3~6 을 쓰기 때문에 header.1.css 가
       로드되지 않습니다. 그래서 공통 디자인을 헤더가 아니라
       푸터에 두어야 빠짐없이 닿습니다.
     · 덕분에 @import 같은 추가 장치가 필요 없습니다.

   common.css 는 수정하지 않습니다.
     새 클래스는 전부 fs- 로 시작해 기존 클래스와 겹치지 않습니다.
     기존 클래스를 덮는 곳은 아래 "기존 클래스 중립화" 절뿐이고,
     그것도 .fs-pg 안쪽으로 한정했습니다 → 손대지 않은 페이지는 그대로.

   되돌리기 : 이 구분선 아래를 전부 지우면 원래 상태로 돌아갑니다.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════ 디자인 토큰 ══════════════
   main.css 도 같은 값을 #fs-main 안에 따로 갖고 있습니다.
   메인은 독립적으로 동작해야 해서 일부러 중복을 뒀습니다.
   색을 바꿀 때는 두 곳을 함께 바꿔주세요. */
:root{
    --fs-g:#F0F1F2;          /* 페이지 바탕 */
    --fs-s:#FFFFFF;          /* 카드 */
    --fs-panel:#16181B;      /* 다크 패널 */
    --fs-line:#E2E5E8;

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

    --fs-brand:#FC671A;
    --fs-brand-deep:#C94E0B;
    --fs-brand-tint:#FFF0E6;

    --fs-sale:#E4262B;

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


/* ══════════════ 페이지 껍데기 ══════════════
   common.css 가 #contentWrap 에 width:1200px · padding 60px/100px 을
   걸어놨습니다. .fs-pg 는 그 안에서 화면 전체 폭으로 빠져나와
   바탕색을 깔고, 부모 여백을 음수 마진으로 상쇄합니다.
   → 이 클래스를 붙인 페이지만 새 디자인이 됩니다. */
.fs-pg{
    width:100vw;
    margin-top:-60px;margin-bottom:-100px;
    margin-left:calc(50% - 50vw);
    background:var(--fs-g);
    font-family:var(--fs-kr);font-size:15px;line-height:1.6;
    color:var(--fs-ink);letter-spacing:-0.01em;
    text-align:left;
}
.fs-pg *{box-sizing:border-box}
/* 링크는 주변 글자색을 그대로 물려받습니다 (상품명 · 분류칩 등).
   ⚠ 버튼(.fs-btn)은 반드시 빼야 합니다.
      이 규칙은 .fs-pg a (0,1,1) 이라서 .fs-btn-dark (0,1,0) 보다 우선순위가 높습니다.
      빼지 않으면 버튼 글자색이 본문 먹색으로 덮여서,
      검은 버튼 위에 검은 글자가 되어 글자가 안 보입니다.
      (실제로 "블랙박스 전체 보기" 버튼이 그렇게 나왔습니다) */
.fs-pg a:not(.fs-btn){color:inherit;text-decoration:none}
.fs-pg a.fs-btn{text-decoration:none}
.fs-pg img{display:block;max-width:100%;border:0}
.fs-pg p{margin:0}
.fs-pg a:focus-visible{outline:2px solid var(--fs-brand);outline-offset:3px}
.fs-pg .fs-wrap{width:1200px;margin:0 auto}

/* ── 기존 클래스 중립화 ──
   common.css 가 잡아둔 옛 레이아웃을 .fs-pg 안에서만 풀어줍니다.
   바깥(손대지 않은 페이지)에는 영향이 없습니다. */
.fs-pg .item-wrap,
.fs-pg #prdBrand{background:none;margin:0;padding:0;width:auto}
.fs-pg .item-wrap .item-list{margin:0;width:auto;clear:none}
.fs-pg .item-wrap .item-list ul{float:none;width:auto;height:auto;margin:0}
.fs-pg .item-wrap .item-hd{width:auto;padding:0}


/* ══════════════ 페이지 타이틀 ══════════════ */
.fs-pghead{
    background:var(--fs-s);border-bottom:1px solid var(--fs-line);
    padding:38px 0 0;
}
.fs-pghead .fs-wrap{display:block}
.fs-pghead .fs-eyebrow{
    display:block;font-family:var(--fs-la);font-weight:600;font-size:11px;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--fs-brand);
    margin:0 0 7px;
}
.fs-pghead h1,
.fs-pghead h2{
    margin:0;padding:0;height:auto;width:auto;background:none;display:block;
    font-family:var(--fs-kr);font-size:30px;font-weight:700;
    letter-spacing:-0.035em;line-height:1.25;color:var(--fs-ink);
    text-align:left;
}
.fs-pghead .fs-pgdesc{
    margin-top:9px;font-size:14.5px;color:var(--fs-ink2);
}
.fs-pghead .fs-pgcount{
    margin-top:9px;font-family:var(--fs-la);font-size:13px;color:var(--fs-ink3);
    font-variant-numeric:tabular-nums;
}

/* 카테고리 타이틀 이미지 (관리자에 등록한 경우) */
/* 페이지 맨 위 띠배너 — 화면 전체 폭으로 늘립니다 (1920 × 400 권장) */
.fs-pghead-img{background:var(--fs-panel);line-height:0}
.fs-pghead-img img{width:100%;height:auto;margin:0 auto}

/* 페이지 맨 아래 안내 이미지 (이용 시 유의 사항 등)
   ⚠ 위 띠배너와 달리 width:100% 를 주지 않습니다.
      안내문 이미지를 화면 폭으로 늘리면 글자가 거대해집니다.
      원본 크기를 지키고, 1200px 를 넘을 때만 줄입니다. */
.fs-catenote{background:var(--fs-s);padding:54px 0 72px;line-height:0}
.fs-catenote img{display:block;max-width:100%;height:auto;margin:0 auto;border:0}

/* ── 하위 카테고리 칩 ── */
.fs-catechip{margin-top:22px;padding-bottom:0}
.fs-catechip ul{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:0;padding:0;list-style:none;font-size:0;line-height:0;
}
.fs-catechip li{
    display:block;margin:0;padding:0;height:auto;line-height:normal;
    background:none;white-space:nowrap;list-style:none;
}
.fs-catechip li a{
    display:inline-flex;align-items:center;height:36px;padding:0 16px;
    border:1px solid var(--fs-line);border-radius:999px;background:var(--fs-s);
    font-family:var(--fs-kr);font-size:13.5px;font-weight:500;line-height:1;
    color:var(--fs-ink2);
    transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.fs-catechip li a:hover{border-color:var(--fs-ink);color:var(--fs-ink);line-height:1}
.fs-catechip li a.fs-on{
    background:var(--fs-panel);border-color:var(--fs-panel);color:#fff;
}


/* ══════════════ 본문 밴드 ══════════════ */
.fs-body{padding:46px 0 76px}
.fs-sec{margin-bottom:56px}
.fs-sec:last-child{margin-bottom:0}
.fs-sechd{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:20px;margin:0 0 20px;
    width:auto;height:auto;color:inherit;text-align:left;clear:none;
}
.fs-sechd h3{
    margin:0;font-family:var(--fs-kr);font-size:20px;font-weight:700;
    letter-spacing:-0.03em;line-height:1.3;color:var(--fs-ink);
}
.fs-sechd .fs-sub{
    font-size:13.5px;color:var(--fs-ink3);padding:0;background:none;
}


/* ══════════════ 상품 카드 ══════════════
   .fs-grid 는 기본 3열입니다. 4열로 바꾸려면 아래 한 줄만 고치세요.
     repeat(3, 1fr)  →  repeat(4, 1fr)                         */
.fs-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:28px 24px;
    margin:0;padding:0;list-style:none;
}
.fs-grid > li{display:block;margin:0;padding:0;list-style:none;text-align:left}

.fs-card{
    display:flex;flex-direction:column;height:100%;
    background:var(--fs-s);border:1px solid var(--fs-line);border-radius:12px;
    overflow:hidden;
    transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.fs-card:hover{
    border-color:#CFD4D9;transform:translateY(-2px);
    box-shadow:0 14px 30px -18px rgba(20,22,26,.3);
}
.fs-card-thumb{
    position:relative;display:block;width:100%;aspect-ratio:1 / 1;
    background:#fff;overflow:hidden;
}
.fs-card-thumb img{
    width:100%;height:100%;object-fit:contain;
    transition:transform .35s ease;
}
.fs-card:hover .fs-card-thumb img{transform:scale(1.035)}

/* 메이크샵 아이콘(NEW/BEST/오늘출발)은 썸네일 위에 얹습니다.
   본문에 두면 아이콘이 있는 카드만 이름이 아래로 밀려
   한 줄 안에서 이름·가격 높이가 어긋납니다. */
.fs-card-thumb .fs-icons{
    position:absolute;left:12px;top:12px;z-index:3;
    max-width:calc(100% - 24px);
}
.fs-card-thumb .fs-icons img{
    box-shadow:0 1px 4px rgba(0,0,0,.18);border-radius:3px;
}

/* 품절 덮개 */
.fs-card-out{
    position:absolute;inset:0;z-index:2;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.74);
}
.fs-card-out b{
    font-family:var(--fs-kr);font-size:13px;font-weight:700;color:var(--fs-ink);
    background:var(--fs-s);border:1px solid var(--fs-line);
    border-radius:999px;padding:8px 18px;
}

.fs-card-body{
    flex:1 1 auto;display:flex;flex-direction:column;
    padding:18px 20px 20px;gap:8px;
}
.fs-card-nm{
    font-family:var(--fs-kr);font-size:15px;font-weight:500;line-height:1.45;
    color:var(--fs-ink);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin:0;padding:0;text-align:left;
}
.fs-card-sub{
    font-family:var(--fs-kr);font-size:13px;line-height:1.5;color:var(--fs-ink2);
    /* 요약설명은 2줄까지 보여줍니다.
       줄바꿈은 footer.1.html 아래쪽 스크립트가 쉼표로 이어 붙이므로,
       2줄 안에 들어가는 글자 수가 늘어납니다. */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin:0;padding:0;
}
.fs-card-price{margin-top:auto;padding-top:4px}


/* ══════════════ 가격 표기 (공통) ══════════════ */
.fs-price{
    display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
    font-family:var(--fs-la);font-variant-numeric:tabular-nums;
    margin:0;padding:0;
    /* 품절(15px)과 정상가(19px)의 줄높이가 달라 카드마다 가격줄이
       3px 씩 어긋나던 것을 최소높이로 고정했습니다 */
    min-height:27px;
}
.fs-now{font-weight:700;font-size:19px;color:var(--fs-ink);letter-spacing:-0.02em}
.fs-now i{font-family:var(--fs-kr);font-style:normal;font-size:12.5px;font-weight:500}
.fs-was{font-size:12.5px;color:var(--fs-ink3);text-decoration:line-through}
.fs-off{
    font-family:var(--fs-la);font-weight:700;font-size:12px;line-height:1.25;
    color:#fff;background:var(--fs-sale);
    padding:3px 7px;border-radius:4px;white-space:nowrap;
}
.fs-soldout{font-family:var(--fs-kr);font-weight:700;font-size:15px;color:var(--fs-ink3)}

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


/* ══════════════ 버튼 ══════════════ */
.fs-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:48px;padding:0 26px;border-radius:6px;
    font-family:var(--fs-kr);font-size:15px;font-weight:500;
    letter-spacing:-0.02em;white-space:nowrap;cursor:pointer;
    border:0;transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.fs-btn-dark{background:var(--fs-panel);color:#fff}
.fs-btn-dark:hover{background:#000}
.fs-btn-brand{background:var(--fs-brand);color:#fff}
.fs-btn-brand:hover{background:var(--fs-brand-deep)}
.fs-btn-line{background:var(--fs-s);color:var(--fs-ink);box-shadow:inset 0 0 0 1px var(--fs-line)}
.fs-btn-line:hover{box-shadow:inset 0 0 0 1px var(--fs-ink)}
.fs-btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.fs-btn-lg{height:56px;padding:0 34px;font-size:16px}
.fs-btn-full{width:100%}


/* ══════════════ 페이지네이션 ══════════════ */
.fs-pager{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin:48px 0 0;padding:0;text-align:center;
}
.fs-pager a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:38px;height:38px;padding:0 12px;
    border:1px solid var(--fs-line);border-radius:7px;background:var(--fs-s);
    font-family:var(--fs-la);font-size:13.5px;font-weight:600;line-height:1;
    color:var(--fs-ink2);
    transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.fs-pager a:hover{border-color:var(--fs-ink);color:var(--fs-ink)}
.fs-pager a.now,
.fs-pager a.fs-on{
    background:var(--fs-panel);border-color:var(--fs-panel);color:#fff;
    font-weight:700;letter-spacing:0;
}
.fs-pager .fs-pager-edge{font-family:var(--fs-kr);font-weight:500}


/* ══════════════ 비어있음 · 알림 ══════════════ */
.fs-empty{
    padding:88px 20px;text-align:center;
    background:var(--fs-s);border:1px solid var(--fs-line);border-radius:12px;
}
.fs-empty strong{
    display:block;font-family:var(--fs-kr);font-size:17px;font-weight:600;
    color:var(--fs-ink);margin-bottom:8px;
}
.fs-empty span{display:block;font-size:14px;color:var(--fs-ink3)}
.fs-empty .fs-btn{margin-top:22px}


/* ══════════════ 표 (주문내역 · 게시판 등 공통) ══════════════ */
.fs-table{
    width:100%;border-collapse:collapse;background:var(--fs-s);
    border-top:1px solid var(--fs-ink);
    font-family:var(--fs-kr);font-size:14px;
}
.fs-table th,
.fs-table td{
    padding:15px 16px;border-bottom:1px solid var(--fs-line);
    text-align:left;vertical-align:middle;line-height:1.55;
}
.fs-table thead th{
    background:#F7F8F9;font-size:13px;font-weight:600;color:var(--fs-ink2);
    letter-spacing:-0.01em;
}
.fs-table td.fs-num{
    font-family:var(--fs-la);font-variant-numeric:tabular-nums;text-align:right;
}
.fs-table td.fs-mid,
.fs-table th.fs-mid{text-align:center}


/* ══════════════ 폼 ══════════════ */
.fs-field{margin-bottom:16px}
.fs-field > label{
    display:block;margin-bottom:7px;
    font-family:var(--fs-kr);font-size:13.5px;font-weight:500;color:var(--fs-ink2);
}
.fs-input,
.fs-pg input[type="text"].fs-input,
.fs-pg input[type="password"].fs-input,
.fs-pg input[type="email"].fs-input,
.fs-pg input[type="tel"].fs-input{
    width:100%;height:48px;padding:0 15px;
    border:1px solid var(--fs-line);border-radius:7px;background:var(--fs-s);
    font-family:var(--fs-kr);font-size:15px;color:var(--fs-ink);
}
.fs-input:focus{outline:0;border-color:var(--fs-ink)}
.fs-input::placeholder{color:#AEB4BB}
select.fs-input{height:48px;padding:0 12px}
textarea.fs-input{height:auto;min-height:140px;padding:13px 15px;line-height:1.65}


/* ══════════════ 다크 패널 (문의 · 안내 블록) ══════════════ */
.fs-panel{
    background:var(--fs-panel);border-radius:14px;color:#fff;padding:34px 36px;
}
.fs-panel h3{
    margin:0 0 8px;font-family:var(--fs-kr);font-size:19px;font-weight:600;
    letter-spacing:-0.03em;color:#fff;
}
.fs-panel p{font-size:14px;line-height:1.7;color:#A9B0B8}

/* ══════════════════════════════════════════════════════════════════════
   헤더 (header.1 · header.3~6 공용)
   ──────────────────────────────────────────────────────────────────────
   본점 헤더와 제휴 헤더가 같은 규칙을 씁니다.
   제휴 페이지는 header.1.css 를 불러오지 않으므로 여기 있어야 합니다.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- 껍데기 ---------- */
#header_top.fs-hd{
    width:100%;margin:0;
    position:sticky;top:0;z-index:999;
    background:#0F1114;
    font-family:'Noto Sans KR','Nanum Gothic',sans-serif;
    letter-spacing:-0.01em;
}
#header_top.fs-hd #header{width:100%;margin:0}
#header_top.fs-hd *{box-sizing:border-box}
#header_top.fs-hd a{text-decoration:none}
#header_top.fs-hd a:focus-visible{outline:2px solid #FC671A;outline-offset:2px}

#header_top.fs-hd .fs-hd-inner{
    width:1200px;margin:0 auto;
    display:flex;align-items:center;
}


/* ══════════════ 유틸바 ══════════════ */
#header_top.fs-hd .fs-hd-util{
    background:#0A0B0D;border-bottom:1px solid rgba(255,255,255,.07);
    height:36px;
}
#header_top.fs-hd .fs-hd-util .fs-hd-inner{height:36px;justify-content:space-between;gap:20px}
#header_top.fs-hd .fs-hd-util-l{display:flex;align-items:center;gap:18px}
#header_top.fs-hd .fs-hd-util-l a{font-size:12px;color:#8B929B}
#header_top.fs-hd .fs-hd-util-l a:hover{color:#E6E9ED}

#header_top.fs-hd .fs-hd-util-r{display:flex;align-items:center}

/* ══════════════════════════════════════════════════════════════
   personal{topbar} 출력물 정리
   ──────────────────────────────────────────────────────────────
   메이크샵이 이 태그 자리에 아래 구조를 자동으로 뿌립니다.
   (관리자에서 마크업을 바꿀 수 없어 CSS 로만 걸러냅니다)

     #topbar
       ├ .topbar_left
       │   ├ .topmenu1 > a "MEMBERSHIP"
       │   │             + .submenu > ul > a > span
       │   │                 회원가입 / 로그인 / 주문조회 / 장바구니 / 마이페이지
       │   ├ pre > a "홈페이지 돌아가기"
       │   └ a (빈 링크)
       └ .topbar_right
           ├ .topmenu2 > a "COMMUNITY" + .submenu (공지사항 / 이벤트)
           └ .sear > form (검색)

   → 남기는 것 : 로그인 · 회원가입 · 주문조회 3개
   → 지우는 것 : MEMBERSHIP 라벨, 장바구니, 마이페이지,
                 홈페이지 돌아가기, COMMUNITY, 검색폼

   ※ 링크를 직접 적지 않고 이 방식을 쓴 이유:
      메이크샵이 로그인 상태에 따라 "로그인 → 로그아웃" 처럼
      항목을 자동으로 바꿔주기 때문입니다.
   ※ id="cate_top" 이 topmenu1 / topmenu2 양쪽에 중복으로 붙어
      나오므로 id 가 아니라 .topmenu1 / .topmenu2 클래스로 잡습니다.
   ══════════════════════════════════════════════════════════════ */
#header_top.fs-hd #topbar_box{position:relative;display:flex;align-items:center}
#header_top.fs-hd #topbar_box #topbar{
    position:static;width:auto;min-width:0;height:auto;
    display:flex;align-items:center;
}
#header_top.fs-hd #topbar_box #topbar .topbar_left{
    position:static;top:auto;left:auto;right:auto;
    display:flex;align-items:center;
}
#header_top.fs-hd #topbar_box #topbar div{float:none;color:#8B929B}

/* 1) 통째로 숨기는 덩어리 */
#header_top.fs-hd #topbar_box #topbar .topbar_right,   /* COMMUNITY + 검색 */
#header_top.fs-hd #topbar_box #topbar .topbar_left > pre,   /* 홈페이지 돌아가기 */
#header_top.fs-hd #topbar_box #topbar .topbar_left > a,     /* 빈 링크 */
#header_top.fs-hd #topbar_box #topbar .topmenu1 > a,        /* MEMBERSHIP 라벨 */
#header_top.fs-hd #topbar_box #topbar .sub_arrow,           /* 드롭다운 화살표 */
#header_top.fs-hd #topbar_box #topbar img{
    display:none !important;
}

/* 2) MEMBERSHIP 드롭다운을 유틸바에 그대로 펼칩니다 */
#header_top.fs-hd #topbar_box #topbar .topmenu1{position:static;display:flex;align-items:center}
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu{
    position:static !important;
    display:flex !important;
    visibility:visible !important;
    width:auto;height:auto;min-width:0;
    margin:0;padding:0;border:0;background:none;box-shadow:none;
    overflow:visible;
}
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul{
    display:flex;align-items:center;gap:16px;
    margin:0;padding:0;border:0;background:none;
    font-size:inherit;line-height:inherit;list-style:none;
}
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > a,
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > li{
    display:block;margin:0;padding:0;border:0;background:none;
    width:auto;height:auto;
}

/* 3) 순서 : 로그인 → 회원가입 → 주문조회
      (메이크샵 출력 순서는 회원가입 · 로그인 · 주문조회 입니다) */
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > *:nth-child(1){order:2}
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > *:nth-child(2){order:1}
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > *:nth-child(3){order:3}

/* 4) 4번째 이후(장바구니 · 마이페이지)는 숨깁니다.
      항목이 늘거나 줄면 이 숫자만 조정하세요. */
#header_top.fs-hd #topbar_box #topbar .topmenu1 .submenu ul > *:nth-child(n+4){display:none !important}

/* 5) 글자 스타일 */
#header_top.fs-hd #topbar_box #topbar a{
    color:#8B929B;font-size:12px;line-height:1.4;letter-spacing:-0.01em;
    white-space:nowrap;
}
#header_top.fs-hd #topbar_box #topbar a:hover{color:#fff}
#header_top.fs-hd #topbar_box #topbar a span{
    color:inherit;font-size:inherit;line-height:inherit;
    background:none;padding:0;
}


/* ══════════════ 메인 행 ══════════════ */
#header_top.fs-hd .fs-hd-main{background:#16181B}
#header_top.fs-hd .fs-hd-main .fs-hd-inner{height:66px;gap:40px}

/* ── 로고 ── */
#header_top.fs-hd .fs-hd-logo{
    flex:0 0 auto;display:flex;align-items:center;gap:9px;
}
#header_top.fs-hd .fs-hd-logo img{
    display:block;width:auto;height:25px;border:0;
}
#header_top.fs-hd .fs-hd-logo span{
    font-size:17px;font-weight:500;color:#fff;letter-spacing:-0.03em;
    padding-bottom:1px;
}

/* ══════════════ 카테고리 (2단 드롭다운) ══════════════ */
#header_top.fs-hd .fs-hd-nav{
    flex:1 1 auto;min-width:0;
    /* 드롭다운이 헤더 밖으로 나가야 하므로 stretch 로 높이를 채웁니다 */
    align-self:stretch;display:flex;align-items:stretch;
}
#header_top.fs-hd .fs-hd-nav > ul{
    display:flex;align-items:stretch;gap:28px;
    margin:0;padding:0;list-style:none;
}
#header_top.fs-hd .fs-hd-nav > ul > li{
    margin:0;padding:0;list-style:none;background:none;float:none;
    /* 드롭다운의 기준점 */
    position:relative;display:flex;align-items:center;
}

/* ── 1단 항목 ── */
#header_top.fs-hd .fs-hd-top{
    position:relative;display:flex;align-items:center;
    height:100%;
    font-size:14.5px;font-weight:500;color:#E6E9ED;white-space:nowrap;
}
#header_top.fs-hd .fs-hd-top:after{
    content:"";position:absolute;left:0;right:0;bottom:16px;
    height:2px;background:#FC671A;
    transform:scaleX(0);transform-origin:left;
    transition:transform .18s ease;
}
#header_top.fs-hd .fs-hd-top:hover{color:#fff}
#header_top.fs-hd .fs-hd-item:hover .fs-hd-top{color:#fff}
#header_top.fs-hd .fs-hd-item:hover .fs-hd-top:after{transform:scaleX(1)}

/* ── 2단 드롭다운 ──
   hover 로만 열립니다. 자바스크립트가 없어도 동작합니다.
   메뉴와 패널 사이가 떨어져 있으면 마우스가 지나가다 닫히므로
   패널을 헤더 바로 아래에 붙이고 위쪽에 여유 영역을 둡니다. */
#header_top.fs-hd .fs-hd-drop{
    position:absolute;left:-18px;top:100%;z-index:1200;
    padding-top:9px;                /* 마우스가 건너갈 여유 */
    opacity:0;visibility:hidden;
    transform:translateY(-5px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events:none;
}
#header_top.fs-hd .fs-hd-item:hover .fs-hd-drop,
#header_top.fs-hd .fs-hd-item:focus-within .fs-hd-drop{
    opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
}
#header_top.fs-hd .fs-hd-drop-in{
    background:#1F2226;
    border:1px solid rgba(255,255,255,.09);
    border-radius:12px;
    padding:14px 10px;
    box-shadow:0 18px 44px -14px rgba(0,0,0,.72);
    min-width:196px;
}

#header_top.fs-hd .fs-hd-sub{
    margin:0;padding:0;list-style:none;
    display:flex;flex-direction:column;
}
/* 블랙박스는 항목이 9개지만 한 열로 둡니다.
   2열로 나누면 순서가 위→아래→다시 위로 꺾여서
   "클라우드 / 와이파이" 같은 짝이 서로 다른 열로 흩어집니다.
   지정해주신 순서를 그대로 읽히게 하는 쪽을 택했습니다. */
#header_top.fs-hd .fs-hd-sub > li{
    margin:0;padding:0;list-style:none;background:none;float:none;
    display:block;
}
#header_top.fs-hd .fs-hd-sub > li > a{
    display:block;
    padding:9px 14px;border-radius:7px;
    font-size:13.5px;font-weight:400;line-height:1.4;
    color:#A9B0B8;white-space:nowrap;
    transition:background .13s ease, color .13s ease;
}
#header_top.fs-hd .fs-hd-sub > li > a:hover{
    background:rgba(255,255,255,.08);color:#fff;
}
/* 장착권 · 액세서리처럼 성격이 다른 항목 앞에 구분선 */
#header_top.fs-hd .fs-hd-sub > li.fs-hd-gap{
    margin-top:7px;padding-top:7px;
    border-top:1px solid rgba(255,255,255,.09);
}


/* ── 아이콘 ── */
#header_top.fs-hd .fs-hd-ico{flex:0 0 auto;display:flex;align-items:center;gap:4px}
#header_top.fs-hd .fs-hd-ico a{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:#E6E9ED;
}
#header_top.fs-hd .fs-hd-ico a:hover{background:rgba(255,255,255,.09);color:#fff}
#header_top.fs-hd .fs-hd-ico svg{
    width:19px;height:19px;display:block;
    stroke:currentColor;stroke-width:1.6;fill:none;
    stroke-linecap:round;stroke-linejoin:round;
}

/* ── 헤더 검색창 ──
   돋보기 앞에 입력칸을 붙였습니다. 돋보기 자체가 전송 버튼입니다.
   입력칸은 평소 182px, 커서를 올리거나 입력 중일 때 236px 로 넓어집니다.
   폭을 바꾸시려면 아래 두 숫자만 고치세요. */
#header_top.fs-hd .fs-hd-srch{
    display:flex;align-items:center;gap:2px;
    height:38px;margin:0 2px 0 0;padding:0 2px 0 14px;
    border-radius:19px;
    background:rgba(255,255,255,.07);
    border:1px solid transparent;
    transition:background .15s ease, border-color .15s ease;
}
#header_top.fs-hd .fs-hd-srch:hover{background:rgba(255,255,255,.11)}
#header_top.fs-hd .fs-hd-srch:focus-within{
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.28);
}
#header_top.fs-hd .fs-hd-srch input{
    width:182px;height:34px;
    margin:0;padding:0;
    border:0;background:none;outline:0;
    font-family:var(--fs-kr);font-size:13px;color:#fff;
    transition:width .18s ease;
}
#header_top.fs-hd .fs-hd-srch:focus-within input{width:236px}
#header_top.fs-hd .fs-hd-srch input::placeholder{color:#8E959D}
/* 익스플로러·크롬이 넣는 기본 지우기 아이콘 제거 */
#header_top.fs-hd .fs-hd-srch input::-ms-clear,
#header_top.fs-hd .fs-hd-srch input::-webkit-search-cancel-button{display:none}
#header_top.fs-hd .fs-hd-srch button{
    flex:0 0 auto;
    width:34px;height:34px;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:0;border-radius:50%;background:none;cursor:pointer;
    color:#E6E9ED;
}
#header_top.fs-hd .fs-hd-srch button:hover{background:rgba(255,255,255,.14);color:#fff}
#header_top.fs-hd .fs-hd-srch button svg{width:18px;height:18px}


/* ══════════════ 제휴 헤더 (header.3~6) ══════════════
   본점 헤더와 같은 모양이되, 제휴 페이지라는 표시만 유틸바에 둡니다. */
#header_top.fs-hd-partner .fs-hd-badge{
    display:inline-flex;align-items:center;height:20px;padding:0 9px;
    border-radius:4px;
    background:rgba(252,103,26,.16);border:1px solid rgba(252,103,26,.42);
    font-family:var(--fs-kr);font-size:11px;font-weight:600;letter-spacing:.02em;
    color:#FFA26B;white-space:nowrap;
}
/* 제휴 헤더는 내비에 하위분류가 없어 드롭다운 여백이 필요없습니다 */
#header_top.fs-hd-partner .fs-hd-nav > ul{gap:26px}

/* 제휴 전용 배너 (shopbrand.025 · 066 · 019 · 003_005) */
.fs-pbanner{background:var(--fs-s);padding:22px 0 0;text-align:center}
.fs-pbanner img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:10px}
.fs-pbanner a{display:inline-block;line-height:0}






/* ── 리뷰 제공 기준 (말풍선 창) ──
   footer.1.html 의 #fsRvPolicy 가 상품상세 리뷰 영역 오른쪽 위로 옮겨져 보입니다.
   · 닫혀 있을 때 : 오른쪽에 작은 글자 버튼 "리뷰 제공 기준 ⓘ"
   · 누르면      : 버튼 바로 아래에 작은 창이 겹쳐 뜹니다 (아래 내용을 밀어내지 않음)
   · 상품상세 CSS(#content ...)에 지지 않도록 id(#fsRvPolicy)로 지정합니다. */
#fsRvPolicy.fs-rvp{position:relative;display:block;margin:14px 0 10px;padding:0;border:0;background:none;text-align:right;z-index:50}
#fsRvPolicy.fs-rvp[hidden]{display:none}
#fsRvPolicy.fs-rvp > summary{
    display:inline-flex;align-items:center;gap:4px;
    padding:4px 0;cursor:pointer;list-style:none;
    font-size:12.5px;font-weight:400;line-height:1.4;color:var(--fs-ink3,#8B929B);
}
#fsRvPolicy.fs-rvp > summary::-webkit-details-marker{display:none}
#fsRvPolicy.fs-rvp > summary::marker{content:""}
#fsRvPolicy.fs-rvp > summary i{
    display:inline-flex;align-items:center;justify-content:center;
    width:12px;height:12px;border:1px solid currentColor;border-radius:50%;
    font-size:8.5px;font-style:normal;font-weight:700;line-height:1;font-family:Georgia,serif;
}
#fsRvPolicy.fs-rvp > summary:hover,
#fsRvPolicy.fs-rvp[open] > summary{color:var(--fs-ink2,#5C636C)}
#fsRvPolicy.fs-rvp > summary:focus-visible{outline:2px solid var(--fs-brand,#FC671A);outline-offset:2px;border-radius:4px}

/* 창 */
#fsRvPolicy .fs-rvp-pop{
    position:absolute;right:0;top:calc(100% + 6px);
    width:330px;max-width:calc(100vw - 32px);max-height:260px;overflow-y:auto;
    padding:16px 40px 16px 16px;box-sizing:border-box;text-align:left;
    background:#fff;border:1px solid #16181B;border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}
#fsRvPolicy .fs-rvp-pop strong{display:block;margin:0 0 10px;font-size:13.5px;font-weight:700;color:#16181B}
#fsRvPolicy .fs-rvp-x{
    position:absolute;top:10px;right:10px;width:26px;height:26px;padding:0;margin:0;
    border:0;background:none;cursor:pointer;
}
#fsRvPolicy .fs-rvp-x:before,
#fsRvPolicy .fs-rvp-x:after{
    content:"";position:absolute;left:5px;top:12px;width:16px;height:1.4px;background:#5C636C;
}
#fsRvPolicy .fs-rvp-x:before{transform:rotate(45deg)}
#fsRvPolicy .fs-rvp-x:after{transform:rotate(-45deg)}
#fsRvPolicy .fs-rvp-pop ul{margin:0;padding:0;list-style:none}
#fsRvPolicy .fs-rvp-pop li{
    position:relative;margin:0 0 9px;padding:0 0 0 10px;list-style:none;
    font-size:12.5px;line-height:1.6;color:#4A5159;text-align:left;word-break:keep-all;
}
#fsRvPolicy .fs-rvp-pop li:last-child{margin-bottom:0}
#fsRvPolicy .fs-rvp-pop li:before{content:"";position:absolute;left:0;top:.72em;width:3px;height:3px;border-radius:50%;background:#A9AFB6}


/* ── 상품상세 바탕 흰색 ──
   상품상세 CSS(shopdetail*.css)는 #content 바탕을 회색(#F0F1F2)으로 깔고 있어서,
   상품상세 페이지(#productDetail 이 있는 #content)만 흰색으로 덮습니다.
   상세 CSS 5개(기본 · 025 · 031 · 066 · 100_001)를 고치지 않아도 한 번에 적용됩니다. */
#content:has(#productDetail){background:#fff}

/* [쿠폰 적용 가능 상품] 팝업 — 긴 상품명이 줄바꿈되어 다 보이도록
   ⚠ 팝업이 열릴 때 메이크샵 CSS 가 뒤늦게 붙어서, 앞에 #MS_popup_coupon_product 를 더해 이기게 했습니다. */
#MS_popup_coupon_product #popCouponProduct{width:560px;margin-left:-280px}
#MS_popup_coupon_product #popCouponProduct .pcp-cont .pcp-cnts{max-height:420px;overflow-y:auto}
#MS_popup_coupon_product #popCouponProduct .pcp-cont .pcp-cnts ul li{padding:12px 6px;text-align:left;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
#MS_popup_coupon_product #popCouponProduct .pcp-cont .pcp-cnts ul li a{color:#16181B}

/* BASIC css end */