/* ==========================================================================
   LOUIBELLE — 쇼핑 기능 페이지 스타일 (style.css 토큰 재사용)
   장바구니 · 주문/결제 · 회원 · 마이페이지 · 관리자 · 법적페이지
   ========================================================================== */

.page-h1{font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.01em;margin:4px 0 26px}
.empty{padding:56px 0;text-align:center;color:var(--ash);display:flex;flex-direction:column;align-items:center;gap:18px}
.empty p{font-size:15px;line-height:1.75}

/* ── 공용 폼 ─────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field > label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:10px;padding:13px 14px;transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:84px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(194,0,25,.08)}
.field .hint{font-size:12px;color:var(--ash)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row.zip{grid-template-columns:1fr auto;align-items:end}

/* 카카오 우편번호 레이어 */
.postcode-layer{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(19,24,29,.5);box-sizing:border-box;
}
.postcode-layer[hidden]{display:none!important}
.postcode-layer__box{
  width:min(520px,100%);height:min(560px,88vh);background:var(--paper);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(0,0,0,.28);
}
.postcode-layer__top{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700;flex-shrink:0;
}
.postcode-layer__x{
  width:36px;height:36px;border:none;background:var(--cream);border-radius:50%;
  font-size:15px;cursor:pointer;color:var(--ink);line-height:1;flex-shrink:0;
}
.postcode-layer__x:hover{background:var(--line)}
.postcode-layer__body{flex:1;min-height:0;position:relative}
.postcode-layer__body iframe{width:100%!important;height:100%!important;border:0}
.checkline{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink);line-height:1.6;cursor:pointer}
.checkline input{width:18px;height:18px;margin-top:1px;accent-color:var(--red);flex:0 0 auto}
.checkline a{text-decoration:underline}
.form-note{font-size:13px;padding:12px 14px;border-radius:10px;line-height:1.6}
.form-note.err{background:#fdecee;color:var(--red-deep)}
.form-note.ok{background:#eef7ee;color:#1c7a34}
.btn--lg{padding:16px 30px;font-size:13px}

/* ── 인증(로그인/회원가입) ───────────────────────── */
.authpg{max-width:440px;margin-inline:auto;padding-block:clamp(30px,6vw,64px)}
.authpg .lead-h{text-align:center;margin-bottom:26px}
.authpg .lead-h h1{font-size:26px;font-weight:600;letter-spacing:-.01em}
.authpg .lead-h p{color:var(--ash);font-size:14px;margin-top:8px}
.auth-alt{text-align:center;font-size:13px;color:var(--ash);margin-top:22px}
.auth-alt a{color:var(--red);font-weight:600;text-decoration:underline}
.agree-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--cream)}
/* 소셜 로그인 (S12) */
.social-login{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.social-div{display:flex;align-items:center;gap:12px;color:var(--ash);font-size:12px;margin-bottom:4px}
.social-div::before,.social-div::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-social{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:filter .15s}
.btn-social:hover{filter:brightness(.96)}
.btn-social svg{flex:none}
.btn-kakao{background:#FEE500;color:#191600}
.btn-naver{background:#03C75A;color:#fff}
.social-agree{font-size:11px;color:var(--ash);text-align:center;line-height:1.6;margin-top:4px}
.social-agree a{color:var(--ash);text-decoration:underline}
/* 프로필 연결계정 (S12) */
.linked-accts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.linked-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.linked-row .la-name{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.la-dot{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}
.la-dot.kakao{background:#FEE500}.la-dot.naver{background:#03C75A}
.la-state{font-size:12px;color:var(--ash)}
.btn-mini{font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);cursor:pointer;text-decoration:none;color:var(--ink)}
.btn-mini.on{background:var(--red);color:#fff;border-color:var(--red)}
/* 향으로 찾기 (홈 머천다이징) */
.scent-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.scent-chip{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 16px 15px;border:1px solid var(--line);border-radius:14px;background:var(--paper);text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.scent-chip:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.07)}
.scent-chip .sc-mood{font-size:11px;font-weight:700;color:var(--red);background:rgba(194,0,25,.07);border-radius:999px;padding:3px 10px;letter-spacing:.02em}
.scent-chip .sc-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.scent-chip .sc-desc{font-size:12px;color:var(--ash);line-height:1.5}
.scent-chip .sc-go{margin-top:2px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ash)}
.scent-chip:hover .sc-go{color:var(--red)}
/* 장바구니 무료배송 크로스셀 (AOV) */
.xsell{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.xsell-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.xsell-head b{font-size:15px}
.xsell-head .hl{color:var(--red)}
.xsell-head span{font-size:13px;color:var(--ash)}
.xsell-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.xsell-card{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px}
.xc-thumb{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--cream)}
.xc-thumb img{width:100%;height:100%;object-fit:cover}
.xc-nm{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.xc-pr{font-size:13px;font-weight:700}
.xc-add{margin-top:2px;font-size:12px;font-weight:700;padding:8px;border-radius:8px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.xc-add:hover{background:var(--ink-solid);color:#fff}
.xc-add:disabled{opacity:.5;cursor:default}
/* 모바일 스티키 구매바 (상품페이지 전환) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;gap:10px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(0,0,0,.1);transform:translateY(110%);transition:transform .26s ease}
.buybar.show{transform:translateY(0)}
.buybar__info{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.buybar__info img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:var(--cream)}
.buybar__txt{min-width:0}
.buybar .bb-nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .bb-pr{font-size:13px;color:var(--ash)}
.buybar .bb-pr b{font-weight:800;color:var(--ink)}
.buybar__act{display:flex;gap:7px;flex:none}
.buybar__act .btn{padding:12px 15px;font-size:12px;white-space:nowrap}
@media (max-width:768px){ .buybar{display:flex} .buybar__info img{width:36px;height:36px} .buybar .bb-nm{max-width:32vw} }
/* 검색 결과 없음 리커버리 (전환) */
.noresult{text-align:center;padding:clamp(36px,5vw,56px) 20px 28px;border:1px solid var(--line);border-radius:16px;background:var(--cream)}
.noresult .nr-emoji{font-size:28px;margin-bottom:12px;color:var(--ash-2);font-weight:300;line-height:1}
.noresult .nr-msg{font-size:clamp(16px,1.4vw,19px);font-weight:600;color:var(--ink)}
.noresult .nr-msg b{color:var(--red)}
.noresult .nr-sub{font-size:13.5px;color:var(--ash);margin-top:8px;line-height:1.6}
.noresult .nr-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.noresult .nr-pop{justify-content:center;margin-top:20px}
.shop-empty-line{text-align:center;padding:48px 16px;color:var(--ash);font-size:15px}
.shop-empty-line a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* 주문완료 적립 리인포스 + 추천 */
.result-reward{max-width:420px;margin:14px auto 0;text-align:center;font-size:14px;color:var(--ink);background:rgba(194,0,25,.06);border:1px solid rgba(194,0,25,.15);border-radius:12px;padding:13px 16px;line-height:1.6}
.result-reward b{color:var(--red);font-weight:800}
.result-reco{text-align:left;margin-top:8px}
.result-reco .sec-head{justify-content:center}
/* 모바일 상품카드: 액션이 썸네일 밖으로 이동됨(겹침 해소) — 상시 노출은 기본 스타일 */
/* 상품 배송 ETA + 안심 배지 (신뢰·전환) */
.trust{margin:16px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.trust-eta{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--cream);font-size:13.5px;color:var(--ink);line-height:1.5}
.trust-eta b{color:var(--red);font-weight:700}
.trust-eta .te-ico{font-size:16px;flex:none}
.trust-badges{display:none} /* 11번: 안심 배지 제거 */
.pulse-soft{animation:pulsesoft 2.2s ease-in-out infinite}
@keyframes pulsesoft{0%,100%{background:var(--cream)}50%{background:rgba(194,0,25,.07)}}
@media (prefers-reduced-motion:reduce){.pulse-soft{animation:none}}
/* 배송완료 리뷰 유도 (리뷰 자산 확보) */
.review-nudge{border:1px solid rgba(194,0,25,.18);background:rgba(194,0,25,.04)}
.review-nudge .rn-sub{font-size:13px;color:var(--ash);margin:-4px 0 12px}
.rn-items{display:flex;flex-direction:column;gap:8px}
.rn-item{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--paper);border:1px solid var(--line);border-radius:10px;text-decoration:none;transition:border-color .15s}
.rn-item:hover{border-color:var(--red)}
.rn-item img{width:40px;height:40px;border-radius:7px;object-fit:cover;flex:none;background:var(--cream)}
.rn-item .rn-nm{font-size:13.5px;font-weight:600;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-item .rn-go{font-size:12.5px;font-weight:700;color:var(--red);flex:none}
/* 상품페이지 '포함된 세트' 교차판매 (AOV) */
.inset{margin:16px 0;border:1px dashed rgba(194,0,25,.35);border-radius:12px;padding:12px 13px;background:rgba(194,0,25,.03)}
.inset-h{font-size:13px;font-weight:700;color:var(--red);margin-bottom:9px}
.inset-card{display:flex;align-items:center;gap:11px;padding:8px;border-radius:10px;text-decoration:none;transition:background .15s}
.inset-card:hover{background:var(--paper)}
.inset-card+.inset-card{margin-top:2px}
.inset-card img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;background:var(--cream)}
.inset-info{flex:1;min-width:0}
.inset-nm{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inset-pr{font-size:13px;margin-top:2px}
.inset-pr b{font-weight:800}
.inset-save{color:var(--red);font-weight:700;font-size:12px;margin-left:4px}
.inset-go{color:var(--ash);font-weight:700;flex:none}
.inset-card:hover .inset-go{color:var(--red)}
/* 최근 검색어 (localStorage) */
.recent-terms{margin:2px 0 12px}
.recent-terms .rs-clear{background:none;border:none;color:var(--ash);font-size:12px;text-decoration:underline;cursor:pointer;padding:2px 4px}
.recent-terms .rs-clear:hover{color:var(--red)}

/* ══ 배치1 · 홈·랜딩 ══ */
/* #5 시즌 배너 */
.season-banner{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:14px;background:var(--cream);border:1px solid var(--line);text-decoration:none;transition:border-color .15s}
.season-banner:hover{border-color:var(--red)}
.sb-tag{flex:none;font-size:12px;font-weight:800;color:#fff;background:var(--red);border-radius:999px;padding:5px 12px;white-space:nowrap}
.sb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sb-txt b{font-size:15px;color:var(--ink)}
.sb-txt span{font-size:13px;color:var(--ash)}
.sb-go{flex:none;font-size:13px;font-weight:700;color:var(--red);white-space:nowrap}
/* ==========================================================================
   #7 LIVE 현황 스트립 — 에디토리얼 스탯 밴드 (라이트 스톤 톤)
   카드·글래스모피즘 없음. 세로 헤어라인 + 대형 타이포 + 오도미터 롤.
   히어로와 위아래 마진으로 분리 — 흰 페이지 배경이 숨쉬는 틈이 된다.
   모션은 전부 @media (prefers-reduced-motion:reduce) 전역 규칙으로 꺼진다.
   ========================================================================== */
.statbar{
  --band:var(--cream);            /* 사이트 표면 토큰(#eef6fb 하늘 틴트) — 중립 그레이는 SKIT 팔레트와 색조가 어긋난다 */
  --band-ink:#13181d;
  --grot:'Inter Tight','Montserrat',var(--sans);
  position:relative;overflow:hidden;
  background:var(--band);color:var(--band-ink);
  margin-top:clamp(28px,4vw,56px);          /* 히어로에서 떼어낸다 */
  margin-bottom:clamp(8px,1.6vw,20px);
  padding:clamp(24px,3vw,40px) 0 clamp(22px,2.6vw,34px);
}

/* 필름 그레인 — 밝은 면이 밋밋해지지 않게 잡아주는 최소한의 질감 */
.statbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.statbar__in{position:relative;z-index:1;padding-inline:var(--pad)}

/* 헤드 */
.statbar__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,2.2vw,30px)}
.statbar__live{display:inline-flex;align-items:center;gap:8px;font-family:var(--grot);font-size:10px;font-weight:600;letter-spacing:.3em;color:var(--band-ink)}
.statbar__live i{position:relative;flex:none;width:5px;height:5px;border-radius:50%;background:#ff3b30}
.statbar__live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #ff3b30;animation:statPing 2.2s var(--ease-out) infinite}
@keyframes statPing{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(1.7);opacity:0}}
.statbar__stamp{font-family:var(--grot);font-size:10px;letter-spacing:.24em;color:rgba(19,24,29,.3)}

/* 칸 — 카드가 아니라 헤어라인으로 나눈 컬럼 */
.statbar__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.statbar .stat{
  position:relative;container-type:inline-size;
  padding:clamp(12px,1.3vw,18px) clamp(14px,1.6vw,26px) clamp(10px,1.1vw,14px);
  transition:background .5s var(--ease-out);
}
/* display:grid/flex 가 [hidden] 의 UA display:none 을 이기지 않게 못박는다 */
.statbar .stat[hidden]{display:none}
.statbar .stat + .stat::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;background:rgba(19,24,29,.14)}
/* 호버 시 칸 위로 잉크 선이 좌→우 */
.statbar .stat::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:var(--band-ink);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);
}
.statbar .stat:hover{background:rgba(19,24,29,.035)}
.statbar .stat:hover::after{transform:scaleX(1)}

.statbar .stat__ix{display:block;font-family:var(--grot);font-size:9.5px;letter-spacing:.26em;color:rgba(19,24,29,.32);margin-bottom:12px}
.statbar .stat__n{
  display:block;font-family:var(--grot);font-weight:600;color:var(--band-ink);
  line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;--dh:1.02em;
  font-size:clamp(38px,4.6vw,70px);
  /* 칸이 좁아지면(항목이 많아지면) 칸 폭 기준으로 같이 줄어든다 — 숫자 넘침 방지 */
  font-size:min(clamp(38px,4.6vw,70px),21cqw);
}
.statbar .stat__lb{
  display:block;font-family:var(--grot);margin-top:13px;
  font-size:10.5px;font-weight:500;letter-spacing:.2em;
  color:rgba(19,24,29,.45);transition:color .35s;
}
.statbar .stat:hover .stat__lb{color:var(--band-ink)}
.statbar .stat--live .stat__ix{color:#ff3b30}

/* 오도미터 — 자릿수 스트립을 세로로 굴린다. JS 가 .od / .od-col 을 만든다 */
.statbar .od{display:inline-block;overflow:hidden;height:var(--dh);vertical-align:bottom}
.statbar .od-col{display:block;transition:transform 1.25s var(--ease-out)}
.statbar .od-col i{display:block;height:var(--dh);line-height:var(--dh);font-style:normal}
.statbar .od-sep{display:inline-block}

@media (max-width:760px){
  /* 세로 헤어라인은 항목 개수가 조건부라 어긋날 수 있다 → 가로 룰만 쓴다 */
  .statbar__row{grid-template-columns:1fr 1fr;column-gap:clamp(14px,4vw,24px)}
  .statbar .stat{padding-inline:0;border-top:1px solid rgba(19,24,29,.15)}
  .statbar .stat + .stat::before{display:none}
  .statbar .stat__n{font-size:min(clamp(30px,8.5vw,46px),30cqw)}
  .statbar .stat__ix{margin-bottom:9px}
  .statbar .stat__lb{margin-top:10px;font-size:10px}
  .statbar__stamp{display:none}
}

/* (구 .prev-* 포토리뷰 캐러셀은 .rvcard 레일로 교체 — 파일 하단 「고객 리뷰」 절) */
/* 사회적 증거 — 카드 조회수 배지 */
.card__hot{font-size:11.5px;color:var(--red);font-weight:700;margin-top:2px;letter-spacing:-.2px}
.card__rate{font-size:12px;color:#e8a020;font-weight:700;margin-top:2px}
.card__rate span{color:var(--ash);font-weight:500}
/* 인기 검색어 칩 */
.hot-terms{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px auto 0}
.ht-lb{font-size:12.5px;color:var(--ash);font-weight:700}
.ht-chip{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--ink);text-decoration:none}
.ht-chip:hover{border-color:var(--red);color:var(--red)}
/* ── 인게이지먼트 팩 (2026-08-06) ── */
/* 사장님 답글 */
.rreply{margin-top:10px;padding:10px 14px;border-left:3px solid var(--red);background:var(--cream);border-radius:0 10px 10px 0}
.rreply__who{font-size:12px;font-weight:800;color:var(--red);margin-bottom:4px}
.rreply__body{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
/* 리뷰 키워드 칩 */
.rkeywords{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.rk-lb{font-size:12px;color:var(--ash);font-weight:700}
.rk-chip{font-size:12px;padding:4px 10px;border-radius:99px;background:var(--cream);color:var(--ink)}
.rv-nth{font-size:11px;color:var(--ash);border:1px solid var(--line);border-radius:99px;padding:1px 7px;margin-left:4px}
/* 채팅 응답시간 · 프리셋 문의 */
.resp-badge b{color:var(--red)}
.preset-asks{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.pa-btn{font-size:12.5px;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none;font-family:inherit}
.pa-btn:hover{border-color:var(--red);color:var(--red)}
/* 홈 베스트 리뷰 롤링 바 (2026-08-09 재설계 — 라벨 + 위로 밀어 올리는 전환) */
/* 배경은 --ink-solid — 다크모드에서 --ink 는 거의 흰색으로 뒤집혀 흰 글씨가 안 보인다 */
.rev-roll{position:relative;display:flex;align-items:center;gap:12px;height:42px;padding:0 clamp(14px,4vw,28px);
  background:var(--ink-solid);overflow:hidden}
.rev-roll::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.rev-roll__stage{position:relative;flex:1;height:100%;overflow:hidden}
/* 가운데 정렬 — 라벨은 왼쪽에 고정하고 문구만 가운데로 (2026-08-09 되돌림) */
.rev-roll__it{position:absolute;inset:0;display:flex;gap:10px;align-items:center;justify-content:center;
  padding:0;font-size:12.5px;
  color:#fff;text-decoration:none;opacity:0;transform:translateY(100%);pointer-events:none;
  white-space:nowrap;overflow:hidden}
.rev-roll__it.on{opacity:1;transform:none;pointer-events:auto}
.rev-roll .rr-stars{color:#ffc76b;letter-spacing:1px;flex:0 0 auto}
.rev-roll .rr-body{overflow:hidden;text-overflow:ellipsis}
.rev-roll .rr-prod{color:rgba(255,255,255,.6);flex:0 0 auto;max-width:26%;overflow:hidden;text-overflow:ellipsis}
.rev-roll .rr-arw{flex:0 0 auto;color:rgba(255,255,255,.55);font-size:12px}
.rev-roll__it:hover .rr-arw{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .rev-roll__it{transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
  .rev-roll .rr-arw{transition:color .2s,transform .2s}
  .rev-roll__it:hover .rr-arw{transform:translateX(3px)}
}
/* 좁은 화면에선 라벨이 문구를 덮는다 — 라벨을 접고 문구에 자리를 준다 */
@media (max-width:760px){.rev-roll .rr-prod{display:none}.rev-roll__lb{display:none}}
/* 헤더 알림 벨 */
.nav-act--bell{position:relative}
.bell-c{position:absolute;top:-4px;right:-10px;min-width:16px;height:16px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* 검색 0건 문의 유도 */
.empty-ask{text-align:center;padding:26px 16px;margin-bottom:26px;border:1px dashed var(--line);border-radius:16px}
.empty-ask p{margin-bottom:14px;line-height:1.7;color:var(--ink)}
/* 관리자 오늘 스트립 */
.today-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.today-strip .ts-it{flex:1;min-width:110px;text-align:center;padding:14px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.today-strip .ts-it b{display:block;font-size:22px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.today-strip .ts-it span{font-size:11.5px;color:var(--ash)}
/* 마이페이지 미션 카드 */
.mission-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0;background:var(--paper)}
.mission-card .mc-head{font-size:14.5px;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.mission-card .mc-t{flex:1;min-width:0;line-height:1.45}
.mission-card .mc-head b{color:var(--red)}
.mission-card .mc-count{
  flex:none;font-size:11.5px;font-weight:700;color:var(--ash);font-variant-numeric:tabular-nums;
  padding:3px 9px;border:1px solid var(--line);border-radius:99px;background:var(--cream);
}
/* 미션 4개를 2열로 딱 떨어지게 — flex+wrap 이던 시절엔 칩 폭이 글자 수대로 제각각이라
   줄 끝이 어긋났고, 좁은 화면에선 nowrap 인 긴 칩이 카드 밖으로 삐져나갔다.
   minmax(0,1fr) 이 핵심이다: 안쪽 글이 길어도 칸이 밀려나지 않는다(1fr 만 쓰면 밀린다). */
.mission-card .mc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* 아주 좁은 화면에선 2열이 글자를 다 잘라먹는다 — 한 줄로 편다 */
@media (max-width:420px){.mission-card .mc-list{grid-template-columns:1fr}}
.mission-card .mc-it{
  display:flex;align-items:center;gap:7px;min-width:0;
  font-size:12.5px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);background:var(--cream);
  transition:border-color .15s,background .15s;
}
.mission-card .mc-it__i{flex:none;font-size:13px;line-height:1}
/* 글이 남는 폭을 다 쓰되 넘치면 말줄임 — 줄바꿈을 허용하면 타일 높이가 들쭉날쭉해진다 */
.mission-card .mc-it__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission-card .mc-it__p{flex:none;font-size:11.5px;font-weight:800;color:var(--red)}
.mission-card .mc-it:hover{border-color:var(--red);background:var(--paper)}
.mission-card .mc-it.done{background:transparent;color:var(--ash);border-style:dashed}
.mission-card .mc-it.done .mc-it__i{color:var(--red)}
/* ── 전환 팩 (2026-08-06) ── */
/* 문의 바구니 */
.pa-btn--basket.on{border-color:var(--red);color:var(--red);background:var(--cream)}
.ab-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.ab-item{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper)}
.ab-pic img{width:56px;height:70px;object-fit:cover;border-radius:8px;display:block}
.ab-info{flex:1;min-width:0}
.ab-cat{font-size:11.5px;color:var(--ash)}
.ab-nm{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-x{border:1px solid var(--line);background:transparent;border-radius:99px;width:28px;height:28px;cursor:pointer;color:var(--ash);flex:0 0 auto}
.ab-x:hover{border-color:var(--red);color:var(--red)}
.ab-send{max-width:560px}
.ab-send textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;font-family:inherit;resize:vertical}
/* ── 헤더 CHAT 안읽음 배지 (카톡식) ──
   빨간 점(.chat-dot-new) 대체. 숫자 배지 + 등장 팝 + 남아있는 동안 은은한 맥동. */
#chatLink{position:relative}
.chat-badge{
  position:absolute;top:-5px;right:-12px;
  min-width:17px;height:17px;padding:0 5px;border-radius:99px;
  background:#ff3b30;color:#fff;
  font-family:'Inter Tight','Montserrat',var(--sans);
  font-size:10.5px;font-weight:700;letter-spacing:0;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--paper);   /* 헤더 배경과 분리 */
  animation:chatBadgePulse 2.4s var(--ease-out) infinite;
}
.chat-badge[hidden]{display:none}
/* 새 메시지로 숫자가 바뀐 순간 한 번 튄다 (JS 가 클래스를 다시 붙인다) */
.chat-badge.is-pop{animation:chatBadgePop .5s var(--ease-out)}
@keyframes chatBadgePop{
  0%{transform:scale(.4);opacity:0}
  55%{transform:scale(1.25);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes chatBadgePulse{
  0%,72%,100%{transform:scale(1)}
  80%{transform:scale(1.14)}
  88%{transform:scale(1)}
}
/* 배지가 있을 때 CHAT 글자도 주목되게 */
#chatLink.has-unread .t{color:var(--red)}
/* 히어로 위 흰 헤더에서도 배지 테두리가 배경과 맞아야 한다 */
.header.on-hero .chat-badge{box-shadow:0 0 0 2px rgba(255,255,255,.9)}
/* 하단 문의바 펄스 — 상세 절반 읽었을 때 1회 */
@keyframes barAskPulse{0%,100%{transform:scale(1);box-shadow:none}40%{transform:scale(1.04);box-shadow:0 0 0 6px rgba(198,40,40,.15)}}
@media (prefers-reduced-motion:no-preference){#barAsk.pulse{animation:barAskPulse 1.3s ease 2}}
/* 답변 도착 토스트 */
.chat-toast{position:fixed;right:16px;bottom:86px;z-index:60;background:var(--ink-solid);color:#fff;border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 8px 26px rgba(0,0,0,.2);display:flex;gap:10px;align-items:center;transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s}
.chat-toast.show{transform:translateY(0);opacity:1}
.chat-toast a{color:#fff;font-weight:800;text-decoration:underline}
.chat-toast .ct-x{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;padding:0}
/* 관리자 세그먼트 칩 */
.seg-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.seg-chips a{font-size:12.5px;padding:7px 13px;border:1px solid var(--line);border-radius:99px;text-decoration:none;color:var(--ink)}
.seg-chips a.on{background:var(--red);border-color:var(--red);color:#fff}
.badge-regular{font-size:11px;color:#8a6d00;background:#fff3c6;border-radius:99px;padding:2px 8px;font-weight:700}
/* (구 .rev-hero 요약 카드는 .rvsum 으로 교체 — 파일 하단 「고객 리뷰」 절) */
/* (구 .buy-ticker 「○○ 보는 중」 활동 티커는 2026-08-09 제거 — 화면 구석에서 걸리적거렸다) */
/* #3 웰컴 팝업 */
.welcome-pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.welcome-pop[hidden]{display:none}
.welcome-pop.show{opacity:1;pointer-events:auto}
.wp-dim{position:absolute;inset:0;background:rgba(20,15,12,.5)}
.wp-card{position:relative;z-index:1;width:min(380px,100%);background:var(--paper);border-radius:18px;padding:30px 26px 22px;text-align:center;transform:translateY(14px);transition:transform .25s}
.welcome-pop.show .wp-card{transform:translateY(0)}
.wp-x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:16px;color:var(--ash);cursor:pointer;line-height:1}
.wp-emoji{font-size:38px}
.wp-card h3{font-size:21px;font-weight:800;margin:8px 0 6px}
.wp-card h3 b{color:var(--red)}
.wp-card p{font-size:13.5px;color:var(--ash);margin:0 0 18px;line-height:1.6}
.wp-later{margin-top:12px;border:none;background:none;color:var(--ash);font-size:12.5px;text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){.welcome-pop,.wp-card{transition:none}}

/* ── 장바구니 (고해상도 PC 대응) ─────────────────── */
body[data-page="cart"] .wrap.cartpg,
body[data-page="cart"] .cartpg{
  max-width:min(1400px,96vw);
  width:100%;
  margin-inline:auto;
  padding-inline:var(--pad);
  box-sizing:border-box;
}
body[data-page="cart"] .page-h1{font-size:clamp(28px,3vw,40px);margin-bottom:clamp(18px,2vw,28px)}
.cart-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,min(28vw,400px));
  gap:clamp(28px,4vw,56px);
  align-items:start;
  padding-bottom:clamp(48px,6vw,88px);
}
.cart-lines{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.cart-line{
  display:grid;
  grid-template-columns:clamp(96px,10vw,128px) 1fr auto auto auto;
  gap:clamp(16px,2vw,28px);
  align-items:center;
  padding:clamp(20px,2.2vw,32px) 0;
  border-bottom:1px solid var(--line);
}
.cl-thumb img{
  width:clamp(96px,10vw,128px);
  height:clamp(120px,12.5vw,160px);
  object-fit:cover;border-radius:12px;background:var(--cream);
}
.cl-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.cl-name{font-weight:600;font-size:clamp(15px,1.2vw,18px)}
.cl-opt{font-size:clamp(12px,1vw,14px);color:var(--ash)}
.cl-unit{font-size:clamp(13px,1.05vw,15px);color:var(--ash)}
.cl-line-total{font-weight:700;white-space:nowrap;min-width:100px;text-align:right;font-size:clamp(15px,1.2vw,18px)}
.cl-remove{width:36px;height:36px;border-radius:50%;color:var(--ash);font-size:15px;transition:.2s}
.cl-remove:hover{background:var(--cream);color:var(--red)}
.cart-summary{
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.4vw,32px);
  position:sticky;top:calc(var(--nav-h) + 18px);background:var(--paper);
}
.cart-summary h3{font-size:clamp(15px,1.2vw,17px);font-weight:600;margin-bottom:16px}
.cart-summary .row{display:flex;justify-content:space-between;align-items:center;font-size:clamp(14px,1.1vw,16px);padding:10px 0;color:var(--ash)}
.cart-summary .row b{color:var(--ink);font-weight:600}
.cart-summary .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:18px;font-size:clamp(16px,1.3vw,18px);color:var(--ink)}
.cart-summary .row.total b{font-size:clamp(20px,1.8vw,26px);color:var(--red)}
.ship-note{font-size:13px;color:var(--ash);text-align:center;margin-top:14px}
.stepper .q-input{width:48px;text-align:center;border:none;background:transparent;font-family:inherit;font-size:15px}
.cart-cta .btn{min-height:52px;font-size:13px}

/* ── 객단가 위젯: 무료배송 진행바 + 사은품 (S4) ───── */
.aov{margin:2px 0 16px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.aov-ship__msg{font-size:12.5px;color:var(--ash);margin-bottom:9px;line-height:1.5}
.aov-ship__msg b{color:var(--ink);font-weight:700}
.aov-ship__msg .hl{color:var(--red)}
.aov-ship__msg .ok b{color:var(--red)}
.aov-bar{height:7px;border-radius:99px;background:var(--cream-2);overflow:hidden}
.aov-bar__fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--red-deep));transition:width .45s var(--ease-out,ease)}
.aov-gifts{margin-top:11px;display:flex;flex-direction:column;gap:6px}
.aov-gifts[hidden]{display:none}
.aov-gift{font-size:12px;color:var(--ash);line-height:1.5}
.aov-gift .ico{margin-right:5px}
.aov-gift b{color:var(--ink);font-weight:600}
.aov-gift .hl{color:var(--red)}
.aov-gift.on{color:#2b7a3e}
.aov-gift.on b{color:#2b7a3e}
.aov-gift.next{opacity:.9}

/* ── 주문/결제 ───────────────────────────────────── */
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(20px,3vw,44px);align-items:start;padding-bottom:64px}
.co-section{border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px}
.co-section h3{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.co-summary{border:1px solid var(--line);border-radius:16px;padding:24px;position:sticky;top:calc(var(--nav-h) + 18px);background:var(--paper)}
.co-items{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;max-height:320px;overflow:auto}
.co-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.co-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:var(--cream)}
.co-item .nm{font-size:13px;font-weight:600;line-height:1.4}
.co-item .op{font-size:11px;color:var(--ash)}
.co-item .pr{font-size:13px;font-weight:600;white-space:nowrap}
.co-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--ash)}
.co-row b{color:var(--ink)}
.co-row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:16px;color:var(--ink)}
.co-row.total b{font-size:20px;color:var(--red)}
.addr-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.addr-chip{border:1px solid var(--line-2);border-radius:10px;padding:8px 12px;font-size:12px;cursor:pointer}
.addr-chip.on{border-color:var(--ink);background:var(--ink-solid);color:#fff}

/* 결제 위젯 페이지 */
.paypg{max-width:640px;margin-inline:auto;padding:clamp(24px,5vw,48px) var(--pad) 80px}
.paypg .pay-h{text-align:center;margin-bottom:8px}
.paypg .pay-h .logo{font-family:var(--sans);font-weight:800;letter-spacing:.14em;font-size:20px}
.paypg .pay-sum{text-align:center;color:var(--ash);font-size:14px;margin-bottom:26px}
.paypg .pay-sum b{color:var(--red);font-size:18px}
#payment-method,#agreement{margin-bottom:16px}
.pay-actions{display:flex;gap:12px;margin-top:8px}

/* 완료/실패 */
.result-pg{max-width:560px;margin-inline:auto;text-align:center;padding-block:clamp(40px,7vw,90px)}
.result-ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;font-size:34px}
.result-ico.ok{background:#eef7ee;color:#1c7a34}
.result-ico.no{background:#fdecee;color:var(--red)}
.result-pg h1{font-size:28px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.result-pg .sub{color:var(--ash);margin-bottom:26px}
.result-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;text-align:left;margin:0 auto 26px;max-width:420px}
.result-card .row{display:flex;justify-content:space-between;font-size:14px;padding:7px 0}
.result-card .row span{color:var(--ash)}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 마이페이지 ──────────────────────────────────── */
.acct-grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(20px,3vw,44px);align-items:start;padding-bottom:64px}
.acct-nav{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px;position:sticky;top:calc(var(--nav-h) + 18px);background:var(--paper)}
.acct-nav__sec{display:flex;flex-direction:column;gap:2px}
.acct-nav__lb{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-2);padding:4px 12px 6px}
.acct-nav a{padding:10px 12px;border-radius:9px;font-size:13.5px;color:var(--ash);transition:.2s}
.acct-nav a:hover{background:var(--cream);color:var(--ink)}
.acct-nav a.on{background:var(--ink-solid);color:#fff;font-weight:600}
.acct-nav__foot{display:flex;flex-direction:column;gap:2px;padding-top:8px;border-top:1px solid var(--line);margin-top:2px}
.acct-nav a.danger{color:var(--red)}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:8px 0 28px}
.scent-pref{border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.scent-pref__head{margin:0 0 14px!important}
.scent-pref__save{margin-top:16px;padding:10px 20px}
.stat-card{border:1px solid var(--line);border-radius:14px;padding:20px}
.stat-card .n{font-size:28px;font-weight:700;letter-spacing:-.02em}
.stat-card .t{font-size:12px;color:var(--ash);margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.hello{border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hello b{color:var(--red)}

.order-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.order-card .oc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.order-card .oc-no{font-weight:600}
.order-card .oc-date{font-size:12px;color:var(--ash)}
.order-card .oc-items{display:flex;flex-direction:column;gap:10px}
.oc-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center}
.oc-item img{width:52px;height:52px;object-fit:cover;border-radius:8px;background:var(--cream)}
.oc-item .nm{font-size:14px;font-weight:500}
.oc-item .op{font-size:11px;color:var(--ash)}
.oc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.oc-foot .amt b{color:var(--red);font-size:16px}

.badge-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;white-space:nowrap}
.badge-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-pending{background:#fff4e5;color:#b26a00}
.st-paid{background:#e9f2ff;color:#1257b0}
.st-preparing{background:#eef7ee;color:#1c7a34}
.st-shipped{background:#e6f6f4;color:#0a7d70}
.st-delivered{background:#eef0f2;color:#41474d}
.st-cancelled,.st-refunded{background:#fdecee;color:var(--red)}

/* 표 */
.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th,.data-table td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table th{font-size:12px;color:var(--ash);font-weight:600;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.data-table tbody tr:hover{background:var(--cream)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.table-wrap .data-table th:first-child,.table-wrap .data-table td:first-child{padding-left:18px}

/* ── 관리자 ──────────────────────────────────────── */
.admin-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.admin-side{background:var(--ink-solid);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.admin-side .brand{font-family:var(--sans);font-weight:800;letter-spacing:.14em;font-size:16px;padding:8px 12px 18px}
.admin-side a{padding:11px 14px;border-radius:9px;font-size:14px;color:rgba(255,255,255,.72);transition:.2s}
.admin-side a:hover{background:rgba(255,255,255,.08);color:#fff}
.admin-side a.on{background:var(--red);color:#fff;font-weight:600}
.admin-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:11px;font-weight:700;vertical-align:middle}
.admin-side .spacer{flex:1}
.admin-side .back{color:rgba(255,255,255,.5);font-size:12px}
.admin-main{padding:clamp(20px,3vw,38px);max-width:1200px}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.admin-head h1{font-size:24px;font-weight:600}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.admin-filter{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.admin-filter a{font-size:13px;padding:8px 14px;border:1px solid var(--line-2);border-radius:20px;color:var(--ash)}
.admin-filter a.on{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
.admin-form{max-width:720px;display:flex;flex-direction:column;gap:16px}
.opt-rows{display:flex;flex-direction:column;gap:8px}
.opt-rows .opt-row{display:grid;grid-template-columns:1fr 140px auto;gap:8px;align-items:center}
.img-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.img-thumbs .it{position:relative;width:74px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.img-thumbs .it img{width:100%;height:100%;object-fit:cover}
.mini{font-size:12px;padding:8px 14px;border:1px solid var(--line-2);border-radius:8px;display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.link-danger{color:var(--red);font-size:13px;text-decoration:underline;cursor:pointer;background:none;border:none}

/* ── 법적 페이지 ─────────────────────────────────── */
.legal{max-width:820px;margin-inline:auto;padding-bottom:72px;line-height:1.8;font-size:14.5px;color:#2a2a2a}
.legal h1{font-size:clamp(24px,3vw,34px);font-weight:600;margin:6px 0 8px}
.legal .updated{color:var(--ash);font-size:13px;margin-bottom:30px}
.legal h2{font-size:18px;font-weight:600;margin:34px 0 12px;padding-top:20px;border-top:1px solid var(--line)}
.legal h3{font-size:15px;font-weight:600;margin:18px 0 8px}
.legal p,.legal li{margin-bottom:10px}
.legal ul,.legal ol{padding-left:20px}
.legal ul li{list-style:disc}
.legal ol li{list-style:decimal}
.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.legal th,.legal td{border:1px solid var(--line-2);padding:10px 12px;text-align:left}
.legal th{background:var(--cream)}
.legal .info-box{background:var(--cream);border-radius:12px;padding:18px 20px;margin:14px 0}
.legal .info-box p{margin-bottom:6px}

.stock-note{font-size:12px;color:var(--red);margin-top:10px;font-weight:600}

/* ── SHOP 목록 ───────────────────────────────────── */
.shop-sort{position:relative}
.shop-sort select{border:1px solid var(--line-2);border-radius:22px;padding:9px 30px 9px 14px;font-family:inherit;font-size:13px;color:var(--ink);background:var(--paper);cursor:pointer}
/* JS 커스텀 정렬 활성 시 네이티브 셀렉트 숨김(무JS 폴백은 그대로 노출) */
.shop-sort.csel-on select[data-csel]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;clip:rect(0 0 0 0);overflow:hidden}
/* 정렬 커스텀 드롭다운 — 브랜드 톤 + 애니메이션 */
.csel{position:relative;display:inline-block;font-size:13px;-webkit-user-select:none;user-select:none}
.csel-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-2);border-radius:22px;background:var(--paper);color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.csel-btn:hover{border-color:var(--ink)}
.csel.open .csel-btn{border-color:var(--red);box-shadow:0 0 0 3px rgba(194,0,25,.08)}
.csel-ico{width:15px;height:15px;flex:none;color:var(--ash);transition:color .18s}
.csel-btn:hover .csel-ico,.csel.open .csel-ico{color:var(--red)}
.csel-cur{white-space:nowrap}
.csel-caret{flex:none;color:var(--ash);transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .18s}
.csel.open .csel-caret{transform:rotate(180deg);color:var(--red)}
.csel-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:174px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:6px;z-index:40;box-shadow:0 16px 38px rgba(20,8,10,.15);transform-origin:top right;opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .18s ease,transform .28s cubic-bezier(.33,1.3,.5,1)}
.csel.open .csel-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.csel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink);white-space:nowrap;cursor:pointer;opacity:0;transform:translateY(-5px);transition:background .15s,color .15s,opacity .3s ease,transform .3s ease}
.csel.open .csel-opt{opacity:1;transform:translateY(0)}
.csel-opt > span{transition:transform .18s ease}
.csel-opt.active{background:var(--cream)}
.csel-opt.active > span{transform:translateX(2px)}
.csel-opt.sel{color:var(--red);font-weight:700}
.csel-chk{width:15px;height:15px;flex:none;color:var(--red);opacity:0;transform:scale(.3);transition:opacity .2s,transform .32s cubic-bezier(.34,1.56,.64,1)}
.csel-opt.sel .csel-chk{opacity:1;transform:scale(1)}
@media (max-width:640px){.csel-panel{left:0;right:auto;transform-origin:top left}}
@media (prefers-reduced-motion:reduce){.csel-caret,.csel-panel,.csel-opt,.csel-chk,.csel-opt > span{transition-duration:.01ms}}
.shop-search{display:flex;gap:8px;flex:1 1 300px;max-width:none;margin-bottom:0}
.shop-search input{flex:1;border:1px solid var(--line-2);border-radius:24px;padding:12px 18px;font-family:inherit;font-size:14px}
.shop-search input:focus{outline:none;border-color:var(--red)}
.shop-search .btn{padding:10px 22px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.chip{font-size:13px;padding:8px 15px;border:1px solid var(--line-2);border-radius:22px;color:var(--ash);transition:.2s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip span{opacity:.6;font-size:11px;margin-left:2px}
/* 페이지네이션 — 한 화면 50개(2026-08-07). 185페이지까지 가므로 번호는 서버가
   앞뒤 2개씩만 남기고 … 로 접어서 준다. 모바일에서도 한 줄에 들어가게 wrap 을 허용한다. */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:40px}
.pagination .pg{
  min-width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:9px;font-size:14px;color:var(--ash);
  font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s,background .15s;
}
.pagination .pg:hover{border-color:var(--ink);color:var(--ink)}
.pagination .pg.on{background:var(--ink-solid);color:#fff;border-color:var(--ink);font-weight:700}
/* 이전·다음 화살표 — 번호와 붙어 있으면 "숫자 하나"로 읽힌다. 간격을 벌리고
   테두리 색·굵기를 달리해 역할이 다른 버튼임을 눈으로 구분시킨다. */
.pagination .pg--edge{
  font-size:0;                      /* 문자(‹›) 대신 아래 ::before 로 화살표를 그린다 */
  border-color:var(--line);
  background:var(--paper);
  position:relative;overflow:hidden;
}
.pagination .pg--edge::before{
  content:'';width:8px;height:8px;
  border:solid var(--ash);border-width:0 1.7px 1.7px 0;
  transition:border-color .18s,transform .22s var(--ease-out);
  position:relative;z-index:1;
}
.pagination .pg--edge[rel="prev"]{margin-right:10px}
.pagination .pg--edge[rel="next"]{margin-left:10px}
.pagination .pg--edge[rel="prev"]::before{transform:rotate(135deg) translate(-1px,-1px)}
.pagination .pg--edge[rel="next"]::before{transform:rotate(-45deg) translate(-1px,-1px)}
/* 잉크가 차오르듯 원이 퍼진다 — 숫자 버튼(단순 테두리 변화)과 확실히 다른 반응 */
.pagination .pg--edge::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--ink-solid);transform:scale(0);opacity:0;
  transition:transform .3s var(--ease-out),opacity .3s;
}
.pagination .pg--edge:hover{border-color:var(--ink)}
.pagination .pg--edge:hover::after{transform:scale(1);opacity:1}
.pagination .pg--edge:hover::before{border-color:#fff}
/* 방향으로 한 칸 밀린다 — 어디로 가는 버튼인지 손이 먼저 안다 */
.pagination .pg--edge[rel="prev"]:hover::before{transform:rotate(135deg) translate(1px,1px)}
.pagination .pg--edge[rel="next"]:hover::before{transform:rotate(-45deg) translate(1px,1px)}
.pagination .pg--edge:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .pagination .pg--edge,
  .pagination .pg--edge::before,
  .pagination .pg--edge::after{transition:none}
  .pagination .pg--edge:active{transform:none}
  .pagination .pg--edge[rel="prev"]:hover::before{transform:rotate(135deg) translate(-1px,-1px)}
  .pagination .pg--edge[rel="next"]:hover::before{transform:rotate(-45deg) translate(-1px,-1px)}
}
/* 생략 표시는 버튼이 아니다 — 테두리를 빼서 누를 수 없음을 눈으로 알린다 */
.pagination .pg--gap{border-color:transparent;color:var(--ash-2);min-width:24px;cursor:default}
.pagination__meta{
  text-align:center;margin-top:12px;font-size:12.5px;color:var(--ash);
  font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .pagination{gap:5px}
  .pagination .pg{min-width:34px;height:34px;font-size:13px}
}

/* ── 반응형 ──────────────────────────────────────── */
@media (max-width:900px){
  .cart-grid,.checkout-grid,.acct-grid{grid-template-columns:1fr}
  .cart-summary,.co-summary,.acct-nav{position:static}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .admin-side .brand{padding:8px 12px}
  .admin-side .spacer{display:none}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:1fr 1fr}
  .cart-line{grid-template-columns:64px 1fr auto;grid-template-areas:"t i r" "t q p";row-gap:10px}
  .cl-thumb{grid-area:t}.cl-info{grid-area:i}.cl-qty{grid-area:q}.cl-line-total{grid-area:p}.cl-remove{grid-area:r;justify-self:end}
  .cl-thumb img{width:64px;height:64px}
}

/* ══════════════════════════════════════════════════════
   리뷰 (S1)
   ══════════════════════════════════════════════════════ */
/* 별점 분포 막대 채움 — 기존 .rbar .fl 이 inline <span> 이라 width% 미적용되던 것 보정 */
.rbar .fl{display:block;height:100%}
/* 요약 — 향 속성 바 */
.rattr{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:9px}
.rattr__it{display:flex;align-items:center;gap:12px;font-size:12px}
.rattr__it .k{width:44px;color:var(--ash);flex:0 0 auto}
.rattr__it .tr{flex:1;height:6px;background:var(--paper);border-radius:4px;overflow:hidden}
.rattr__it .fl{display:block;height:100%;background:var(--red)}
.rattr__it .v{width:26px;text-align:right;color:var(--ink);font-weight:600}

/* 작성 폼 */
.rwrite{border:1px solid var(--line);border-radius:14px;margin-bottom:26px;background:var(--paper)}
.rwrite>summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:14.5px;list-style:none}
.rwrite>summary::-webkit-details-marker{display:none}
.rwrite[open]>summary{border-bottom:1px solid var(--line)}
.rform{padding:20px;display:flex;flex-direction:column;gap:16px}
.rrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rrow>label{width:64px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ink)}
.rhint{font-size:12px;color:var(--ash)}
.rselect{border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:14px;background:var(--paper)}

/* 별점/세그먼트 선택 위젯 */
.pick{display:inline-flex;gap:4px}
.pick button{border:0;background:none;cursor:pointer;font-family:inherit;padding:0;line-height:1}
.starpick button{font-size:26px;color:var(--line-2);transition:color .12s}
.starpick button.on{color:var(--red)}
.segpick{gap:6px}
.segpick button{width:34px;height:34px;border:1px solid var(--line-2);border-radius:8px;font-size:13px;font-weight:600;color:var(--ash);background:var(--paper);transition:.12s}
.segpick button.on{background:var(--red);border-color:var(--red);color:#fff}

/* 파일 첨부 */
.rfile{display:inline-flex;flex-direction:column;gap:6px;cursor:pointer;font-size:13px;font-weight:600}
.rfile small{color:var(--ash);font-weight:400}
.rfile input[type=file]{font-size:12px;color:var(--ash)}
.rfile__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rfile__list span{font-size:11px;color:var(--ash);background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:3px 8px}

/* 정렬 탭 */
.rsort{display:flex;gap:16px;padding:0 2px 16px;flex-wrap:wrap}
.rsort a{font-size:13px;color:var(--ash)}
.rsort a.on{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* 리뷰 항목 확장 */
.ritem .rhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-badge{font-size:11px;font-weight:700;color:var(--red);background:#fdecee;border-radius:20px;padding:3px 9px}
.rv-best{font-size:11px;font-weight:800;color:#fff;background:var(--ink-solid);border-radius:20px;padding:3px 9px;letter-spacing:.05em}
.ritem .rtitle{font-weight:700;font-size:14.5px;margin-bottom:6px}
.ritem .rbody{font-size:14px;line-height:1.7;white-space:pre-wrap;margin-bottom:10px}
.rmedia{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rmedia img,.rmedia video{width:96px;height:96px;object-fit:cover;border-radius:10px;background:var(--cream);border:1px solid var(--line)}
.ritem .rmeta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ritem .rmeta span{font-size:11.5px;color:var(--ash);background:var(--cream);border-radius:6px;padding:4px 9px}
.rfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line)}
.rfoot .who{font-size:12px;color:var(--ash)}
.ract{display:flex;gap:8px}
.ract button{border:1px solid var(--line-2);background:var(--paper);border-radius:20px;padding:6px 13px;font-size:12px;color:var(--ash);cursor:pointer;font-family:inherit;transition:.15s}
.ract .rev-helpful:hover,.ract .rev-helpful.voted{border-color:var(--red);color:var(--red)}
.ract .rev-helpful.voted{background:#fdecee}
.ract .rev-report:hover{color:var(--red)}

/* 마이페이지 — 작성 가능한 리뷰 */
.rvable{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.rvable__it{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;transition:.15s}
.rvable__it:hover{border-color:var(--red);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.rvable__it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--cream);margin-bottom:8px}
.rvable__it .nm{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rvable__it .go{font-size:12px;color:var(--red);font-weight:600}

@media (max-width:560px){
  .rrow>label{width:100%}
  .rmedia img,.rmedia video{width:80px;height:80px}
}

/* ══════════════════════════════════════════════════════
   쿠폰·적립금 (S2)
   ══════════════════════════════════════════════════════ */
/* 체크아웃 결제요약 내 쿠폰/적립금 */
.co-reward{padding:12px 0;border-top:1px dashed var(--line)}
.co-reward__lb{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.co-reward__lb small{color:var(--ash);font-weight:400}
.co-reward__lb small b{color:var(--red)}
.co-reward__sel{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:13.5px;background:var(--paper)}
.co-reward__none{font-size:12.5px;color:var(--ash)}
.co-reward__pt{display:flex;gap:8px}
.co-reward__pt input{flex:1;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px}
.co-reward__pt .btn{padding:0 16px;font-size:13px;white-space:nowrap}
.co-reward__note{font-size:11.5px;color:var(--ash);margin-top:6px}
.co-row.co-disc b{color:var(--red)}
.co-earn{text-align:right;font-size:12.5px;color:var(--ash);margin-top:8px}
.co-earn b{color:var(--red)}
/* 사은품 라인(₩0) */
.co-item--gift .nm{color:#2b7a3e}
.co-item--gift .pr{color:#2b7a3e;font-weight:700}

/* ══════════ 선물하기 (S4) ══════════ */
.co-gift{background:var(--cream);border-radius:14px}
.gift-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px}
.gift-toggle input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--red)}
.gift-toggle b{font-weight:700}
.gift-toggle small{display:block;color:var(--ash);font-size:12px;font-weight:400;margin-top:2px}
.gift-fields{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.gift-fields[hidden]{display:none}
.gift-fields label small.hint{color:var(--ash);font-weight:400;font-size:11.5px;margin-left:4px}
.gift-fields textarea{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:11px 12px;font-family:inherit;font-size:14px;resize:vertical;background:var(--paper)}
.gift-presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gift-layout{display:grid;grid-template-columns:1fr minmax(200px,240px);gap:18px;align-items:start}
@media (max-width:720px){.gift-layout{grid-template-columns:1fr}}
.gift-card-mock{background:linear-gradient(145deg,#fff 0%,#f7f4ef 100%);border:1px solid var(--line-2);border-radius:14px;padding:18px 16px;min-height:180px;box-shadow:0 8px 24px rgba(20,20,20,.06)}
.gift-card-mock__brand{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--red);margin-bottom:14px}
.gift-card-mock__to,.gift-card-mock__from{font-size:12.5px;color:var(--ash)}
.gift-card-mock__msg{margin:12px 0;font-size:14px;line-height:1.65;min-height:3.2em;white-space:pre-wrap}
.gift-preset{border:1px solid var(--line-2);background:var(--paper);border-radius:99px;padding:6px 12px;font-family:inherit;font-size:12px;color:var(--ink);cursor:pointer;transition:.15s}
.gift-preset:hover{border-color:var(--red);color:var(--red)}
/* 주문 상세의 선물 패널 */
.gift-panel h3{display:flex;align-items:center;gap:8px}
.gift-flag{font-size:11px;font-weight:700;color:#fff;background:var(--red);border-radius:6px;padding:2px 7px;letter-spacing:.02em}
.gift-msg{white-space:pre-wrap;line-height:1.6;font-size:14px;background:var(--cream);border-radius:10px;padding:12px 14px;border:1px solid var(--line)}

/* 쿠폰함 (마이페이지) */
.coupon-redeem{display:flex;gap:8px;margin-bottom:6px}
.coupon-redeem input{flex:1;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14px}
.coupon-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.coupon-card{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.coupon-card__amt{flex:0 0 96px;background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:800;line-height:1.1;position:relative}
.coupon-card__amt span{font-size:12px;font-weight:600;margin-top:2px}
.coupon-card__amt::after{content:"";position:absolute;right:-6px;top:0;bottom:0;width:12px;background:radial-gradient(circle at left,transparent 0 6px,#fff 6px) repeat-y;background-size:12px 12px}
.coupon-card__body{padding:14px 16px;min-width:0}
.coupon-card__body .nm{font-weight:700;font-size:14px;margin-bottom:6px}
.coupon-card__body .cond{font-size:12px;color:var(--ash)}
.coupon-card__body .exp{font-size:11.5px;color:var(--ash-2);margin-top:6px}
.coupon-card.is-dim{opacity:.55}
.coupon-card.is-dim .coupon-card__amt{background:var(--ash)}

/* 적립금 (마이페이지) */
.pt-summary{border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;background:var(--cream)}
.pt-summary__bal .l{font-size:13px;color:var(--ash);margin-bottom:6px}
.pt-summary__bal .v{font-size:34px;font-weight:800;color:var(--red);line-height:1}
.pt-summary__bal .v span{font-size:18px;margin-left:2px}
.pt-summary__sub{display:flex;gap:26px}
.pt-summary__sub div{text-align:right}
.pt-summary__sub span{display:block;font-size:12px;color:var(--ash);margin-bottom:4px}
.pt-summary__sub b{font-size:16px}
@media (max-width:560px){ .coupon-list{grid-template-columns:1fr} }

/* ══════════════════════════════════════════════════════
   향 탐색 (S3)
   ══════════════════════════════════════════════════════ */
/* 상품 상세 — 향 프로필 */
.scent-profile{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.sp-row{display:flex;align-items:center;gap:12px;font-size:13px}
.sp-row .k{width:60px;flex:0 0 auto;color:var(--ash);font-weight:600}
.sp-chip{display:inline-block;background:var(--red);color:#fff;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;margin-right:6px}
.sp-chip.alt{background:var(--paper);color:var(--ink);border:1px solid var(--line-2)}
a.sp-chip:hover{opacity:.88}
.sp-dots{display:inline-flex;gap:4px;align-items:center}
.sp-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.sp-dots i.on{background:var(--red)}
.sp-v{font-size:12px;color:var(--ash)}

/* ── 세트/번들 구성 (S4) ─────────────────────────── */
.bundle{border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin:18px 0;background:var(--cream)}
.bundle__head{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:12px}
.bundle__tag{background:var(--ink-solid);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;border-radius:5px;padding:3px 7px}
.bundle__head b{font-weight:700}
.bundle__save{margin-left:auto;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px}
.bundle__list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.bundle__list li{display:flex;align-items:center;gap:11px}
.bundle__list li a{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.bundle__list img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--paper)}
.bundle__list .bn{font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bundle__list li a:hover .bn{color:var(--red)}
.bundle__list .bp{font-size:12.5px;color:var(--ash);flex:0 0 auto}
.bundle__calc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--ash)}
.bundle__calc del{color:var(--ash)}
.bundle__calc b{color:var(--ink);font-weight:700}
.bundle__savv{margin-left:auto;color:var(--red);font-weight:600}
.bundle__savv b{color:var(--red)}

/* ── 재입고 알림 (S5) ─────────────────────────────── */
.restock{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--cream)}
.restock-h{font-size:14px;font-weight:700;margin-bottom:10px}
.restock-h span{display:block;font-size:12px;font-weight:400;color:var(--ash);margin-top:2px}
.restock-row{display:flex;gap:8px}
.restock-row input{flex:1;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font-family:inherit;font-size:14px;background:var(--paper)}
.restock-row .btn{white-space:nowrap}
.restock-done{color:#2b7a3e;font-weight:600;font-size:14px;margin:0}
.detail-video video{width:100%;border-radius:8px;display:block;background:#000}
/* 관리자 상품 일괄수정 툴바 (S5) */
.bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;background:var(--cream);border:1px solid var(--line);border-radius:10px;font-size:13px}
.bulk-bar .bulk-sep{color:var(--ash);margin-left:6px}
.bulk-bar b{color:var(--red)}

/* ── 클레임(취소·반품·교환) (S7) ─────────────────── */
.claim-row{padding:12px 0;border-bottom:1px solid var(--line)}
.claim-row:last-child{border-bottom:none}
.claim-detail{font-size:13.5px;margin-top:6px;line-height:1.55}
.claim-answer{font-size:13px;margin-top:8px;background:var(--cream);border-radius:9px;padding:9px 12px}
.claim-answer b{color:var(--red);margin-right:4px}
.claim-form-wrap{border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-top:10px}
.claim-form-wrap summary{cursor:pointer;font-weight:600;font-size:14px}

/* ── FAQ (S7) ─────────────────────────────────────── */
.faq-wrap{max-width:820px}
.faq-group{margin-bottom:30px}
.faq-cat{font-size:16px;font-weight:800;color:var(--red);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;padding:15px 4px;font-size:15px;font-weight:500;list-style:none;display:flex;gap:10px;align-items:baseline}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q{color:var(--red);font-weight:800;flex:0 0 auto}
.faq-item[open] summary{color:var(--red)}
.faq-a{padding:2px 4px 18px 26px;color:var(--ash);line-height:1.7;font-size:14.5px;white-space:pre-wrap}

/* ── 공지·배너 (S9) ───────────────────────────────── */
.notice-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:14px;color:var(--ink)}
.notice-bar .nb-label{flex:0 0 auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px}
.notice-bar .nb-latest{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.notice-bar:hover .nb-latest{color:var(--red)}
.notice-bar .nb-more{flex:0 0 auto;color:var(--ash);font-size:12.5px}
.promo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.promo-banner{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:2.6/1;background:var(--cream)}
.promo-banner img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out,ease)}
.promo-banner:hover img{transform:scale(1.04)}
.promo-banner .pb-txt{position:absolute;left:0;bottom:0;right:0;padding:16px 18px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.promo-banner .pb-txt b{display:block;font-size:18px;font-weight:800}
.promo-banner .pb-txt span{font-size:13px;opacity:.9}
.notice-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.notice-list li a{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.notice-list .nl-type{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px;background:var(--cream);color:var(--red)}
.notice-list .nl-type.event{background:var(--red);color:#fff}
.notice-list .nl-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-list li a:hover .nl-title{color:var(--red)}
.notice-list .nl-date{flex:0 0 auto;color:var(--ash);font-size:13px}
.notice-detail .nd-head{border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:20px}
.notice-detail .nd-type{display:inline-block;font-size:12px;font-weight:700;border-radius:6px;padding:3px 10px;background:var(--red);color:#fff;margin-bottom:10px}
.notice-detail h2{font-size:22px;font-weight:800}
.notice-detail .nd-date{color:var(--ash);font-size:13px;margin-top:8px}
.notice-detail .nd-body{line-height:1.8;font-size:15px;white-space:pre-wrap;color:#333}

/* ── 회원 등급 (S10) ──────────────────────────────── */
.tier-card{border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:20px;background:linear-gradient(135deg,var(--cream),#fff)}
.tier-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tier-name{font-weight:700}
.tier-points{color:var(--ink);font-size:14px}
.tier-points b{color:var(--red);font-size:18px}
.tier-badge{display:inline-block;font-size:12px;font-weight:800;color:#fff;border-radius:20px;padding:3px 12px;letter-spacing:.02em;background:var(--ink-solid)}
.tier-badge.tier-WELCOME{background:#9a8f80}
.tier-badge.tier-SILVER{background:#8a9199}
.tier-badge.tier-GOLD{background:#c79a3a}
.tier-badge.tier-VIP{background:linear-gradient(135deg,#0e9ad9,#0a6fa5)}
.tier-benefits{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 12px;font-size:13px;color:var(--ash)}
.tier-benefits b{color:var(--ink)}
.tier-bar{height:8px;border-radius:99px;background:var(--cream-2);overflow:hidden;margin-bottom:8px}
.tier-bar__fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--red-deep))}
.tier-next{font-size:12.5px;color:var(--ash)}
.tier-next b{color:var(--red)}
.guest-join{display:block;background:linear-gradient(120deg,#1a1a1a,#2a1216 45%,var(--red));background-size:200% 200%;color:#fff;border-radius:14px;padding:15px 16px;margin-bottom:14px;text-align:center;animation:guestglow 3.2s ease-in-out infinite;box-shadow:0 8px 22px rgba(194,0,25,.22);transition:transform .2s}
.guest-join b{display:block;font-size:14px;margin-bottom:3px}
.guest-join span{font-size:12px;opacity:.9}
.guest-join:hover{transform:translateY(-2px)}
@keyframes guestglow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.guest-join{animation:none;background:var(--ink-solid)}}

/* ── 쿠키 동의 배너 (S14) ─────────────────────────── */
.cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;background:var(--ink-solid);color:#fff;border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 8px 30px rgba(0,0,0,.25);max-width:920px;margin:0 auto}
.cookie-consent[hidden]{display:none}
.cookie-consent .cc-text{flex:1;min-width:220px;font-size:13px;line-height:1.6;color:#eee}
.cookie-consent .cc-text a{color:#fff;text-decoration:underline}
.cookie-consent .cc-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-consent .cc-actions .btn{padding:8px 18px;font-size:13px}
.cookie-consent .btn--outline{color:#fff;border-color:#666}
@media (max-width:560px){ .cookie-consent{left:8px;right:8px;bottom:8px;padding:14px} .cookie-consent .cc-actions{width:100%} .cookie-consent .cc-actions .btn{flex:1} }

/* 상점 필터바 */
.filterbar{display:flex;flex-direction:column;gap:15px;margin-bottom:26px}
.filter-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-group>.fl-label{font-size:12px;font-weight:700;color:var(--ash);width:52px;flex:0 0 auto}
.fl-chip{border:1px solid var(--line-2);background:var(--paper);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.fl-chip:hover{border-color:var(--ink)}
.fl-chip.on{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
.fl-chip .n{color:var(--ash);font-size:11px;margin-left:3px}
.fl-chip.on .n{color:rgba(255,255,255,.7)}

/* 검색 자동완성 */
.search-ac{position:relative}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);z-index:60;overflow:hidden;max-height:360px;overflow-y:auto}
.ac-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;font-size:14px}
.ac-item:hover,.ac-item.active{background:var(--cream)}
.ac-item img{width:36px;height:36px;object-fit:cover;border-radius:7px;background:var(--cream);flex:0 0 auto}
.ac-item .nm{font-weight:500}.ac-item .ct{font-size:11px;color:var(--ash)}
.ac-empty{padding:14px;color:var(--ash);font-size:13px;text-align:center}
.ac-head{padding:9px 14px 5px;font-size:11px;font-weight:700;color:var(--ash);letter-spacing:.04em}
.popular-terms{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.popular-terms .pt-lb{font-size:12px;color:var(--ash);font-weight:600}
.popular-terms a{font-size:13px;color:var(--ink);border:1px solid var(--line-2);border-radius:20px;padding:5px 12px}
.popular-terms a:hover{border-color:var(--red);color:var(--red)}

/* 향 찾기 위저드 */
.wiz{max-width:760px;margin-inline:auto;padding-block:clamp(24px,5vw,56px)}
.wiz__head{text-align:center;margin-bottom:30px}
.wiz__head h1{font-size:clamp(24px,3.4vw,38px);font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.wiz__head p{color:var(--ash)}
.wiz__prog{display:flex;gap:6px;justify-content:center;margin-bottom:28px}
.wiz__prog i{width:36px;height:4px;border-radius:2px;background:var(--line-2)}
.wiz__prog i.on{background:var(--red)}
.wiz__step{display:none}
.wiz__step.active{display:block;animation:wizfade .35s ease}
@keyframes wizfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wiz__q{text-align:center;font-size:19px;font-weight:600;margin-bottom:22px}
.wiz__opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wiz__opt{border:1px solid var(--line-2);border-radius:14px;padding:18px 16px;text-align:left;cursor:pointer;transition:.15s;background:var(--paper)}
.wiz__opt:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.wiz__opt b{display:block;font-size:15px;margin-bottom:4px}
.wiz__opt span{font-size:12.5px;color:var(--ash);line-height:1.5}
.wiz__nav{display:flex;justify-content:space-between;margin-top:24px}
.wiz__skip{color:var(--ash);font-size:13px;text-decoration:underline}
@media (max-width:560px){ .wiz__opts{grid-template-columns:1fr} .sp-row .k{width:52px} }

/* ══════════════════════════════════════════════════════
   배치2 · 상품목록 · 검색 (튜닝 #9~18)
   ══════════════════════════════════════════════════════ */
/* #9 가격대 슬라이더 + #17 실시간 개수 + #15 품절 토글 */
.price-group{align-items:center}
.price-slider{position:relative;width:min(220px,52vw);height:30px;flex:0 0 auto}
.ps-rail{position:absolute;top:50%;left:0;right:0;height:5px;transform:translateY(-50%);background:var(--cream-2);border-radius:99px;overflow:hidden}
.ps-fill{position:absolute;top:0;height:100%;background:linear-gradient(90deg,var(--red),var(--red-deep));border-radius:99px}
.price-slider input[type=range]{position:absolute;top:0;left:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.price-slider input[type=range]:focus{outline:none}
.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--red);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.price-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--paper);border:2px solid var(--red);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.price-read{font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap}
.price-read b{font-weight:700}
.price-read .ps-count{color:var(--red);font-weight:700;margin-left:6px}
.fl-chip.ghost{color:var(--ash)}
.fl-chip.ghost:hover{color:var(--red);border-color:var(--red)}
.fl-chip.ps-apply{background:var(--red);color:#fff;border-color:var(--red)}
.fl-chip.ps-apply:hover{background:var(--red-deep)}
.fl-chip.stock-toggle.on{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
/* #10 다중 향계열 표시 */
.fl-multi{font-size:11.5px;color:var(--red);font-weight:700}
/* #18 카테고리 hover 대표향 프리뷰 */
.chip[data-scent]{position:relative}
.chip[data-scent]::after{content:"대표 " attr(data-scent);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:var(--ink-solid);color:#fff;font-size:11px;font-weight:600;letter-spacing:normal;text-transform:none;padding:4px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:5}
.chip[data-scent]:hover::after{opacity:1;transform:translateX(-50%)}
/* #14 검색 오타 교정 제안 */
.noresult .nr-didyou{font-size:14.5px;margin-top:8px;color:var(--ink)}
.noresult .nr-didyou a b{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* #13 더 보기 / 무한 스크롤 + #38 로딩 닷 */
.loadmore-wrap{text-align:center;margin-top:34px}
.loadmore-btn{position:relative;min-width:180px}
.loadmore-btn.loading{color:transparent;pointer-events:none}
.lm-dots{display:none;position:absolute;inset:0;align-items:center;justify-content:center;gap:5px}
.loadmore-btn.loading .lm-dots{display:flex}
.lm-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-solid);animation:lmdot .9s ease-in-out infinite}
.lm-dots i:nth-child(2){animation-delay:.15s}
.lm-dots i:nth-child(3){animation-delay:.3s}
@keyframes lmdot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
/* #12 빠른보기 Quick View 모달 */
.qv-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.qv-modal[hidden]{display:none}
.qv-dim{position:absolute;inset:0;background:rgba(20,15,12,.5);opacity:0;transition:opacity .25s}
.qv-modal.show .qv-dim{opacity:1}
.qv-card{position:relative;z-index:1;width:min(640px,100%);max-height:88vh;overflow:auto;background:var(--paper);border-radius:18px;padding:24px;transform:translateY(16px) scale(.98);opacity:0;transition:transform .3s var(--ease-out),opacity .3s}
.qv-modal.show .qv-card{transform:none;opacity:1}
.qv-x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:24px;color:var(--ash);cursor:pointer;line-height:1;z-index:2}
.qv-x:hover{color:var(--red)}
.qv-body{display:grid;grid-template-columns:230px 1fr;gap:22px}
.qv-pic{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--cream);position:relative}
.qv-pic img{width:100%;height:100%;object-fit:cover}
.qv-pic .badge{top:10px;left:10px}
.qv-info{min-width:0;display:flex;flex-direction:column}
.qv-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);font-weight:700}
.qv-nm{font-size:21px;font-weight:700;margin:6px 0;line-height:1.25;letter-spacing:-.01em}
.qv-sub{font-size:13px;color:var(--ash);margin-bottom:10px;line-height:1.5}
.qv-rating{font-size:12.5px;color:var(--ash);margin-bottom:10px}
.qv-rating .stars{color:#e8a020;letter-spacing:1px}
.qv-price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.qv-price .now{font-size:21px;font-weight:800}
.qv-price .was{color:var(--ash-2);text-decoration:line-through;font-size:14px}
.qv-price .sale{color:var(--red);font-weight:700;font-size:15px}
.qv-opts{margin-bottom:14px}
.qv-opts .lb{display:block;font-size:11px;font-weight:700;color:var(--ash);letter-spacing:.04em;margin-bottom:6px}
.qv-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.qv-sw{border:1px solid var(--line-2);background:var(--paper);border-radius:8px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:.12s}
.qv-sw.on{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
.qv-qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:16px;align-self:flex-start}
.qv-qty button{width:38px;height:40px;border:none;background:var(--paper);font-size:18px;cursor:pointer;color:var(--ink)}
.qv-qty input{width:46px;text-align:center;border:none;font-family:inherit;font-size:14px}
.qv-soldout{color:var(--red);font-weight:700;font-size:13.5px;margin-bottom:12px}
.qv-act{display:flex;gap:10px;margin-top:auto}
.qv-act .btn{flex:1}
@media (max-width:560px){ .qv-body{grid-template-columns:1fr} .qv-pic{max-width:190px;margin:0 auto} }

/* ══════════════════════════════════════════════════════
   마이크로 인터랙션 (전역 + 배치2) — prefers-reduced-motion 존중
   ══════════════════════════════════════════════════════ */
/* #1 버튼 리플 */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:currentColor;opacity:.3;pointer-events:none;animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
/* #4/#42 카트 배지 팝 + 액션 마이크로 바운스 */
@keyframes microbounce{0%{transform:scale(1)}30%{transform:scale(.86)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.mbounce{animation:microbounce .42s var(--ease-out)}
/* #43 스크롤 진행률 상단 바 */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--red),var(--red-deep));z-index:300;pointer-events:none;transition:width .1s linear}
/* #44 맨 위로 버튼 */
.to-top{position:fixed;right:18px;bottom:18px;z-index:56;width:44px;height:44px;border-radius:50%;background:var(--ink-solid);color:#fff;border:none;font-size:19px;cursor:pointer;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:.3s var(--ease-out);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--red)}
/* #14 자동완성 stagger 페이드인 */
.ac-item{animation:acfade .3s var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes acfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* #22 세일% 뱃지 진입 팝 (카드 reveal 시) */
.card .card__pr .sale{display:inline-block;transform-origin:center}
.card.reveal.in .card__pr .sale{animation:salepop .5s var(--ease-out) both;animation-delay:.18s}
@keyframes salepop{0%{transform:scale(0);opacity:0}62%{transform:scale(1.28)}100%{transform:scale(1);opacity:1}}
/* #25 품절 뱃지 은은한 펄스 + 카드 톤다운 */
.badge.soldout{background:var(--ink-solid);animation:soldpulse 2.4s ease-in-out infinite}
@keyframes soldpulse{0%,100%{opacity:1}50%{opacity:.5}}
.card.is-sold .card__media .main{filter:grayscale(.35);opacity:.82}
.card.is-sold .card__acts .card__cart:not(.is-sold-label){display:none}
/* 상품카드 빠른보기 아이콘 (#12 진입점) */
/* qview 기본은 card__acts 안 — 레거시 absolute 규칙 무력화 */
.qview{cursor:pointer;border:none;padding:0;background:transparent}
/* #39 토스트 스프링 진입(기존 토스트 강화) */
.toast.show{animation:toastspring .5s var(--ease-out)}
@keyframes toastspring{0%{transform:translate(-50%,150%)}70%{transform:translate(-50%,-8%)}100%{transform:translate(-50%,0)}}

@media (prefers-reduced-motion:reduce){
  .ripple{display:none}
  .to-top,.qv-card,.qv-dim,.scroll-prog{transition:none}
  .mbounce{animation:none}
}

/* ══════════════════════════════════════════════════════
   배치3 · 상품상세 (튜닝 #21·22·24·25·27) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #22 지금 보는 중 / #24 N명이 찜함 */
.live-stats{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 20px}
.ls-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:var(--cream);color:var(--ink)}
.ls-chip b{color:var(--red);font-weight:800}
.ls-view{background:rgba(194,0,25,.06)}
/* #21 도착 예정일 (안심배지 박스 2번째 줄) */
.trust-eta.arrival{border-top:1px solid var(--line)}
.trust-eta small{color:var(--ash);font-weight:400;font-size:11.5px}
/* #25 상품 공유 */
.share-row{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.share-lb{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ash);text-transform:uppercase}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);border-radius:20px;padding:8px 14px;cursor:pointer;font-family:inherit;transition:.15s}
.share-btn:hover{border-color:var(--red);color:var(--red)}
.share-btn.copied{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
/* #27 레이어링 추천 */
.lay-hint{font-size:12.5px;color:var(--ash)}
/* #23 향 노트 피라미드 — 통일 배경 + 가운데 정렬 */
.note-pyramid{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;margin:12px auto 14px;width:100%}
.np-row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:14px;width:100%;padding:14px 18px;border-radius:14px;background:var(--cream);border:1px solid var(--line);box-sizing:border-box;text-align:left}
.np-top,.np-heart,.np-base{width:100%;max-width:100%}
.np-k{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--red);text-align:center}
.np-v{font-size:14px;color:var(--ink);font-weight:500;line-height:1.45;text-align:center}
.np-hint{font-size:12.5px;color:var(--ash);text-align:center;margin-top:2px}
.detail__center.reveal .np-row{opacity:0;transform:translateY(10px) scale(.98)}
.detail__center.reveal.in .np-top{animation:npdraw .5s var(--ease-out) forwards;animation-delay:.05s}
.detail__center.reveal.in .np-heart{animation:npdraw .5s var(--ease-out) forwards;animation-delay:.2s}
.detail__center.reveal.in .np-base{animation:npdraw .5s var(--ease-out) forwards;animation-delay:.35s}
@keyframes npdraw{to{opacity:1;transform:none}}
/* #19 향 세기·지속력 도트 순차 채움 */
.sp-dots i.on{animation:dotpop .38s var(--ease-out) both;animation-delay:calc(var(--d,0)*90ms)}
@keyframes dotpop{from{transform:scale(0)}60%{transform:scale(1.35)}to{transform:scale(1)}}
/* #45 상품 탭 활성 언더라인 슬라이드 + 드래그 방지 */
.ptabs{position:sticky;touch-action:manipulation;-webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none;scrollbar-width:none}
/* overflow-x:auto 가 띄우는 스크롤바 UI 숨김 — 좁은 화면 스와이프 스크롤은 그대로 동작한다 */
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{touch-action:manipulation;-webkit-user-drag:none}
.ptabs a.active::after{display:none}
.ptabs__ink{position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--ink-solid);pointer-events:none;transition:left .3s var(--ease-out),width .3s var(--ease-out)}
/* #17 갤러리 이미지 hover 줌 렌즈 */
.pgal__main{cursor:default}
.pgal__main img{transition:none}
.pgal__main.zoom img{transform:none}

/* #20 별점 hover 채움 (JS .hov) */
.starpick button.hov{color:var(--red)}
/* #24 가격 롤 강조 */
.tot .v b.rolling{color:var(--red)}
/* #21 상품 카드 3D 틸트 (hover 기기만, JS 인라인 transform) */
@media (hover:hover) and (pointer:fine){ .card{transition:transform .3s var(--ease-out),box-shadow .3s} }
@media (prefers-reduced-motion:reduce){
  .np-row{opacity:1!important;transform:none!important}
  .sp-dots i.on{animation:none}
  .ptabs__ink,.pgal__main img{transition:none}
  .pgal__main.zoom img{transform:none}
  .card{transform:none!important}
}

/* ══════════════════════════════════════════════════════
   배치4 · 장바구니 (튜닝 #33~39) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #36 품절임박 배지 + #33 적립 + #34 쿠폰 미리보기 + 경고 */
.cl-lowstock{color:var(--red);font-weight:700;font-size:11.5px;margin-left:4px}
.cl-wish{align-self:flex-start;margin-top:2px;background:none;border:none;color:var(--ash);font-size:12px;cursor:pointer;font-family:inherit;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.cl-wish:hover{color:var(--red)}
.cart-coupon-hint{font-size:12.5px;color:var(--ink);background:rgba(194,0,25,.05);border:1px solid rgba(194,0,25,.15);border-radius:9px;padding:9px 11px;margin-top:10px;line-height:1.5}
.cart-coupon-hint b{color:var(--red)}.cart-coupon-hint .hl{font-weight:800}
.cart-coupon-hint span{color:var(--ash);font-weight:400}
.cart-lowstock-warn{font-size:12.5px;color:#b26a00;background:#fff4e5;border-radius:9px;padding:9px 11px;margin-top:10px;line-height:1.5}
.cart-lowstock-warn b{color:var(--red)}
/* #26 라인 삭제 slide-out + 위시 이동 */
.cart-line{transition:opacity .28s,transform .28s,max-height .28s,padding .28s,margin .28s}
.cart-line.removing{opacity:0;transform:translateX(40px);max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}
/* #3 fly-to-cart 클론 — transform만 애니(렉 완화) */
.fly-clone{position:fixed;z-index:400;border-radius:10px;object-fit:cover;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.18);will-change:transform,opacity;transition:transform .55s cubic-bezier(.22,.8,.28,1),opacity .55s ease;backface-visibility:hidden}
/* #29 컨페티 */
.confetti-p{position:fixed;width:9px;height:9px;border-radius:2px;z-index:400;pointer-events:none;animation:confetti .9s ease-out forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(400deg);opacity:0}}
/* #38 삭제 되돌리기 바 */
.undo-bar{position:fixed;left:50%;bottom:76px;transform:translate(-50%,140%);z-index:200;background:var(--ink-solid);color:#fff;border-radius:12px;padding:11px 14px 11px 18px;font-size:13px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .4s var(--ease-out)}
.undo-bar.show{transform:translate(-50%,0)}
.undo-bar button{background:none;border:none;color:#ffd0d6;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline}
.undo-bar button:hover{color:#fff}
/* #30 사은품 달성 칩 팝인 */
.aov-gift.on{animation:giftpop .42s var(--ease-out)}
@keyframes giftpop{0%{transform:scale(.8);opacity:.4}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
/* #46 드로어 항목 stagger 슬라이드 (JS가 --di 주입) */
#drawer.open a{animation:drawerin .42s var(--ease-out) both;animation-delay:calc(var(--di,0)*40ms)}
/* 소분류 패널 안의 링크는 stagger 대상이 아니다. 패널 자체(dcpIn .26s)가 이미 등장을 연출하고,
   여기에 stagger 가 걸리면 fill-mode:both 때문에 자기 차례(최대 5.5초)까지 opacity:0 로 대기해
   "카테고리를 눌러도 소분류가 한참 뒤에 뜨는" 버그가 된다. JS 쪽 대상 축소와 이중 안전망. */
#drawer.open .d-catp a{animation:none}
@keyframes drawerin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .fly-clone,.confetti-p{display:none}
  .cart-line{transition:none}
  .aov-gift.on,#drawer.open a{animation:none}
  .undo-bar{transition:none}
}

/* ══════════════════════════════════════════════════════
   배치5 · 체크아웃 (튜닝 #41~45) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #44/#31 결제 진행 스텝바 */
.csteps{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 26px;flex-wrap:nowrap}
.cstep{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ash);font-weight:600;white-space:nowrap}
.cstep .cs-n{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;background:var(--cream-2);color:var(--ash);transition:.3s}
.cstep.on{color:var(--ink)}
.cstep.on .cs-n{background:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(194,0,25,.12)}
.cstep.done{color:var(--ink)}
.cstep.done .cs-n{background:var(--ink-solid);color:#fff}
.cstep-bar{flex:0 1 60px;height:2px;background:var(--cream-2);border-radius:2px;position:relative;overflow:hidden}
.cstep-bar::after{content:"";position:absolute;inset:0;width:0;background:var(--red);transition:width .5s var(--ease-out)}
.cstep-bar.fill::after{width:100%}
@media (max-width:560px){ .cstep .cs-t{display:none} .cstep-bar{flex-basis:36px} }
/* #43 아낀 금액 요약 */
.co-savings{text-align:center;font-size:13px;font-weight:700;color:#1c7a34;background:#eef7ee;border-radius:10px;padding:10px 12px;margin-top:12px}
.co-savings b{color:#1c7a34;font-weight:800}
/* #34 배송지 선택 카드 하이라이트 */
.addr-chip{transition:background .2s,border-color .2s,box-shadow .2s}
.addr-chip.on{animation:addrpulse .5s var(--ease-out)}
@keyframes addrpulse{0%{box-shadow:0 0 0 0 rgba(194,0,25,.35)}100%{box-shadow:0 0 0 8px rgba(194,0,25,0)}}
/* #32 주문완료 ✓ 드로우 */
.result-check{background:#eef7ee}
.result-check svg{overflow:visible}
.rc-circle{stroke:#1c7a34;stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:rccircle .5s var(--ease-out) forwards}
.rc-check{stroke:#1c7a34;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:rccheck .35s var(--ease-out) .45s forwards}
@keyframes rccircle{to{stroke-dashoffset:0}}
@keyframes rccheck{to{stroke-dashoffset:0}}
/* #10 비밀번호 강도 바 */
.pwd-strength{margin-top:-6px;display:flex;align-items:center;gap:10px}
.pwd-strength[hidden]{display:none}
.pwd-bar{flex:1;height:5px;background:var(--cream-2);border-radius:99px;overflow:hidden}
.pwd-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .3s,background .3s;background:var(--red)}
.pwd-bar i.lvl-2{background:#e8a020}
.pwd-bar i.lvl-3,.pwd-bar i.lvl-4{background:#2b7a3e}
.pwd-label{font-size:11.5px;color:var(--ash);white-space:nowrap;min-width:52px;text-align:right}
/* #15 제출 스피너 시퀀스 */
.btn.btn-loading{color:transparent!important;pointer-events:none;position:relative}
.btn.btn-loading .arw{opacity:0}
.btn.btn-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .cstep-bar::after{transition:none}
  .rc-circle,.rc-check{animation:none;stroke-dashoffset:0}
  .addr-chip.on{animation:none}
  .btn.btn-loading::after{animation:none}
}

/* ══════════════════════════════════════════════════════
   배치6 · 회원/마이페이지 (튜닝 #46~52) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #49 등급 진행바 채움 애니 */
.tier-bar__fill{transition:width .8s var(--ease-out)}
/* 마이페이지 컴팩트 상품 그리드(재구매·신상) */
.pgrid--acct{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
/* #49/#50 향 취향 */
.scent-pref__chips{display:flex;flex-wrap:wrap;gap:9px}
.scent-pref__chip{position:relative;border:1px solid var(--line-2);border-radius:22px;padding:8px 15px;font-size:13px;color:var(--ink);cursor:pointer;transition:.15s;user-select:none}
.scent-pref__chip:hover{border-color:var(--ink)}
.scent-pref__chip.on{background:var(--red);border-color:var(--red);color:#fff}
.scent-pref__chip input{position:absolute;opacity:0;pointer-events:none}
/* #52 등급 혜택 페이지 */
.tier-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tier-row{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.tier-row:last-child{border-bottom:none}
.tier-row.is-now{background:linear-gradient(135deg,rgba(194,0,25,.05),transparent)}
.tr-badge{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-now{font-size:11px;font-weight:700;color:var(--red)}
.tr-cond{font-size:13px;color:var(--ash)}
.tr-benefits{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ash);justify-self:end}
.tr-benefits b{color:var(--ink)}
.tr-benefits .muted{opacity:.6}
.tier-note{margin-top:18px;font-size:13px;color:var(--ash);line-height:1.9}
.tier-note b{color:var(--ink)}
@media (max-width:560px){ .tier-row{grid-template-columns:1fr;gap:8px} .tr-benefits{justify-self:start} }

/* ══════════════════════════════════════════════════════
   배치7 · 리뷰/UGC (튜닝 #53~58) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #58 리뷰 한 줄 요약 */
.review-summary{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:13.5px;color:var(--ink);margin-bottom:18px;line-height:1.6}
.review-summary b{color:var(--red);font-weight:700}
/* #56 리뷰 적립 강조 */
.review-reward-note{background:rgba(194,0,25,.05);border:1px solid rgba(194,0,25,.15);border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--ink);line-height:1.5}
.review-reward-note b{color:var(--red);font-weight:800}
.review-remind-note{font-size:13px;color:var(--ink);background:#eef7ee;border-radius:9px;padding:9px 12px;margin-bottom:12px;line-height:1.5}
.review-remind-note b{color:#1c7a34;font-weight:800}
/* #55 향 속성별 리뷰 필터 */
.rfilter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 16px}
.rfilter .rf-lb{font-size:11px;font-weight:700;color:var(--ash);letter-spacing:.06em;text-transform:uppercase}
.rf-chip{border:1px solid var(--line-2);background:var(--paper);border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--ink);cursor:pointer;font-family:inherit;transition:.15s}
.rf-chip:hover{border-color:var(--ink)}
.rf-chip.on{background:var(--ink-solid);color:#fff;border-color:var(--ink)}
.rfilter-empty{color:var(--ash);font-size:14px;padding:30px 0;text-align:center}
/* #57 베스트 리뷰어 뱃지 */
.best-reviewer{font-size:11px;font-weight:700;color:#c79a3a;background:rgba(199,154,58,.12);border-radius:20px;padding:2px 8px;margin-left:4px}
/* #53 포토리뷰 갤러리 */
/* 리뷰 모아보기 그리드 — 홈 캐러셀과 같은 .rvcard 를 격자로 깐다 */
.rvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(14px,2vw,24px);margin-bottom:28px}
@media (max-width:520px){.rvgrid{grid-template-columns:repeat(2,1fr);gap:12px}}

.pr-gallery{columns:4 200px;column-gap:14px}
.pr-tile{position:relative;display:block;margin:0 0 14px;break-inside:avoid;border-radius:12px;overflow:hidden;background:var(--cream)}
.pr-tile img{width:100%;display:block;transition:transform .5s var(--ease)}
.pr-tile:hover img{transform:scale(1.05)}
.pr-tile__ov{position:absolute;left:0;right:0;bottom:0;padding:20px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;opacity:0;transition:opacity .25s}
.pr-tile:hover .pr-tile__ov{opacity:1}
.pr-tile__stars{display:block;color:#ffd05b;font-size:12px;letter-spacing:1px}
.pr-tile__prod{display:block;font-size:12px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:none){ .pr-tile__ov{opacity:1;background:linear-gradient(transparent,rgba(0,0,0,.5))} }

/* ══════════════════════════════════════════════════════
   배치8 · 프로모션 (튜닝 #59·60·62·64) + 마이크로
   ══════════════════════════════════════════════════════ */
/* #62 첫 구매 혜택 스트립 */
.firstbuy-strip{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:var(--ink-solid);color:#fff;font-size:13.5px;margin:14px 0 4px;text-decoration:none;overflow:hidden;position:relative;white-space:nowrap}
.firstbuy-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);animation:fbshine 2.8s ease-in-out infinite}
.firstbuy-strip .fb-tag{flex:none;font-size:10px;font-weight:800;letter-spacing:.08em;background:var(--red);color:#fff;border-radius:999px;padding:4px 9px}
.firstbuy-strip b{flex:1;min-width:0;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.firstbuy-strip .fb-go{flex:none;font-weight:800;color:#fff;background:var(--red);border-radius:999px;padding:7px 14px;font-size:12px;animation:fbpulse 1.8s ease-in-out infinite}
.firstbuy-strip:hover{opacity:.95}
@keyframes fbshine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes fbpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.firstbuy-strip::after,.firstbuy-strip .fb-go{animation:none}}
.shop-head{margin:18px 0 16px}
.chips--filtered{margin-top:4px}
.cat-more{position:relative}
.cat-more > summary{list-style:none;cursor:pointer}
.cat-more > summary::-webkit-details-marker{display:none}
.chip--ghost{background:transparent;border-style:dashed}
.chip--back{background:var(--cream)}
.cat-more__list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;width:100%;flex-basis:100%}
details.cat-more[open]{display:contents}
details.cat-more[open] .cat-more__list{display:flex;width:100%;margin-top:8px}
/* #60 다음 쿠폰 힌트 */
.cart-coupon-hint.next{background:#fff4e5;border-color:rgba(178,106,0,.2);color:#7a5200}
.cart-coupon-hint.next b{color:#b26a00}
/* #64 친구초대 */
.referral-hero{text-align:center;background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--line);border-radius:16px;padding:28px 22px;margin-bottom:18px}
.referral-hero .ref-emoji{font-size:38px}
.referral-hero h2{font-size:20px;font-weight:800;margin:8px 0 6px}
.referral-hero p{font-size:13.5px;color:var(--ash);line-height:1.6}
.ref-link-box{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ref-link-box>label{display:block;font-size:12px;font-weight:700;color:var(--ash);margin-bottom:8px}
.ref-link-row{display:flex;gap:8px}
.ref-link-row input{flex:1;border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font-size:13px;font-family:inherit;background:var(--cream);color:var(--ink);min-width:0}
.ref-link-row .btn{padding:0 20px;white-space:nowrap}
.ref-share{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.ref-share .btn{padding:9px 18px}
.ref-code{font-size:13px;color:var(--ash)}.ref-code b{color:var(--ink);letter-spacing:.05em}
.ref-stat{text-align:center;font-size:14px;color:var(--ink);margin:18px 0;padding:14px;background:var(--cream);border-radius:12px}
.ref-stat b{color:var(--red);font-size:18px;font-weight:800}
.ref-steps{counter-reset:s;list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:12px}
.ref-steps li{position:relative;padding-left:40px;font-size:13.5px;color:var(--ash);line-height:1.6}
.ref-steps li b{color:var(--ink)}
.ref-steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}

/* ══════════════════════════════════════════════════════
   배치9·10 · 신뢰·긴박 (튜닝 #65~71)
   ══════════════════════════════════════════════════════ */
/* #65 주간 판매 · #66 재구매율 칩(라이브 통계 확장) */
.ls-chip.ls-sold{background:rgba(194,0,25,.08)}
.ls-chip.ls-sold b,.ls-chip.ls-repeat b{color:var(--red)}
.ls-chip.ls-repeat{background:#eef7ee}
.ls-chip.ls-repeat b{color:#1c7a34}
/* #69 당일출고 마감 카운트다운 */
.cutoff-timer{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#fff4e5;color:#7a5200;font-size:13px;border-top:1px solid var(--line)}
.cutoff-timer b{color:#b26a00;font-weight:800}
.cutoff-timer .cutoff-clock{font-variant-numeric:tabular-nums;background:#b26a00;color:#fff;border-radius:6px;padding:2px 7px;letter-spacing:.02em}
/* #70 한정수량 뱃지 */
.badge.badge--limited{background:#b26a00}
/* #71 쿠폰 만료 D-day */
.coupon-card{position:relative}
.coupon-dday{position:absolute;top:8px;right:8px;z-index:2;font-size:10.5px;font-weight:800;color:#fff;background:var(--ash);border-radius:20px;padding:3px 8px;letter-spacing:.02em}
.coupon-card.urgent .coupon-dday{background:var(--red);animation:ddaypulse 1.6s ease-in-out infinite}
@keyframes ddaypulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){ .coupon-card.urgent .coupon-dday{animation:none} }

/* ══════════════════════════════════════════════════════
   배치11 · 성능 (튜닝 #77·#37 이미지 블러업)
   ══════════════════════════════════════════════════════ */
/* #77 lazy-load + blur placeholder / #37 blur→sharp — 콘텐츠 이미지에만(카드 hover 스왑과 분리) */
.detail figure img,.pr-tile img,.rmedia img,.detail-video video{opacity:0;filter:blur(12px);transition:opacity .6s var(--ease-out),filter .6s var(--ease-out)}
.detail figure img.img-in,.pr-tile img.img-in,.rmedia img.img-in,.detail-video video.img-in{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){
  .detail figure img,.pr-tile img,.rmedia img,.detail-video video{opacity:1;filter:none;transition:none}
}

/* ══════════════════════════════════════════════════════
   배치12 · SEO 큐레이션 (#90·91) + 배치13 보너스 (#101·103)
   ══════════════════════════════════════════════════════ */
/* #90/#91 컬렉션 랜딩 히어로 */
.collection-hero{text-align:center;padding:clamp(26px,5vw,52px) 0 26px;border-bottom:1px solid var(--line);margin-bottom:28px}
.col-mood{display:inline-block;font-size:12px;font-weight:700;color:var(--red);background:rgba(194,0,25,.07);border-radius:999px;padding:5px 14px;margin-bottom:12px}
.collection-hero h1{font-size:clamp(26px,4vw,40px);font-weight:600;letter-spacing:-.01em}
.collection-hero p{color:var(--ash);font-size:14.5px;margin-top:10px;max-width:52ch;margin-inline:auto;line-height:1.6}
/* #101 주문완료 공유 */
.result-share{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 4px;flex-wrap:wrap}
.result-share .rs-lb{font-size:12.5px;color:var(--ash)}
.result-share .btn{padding:9px 18px;font-size:13px}
/* #103 스켈레톤 로딩 UI */
.skeleton{position:relative;overflow:hidden;background:var(--cream-2);border-radius:8px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.qv-skel{display:grid;grid-template-columns:230px 1fr;gap:22px}
.qv-skel .sk-pic{aspect-ratio:3/4}
.qv-skel .sk-lines{display:flex;flex-direction:column;gap:12px;padding-top:10px}
.qv-skel .sk-line{height:16px}
.qv-skel .sk-line.w40{width:40%}.qv-skel .sk-line.w70{width:70%}.qv-skel .sk-line.w90{width:90%}
.qv-skel .sk-btn{height:46px;margin-top:auto;border-radius:12px}
@media (max-width:560px){ .qv-skel{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .skeleton::after{animation:none} }

/* ══════════════════════════════════════════════════════
   관리자 공용 컴포넌트 + 반응형 (REPORTS/SECURITY/GLOBAL-ADMIN-CSS)
   siblings 공용: .admin-pager · .admin-search · .admin-detail-grid · .admin-form-grid
   ══════════════════════════════════════════════════════ */
/* 페이지네이션 (로그/알림/목록 등에서 사용) */
.admin-pager{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:13.5px}
.admin-pager a{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--line-2);border-radius:9px;color:var(--ash);transition:.2s}
.admin-pager a:hover{border-color:var(--ink);color:var(--ink)}
.admin-pager span{color:var(--ink);font-weight:600;min-width:64px;text-align:center}

/* 검색 폼 (목록 상단 검색) */
.admin-search{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.admin-search input{border:1px solid var(--line-2);border-radius:9px;padding:10px 14px;font-family:inherit;font-size:14px;min-width:220px}
.admin-search input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(194,0,25,.08)}
.admin-search .btn{padding:10px 20px}

/* 주문 상세 2단 그리드 (본문 + 사이드) */
.admin-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}

/* 상품 폼 멀티컬럼 그리드 */
.admin-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 20px;align-items:start}

/* 반응형: ~768px 이하에서 2단 그리드 → 1단, 사이드바 스택, 본문 풀폭 */
@media (max-width:768px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;overflow-x:auto}
  .admin-side .spacer{display:none}
  .admin-main{max-width:none;padding:20px 16px}
  .admin-detail-grid{grid-template-columns:1fr}
  .admin-form-grid{grid-template-columns:1fr}
  /* 넓은 표는 .table-wrap 가로 스크롤 유지(위 .table-wrap{overflow-x:auto}) */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .admin-search input{min-width:0;flex:1}
}

/* ══ 2026-07 UI 튜닝: 검색 오버레이 · 샵 검색바 · 페이지 여백 · FAQ 중앙 ══ */
/* 헤더 SEARCH 오버레이(검색 집중) */
/* ---------- 검색 팔레트 (커맨드 팔레트 스타일 · 에디토리얼) ---------- */
.search-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:flex-start;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s var(--ease-out)}
.search-overlay[hidden]{display:none}
.search-overlay.show{opacity:1;pointer-events:auto}
.so-dim{position:absolute;inset:0;background:rgba(10,14,18,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.so-panel{
  position:relative;z-index:1;width:min(640px,calc(100% - 28px));
  margin-top:clamp(56px,12vh,120px);
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 24px rgba(10,14,18,.1),0 32px 80px -18px rgba(10,14,18,.4);
  transform:translateY(-12px) scale(.985);transition:transform .32s var(--ease-out);
}
.search-overlay.show .so-panel{transform:none}
/* 입력줄 — 테두리 없는 대형 인풋 + 하단 헤어라인 */
.so-form{display:flex;align-items:center;gap:12px;padding:0 16px 0 18px;border-bottom:1px solid var(--line);position:relative}
.so-glass{flex:none;width:19px;height:19px;color:var(--ash)}
.so-form input{
  flex:1;min-width:0;border:none;background:none;height:60px;
  font-family:inherit;font-size:17px;color:var(--ink);letter-spacing:-.01em;
}
.so-form input:focus{outline:none}
.so-form input::placeholder{color:var(--ash-2)}
.so-form input::-webkit-search-cancel-button{display:none}
.so-esc{flex:none;font-family:'Inter Tight','Montserrat',sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--ash);border:1px solid var(--line);border-radius:6px;padding:4px 8px;line-height:1}
.so-x{display:none;flex:none;width:32px;height:32px;border:none;background:var(--cream);border-radius:50%;font-size:13px;color:var(--ink);cursor:pointer;line-height:1}
/* 제안 영역 */
.so-body{max-height:min(56vh,480px);overflow-y:auto;padding:6px 0 8px;overscroll-behavior:contain}
.so-lb{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 7px;
  font-family:'Inter Tight','Montserrat',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.24em;color:var(--ash-2);text-transform:uppercase;
}
.so-clear-recent{border:none;background:none;font-size:11px;letter-spacing:0;color:var(--ash);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.so-clear-recent:hover{color:var(--ink)}
/* 행 — 상품·최근·검색어 공용 */
.so-it{display:flex;align-items:center;gap:12px;padding:9px 18px;text-decoration:none;cursor:pointer;transition:background .14s}
.so-it:hover,.so-it.active{background:var(--cream)}
.so-it.active{box-shadow:inset 2px 0 0 var(--ink)}
.so-it img{width:42px;height:42px;object-fit:cover;border-radius:8px;background:var(--cream);flex:none}
.so-it .so-tico{display:grid;place-items:center;width:42px;height:42px;border-radius:8px;background:var(--cream);color:var(--ash);flex:none}
.so-it .so-tico svg{width:16px;height:16px}
.so-it .so-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.so-it .nm{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-it .nm mark{background:none;color:var(--red);font-weight:700}
.so-it .ct{font-size:11.5px;color:var(--ash)}
.so-it .so-go{margin-left:auto;flex:none;font-size:12px;color:var(--ash-2);opacity:0;transition:opacity .14s}
.so-it:hover .so-go,.so-it.active .so-go{opacity:1}
/* 인기 검색어 칩 */
.so-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 18px 12px}
.so-chip{font-size:12.5px;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;transition:border-color .15s,background .15s}
.so-chip:hover{border-color:var(--ink)}
.so-empty{padding:30px 18px;text-align:center;color:var(--ash);font-size:13px}
/* 푸터 힌트 */
.so-foot{display:flex;gap:16px;padding:9px 18px;border-top:1px solid var(--line);font-family:'Inter Tight','Montserrat',sans-serif;font-size:10.5px;color:var(--ash)}
.so-foot span{display:inline-flex;align-items:center;gap:5px}
.so-foot kbd{font-family:inherit;font-size:9.5px;border:1px solid var(--line);border-radius:5px;padding:2px 5px;line-height:1;color:var(--ash)}
@media (max-width:640px){
  .so-panel{width:100%;margin:0;border-radius:0 0 14px 14px;border-top:none}
  .so-form input{height:54px;font-size:16px}
  .so-esc,.so-foot{display:none}
  .so-x{display:grid;place-items:center}
  .so-body{max-height:64vh}
}
/* 샵 검색바: 검색 + 향찾기 한 그룹으로 */
.shop-toolbar{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;max-width:760px;margin-bottom:22px}
.shop-find{white-space:nowrap;align-self:center;padding:10px 16px;font-size:13px}
.shop-popular{margin:0 0 22px}
.shop-search .search-ac{display:flex}
/* 샵 본문 하단 여백(푸터와 안 붙게) */
.shoppg{padding-bottom:clamp(48px,6vw,84px)}
/* 샵 툴바도 본문 폭에 맞춤 */
body[data-page="shop"] .shop-toolbar{max-width:none}

/* ── 의류 카테고리 내비 (대분류 + 소분류) ─────────── */
.catnav{margin:0 0 28px}

/* 카테고리 타일 그리드 (2026-08-07) — 예전엔 13개가 같은 크기 칩으로 한 줄에
   늘어서 있어 눈이 훑을 기준점이 없었다. 격자로 나누고 이모지를 앞세우면
   글자를 읽기 전에 먼저 구분된다. 홈 카테고리 섹션과 같은 시각 언어. */
.catgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.catgrid__i{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:14px 8px 12px;min-width:0;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
  text-align:center;transition:border-color .18s,background .18s,transform .18s var(--ease-out);
}
.catgrid__i:hover{border-color:var(--ink);transform:translateY(-2px)}
.catgrid__i.on{background:var(--ink-solid);border-color:var(--ink-solid);color:#fff}
.catgrid__e{font-size:22px;line-height:1}
/* 이름은 한 줄로 — '원피스·세트' 처럼 긴 이름이 줄바꿈하면 타일 높이가 어긋난다 */
.catgrid__n{
  font-size:12.5px;font-weight:700;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.catgrid__c{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums}
.catgrid__i.on .catgrid__c{color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){
  .catgrid__i{transition:none}
  .catgrid__i:hover{transform:none}
}
/* 반응형 — 타일이 좁아질수록 이모지를 줄이고 글자를 낮춘다.
   모바일 3열(390px 기준 칸당 약 114px)에서도 이모지·이름·개수가 모두 들어간다. */
@media (max-width:1180px){.catgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:820px){
  .catgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .catgrid__i{padding:12px 6px 10px;border-radius:12px}
  .catgrid__e{font-size:20px}
}
@media (max-width:560px){
  .catgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .catgrid__i{padding:11px 5px 9px;gap:4px}
  .catgrid__e{font-size:19px}
  .catgrid__n{font-size:11.5px;letter-spacing:-.02em}
  .catgrid__c{font-size:10.5px}
}

.catnav__parents{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.catnav__p{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--ash);
  border:1px solid var(--line-2);background:var(--paper);transition:.2s;
}
.catnav__p:hover{border-color:var(--ink);color:var(--ink)}
.catnav__p.on{background:var(--ink-solid);border-color:var(--ink);color:#fff}
.catnav__n{font-size:11px;font-weight:500;opacity:.65}
.catnav__p.on .catnav__n{opacity:.8}
.catnav__subs{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;padding:14px 16px;
  background:var(--cream);border-radius:14px;
}
.catnav__s{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--ash);
  background:var(--paper);border:1px solid transparent;transition:.2s;
}
.catnav__s:hover{border-color:var(--line-2);color:var(--ink)}
.catnav__s.on{background:var(--red);border-color:var(--red);color:#fff}
.catnav__s span{font-size:11px;opacity:.7}

/* 사진 칩 (2026-08-07) — 대표 상품 사진을 앞에 붙여 '컵'과 '찻잔'처럼
   글자로는 헷갈리는 품목을 생김새로 구분시킨다. 사진은 이미 있는 데이터라
   따로 관리할 게 없다(새 상품을 올리면 저절로 바뀐다). */
.catnav__s--pic{
  padding:5px 14px 5px 5px;gap:9px;
  border-color:var(--line);background:var(--paper);
  transition:border-color .18s,background .18s,transform .18s var(--ease-out);
}
.catnav__s--pic:hover{border-color:var(--ink);transform:translateY(-1px)}
.catnav__s--pic.on{background:var(--ink-solid);border-color:var(--ink-solid);color:#fff}
.catnav__s--pic img,
.catnav__s-ph{
  width:30px;height:30px;border-radius:50%;flex:none;
  object-fit:cover;background:var(--cream-2);display:block;
}
.catnav__s-t{font-weight:600}
/* 개수는 이름과 붙되 눈에 덜 띄게 — 고르는 기준은 사진과 이름이지 숫자가 아니다 */
.catnav__s-n{font-size:11px;color:var(--ash);font-variant-numeric:tabular-nums;opacity:1}
.catnav__s--pic.on .catnav__s-n{color:rgba(255,255,255,.72)}
/* '전체 OO' 는 사진이 없으므로 높이를 사진 칩과 맞춰 줄이 흔들리지 않게 한다 */
.catnav__s--all{padding:9px 16px;font-weight:700;min-height:40px}
@media (prefers-reduced-motion:reduce){
  .catnav__s--pic{transition:none}
  .catnav__s--pic:hover{transform:none}
}
@media (max-width:560px){
  .catnav__s--pic{padding:4px 11px 4px 4px;gap:7px;font-size:12.5px}
  .catnav__s--pic img,.catnav__s-ph{width:26px;height:26px}
  .catnav__s--all{padding:8px 13px;min-height:34px;font-size:12.5px}
}
.catnav__more{position:relative;margin-left:auto}
.catnav__more summary{
  list-style:none;cursor:pointer;
  padding:10px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ash);
  border:1px dashed var(--line-2);background:var(--paper);
}
.catnav__more summary::-webkit-details-marker{display:none}
.catnav__more[open] summary{border-color:var(--ink);color:var(--ink)}
.catnav__more-list{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;
  width:min(360px,92vw);max-height:min(50vh,420px);overflow:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);padding:10px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
}
.catnav__more-list a{
  display:flex;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--ink);
}
.catnav__more-list a:hover,.catnav__more-list a.on{background:var(--cream)}
.catnav__more-list a span{color:var(--ash);font-size:11px}
@media (max-width:760px){
  .catnav__parents{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px;gap:6px}
  .catnav__p{flex:0 0 auto;padding:9px 14px;font-size:13px}
  .catnav__more{margin-left:0}
  .catnav__more-list{grid-template-columns:1fr;left:0;right:auto;width:min(280px,88vw)}
  .catnav__subs{padding:12px;gap:6px}
}
/* FAQ 중앙 정렬(개인정보 페이지와 동일 폭) */
.faqpg{max-width:820px}
@media (max-width:600px){
  .shop-toolbar{max-width:none}
  .shop-find{width:100%;text-align:center}
}

/* ══════════════════════════════════════════════════════
   모바일 튜닝 배치 (2026-07-11 · 내일튜닝목록)
   ══════════════════════════════════════════════════════ */
/* 토스트 리디자인 */
.toast-ico{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:15px;background:rgba(255,255,255,.14)}
.toast--cart .toast-ico{background:var(--red)}
.toast--wish .toast-ico{background:#e11d48;animation:heartpop .45s var(--ease-out)}
.toast--ok .toast-ico{background:#2b7a3e}
.toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast-msg{font-weight:600;line-height:1.35}
.toast.pop{animation:toastpop .5s var(--ease-out)}
@keyframes toastpop{0%{transform:translate(-50%,18px) scale(.9);opacity:0}60%{transform:translate(-50%,-4px) scale(1.03)}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes heartpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.toast.pop,.toast--wish .toast-ico{animation:none}}

/* 카트 배지: 담긴 상품 있을 때 은은한 펄스 */
.cart-c.has-items{animation:cartpulse 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(194,0,25,.45)}
@keyframes cartpulse{0%{box-shadow:0 0 0 0 rgba(194,0,25,.4)}70%{box-shadow:0 0 0 8px rgba(194,0,25,0)}100%{box-shadow:0 0 0 0 rgba(194,0,25,0)}}
@media (prefers-reduced-motion:reduce){.cart-c.has-items{animation:none}}

/* 위시 버스트 */
.wish-burst{animation:wishburst .5s var(--ease-out)}
@keyframes wishburst{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* 장바구니 CTA 통일 */
.cart-cta{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.cart-cta .btn{width:100%;min-height:48px;justify-content:center;font-size:12px;letter-spacing:.12em;box-sizing:border-box}
.freeship-live{margin:8px 0 4px;text-align:center;font-size:13px;font-weight:700;color:var(--red);background:rgba(194,0,25,.06);border:1px solid rgba(194,0,25,.15);border-radius:10px;padding:10px 12px;animation:fspulse 2s ease-in-out infinite}
@keyframes fspulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){.freeship-live{animation:none}}

/* 공유 버튼 터치 영역 */
.share-btn{min-height:40px;touch-action:manipulation}

/* 카드 sold 시 acts 정리 */
.card.is-sold .card__acts .card__cart.is-sold-label{opacity:.7}

/* 모바일 마이페이지 네비 정리 */
@media (max-width:900px){
  .acct-nav{flex-direction:column;position:static;padding:12px}
  .acct-nav__sec{flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}
  .acct-nav__lb{width:100%;padding:8px 4px 2px}
  .acct-nav a{padding:8px 12px;font-size:13px;background:var(--cream);border-radius:999px}
  .acct-nav a.on{background:var(--ink-solid)}
  .acct-nav__foot{flex-direction:row;flex-wrap:wrap;gap:6px}
}

/* ===== LOUIBELLE clothing + bank transfer + mobile UX (2026-07-15) ===== */
.bank-pay{max-width:560px;margin:0 auto 60px}
.bank-card{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:18px 0}
.bank-card__row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.bank-card__row:last-child{border-bottom:0}
.bank-card__row span{color:var(--ash);min-width:72px;flex:0 0 auto}
.bank-card__row b{flex:1;text-align:right;word-break:break-all}
.bank-amt{color:var(--red)!important;font-size:1.15em}
.bank-notice{font-size:13px;color:var(--ash);line-height:1.55;margin:8px 0 0}
.bank-actions{margin-top:22px}
.bank-copy{margin-left:6px;flex:0 0 auto}

/* mobile bottom tabbar — 제거됨 (헤더 SEARCH / MY·LOGIN / CART 로 통일) */
.to-top{bottom:calc(24px + env(safe-area-inset-bottom))}

/* xsell modal after add-to-cart */
.xsell-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.xsell-modal[hidden]{display:none}
.xsell-dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.xsell-card{
  position:relative;z-index:1;width:min(480px,100%);
  background:var(--paper);border-radius:18px 18px 0 0;padding:22px 18px 20px;
  transform:translateY(24px);opacity:0;transition:.25s ease;
}
.xsell-modal.show .xsell-card{transform:none;opacity:1}
.xsell-x{position:absolute;right:12px;top:12px;border:0;background:transparent;font-size:22px;cursor:pointer;color:var(--ash)}
.xsell-card h3{margin:0 0 4px;font-size:17px}
.xsell-sub{margin:0 0 14px;font-size:13px;color:var(--ash)}
.xsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.xsell-item{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;font-size:12px}
.xsell-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--cream)}
.xsell-item .nm{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xsell-item .pr{color:var(--red);font-weight:700}
.xsell-actions{display:flex;flex-direction:column;gap:8px}
@media (min-width:640px){
  .xsell-modal{align-items:center}
  .xsell-card{border-radius:18px;padding:24px}
}

/* style quiz */
.find-moods{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.find-mood{cursor:pointer}
.find-mood input{position:absolute;opacity:0;pointer-events:none}
.fm-card{
  display:block;padding:18px 16px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--paper);transition:.2s;min-height:96px;
}
.fm-card b{display:block;font-size:15px;margin-bottom:6px}
.fm-card small{color:var(--ash);font-size:12.5px;line-height:1.4}
.find-mood input:checked + .fm-card{border-color:var(--red);box-shadow:0 0 0 3px rgba(14,154,217,.15)}
.find-mood input:focus-visible + .fm-card{outline:2px solid var(--red);outline-offset:2px}
.find-result__lead{margin-bottom:20px;font-size:15px}

/* size guide — 상세의 사이즈 가이드 버튼·표는 2026-08-07 제거.
   .size-table 은 다른 곳(관리자 실측표 미리보기 등)에서 쓰일 수 있어 남긴다 */
.size-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px}
.size-table th,.size-table td{border:1px solid var(--line);padding:8px;text-align:center}
.size-table th{background:var(--paper);font-weight:600}

/* open checklist */
.open-check{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:22px}
.open-check h2{margin:0 0 12px;font-size:16px}
.open-check ul{margin:0;padding:0;list-style:none}
.open-check li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.open-check li:last-child{border-bottom:0}
.open-check .oc-ok{color:#2b7a3e;font-weight:700}
.open-check .oc-bad{color:var(--red);font-weight:700}
.open-check .oc-wait{color:#b8860b;font-weight:700}

/* empty state polish */
.empty{text-align:center;color:var(--ash)}
.empty p{margin-bottom:16px;font-size:15px}
.empty .empty-ico{font-size:40px;margin-bottom:10px;opacity:.7}

/* coll hero */
.coll-hero{margin:10px 0 28px;padding:28px 24px;border-radius:18px;background:linear-gradient(135deg,#e8f6fc,#fff);border:1px solid var(--line)}
.coll-hero h1{margin:0 0 8px;font-size:clamp(24px,3vw,32px)}
.coll-hero p{margin:0 0 16px;color:var(--ash)}

/* a11y focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}

.shop-filter-bar{display:none;gap:8px;margin:0 0 14px;flex-wrap:wrap}
@media (max-width:720px){
  .shop-filter-bar{display:flex}
  .catnav{display:none}
  .catnav.sheet-open{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;
    max-height:78vh;overflow:auto;background:var(--paper);border-radius:18px 18px 0 0;
    padding:18px 16px 80px;box-shadow:0 -8px 40px rgba(0,0,0,.18);
  }
  .catnav.sheet-open::before{
    content:'����';display:block;font-weight:700;font-size:15px;margin-bottom:12px;
  }
}

/* ===== Upgrade pack 2026-07-16 ===== */
.promo-banner--row{position:relative;display:block}
.promo-banner__link{display:block;position:relative}
.promo-copy{cursor:pointer}
.coupon-dl-row{display:flex;flex-direction:column;gap:10px}
.coupon-dl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.coupon-dl > div{flex:1;min-width:160px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.coupon-dl code{font-weight:700;color:var(--red)}
/* 사이즈·컬러 칩(.shop-chips__row/.chip)은 2026-08-07 제거 — 남은 건 가격 폼뿐 */
.shop-chips{margin:10px 0 22px;display:flex;flex-direction:column;gap:10px}
.shop-chips__lb{font-size:12px;font-weight:700;color:var(--ash);min-width:48px}
.shop-chips__price{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.shop-chips__price input[type=number]{width:100px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px}
.img-blur{filter:blur(8px);transform:scale(1.03);transition:filter .45s ease,transform .45s ease}
.img-blur.is-in{filter:none;transform:none}
.pgrid--skel .card{animation:skelIn .45s ease both}
@keyframes skelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.badge--hot{background:#ff4d4f;color:#fff}
.badge--limited{background:#111;color:#fff}
.size-tip{margin-top:10px;font-size:12.5px;color:var(--ash);line-height:1.55}
.tier-gauge{margin:0 0 22px;padding:16px;background:var(--cream);border-radius:14px}
.tg-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;margin-bottom:10px}
.tg-top .hl{color:var(--red)}
.tg-bar{height:10px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden}
.tg-bar span{display:block;height:100%;background:var(--red);border-radius:999px;transition:width .5s ease}
.lookbook-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:28px}
.lb-item{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--cream)}
.lb-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lb-item:hover img{transform:scale(1.04)}
.lb-cap{position:absolute;left:0;right:0;bottom:0;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff}
.lb-cap .tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.lb-cap b{display:block;font-size:14px;margin-top:4px}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ig-cell{aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--cream)}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ig-cell:hover img{transform:scale(1.05)}
.rev-sum-inline{font-size:13px;color:var(--ash);margin-right:auto;margin-left:12px}
.admin-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:11px;font-weight:700}
.ac-ico{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;background:var(--cream);border-radius:8px}
@media (max-width:900px){
  .lookbook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-side{padding:12px 10px}
  .admin-side a{padding:9px 10px;font-size:13px}
  .admin-main{padding:16px 12px}
  .data-table{font-size:12.5px}
  .admin-form{max-width:none}
  .form-row{grid-template-columns:1fr!important}
}
@media (max-width:640px){
  .shop-chips__price input[type=number]{width:88px}
  .coupon-dl{flex-direction:column;align-items:stretch}
}

/* ===== Order timeline + sales chart ===== */
.order-tl{margin:4px 0 8px}
.order-tl__track{display:flex;list-style:none;margin:0;padding:0;gap:0;position:relative}
.order-tl__track::before{content:"";position:absolute;left:6%;right:6%;top:18px;height:2px;background:var(--line-2);z-index:0}
.order-tl__step{flex:1;min-width:0;text-align:center;position:relative;z-index:1;padding:0 2px}
.order-tl__dot{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);font-size:12px;font-weight:700;color:var(--ash);margin-bottom:8px}
.order-tl__label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3}
.order-tl__sub{display:block;font-size:11px;color:var(--ash);margin-top:2px;line-height:1.3}
.order-tl__time{display:block;font-size:10.5px;color:#999;margin-top:4px;word-break:break-all}
.order-tl__step.is-done .order-tl__dot{background:var(--ink-solid);border-color:var(--ink);color:#fff}
.order-tl__step.is-active .order-tl__dot{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(193,0,25,.12)}
.order-tl__step.is-active .order-tl__label{color:var(--red)}
.order-tl__step.is-muted .order-tl__dot,.order-tl__step.is-muted .order-tl__label{opacity:.45}
.order-tl.is-cancel .order-tl__track::before{background:#f0c0c0}
.order-tl__cancel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.order-tl__reason{font-size:13px;color:var(--ash)}
@media (max-width:640px){
  .order-tl__track{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .order-tl__step{flex:0 0 72px}
  .order-tl__sub{display:none}
  .order-tl__dot{width:30px;height:30px;font-size:11px}
  .order-tl__label{font-size:11px}
  .order-tl__track::before{top:15px}
}
.sales-chart__sum{display:flex;flex-wrap:wrap;gap:14px 20px;font-size:13.5px;color:var(--ash);margin-bottom:16px}
.sales-chart__sum b{color:var(--ink)}
.sales-chart__bars{display:flex;align-items:flex-end;gap:6px;min-height:160px;padding:8px 4px 0;border-top:1px solid var(--line);overflow-x:auto}
.sc-col{flex:1;min-width:36px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.sc-bar{width:100%;max-width:28px;background:linear-gradient(180deg,var(--red),#8b0010);border-radius:6px 6px 2px 2px;min-height:2px}
.sc-val{font-size:10px;color:var(--ash);line-height:1;min-height:12px}
.sc-day{font-size:10px;color:var(--ash)}
/* ===== Secret mode · 가격문의 · 1:1 채팅 (2026-07 · 심플 리뉴얼) ===== */
/* 텍스트 링크형 "가격문의" — 밑줄 + 화살표만으로 클릭을 유도한다 */
.price-ask-label{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  margin:0;padding:2px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:800;letter-spacing:.01em;line-height:1.2;
  color:var(--ink)!important;vertical-align:baseline;
  -webkit-tap-highlight-color:transparent;
  transition:color .22s ease;
}
/* 글자 자체가 브랜드 블루로 반짝인다 — 시선을 먼저 끄는 역할 */
.price-ask-label .pal-txt{
  position:relative;display:inline-block;
  background-image:linear-gradient(100deg,
    var(--red-deep) 0%, var(--red-deep) 28%,
    var(--red) 42%, #7fe4ff 50%, var(--red) 58%,
    var(--red-deep) 72%, var(--red-deep) 100%);
  background-size:250% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:palShine 2.6s ease-in-out infinite;
}
/* 작은 반짝임 — 밑줄이 다 그어지는 타이밍에 톡 */
.price-ask-label::before{
  content:"✦";position:absolute;top:-.15em;left:-.42em;z-index:2;
  font-size:.5em;line-height:1;color:#7fe4ff;pointer-events:none;opacity:0;
  text-shadow:0 0 6px rgba(14,154,217,.85);
  animation:palSpark 2.6s ease-in-out infinite;
}
/* 바탕 밑줄: 항상 옅게 깔려 링크임을 알린다 */
.price-ask-label .pal-txt::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--red-deep);border-radius:2px;opacity:.25;
  transition:opacity .24s ease;
}
/* 포인트 밑줄: 좌→우로 그어졌다가 우→좌로 걷힌다 (idle 모션의 주인공)
   JS 클래스에 기대지 않고 기본 상태에서 바로 재생한다 */
.price-ask-label .pal-txt::before{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;z-index:1;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  animation:palDraw 2.6s ease-in-out infinite;
}
/* 화살표: 밑줄이 다 그어진 뒤 오른쪽으로 밀려나며 진해진다 */
.price-ask-label::after{
  content:"→";font-size:.78em;font-weight:700;line-height:1;opacity:.42;
  color:var(--red);
  animation:palGo 2.6s ease-in-out infinite;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .24s ease;
}
.price-ask-label:hover,
.price-ask-label:focus-visible{color:var(--red)!important;outline:none}
/* 호버하면 반짝임을 멈추고 단색으로 또렷하게 */
.price-ask-label:hover .pal-txt,
.price-ask-label:focus-visible .pal-txt{
  animation:none;background-image:none;
  -webkit-text-fill-color:var(--red);color:var(--red);
}
.price-ask-label:hover::before,
.price-ask-label:focus-visible::before{animation:none;opacity:0}
.price-ask-label:hover .pal-txt::after,
.price-ask-label:focus-visible .pal-txt::after{opacity:1;background:var(--red)}
/* 호버하면 idle 재생을 멈추고 밑줄을 꽉 채운 상태로 고정 */
.price-ask-label:hover .pal-txt::before,
.price-ask-label:focus-visible .pal-txt::before{
  animation:none;transform:scaleX(1);transform-origin:left center;
}
.price-ask-label:hover::after,
.price-ask-label:focus-visible::after{opacity:1;transform:translateX(3px);animation:none}
.price-ask-label.is-tap{animation:palTap .28s cubic-bezier(.22,1,.36,1) both}
/* 크기: 카드 / 퀵뷰 / 스티키바 */
.card__pr .price-ask-label{font-size:clamp(15px,1.25vw,17px)}
.qv-price .price-ask-label{font-size:clamp(19px,1.8vw,23px)}
.buybar .price-ask-label{font-size:15px}
@keyframes palDraw{
  0%,8%{transform:scaleX(0);transform-origin:left center}
  38%,58%{transform:scaleX(1);transform-origin:left center}
  58.01%{transform:scaleX(1);transform-origin:right center}
  88%,100%{transform:scaleX(0);transform-origin:right center}
}
@keyframes palGo{
  0%,30%{transform:translateX(0);opacity:.42}
  48%,60%{transform:translateX(4px);opacity:1}
  82%,100%{transform:translateX(0);opacity:.42}
}
@keyframes palShine{
  0%,10%{background-position:120% 0}
  55%,100%{background-position:-30% 0}
}
@keyframes palSpark{
  0%,30%{opacity:0;transform:scale(.4) rotate(-12deg)}
  42%{opacity:1;transform:scale(1.15) rotate(10deg)}
  56%{opacity:.75;transform:scale(.9) rotate(0deg)}
  70%,100%{opacity:0;transform:scale(.45) rotate(-8deg)}
}
@keyframes palTap{
  0%{transform:scale(1)}
  45%{transform:scale(.93)}
  100%{transform:scale(1)}
}
.secret-note{margin-top:10px;color:var(--ash)}
.secret-note b{color:var(--ink)}
/* 카드 가격줄 — 라벨 하나만 */
.card__pr--ask{
  flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:baseline!important;gap:6px!important;margin-top:2px;
}
.qv-price--ask{display:flex;align-items:baseline;gap:6px}
/* 뷰포트 밖이면 무한 애니메이션을 멈춘다 (JS 가 .anim-off 를 토글) */
.price-ask-label.anim-off,
.price-ask-label.anim-off::before,
.price-ask-label.anim-off::after,
.price-ask-label.anim-off .pal-txt,
.price-ask-label.anim-off .pal-txt::before{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .price-ask-label,.price-ask-label::after,.price-ask-label::before,.price-ask-label.is-tap,
  .price-ask-label .pal-txt,
  .price-ask-label .pal-txt::before{animation:none!important;transition:none}
  /* 모션을 끄면 색은 유지하되 움직임만 없앤다 */
  .price-ask-label .pal-txt{
    background-image:none;-webkit-text-fill-color:var(--red);color:var(--red);
  }
  .price-ask-label .pal-txt::before{transform:scaleX(1);transform-origin:left center}
  .price-ask-label::after{opacity:1;transform:none}
  .price-ask-label::before{opacity:0}
}

/* ===== 가격문의 CTA — 심플 아웃라인 + 흐르는 광택 ===== */
/* ==========================================================================
   구매 영역 버튼 한 쌍 — 가격문의(주) / WISHLIST(보조)
   두 버튼은 지오메트리를 완전히 공유하고(--bb-*), 위계는 '채움 vs 외곽선'으로만 준다.
   이전엔 주 버튼이 흰 배경+파란 글자라 검은 테두리의 보조 버튼보다 약해 보여
   위계가 뒤집혀 있었다.
   ========================================================================== */
.buyrow--secret{
  --bb-pad-y:17px;          /* 두 버튼 공통 — 여기만 고치면 같이 움직인다 */
  --bb-pad-x:20px;
  --bb-radius:14px;
  --bb-border:1.5px;
  --bb-font:14.5px;
  display:flex;flex-direction:column;gap:10px;margin-top:10px;
}
/* 공통 지오메트리 */
.buyrow--secret .btn-price-ask,
.buyrow--secret .buyrow-wish{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:var(--bb-pad-y) var(--bb-pad-x);
  border-radius:var(--bb-radius);border-style:solid;border-width:var(--bb-border);
  font-family:inherit;font-size:var(--bb-font);font-weight:800;
  text-transform:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* ── 주 버튼: 브랜드 채움 ───────────────────────────── */
.btn-price-ask{
  position:relative;overflow:hidden;
  border-color:transparent;
  background:linear-gradient(135deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff;letter-spacing:.01em;
  opacity:0;transform:translateY(6px);
  transition:transform .42s var(--ease-out),opacity .38s ease,box-shadow .3s ease;
}
.btn-price-ask.is-ready{
  opacity:1;transform:translateY(0);
  /* 글로우가 넓게 번지면 버튼이 붕 뜬다 → 절반으로 좁혀 또렷하게 */
  box-shadow:0 4px 14px -4px rgba(14,154,217,.45);
  animation:bpaGlow 3.2s ease-in-out infinite;
}
/* 훑고 지나가는 빛 — "누를 수 있다"는 신호 */
.btn-price-ask .bpa-shine{
  position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);
  transform:translateX(-160%);opacity:0;
}
.btn-price-ask.is-ready .bpa-shine{animation:bpaSweep 3.2s ease-in-out infinite}
.btn-price-ask .bpa-ico{display:flex;flex-shrink:0;color:#fff;transition:transform .35s var(--ease-out)}
.btn-price-ask .bpa-label{position:relative;z-index:1;white-space:nowrap;color:#fff}
.btn-price-ask .bpa-arrow{display:flex;flex-shrink:0;transition:transform .3s var(--ease-out)}
.btn-price-ask.is-ready .bpa-arrow{animation:bpaArrow 3.2s ease-in-out infinite}
/* 호버 — 더 진하게, 살짝 떠오르고 idle 모션은 끈다 */
.btn-price-ask.is-ready:hover,
.btn-price-ask.is-ready:focus-visible{
  background:linear-gradient(135deg,var(--red-deep) 0%,var(--red-deep) 100%);
  outline:none;animation:none;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(14,154,217,.6);
}
.btn-price-ask.is-ready:hover .bpa-shine,
.btn-price-ask.is-ready:focus-visible .bpa-shine{animation:none;opacity:0}
.btn-price-ask.is-ready:hover .bpa-ico,
.btn-price-ask.is-ready:focus-visible .bpa-ico{transform:scale(1.08)}
.btn-price-ask.is-ready:hover .bpa-arrow,
.btn-price-ask.is-ready:focus-visible .bpa-arrow{transform:translateX(4px);animation:none}
.btn-price-ask:active{transform:translateY(0) scale(.99)}
.btn-price-ask.is-go{transform:translateY(0) scale(.98)}
.btn-price-ask.anim-off,
.btn-price-ask.anim-off .bpa-shine,
.btn-price-ask.anim-off .bpa-arrow{animation-play-state:paused}

/* ── 보조 버튼: 조용한 외곽선 ───────────────────────── */
/* .btn 기본값(알약 radius 40 · 대문자 · hover translateY)을 덮어쓴다 */
.buyrow--secret .buyrow-wish{
  /* 테두리가 옅으면(--line-2) 버튼이 아니라 빈 입력칸으로 읽힌다 → 잉크 22% */
  background:var(--paper);border-color:rgba(19,24,29,.22);color:var(--ink);
  letter-spacing:.1em;
  transition:background .25s,color .25s,border-color .25s,transform .18s var(--ease-out);
}
.buyrow--secret .buyrow-wish:hover{background:var(--cream);border-color:var(--ink);color:var(--ink);transform:none}
.buyrow--secret .buyrow-wish:active{transform:scale(.99)}
.buyrow--secret .buyrow-wish #wishIco{font-size:16px;line-height:1}
/* 찜한 상태 — 브랜드색으로 확실히 구분 */
.buyrow--secret .buyrow-wish.on{border-color:var(--red);color:var(--red);background:rgba(14,154,217,.06)}
.buyrow--secret .buyrow-wish.on:hover{background:var(--red);border-color:var(--red);color:#fff}

@keyframes bpaSweep{
  0%,58%{transform:translateX(-160%);opacity:0}
  62%{opacity:1}
  92%{transform:translateX(340%);opacity:1}
  100%{transform:translateX(340%);opacity:0}
}
@keyframes bpaGlow{
  0%,100%{box-shadow:0 4px 14px -4px rgba(14,154,217,.45)}
  50%{box-shadow:0 7px 20px -4px rgba(14,154,217,.62)}
}
@keyframes bpaArrow{
  0%,88%,100%{transform:translateX(0)}
  94%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  /* 모션은 끄되 CTA 의 존재감(채움·그림자)은 유지한다 */
  .btn-price-ask,.btn-price-ask.is-ready{
    transition:none;animation:none!important;opacity:1;transform:none;
    box-shadow:0 4px 14px -4px rgba(14,154,217,.45);
  }
  .btn-price-ask .bpa-shine{display:none}
  .btn-price-ask .bpa-arrow,.btn-price-ask.is-ready .bpa-arrow{animation:none!important}
}

/* 고객 채팅 페이지 */
.chat-page{max-width:720px;padding-bottom:0!important}
.chat-shell{
  display:flex;flex-direction:column;
  height:calc(100vh - 120px);min-height:480px;max-height:860px;
  margin:8px 0 24px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--cream);
}
.chat-top{
  display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--paper);
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.chat-back{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;font-size:16px;flex-shrink:0;
}
.chat-top-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.chat-ava{
  width:40px;height:40px;border-radius:50%;background:var(--ink-solid);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;
}
.chat-title{font-size:15px;font-weight:800;margin:0;letter-spacing:-.01em}
.chat-sub{margin:2px 0 0;font-size:11.5px;color:var(--ash);display:flex;align-items:center;gap:5px}
.chat-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.chat-menu{
  width:36px;height:36px;border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--ash);border-radius:50%;
}
.chat-menu:hover{background:var(--cream)}
.chat-product-bar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;flex-shrink:0;
}
.chat-product-bar img{width:44px;height:54px;object-fit:cover;border-radius:8px;background:var(--cream)}
.cpb-info{flex:1;min-width:0}
.cpb-cat{font-size:11px;color:var(--ash)}
.cpb-nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpb-ask{font-size:11.5px;color:var(--red);font-weight:700}
.cpb-go{font-size:12px;color:var(--ash);flex-shrink:0}
.chat-msgs{flex:1;overflow:auto;padding:14px 12px;min-height:0}
.chat-msgs-inner{display:flex;flex-direction:column;gap:10px}
/* 날짜 구분선 — 가운데 알약, 양옆으로 헤어라인 */
.cdate{display:flex;align-items:center;gap:12px;margin:8px 2px 2px;align-self:stretch}
.cdate::before,.cdate::after{content:"";flex:1;height:1px;background:var(--line)}
.cdate span{
  flex:none;font-size:11.5px;font-weight:600;color:var(--ash);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-variant-numeric:tabular-nums;
}
/* 이전 대화 보기 */
.chat-older{display:flex;justify-content:center;padding:2px 0 6px;align-self:stretch}
.chat-older[hidden]{display:none}
.chat-older-btn{
  border:1px solid var(--line);background:var(--paper);color:var(--ash);
  border-radius:999px;padding:7px 16px;font-size:12px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s;
}
.chat-older-btn:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.chat-older-btn:disabled{opacity:.6;cursor:default}
.chat-newer{padding:6px 0 2px}
/* ── 지난 대화 찾기 버튼 ──
   아이콘만 두면 무슨 버튼인지 모른다 → 되감기 시계 + '지난 대화' 라벨 알약.
   호버하면 시계가 반시계로 돌아간다(시간을 되감는다는 은유). */
.chat-hist-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  height:34px;padding:0 12px 0 10px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ash);
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.chat-hist-btn .chb-ico{width:15px;height:15px;flex:none;transition:transform .5s var(--ease-out)}
.chat-hist-btn:hover,.chat-hist-btn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink);background:var(--cream)}
.chat-hist-btn:hover .chb-ico,
.chat-hist-btn[aria-expanded="true"] .chb-ico{transform:rotate(-140deg)}
.chat-hist-btn:active{transform:scale(.97)}
/* 처음 3번만 살짝 흔들어 존재를 알린다 — 계속 움직이면 피곤하다 */
.chat-hist-btn{animation:chbNudge 2.2s var(--ease-out) 3}
@keyframes chbNudge{
  0%,62%,100%{transform:none;border-color:var(--line-2)}
  68%{transform:translateY(-2px);border-color:var(--red)}
  74%{transform:translateY(0);border-color:var(--red)}
  80%{transform:translateY(-1px)}
}
@media (max-width:420px){
  /* 좁은 화면에선 글자를 접고 아이콘만 — 대신 원형으로 또렷하게 */
  .chat-hist-btn{padding:0;width:34px;justify-content:center}
  .chat-hist-btn .chb-t{display:none}
  .chat-hist-btn .chb-ico{width:17px;height:17px}
}

/* 답변 알림(웹푸시) 토글 — 이모지만 두면 아무도 안 누른다. 지난대화 버튼과 같은 알약 문법 */
.chat-push-btn{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  height:34px;padding:0 12px 0 10px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ash);
  font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.chat-push-btn[hidden]{display:none}
.chat-push-btn .cpb-ico{width:15px;height:15px;flex:none;transform-origin:50% 15%;transition:transform .3s var(--ease-out)}
.chat-push-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--cream)}
.chat-push-btn:hover .cpb-ico{animation:pushRing .6s var(--ease-out)}
@keyframes pushRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}45%{transform:rotate(11deg)}70%{transform:rotate(-6deg)}}
/* 켜진 상태 — 브랜드색으로 확실히 구분 */
.chat-push-btn.is-on{border-color:var(--red);color:var(--red);background:rgba(14,154,217,.07)}
@media (max-width:520px){
  .chat-push-btn{padding:0;width:34px;justify-content:center}
  .chat-push-btn .cpb-t{display:none}
  .chat-push-btn .cpb-ico{width:17px;height:17px}
}

/* 첫 질문 직후 뜨는 알림 권유 카드 — 말풍선 흐름 안에 자연스럽게 낀다 */
.push-nudge{
  position:relative;
  align-self:stretch;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:6px 2px;padding:13px 34px 13px 15px;
  border:1px solid rgba(14,154,217,.28);border-radius:14px;
  background:rgba(14,154,217,.06);
  animation:pnIn .42s var(--ease-out) both;
}
@keyframes pnIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.push-nudge.is-out{animation:pnOut .25s ease forwards}
@keyframes pnOut{to{opacity:0;transform:translateY(-6px)}}
.push-nudge .pn-ico{
  flex:none;display:grid;place-items:center;width:34px;height:34px;
  border-radius:11px;background:rgba(14,154,217,.12);color:var(--red);
}
.push-nudge .pn-ico svg{width:17px;height:17px;animation:pushRing 1.6s var(--ease-out) 2 .5s;transform-origin:50% 15%}
.push-nudge .pn-body{flex:1;min-width:130px;display:flex;flex-direction:column;gap:2px}
.push-nudge .pn-body b{font-size:13.5px;font-weight:700;color:var(--ink)}
.push-nudge .pn-body span{font-size:12px;color:var(--ash);line-height:1.45}
.push-nudge .pn-act{display:flex;gap:7px;flex:none}
.push-nudge button{
  border-radius:999px;padding:8px 15px;font-size:12.5px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:opacity .2s,background .2s,border-color .2s;
}
.push-nudge .pn-yes{border:none;background:var(--red);color:#fff}
.push-nudge .pn-yes:hover{background:var(--red-deep)}
.push-nudge .pn-yes:disabled{opacity:.6;cursor:default}
/* 닫기 — CTA 와 경쟁하지 않게 모서리에 아주 작게 */
.push-nudge .pn-x{
  position:absolute;top:7px;right:8px;padding:4px 6px;
  border:none;background:none;color:var(--ash-2);font-size:11px;line-height:1;
  border-radius:6px;
}
.push-nudge .pn-x:hover{color:var(--ink);background:rgba(14,154,217,.1)}

/* ── 회원 전용 게이트: 모달 + 전용 페이지 ── */
.agate{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .24s}
.agate[hidden]{display:none}
.agate.show{opacity:1;pointer-events:auto}
.agate__dim{position:absolute;inset:0;background:rgba(10,14,18,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.agate__card{
  position:relative;z-index:1;width:min(400px,100%);
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:30px 26px 22px;text-align:center;
  box-shadow:0 24px 64px -20px rgba(10,14,18,.45);
  transform:translateY(10px) scale(.98);transition:transform .28s var(--ease-out);
}
.agate.show .agate__card{transform:none}
.agate__x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:14px;color:var(--ash);cursor:pointer;line-height:1}
.agate__ico,.gate__ico{
  width:52px;height:52px;margin:0 auto 16px;border-radius:16px;
  display:grid;place-items:center;color:var(--red);
  background:rgba(14,154,217,.09);border:1px solid rgba(14,154,217,.18);
}
.agate__ico svg,.gate__ico svg{width:24px;height:24px}
.agate__t,.gate__t{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
.agate__s,.gate__s{font-size:13.5px;color:var(--ash);line-height:1.65;margin-bottom:16px}
.agate__perks,.gate__perks{list-style:none;text-align:left;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.agate__perks li,.gate__perks li{
  position:relative;padding-left:22px;font-size:13px;color:var(--ink);line-height:1.5;
}
.agate__perks li::before,.gate__perks li::before{
  content:"";position:absolute;left:4px;top:6px;width:6px;height:10px;
  border:solid var(--red);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.agate__login{display:block;margin-top:10px;font-size:13px;color:var(--ash);text-decoration:underline;text-underline-offset:3px}
.agate__login:hover{color:var(--ink)}
.agate__note,.gate__note{margin-top:14px;font-size:11.5px;color:var(--ash-2)}
.agate__note b,.gate__note b{color:var(--red)}
/* 전용 페이지(주소 직접 접근·JS off) */
.gate{max-width:440px;margin:0 auto;text-align:center;padding:clamp(20px,5vw,40px) 0}
.gate__cta{display:flex;flex-direction:column;gap:10px}
.gate__cta .btn{width:100%}

/* 지난 대화 드롭다운 */
.chat-top{position:relative}
.chat-hist{
  position:absolute;top:calc(100% + 6px);right:10px;z-index:40;width:min(260px,calc(100vw - 40px));
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 36px -12px rgba(10,14,18,.35);overflow:hidden;
}
.chat-hist[hidden]{display:none}
.chat-hist__hd{
  padding:11px 14px 8px;font-size:10px;font-weight:700;letter-spacing:.16em;
  color:var(--ash-2);text-transform:uppercase;border-bottom:1px solid var(--line);
}
.chat-hist__list{max-height:min(52vh,320px);overflow-y:auto;padding:4px 0}
.chat-hist__it{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 14px;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;color:var(--ink);text-align:left;
}
.chat-hist__it:hover{background:var(--cream)}
.chat-hist__it i{font-style:normal;font-size:11.5px;color:var(--ash);font-variant-numeric:tabular-nums}
.chat-hist__empty{padding:18px 14px;text-align:center;font-size:12.5px;color:var(--ash)}
/* 점프 상태 표시줄 */
.chat-jump{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;background:var(--cream);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--ink);
}
.chat-jump[hidden]{display:none}
.chat-jump button{
  border:none;background:none;color:var(--red);font-weight:700;font-size:12.5px;
  font-family:inherit;cursor:pointer;white-space:nowrap;
}
.chat-jump button:hover{text-decoration:underline}
.chat-welcome{text-align:center;padding:36px 16px 20px}
.cw-logo{
  width:56px;height:56px;border-radius:50%;background:var(--ink-solid);color:#fff;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;
}
.cw-t{font-size:16px;font-weight:800;margin:0 0 6px}
.cw-s{font-size:13px;color:var(--ash);margin:0 0 16px;line-height:1.55}
.cw-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cw-chip{
  border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:9px 14px;
  font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink);
}
.cw-chip:hover{border-color:var(--red);color:var(--red)}
.chat-input{
  display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;background:var(--paper);
  border-top:1px solid var(--line);flex-shrink:0;
}
.chat-input textarea{
  flex:1;resize:none;min-height:42px;max-height:120px;border:1px solid var(--line-2);
  border-radius:12px;padding:11px 12px;font:inherit;font-size:14px;line-height:1.45;
}
.chat-input textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(194,0,25,.08)}
.chat-send{
  width:44px;height:44px;border:none;border-radius:12px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.chat-send:hover{filter:brightness(1.05)}

/* 메시지 버블 공통 (고객·관리자) */
.cmsg{display:flex;gap:8px;align-items:flex-end;max-width:92%}
.cmsg.is-user{align-self:flex-end;flex-direction:row-reverse}
.cmsg.is-admin{align-self:flex-start}
.cmsg-ava{
  width:28px;height:28px;border-radius:50%;background:var(--ink-solid);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;
}
.cmsg-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.cmsg.is-user .cmsg-col{align-items:flex-end}
.cmsg-text{
  background:var(--paper);border:1px solid var(--line);border-radius:14px 14px 14px 4px;
  padding:10px 12px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.cmsg.is-user .cmsg-text{
  background:var(--red);color:#fff;border-color:transparent;border-radius:14px 14px 4px 14px;
}
.cmsg-text.is-sys{background:#eef2f7;border-color:transparent;color:#334155;font-size:13px}
.cmsg-meta{font-size:10.5px;color:var(--ash);padding:0 2px}
.cmsg-prod{
  display:flex;gap:10px;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:10px;text-decoration:none;color:inherit;min-width:220px;max-width:280px;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.cmsg-prod img{width:52px;height:64px;object-fit:cover;border-radius:8px;background:var(--cream)}
.cmsg-prod-n{font-size:13px;font-weight:700;line-height:1.35}
.cmsg-prod-c{font-size:11px;color:var(--ash);margin-top:2px}
.cmsg-prod-g{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--red)}
.cmsg-img{max-width:220px;border-radius:12px;display:block}

/* 관리자 채팅 콘솔 */
.adm-chat{display:grid;grid-template-columns:280px 1fr 240px;gap:14px;min-height:620px;align-items:stretch}
.adm-chat-rooms,.adm-chat-main,.adm-chat-profile{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
}
.acr-tabs{display:flex;border-bottom:1px solid var(--line)}
.acr-tabs a{
  flex:1;text-align:center;padding:12px;font-size:13px;font-weight:700;color:var(--ash);text-decoration:none;
}
.acr-tabs a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.acr-list{overflow:auto;flex:1}
.acr-empty{padding:40px 16px;text-align:center;color:var(--ash);font-size:13px}
.acr-item{
  display:block;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.acr-item:hover{background:var(--cream)}
.acr-item.on{background:#fdecee}
.acr-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.acr-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;
  font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
}
.acr-last{font-size:12.5px;color:var(--ash);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acr-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:11px;color:var(--ash)}
.acr-prod{color:var(--ink);font-weight:600}
.acm-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ash);font-size:14px}
.acm-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.acm-name{font-weight:800;font-size:15px}
.acm-email{font-size:12px;color:var(--ash);margin-top:2px}
.acm-msgs{flex:1;overflow:auto;padding:14px;background:var(--cream);min-height:320px}
.acm-msgs #acmInner{display:flex;flex-direction:column;gap:10px}
.acm-quick{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line);background:var(--paper)}
.acm-quick .qr{
  border:1px solid var(--line-2);background:var(--paper);border-radius:999px;padding:6px 10px;
  font-size:11.5px;font-weight:600;cursor:pointer;color:var(--ink);
}
.acm-quick .qr:hover{border-color:var(--red);color:var(--red)}
.acm-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--paper)}
.acm-input textarea{
  flex:1;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;min-height:44px;
}
.adm-chat-profile{padding:18px 16px}
.acp-ava{
  width:56px;height:56px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 10px;
}
.acp-name{text-align:center;font-weight:800;font-size:14px}
.acp-email{text-align:center;font-size:12px;color:var(--ash);margin-bottom:14px}
.acp-row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.acp-sec{margin-top:16px;font-size:12px;font-weight:800;color:var(--ash);letter-spacing:.04em}
.acp-order{
  display:flex;justify-content:space-between;font-size:12px;padding:7px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.acp-prod{
  display:flex;align-items:center;gap:8px;margin-top:8px;text-decoration:none;color:inherit;font-size:12.5px;font-weight:600;
}
.acp-prod img{width:40px;height:48px;object-fit:cover;border-radius:6px}
@media (max-width:1100px){
  .adm-chat{grid-template-columns:240px 1fr}
  .adm-chat-profile{display:none}
}
@media (max-width:760px){
  .adm-chat{grid-template-columns:1fr;min-height:auto}
  .adm-chat-rooms{max-height:280px}
  .chat-shell{height:calc(100vh - 100px);border-radius:12px}
}

/* ===== 마이페이지 · 가격문의 내역 ===== */
.chat-log{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--paper);margin-bottom:18px;
}
.chat-log__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;background:var(--cream);border-bottom:1px solid var(--line);
  font-size:14px;
}
.chat-log__date{margin-left:8px;font-size:12px;color:var(--ash);font-weight:500}
.chat-log__tags{display:flex;align-items:center;gap:6px;flex-shrink:0}
.chat-log__new{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;
  display:inline-grid;place-items:center;
}
.chat-log__st{font-size:11px;color:var(--ash);border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.chat-log__body{
  display:flex;flex-direction:column;gap:10px;
  padding:16px;background:var(--cream);max-height:520px;overflow-y:auto;
}
.chat-log__empty{font-size:13px;color:var(--ash);text-align:center;padding:20px 0}
/* 말풍선이 아래에서 순서대로 떠오른다 (최대 20번째까지만 지연 — 그 뒤는 즉시) */
.chat-log__row{
  display:flex;flex-direction:column;
  animation:chatLogIn .42s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(min(var(--i), 20) * 45ms);
}
.chat-log__row .cmsg{max-width:88%}
@keyframes chatLogIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .chat-log__row{animation:none}
}

/* ===== 카카오톡 채널 플로팅 버튼 ===== */
.kko-fab{
  position:fixed;right:18px;bottom:84px;z-index:60;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px 11px 13px;border-radius:999px;
  background:#FEE500;color:#191600;
  font-size:13.5px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  text-decoration:none;
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease;
}
.kko-fab:hover,.kko-fab:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
  outline:none;
}
.kko-fab:active{transform:translateY(0) scale(.98)}
.kko-fab__ico{display:flex;flex-shrink:0}
@media (max-width:640px){
  .kko-fab{right:14px;bottom:76px;padding:10px 14px 10px 12px;font-size:12.5px}
  .kko-fab__txt{display:none}
  .kko-fab{padding:12px;border-radius:50%}
}

/* ==========================================================================
   2026-07 업그레이드 팩 — 선물하기 UI
   ========================================================================== */
.gift-fields{border-top:1px dashed var(--line);margin-top:12px;padding-top:4px}
.gift-presets{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.gift-preset{border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:6px 12px;font-size:12px;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.gift-preset:hover{border-color:var(--ink)}
.gift-preset:active{transform:scale(.96)}
#gift_message{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;resize:vertical}
#gift_message:focus{outline:none;border-color:var(--ink)}
.gift-count{text-align:right;font-size:11px;color:var(--ash);margin-top:4px}

/* ---------- 갤러리 크로스페이드 + 라이트박스 ---------- */
.pgal__main{position:relative}
.pgal__fade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .28s ease}
.pgal__fade.in{opacity:1}
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease}
.lightbox.show{opacity:1}
.lightbox[hidden]{display:none}
.lb-dim{position:absolute;inset:0;background:rgba(10,10,12,.92)}
.lb-stage{position:relative;z-index:1;margin:0;max-width:min(92vw,880px);max-height:88vh;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:100%;max-height:88vh;object-fit:contain;display:block;border-radius:4px}
.lb-swap{animation:lbswap .28s ease}
@keyframes lbswap{from{opacity:.2;transform:scale(.985)}to{opacity:1;transform:none}}
.lb-x{position:absolute;top:16px;right:18px;z-index:2;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;padding:8px;line-height:1;opacity:.85}
.lb-x:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff;width:44px;height:44px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.lb-nav:hover{background:rgba(255,255,255,.2)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-cnt{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;color:#fff;font-size:13px;letter-spacing:.06em;opacity:.85}
@media (max-width:640px){.lb-nav{width:38px;height:38px;font-size:22px}.lb-prev{left:8px}.lb-next{right:8px}}
@media (prefers-reduced-motion:reduce){.pgal__fade{transition:none}.lb-swap{animation:none}.lightbox{transition:none}}

/* ---------- 폼 피드백 패키지 (#8 #11 #12 #40 #41 #47) ---------- */
.field{position:relative}
.f-ok{position:absolute;right:12px;bottom:11px;color:#2b7a3e;font-weight:700;font-size:14px;animation:fokin .25s ease both;pointer-events:none}
@keyframes fokin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.f-err{animation:fieldshake .4s ease;border-color:#c0392b!important}
@keyframes fieldshake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.form-note.err.shake-in{animation:fieldshake .45s ease}
.opt-shake{animation:fieldshake .4s ease}
.roll-up{animation:qroll-up .22s ease}
.roll-down{animation:qroll-down .22s ease}
@keyframes qroll-up{from{transform:translateY(5px);opacity:.35}to{transform:none;opacity:1}}
@keyframes qroll-down{from{transform:translateY(-5px);opacity:.35}to{transform:none;opacity:1}}
.anchor-flash{animation:anchflash 1s ease}
@keyframes anchflash{0%{background-color:rgba(232,160,32,.16)}100%{background-color:transparent}}
.toast-ico svg.tok{display:block}
.toast-ico .tok polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:tokdraw .5s .08s ease forwards}
@keyframes tokdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .f-ok,.f-err,.opt-shake,.roll-up,.roll-down,.anchor-flash,.form-note.err.shake-in{animation:none}
  .toast-ico .tok polyline{animation:none;stroke-dashoffset:0}
}

/* ---------- 채팅 인터랙션: 스프링 팝·입력중·전송 실패·상품 첨부 ---------- */
.cmsg-new{animation:cmsgspring .32s cubic-bezier(.34,1.56,.64,1) both}
@keyframes cmsgspring{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.ctyping{display:inline-flex;gap:4px;align-items:center;padding:12px 14px!important}
.ctyping i{width:6px;height:6px;border-radius:50%;background:var(--ash);display:inline-block;animation:ctypdot 1.1s ease-in-out infinite}
.ctyping i:nth-child(2){animation-delay:.15s}
.ctyping i:nth-child(3){animation-delay:.3s}
@keyframes ctypdot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.cmsg.is-failed .cmsg-text{opacity:.55;animation:fieldshake .4s ease}
.cmsg-fail{color:#c0392b;font-size:11px;font-weight:700}
.cmsg-retry{border:1px solid #c0392b;color:#c0392b;background:var(--paper);border-radius:12px;font-size:11px;padding:2px 10px;cursor:pointer;margin-left:4px;font-family:inherit}
.cmsg-retry:hover{background:#c0392b;color:#fff}
.acm-input{position:relative}
.acm-prodbtn{flex:0 0 auto;padding:8px 12px;font-size:16px;line-height:1}
.acm-prodpop{position:relative;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 14px 34px rgba(0,0,0,.14);padding:10px;z-index:40}
.acm-prodpop input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-family:inherit;font-size:13px;margin-bottom:8px}
.acm-prodpop input:focus{outline:none;border-color:var(--ink)}
.acm-prodlist{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.acm-proditem{display:flex;align-items:center;gap:10px;border:none;background:transparent;padding:7px 8px;border-radius:8px;cursor:pointer;text-align:left;font-family:inherit;font-size:13px;width:100%}
.acm-proditem:hover{background:var(--cream)}
.acm-proditem img{width:34px;height:34px;object-fit:cover;border-radius:6px;background:var(--cream);flex:0 0 auto}
.acm-proditem .nm{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acm-proditem .ct{font-size:11px;color:var(--ash);flex:0 0 auto}
.acm-prodempty{padding:12px;text-align:center;color:var(--ash);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.cmsg-new,.ctyping i,.cmsg.is-failed .cmsg-text{animation:none}}

/* ---------- 적용 필터 요약 칩 ---------- */
.filter-active{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:2px 0 18px;animation:fadein .3s ease}
.fa-lb{font-size:11.5px;font-weight:700;color:var(--ash);letter-spacing:.04em}
.fa-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);background:var(--ink-solid);color:#fff;border-radius:20px;padding:5px 11px;font-size:12px;text-decoration:none;transition:opacity .15s}
.fa-chip:hover{opacity:.82}
.fa-chip .fa-x{font-size:10px;opacity:.75}
.fa-clear{font-size:12px;color:var(--ash);text-decoration:underline;margin-left:2px}
.fa-clear:hover{color:var(--ink)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- 다크모드 토글 버튼 + 미세 보정 ---------- */

/* ---------- 핏 분포 바 + 사이즈 추천기 ---------- */
.fitbar{margin-top:12px}
.fitbar__lb{font-size:11.5px;font-weight:700;color:var(--ash);margin-bottom:5px;letter-spacing:.03em}
.fitbar__tr{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--cream)}
.fitbar__seg{display:block;height:100%}
.fitbar__seg--s{background:var(--ash-2)}
.fitbar__seg--r{background:var(--red)}
.fitbar__seg--b{background:var(--ink-solid)}
.fitbar__keys{display:flex;gap:12px;margin-top:6px;font-size:11.5px;color:var(--ash)}
.fitbar__keys .on{color:var(--ink);font-weight:700}
/* 사이즈 추천기(.size-reco/.sr-*)는 사이즈 가이드와 함께 2026-08-07 제거 */

/* ---------- CHAT 안읽음 배지 ---------- */
#chatLink{position:relative}
.chat-c{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;border-radius:10px;margin-left:4px}
.chat-c[hidden]{display:none}

/* ---------- 채팅 사진 첨부 ---------- */
.cmsg-img{cursor:zoom-in}
.chat-attach{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ash);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,border-color .15s;align-self:flex-end}
.chat-attach:hover{color:var(--ink);border-color:var(--ink)}
.chat-attach:disabled{opacity:.5;cursor:default}
.chat-attach.is-uploading svg{animation:btnspin 1s linear infinite}

/* ---------- 최근 본 상품 플로팅 미니바 ---------- */
/* 최근 본 상품 플로팅 미니바(.recentbar/.rb-*)는 2026-08-07 제거 */

/* ---------- 카드 컬러 스와치 점 ---------- */
/* 컬러 미리보기 점(.card__colors/.cdot)은 2026-08-07 카드에서 제거됨 */

/* ---------- 위시리스트 일괄 문의 선택 ---------- */
.wish-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--cream)}
.wish-bulk-bar .btn{padding:9px 16px;font-size:13px}
.wish-sel{position:relative;border-radius:12px;transition:box-shadow .15s}
.wish-sel.on{box-shadow:0 0 0 2px var(--red)}
.wb-check{position:absolute;top:10px;left:10px;z-index:3;background:var(--paper);border-radius:6px;padding:4px;line-height:0;box-shadow:0 2px 8px rgba(0,0,0,.14);cursor:pointer}
.wb-check input{width:16px;height:16px;cursor:pointer;accent-color:var(--red)}

/* ---------- 404 · 오류 페이지 ---------- */
.errpg{padding-block:clamp(48px,8vh,90px) 60px}
.errpg__hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;margin-bottom:48px}
.errpg__code{font-size:clamp(64px,14vw,140px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--cream-2);user-select:none}
.errpg__t{font-size:clamp(22px,3.4vw,36px);font-weight:600;letter-spacing:-.01em;margin-top:-8px}
.errpg__m{color:var(--ash);max-width:440px;font-size:14.5px}
.errpg__acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ---------- Q&A 빠른 질문 칩 ---------- */
.qa-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.qa-chip{border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:20px;padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.qa-chip:hover{border-color:var(--ink);background:var(--cream)}
.qa-chip:active{transform:scale(.97)}

/* ---------- 채팅 빠른답변: 템플릿 관리 링크 ---------- */
.qr--manage{color:var(--ash);border-style:dashed}
.qr--manage:hover{color:var(--ink)}

/* ---------- 관리자 채팅 모바일 탭 (≤760px) ---------- */
.acm-mtabs{display:none}
@media (max-width:760px){
  .acm-mtabs{display:flex;gap:6px;margin-bottom:10px;position:sticky;top:0;z-index:20;background:var(--paper);padding:6px 0}
  .acm-mtab{flex:1;border:1px solid var(--line);background:var(--paper);color:var(--ash);border-radius:10px;padding:9px 6px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px}
  .acm-mtab.on{background:var(--ink-solid);color:#fff;border-color:var(--ink-solid)}
  .acm-mtab-b{background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
  /* 한 번에 한 패널만 — 세로로 쌓여 스크롤이 길어지는 문제 해결 */
  .adm-chat{grid-template-columns:1fr;min-height:auto}
  .adm-chat-rooms,.adm-chat-main,.adm-chat-profile{display:none}
  .adm-chat[data-mtab="rooms"] .adm-chat-rooms{display:block;max-height:none}
  .adm-chat[data-mtab="chat"] .adm-chat-main{display:flex;flex-direction:column}
  .adm-chat[data-mtab="profile"] .adm-chat-profile{display:block}
  .acm-msgs{min-height:52vh}
}

/* ---------- 고객 알림함 ---------- */
#myLink{position:relative}
.acct-nav__b{background:var(--red);color:#fff;font-size:10px;font-weight:800;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;margin-left:4px;vertical-align:middle}
.notif-list{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.notif a{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:border-color .15s,transform .15s}
.notif a:hover{border-color:var(--ink);transform:translateY(-1px)}
.notif.is-unread a{border-color:var(--red);background:color-mix(in srgb, var(--red) 5%, var(--paper))}
.notif__ico{font-size:20px;line-height:1.2;flex:0 0 auto}
.notif__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.notif__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notif__sub{font-size:14px;font-weight:600;line-height:1.4}
.notif__new{background:var(--red);color:#fff;font-size:9.5px;font-weight:800;border-radius:8px;padding:2px 6px;letter-spacing:.04em}
.notif__meta{font-size:11.5px;color:var(--ash)}
.notif-note{margin-top:14px;font-size:12px;color:var(--ash);text-align:center}

/* ---------- 검색어 하이라이트 ---------- */
mark{background:rgba(232,197,74,.42);color:inherit;border-radius:3px;padding:0 1px}

/* 관리자 채팅 — 답변 대기 표시 (목록만 열어도 안읽음이 0이 되므로 배지만으론 구분 불가) */
.acr-wait{background:var(--red);color:#fff;font-size:9.5px;font-weight:800;border-radius:8px;padding:2px 6px;letter-spacing:.03em;margin-left:4px}

/* ==========================================================================
   고객 리뷰 (2026-08-09 재설계)
   카드 = 미리보기, 팝업 = 본문. 카드를 눌러 상품으로 튕겨 보내지 않는다.
   ========================================================================== */
.revsec{padding-top:0}
/* 요약 — 세로로 쌓던 것을 가로 2단으로. 점수와 근거를 한 줄에 붙여 읽는 눈을 아낀다 */
.rvsum{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;
  padding:20px clamp(18px,3vw,28px);margin:0 0 20px;border-radius:20px;
  background:linear-gradient(180deg,var(--paper),var(--cream));border:1px solid var(--line)}
.rvsum__score{display:flex;align-items:center;gap:12px}
.rvsum__score>b{font-size:clamp(40px,6vw,52px);font-weight:800;line-height:.95;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rvsum__col{display:flex;flex-direction:column;gap:3px}
.rvsum__stars{color:#f0a63a;font-size:15px;letter-spacing:2px;line-height:1}
.rvsum__n{font-size:12.5px;color:var(--ash);font-weight:600}
.rvsum__meter{flex:1 1 240px;min-width:200px;display:flex;flex-direction:column;gap:8px}
.rvsum__bar{height:8px;border-radius:99px;background:rgba(19,24,29,.08);overflow:hidden}
.rvsum__bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#f0a63a,var(--red))}
.rvsum__cap{font-size:12.5px;color:var(--ash);margin:0}
.rvsum__cap b{color:var(--ink);font-weight:800}
@media (prefers-reduced-motion:no-preference){.rvsum__bar i{transition:width .7s ease}}

/* 레일 — 상품 레일(.prail)의 스크롤·화살표를 그대로 쓰고 장수만 바꾼다.
   ⚠️ 스크롤바를 드러내지 말 것. 회색 막대가 보이면 그 자체로 촌스럽게 읽힌다 */
.prail--rv{--prail-per:4}
@media (max-width:1024px){.prail--rv{--prail-per:2.6}}
@media (max-width:760px){.prail--rv{--prail-per:1.5}}

.rvcard{position:relative;display:flex;flex-direction:column;gap:11px;text-decoration:none;
  color:inherit;cursor:pointer}
.rvcard__pic{position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:var(--cream);box-shadow:0 1px 2px rgba(19,24,29,.06)}
.rvcard__pic img{width:100%;height:100%;object-fit:cover;display:block}
.rvcard__pic::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(180deg,transparent,rgba(10,14,18,.62));pointer-events:none}
.rvcard__noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#f0a63a;font-size:24px;letter-spacing:3px}
.rvcard__tags{position:absolute;top:10px;left:10px;display:flex;gap:5px;z-index:2}
.rvcard__tag{font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 8px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--ink);backdrop-filter:blur(6px)}
.rvcard__tag--best{background:var(--red);color:#fff}
.rvcard__stars{position:absolute;left:12px;bottom:10px;z-index:2;color:#ffc76b;font-size:13px;
  letter-spacing:1.5px;text-shadow:0 1px 3px rgba(0,0,0,.35)}
/* ⚠️ 줄 수를 자유롭게 두면 카드마다 본문 높이가 달라져 아래 작성자·상품명 줄이
   오르락내리락한다. 2줄로 잘라내고 **높이를 2줄로 못 박아** 푸터를 한 줄에 세운다 */
.rvcard__body{font-size:13.5px;line-height:1.6;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:3.2em}
.rvcard__foot{display:flex;align-items:center;gap:9px;min-width:0}
.rvcard__ava{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-solid);color:#fff;font-size:12px;font-weight:800}
.rvcard__meta{display:flex;flex-direction:column;gap:1px;min-width:0}
.rvcard__meta b{font-size:12px;font-weight:800;color:var(--ink)}
.rvcard__meta em{font-size:11.5px;color:var(--ash);font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvcard__more{font-size:11.5px;font-weight:800;color:var(--red);opacity:0;transform:translateY(-3px)}
@media (prefers-reduced-motion:no-preference){
  .rvcard__pic img{transition:transform .45s ease}
  .rvcard__more{transition:transform .25s ease,opacity .25s}
  .rvcard:hover .rvcard__pic img{transform:scale(1.06)}
  .rvcard:hover .rvcard__more{opacity:1;transform:translateY(0)}
}
.rvcard:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:20px}
/* 스크롤 중에는 이미지 확대 전환을 끈다 — 지나가는 카드마다 애니메이션이 연쇄로 시작된다 */
body.is-scrolling .rvcard__pic img{transition:none}

/* ── 리뷰 팝업 — 에디토리얼 2단 (2026-08-09 재설계) ──────────────────────
   원칙: 홈의 언어를 그대로 쓴다. 대문자 eyebrow · 헤어라인 · 대형 숫자 ·
   히어로 슬라이드와 같은 「03 / 08 + 진행 바」 인디케이터.
   ⚠️ 22px 라운드 + 알약 버튼 + 원형 아바타는 흔한 커머스 앱 톤이라
      부티크 화면에서 남의 집처럼 겉돈다. 모서리는 4px, 버튼은 사각. */
body.rvm-open{overflow:hidden}
.rvmodal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px)}
.rvmodal[hidden]{display:none}
.rvmodal__dim{position:absolute;inset:0;background:rgba(14,17,20,.74)}
.rvm{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  width:min(980px,100%);max-height:min(86vh,700px);background:var(--paper);border-radius:4px;
  overflow:hidden;box-shadow:0 40px 120px rgba(10,13,16,.45)}
/* 사진 없는 리뷰는 텍스트 한 단으로 — 빈 사진칸을 회색으로 채우면 고장처럼 보인다 */
.rvm.is-nopic{grid-template-columns:minmax(0,1fr);width:min(560px,100%)}
.rvm.is-nopic .rvm__fig{display:none}

.rvm__fig{position:relative;margin:0;background:var(--cream);overflow:hidden}
.rvm__fig img{width:100%;height:100%;object-fit:cover;display:block}
.rvm__figcap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(180deg,transparent,rgba(10,13,16,.7))}

.rvm__panel{display:flex;flex-direction:column;min-width:0}
.rvm__top{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.rvm__eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.rvm__idx{margin-left:auto;font-size:11.5px;letter-spacing:.1em;color:var(--ash);font-variant-numeric:tabular-nums}
.rvm__idx b{color:var(--ink);font-weight:800}
.rvm__x{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);background:transparent;
  border-radius:50%;color:var(--ink);font-size:12px;cursor:pointer;font-family:inherit;line-height:1}
.rvm__x:hover{border-color:var(--ink);background:var(--cream)}

.rvm__scroll{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px}
.rvm__rate{display:flex;align-items:baseline;gap:11px}
.rvm__score{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.rvm__stars{color:var(--ink);font-size:14px;letter-spacing:3px;line-height:1}
.rvm__quote{position:relative;margin:0;padding-top:16px}
.rvm__quote::before{content:"\201C";position:absolute;top:-16px;left:-4px;font-size:62px;line-height:1;
  color:var(--line);font-family:Georgia,"Times New Roman",serif}
.rvm__quote p{margin:0;font-size:clamp(15.5px,1.5vw,18px);line-height:1.8;letter-spacing:-.01em;
  color:var(--ink);white-space:pre-wrap}
.rvm__by{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;font-size:12px;color:var(--ash)}
.rvm__by b{color:var(--ink);font-weight:800;letter-spacing:.02em}
.rvm__dot{color:var(--line)}
.rvm__chip{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line);color:var(--ash)}
.rvm__chip--best{border-color:var(--red);color:var(--red)}
/* ⚠️ display 를 지정한 요소는 hidden 속성이 먹지 않는다 — 답글 없는 리뷰에
   라벨만 덩그러니 남았다(2026-08-09 실측) */
.rvm__reply[hidden],.rvm__chip[hidden]{display:none}
.rvm__reply{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.rvm__reply-who{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.rvm__reply-body{font-size:13.5px;line-height:1.7;color:var(--ash)}

.rvm__foot{border-top:1px solid var(--line);padding:14px 22px 18px;display:flex;flex-direction:column;gap:12px}
.rvm__prod{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.rvm__prod-pic{flex:0 0 auto;width:46px;height:46px;overflow:hidden;background:var(--cream);border-radius:2px}
.rvm__prod-pic img{width:100%;height:100%;object-fit:cover;display:block}
.rvm__prod-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.rvm__prod-txt em{font-size:9.5px;font-style:normal;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash)}
.rvm__prod-txt b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvm__prod-arw{flex:0 0 auto;color:var(--ash);font-size:16px}
.rvm__prod:hover .rvm__prod-arw{color:var(--ink)}
/* CTA — 홈 버튼과 같은 문법(채움=주). 알약 대신 사각, 대문자 자간 */
.rvm__cta{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:2px;
  background:var(--ink-solid);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.rvm__cta:hover{background:var(--red)}
.rvm__acts{display:flex;align-items:center;gap:16px}
.rvm__act{border:0;background:none;padding:0;font-family:inherit;font-size:11.5px;letter-spacing:.04em;
  color:var(--ash);cursor:pointer}
.rvm__act:hover{color:var(--ink)}
.rvm__act.is-on{color:var(--red)}
.rvm__msg{margin-left:auto;font-size:11px;color:var(--ash)}
/* 인디케이터 — 히어로 슬라이드(04 / 21 + 바)와 같은 언어 */
.rvm__nav{display:flex;align-items:center;gap:14px}
.rvm__step{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--line);background:transparent;
  border-radius:50%;color:var(--ink);font-size:13px;line-height:1;cursor:pointer;font-family:inherit}
.rvm__step:hover{border-color:var(--ink);background:var(--cream)}
.rvm__prog{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.rvm__prog i{position:absolute;left:0;top:0;height:100%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .rvm{animation:rvmIn .3s cubic-bezier(.22,1,.36,1)}
  .rvm__cta,.rvm__act,.rvm__x,.rvm__step,.rvm__prod-arw{transition:background .2s,border-color .2s,color .2s}
  .rvm__cta .arw{transition:transform .2s}
  .rvm__cta:hover .arw{transform:translateX(4px)}
  .rvm__prog i{transition:width .35s cubic-bezier(.22,1,.36,1)}
}
@keyframes rvmIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 모바일은 바텀시트 — 사진이 위, 글이 아래인 한 단 */
@media (max-width:820px){
  .rvmodal{padding:0;align-items:flex-end}
  .rvm,.rvm.is-nopic{grid-template-columns:minmax(0,1fr);width:100%;max-height:92vh;
    border-radius:4px 4px 0 0;grid-template-rows:auto minmax(0,1fr)}
  .rvm__fig{aspect-ratio:4/3}
  .rvm__scroll{padding:18px}
  .rvm__foot{padding:12px 18px 16px}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){
  .rvm{animation:rvmUp .32s cubic-bezier(.22,1,.36,1)}
}
@keyframes rvmUp{from{transform:translateY(44px)}to{transform:none}}