/* BASIC css start */
#preview_wrap { display:none }

:root{
  /* Ink Scale · Neutral */
  --ink-950:#0A0A0B;
  --ink-900:#141416;
  --ink-800:#202024;
  --ink-700:#35363B;
  --ink-600:#4F5058;
  --ink-500:#6B6C73;
  --ink-400:#9FA0A7;
  --ink-300:#C9CAD0;
  --ink-200:#E5E6EA;
  --ink-100:#F2F3F5;
  --ink-050:#F8F8FA;
  --paper:#FFFFFF;

  /* Brand */
  --accent:#1A3D7C;
  --accent-soft:#E8EDF7;
  --signal:#C8102E;
  --success:#1E6F4A;
  --warn:#B98900;

  /* Radii */
  --r-xs:2px; --r-s:4px; --r-m:8px; --r-l:14px; --r-pill:999px;

  /* Shadow */
  --sh-1:0 1px 2px rgba(10,10,11,.04),0 2px 6px rgba(10,10,11,.04);
  --sh-2:0 4px 12px rgba(10,10,11,.06),0 12px 28px rgba(10,10,11,.06);
  --sh-3:0 16px 48px rgba(10,10,11,.12);

  /* Type */
  --f-sans:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-serif:'Noto Serif KR','Nanum Myeongjo',Georgia,serif;
  --f-mono:'JetBrains Mono','IBM Plex Mono',Consolas,monospace;

  /* Layout */
  --container:1440px;
  --gutter:40px;
  --header-h:130px;
  --transition:220ms cubic-bezier(.4,0,.2,1);
  
  --f-base:'Pretendard Variable','Pretendard',sans-serif;
    --f-mono:'JetBrains Mono',ui-monospace,monospace;
    --f-serif:'Noto Serif KR',serif;
    
}


/* ============================================================
   HEADER  ·  2-Tier Navigation
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--paper);
  border-bottom:1px solid var(--ink-100);
  transition:box-shadow var(--transition);
}
.site-header.is-scrolled{box-shadow:var(--sh-1)}

/* strip */
.hdr-strip{background:var(--ink-950); color:var(--ink-200); font-size:11px}
.hdr-strip-inner{
  max-width:var(--container); margin:0 auto;
  padding:8px var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  letter-spacing:.04em;
}
.hdr-strip-l{display:flex; gap:14px; align-items:center}
.hdr-strip-l .dot{color:var(--ink-500)}
.hdr-strip-r{display:flex; gap:22px}
.hdr-strip-r a{color:var(--ink-300)}
.hdr-strip-r a:hover{color:var(--paper)}

/* top bar */
.hdr-top{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:40px;
  padding:22px var(--gutter);
  max-width:var(--container); margin:0 auto;
}
.hdr-logo{display:inline-flex; flex-direction:column; line-height:1}
.hdr-logo .logo-mark{
  font-family:var(--f-serif); font-weight:900;
  font-size:30px; letter-spacing:-.04em; color:var(--ink-950);
}
.hdr-logo .logo-tag{
  font-family:var(--f-mono); font-size:9px; font-weight:400;
  letter-spacing:.3em; color:var(--ink-500); margin-top:6px;
}
.hdr-nav{display:flex; justify-content:center; gap:36px}
.hdr-nav a{
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-800); padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color var(--transition), color var(--transition);
}
.hdr-nav a:hover{color:var(--ink-950); border-bottom-color:var(--ink-300)}
.hdr-nav a.is-current{color:var(--ink-950); border-bottom-color:var(--ink-950)}
.hdr-nav a.nav-em{color:var(--signal)}

.hdr-util{display:flex; justify-content:flex-end; gap:22px; align-items:center}
.util-btn{
  font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-800); position:relative;
  padding:6px 0;
}
.util-btn:hover{color:var(--ink-950)}
.util-badge{
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:6px; min-width:18px; height:18px; padding:0 6px;
  background:var(--ink-950); color:var(--paper);
  border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:10px; font-weight:700;
}

/* sub bar */
.hdr-sub{background:var(--ink-050); border-top:1px solid var(--ink-100)}
.hdr-sub-inner{
  max-width:var(--container); margin:0 auto;
  padding:10px var(--gutter);
  display:flex; gap:28px; align-items:center;
}
.hs-pill{
  font-family:var(--f-mono); font-size:10px; font-weight:700;
  letter-spacing:.2em; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--ink-300);
}
.hs-pill-dark{background:var(--ink-950); color:var(--paper); border-color:var(--ink-950)}
.hs-link{
  font-size:12px; font-weight:500; color:var(--ink-700);
  transition:color var(--transition);
}
.hs-link:hover{color:var(--ink-950)}
.hs-right{margin-left:auto; font-weight:700; color:var(--accent)}

.site-header.is-compact .notice-strip,
.site-header.is-compact .brand-bar,
.site-header.is-compact .hdr-main{
  display: none;
}

  /* ===== 추가 패치: 페플 실제 프론트 반영 (브랜드바/GNB/검색/플로팅/쿠폰/배너/푸터) ===== */
  /* Top notice strip */
  .notice-strip{background:#0A0A0B;color:#F8F8FA;font-size:11px;letter-spacing:.06em;text-align:center;padding:8px 16px}
  .notice-strip b{color:#E5B94F;font-weight:700;margin-right:6px}

  /* Brand Bar (9 브랜드)   스티그마 제외 재정렬, 간격 자동 균등 분배 */
  .brand-bar{border-bottom:1px solid var(--ink-100);background:#fff}
  .brand-bar-inner{max-width:var(--container);margin:0 auto;display:flex;justify-content:center;gap:34px;padding:10px var(--gutter);flex-wrap:wrap}
  .brand-bar a{font-family:var(--f-sans);font-size:12px;color:var(--ink-700);letter-spacing:.02em;transition:color .18s ease;position:relative}
  .brand-bar a.is-current{color:var(--ink-950);font-weight:700}
  .brand-bar a.is-current::after{content:"";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:26px;height:2px;background:var(--ink-950)}
  .brand-bar a:hover{color:var(--ink-950)}

  /* Main Header redesign */
  .hdr-main{display:grid;grid-template-columns:260px 1fr 340px;align-items:center;gap:20px;padding:22px var(--gutter);max-width:var(--container);margin:0 auto}
  .hdr-logo2{display:flex;flex-direction:column;line-height:1.05}
  .hdr-logo2 .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--ink-500);text-transform:uppercase}
  .hdr-logo2 .mark{font-family:var(--f-serif);font-size:28px;font-weight:900;color:var(--ink-950);letter-spacing:-.02em;margin-top:4px}

  /* === FEPL Logo Intro Overlay Animation (페플142 ↔ KOREA No.1 SPA / FEPL) ===
     15초 루프   "페플142"가 은근하게 등장 → 최종 로고로 오버레이 → 홀드 →
     다시 "페플142"로 자연스럽게 돌아오며 무한 반복.
     ─ 15s 타임라인 ────────────────────────────────────────────
       0.0 ~ 1.2s : 인트로 "페플142" 페이드인
       1.2 ~ 3.5s : 인트로 홀드
       3.5 ~ 4.5s : 인트로 페이드아웃
       4.2 ~ 5.5s : 최종 로고 오버레이 등장 (0.3s 겹침)
       5.5 ~ 13.5s: 최종 로고 홀드 (8초)
      13.5 ~ 14.5s: 최종 로고 페이드아웃 → 다음 사이클 준비
      14.5 ~ 15.0s: 공백(깜빡임 방지)
     ──────────────────────────────────────────────────────────── */
  .hdr-logo2.logo-anim{
    display:grid;                     /* 두 상태를 같은 셀에 겹치기 */
    grid-template-columns:auto;
    position:relative;
    min-height:52px;                  /* 레이아웃 시프트 방지(최종 2행 기준 높이 예약) */
    align-content:center;
  }
  .hdr-logo2.logo-anim .logo-intro,
  .hdr-logo2.logo-anim .logo-main{
    grid-column:1; grid-row:1;
    line-height:1.05;
    will-change:opacity, transform, filter;
  }

  /* Intro: "페플142"   한 줄, 세리프 볼드 + 모노 넘버 */
  .hdr-logo2.logo-anim .logo-intro{
    display:inline-flex; align-items:baseline; gap:3px;
    opacity:0;                        /* 초기 상태: 숨김 */
    animation: fepl-intro-loop 15000ms cubic-bezier(.2,.65,.2,1) 250ms infinite both;
  }
  .hdr-logo2.logo-anim .logo-intro .intro-kr{
    font-family:var(--f-serif); font-weight:900;
    font-size:29px; letter-spacing:-.02em; color:var(--ink-950);
  }
  .hdr-logo2.logo-anim .logo-intro .intro-num{
    font-family:var(--f-mono); font-weight:700;
    font-size:18px; letter-spacing:.04em; color:var(--ink-700);
    margin-left:2px;
  }

  /* Main(최종): 태그 + FEPL   두 행 스택 */
  .hdr-logo2.logo-anim .logo-main{
    display:flex; flex-direction:column;
    opacity:0;                        /* 초기 상태: 숨김 */
    animation: fepl-main-loop 15000ms cubic-bezier(.2,.65,.2,1) 250ms infinite both;
  }

  /* ── Intro(페플142) 루프 키프레임 ──
     0% 등장 → 8% 완전노출 → 23% 홀드 끝 → 30% 소멸 → 100%까지 숨김 유지 */
  @keyframes fepl-intro-loop{
    0%   {opacity:0; transform:translateY(6px)  scale(.985); filter:blur(6px); letter-spacing:normal}
    8%   {opacity:1; transform:translateY(0)    scale(1);    filter:blur(0);   letter-spacing:normal}
    23%  {opacity:1; transform:translateY(0)    scale(1);    filter:blur(0);   letter-spacing:normal}
    30%  {opacity:0; transform:translateY(-4px) scale(1.025);filter:blur(8px); letter-spacing:.06em}
    96%  {opacity:0; transform:translateY(6px)  scale(.985); filter:blur(6px); letter-spacing:normal}
    100% {opacity:0; transform:translateY(6px)  scale(.985); filter:blur(6px); letter-spacing:normal}
  }

  /* ── Main(최종 로고) 루프 키프레임 ──
     28% 등장 시작 → 37% 완전노출 → 90% 홀드 끝 → 97% 소멸 → 100%까지 숨김 유지 */
  @keyframes fepl-main-loop{
    0%   {opacity:0; transform:translateY(-6px) scale(1.012); filter:blur(7px)}
    28%  {opacity:0; transform:translateY(-6px) scale(1.012); filter:blur(7px)}
    37%  {opacity:1; transform:translateY(0)    scale(1);     filter:blur(0)}
    90%  {opacity:1; transform:translateY(0)    scale(1);     filter:blur(0)}
    97%  {opacity:0; transform:translateY(4px)  scale(.992);  filter:blur(6px)}
    100% {opacity:0; transform:translateY(-6px) scale(1.012); filter:blur(7px)}
  }

  /* 탭이 백그라운드로 들어가면 애니메이션 정지(CPU 절약) */
  .hdr-logo2.logo-anim:not(:focus-within):hover .logo-intro,
  .hdr-logo2.logo-anim:not(:focus-within):hover .logo-main{
    animation-play-state:running;
  }

  /* 접근성: 사용자가 모션 최소화를 선택한 경우 애니메이션 비활성화 */
  @media (prefers-reduced-motion: reduce){
    .hdr-logo2.logo-anim .logo-intro{animation:none; opacity:0; filter:none; transform:none}
    .hdr-logo2.logo-anim .logo-main {animation:none; opacity:1; filter:none; transform:none}
  }
  .hdr-search{position:relative;width:100%;max-width:420px;margin:0 auto}
  .hdr-search input{width:100%;height:44px;border:1px solid var(--ink-300);border-radius:999px;padding:0 48px 0 22px;font-size:13px;color:var(--ink-900);background:#fff;transition:border-color .18s}
  .hdr-search input:focus{outline:none;border-color:var(--ink-950)}
  .hdr-search input::placeholder{color:var(--ink-500)}
  .hdr-search .hdr-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink-950);color:#fff;font-size:11px;letter-spacing:.1em}
  .hdr-util2{display:flex;gap:16px;align-items:center;justify-content:flex-end;font-size:12px;color:var(--ink-700)}
  .hdr-util2 a{position:relative;transition:color .18s}
  .hdr-util2 a:hover{color:var(--ink-950)}
  .hdr-util2 .cart-wrap{position:relative;padding-right:4px}
  .hdr-util2 .cart-badge {
    display: none;
    position: absolute;
    top: -13px;
    right: -13px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--signal);
    color: #fff;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 700;
}
.cart-badge.is-on { display: inline-flex; } 

/* GNB (Korean menu) */
.gnb-bar{
  border-top:1px solid var(--ink-100);
  border-bottom:1px solid var(--ink-100);
  background:#fff;
  position:sticky;top:0;z-index:80;
  backdrop-filter:saturate(120%) blur(8px);
}
.gnb-bar.fixed{

}
.gnb-inner{
  max-width:var(--container);margin:0 auto;
  display:flex;justify-content:center;gap:28px;align-items:center;
  padding:14px var(--gutter);flex-wrap:wrap;
  font-family:var(--f-sans);
}
.gnb-inner a{
  font-size:14px;color:#0A0A0B;position:relative;
  padding:4px 0;transition:opacity .18s;
}
.gnb-inner a:hover{opacity:.68}

/* 드롭다운 트리거 ("브랜드") */
.gnb-has-sub{position:relative}
.gnb-trigger{
  font-size:14px;color:#0A0A0B;padding:4px 0;cursor:pointer;
  font-family:var(--f-sans);transition:opacity .18s;
  display:inline-flex;align-items:center;gap:4px;
}

.gnb-trigger:hover{opacity:.68}

/* 드롭다운 패널 */
.gnb-has-sub .depth01 {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 126px;
    background: #fff;
    padding: 8px 0;
    margin: 0;
    list-style: none;
    z-index: 90;
    text-align: center;
}
/* 드롭다운 안 a 만 별도 규칙 */
.gnb-has-sub .depth01 a{
  display:block;padding:8px 16px;font-size:13px;white-space:nowrap;
}
.gnb-has-sub .depth01 a:hover{background:#f7f7f8;opacity:1}

/* hover / 키보드 포커스로 열기 */
.gnb-has-sub:hover .depth01,
.gnb-has-sub:focus-within .depth01{display:block}

/* === FEPL GNB 4-color hierarchy (원본 fairplay142.com 체계) === */
  .gnb-inner a.gnb-new{color:#E91E63}          /* 신상   핑크/마젠타 */
  .gnb-inner a.gnb-reserve{color:#1E40AF}      /* 예약배송   블루 */
  .gnb-inner a.gnb-exclusive{color:#2E7D32}    /* 오직 페플에서만   딥그린 */
  .gnb-inner a.new-dot::after{content:"";position:absolute;top:2px;right:-8px;width:4px;height:4px;background:#E91E63;border-radius:50%}
  .gnb-inner .gnb-badge{position:absolute;top:-16px;right:-14px;background:#DC2626;color:#fff;font-family:var(--f-mono);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.04em;white-space:nowrap}
  .gnb-inner .gnb-sep{color:var(--ink-300)}


.app div.qr {
    position: absolute;
    top: 27px;
    right: -1px;
    width: 300px;
    background: #fff;
    padding: 20px;
    z-index: 81;
    display: none;
    -webkit-animation: scale-in-tr .4s cubic-bezier(.25, .46, .45, .94) both;
    animation: scale-in-tr .4s cubic-bezier(.25, .46, .45, .94) both;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
}

.app:hover div.qr {
    display: block;
    box-shadow: 0 .125rem .1875rem 0 rgba(0,0,0,.11);
    margin-top: -1px;
    margin-left: -1px;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.app div.qr p {
    font-size: 15px;
    margin-bottom: 10px;
}
.app div.qr div {
    background: #f1f1f1;
    text-align: center;
    padding: 20px;
}


.app div.qr div img {
    width: 100px;
    padding: 12px;
    background: #fff;
}

.app div.qr span {
    display: block;
    text-align: center;
    color: #777;
    margin-top: 10px;
    font-size: 12px;
}


@-webkit-keyframes scale-in-tr {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        opacity: 1
    }
}

@keyframes scale-in-tr {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        opacity: 1
    }
}


div.searchWrap .search_bs_txt {
    position: absolute;
    color: var(--ink-500);
    font-size: 14px;
    top: 25%;
    left: 20px;
}
.searchWrap{position:relative;width:100%;max-width:420px;margin:0 auto}
.searchWrap input{width:100%;height:44px;border:1px solid var(--ink-300);border-radius:999px;font-size:13px;color:var(--ink-900);background:#fff;transition:border-color .18s;padding-left: 20px;
    box-sizing: border-box;}
.searchWrap input:focus{outline:none;border-color:var(--ink-950)}
.searchWrap .searchBtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ink-950);color:#fff;font-size:11px;letter-spacing:.1em}
  

.footer_fix_menu li.kakao {
    background: #F8C400;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer_fix_menu li.kakao img {
    width: 60%;
}


/* 하단 고정 메뉴 */
.footer_fix_menu {
    position: fixed;
    bottom: 100px;
    right: -70px;
    transition: 1s;
    z-index: 100;
    background-color: #000;
}

.footer_fix_menu > ul > li {
    background: #000;
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    position: relative;
}

.footer_fix_menu > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.footer_fix_menu .wish_btn i,
.footer_fix_menu .cart_btn i,
.footer_fix_menu .today_prd_btn i {
    font-size: 25px;
    color: #fff;
}

.footer_fix_menu .wish_btn i {
    margin-top: 9px;
    font-size: 28px;
}

.footer_fix_menu .cs_btn i {
    font-size: 31px;
    color: #fff;
    vertical-align: middle;
    position: relative;
    --fa-secondary-opacity: 1.0;
    margin-top: -4px;
}

.footer_fix_menu .cs_btn i span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    line-height: 0;
    font-weight: 500;
    margin-top: -1px;
    color: #000;
}


.footer_fix_menu img {
    width: 29px;
    vertical-align: middle;
}

.footer_fix_menu > ul > ul {
    background: #000;
    display: block;
    width: 60px;
    text-align: center;
    padding: 0 13px 15px;
    box-sizing: border-box;
}

.footer_fix_menu > ul > ul li {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.footer_fix_menu > ul > ul i {
    color: #fff;
    vertical-align: middle;
    font-size: 27px;
}

.footer_fix_menu .user_basket_quantity,
.footer_fix_menu .today_prd_btn span {
    position: absolute;
    display: inline-block;
    bottom: 14px;
    right: 10px;
    background: var(--main-color);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    font-weight: 300;
    font-size: 11px;
}

.footer_fix_menu .today_prd_btn {
    cursor: pointer;
}


/* BASIC css end */