/* =========================================================
   ARCHIVE — flat black & white, SNS-style layout (dark only)
   ========================================================= */
:root{
  --bg:            #000000;
  --bg-rail:       rgba(16,16,16,.1);
  --bg-elevated:   rgba(22,22,22,.24);
  --bg-card:       rgba(20,20,20,.4);
  --bg-media:      rgba(29,29,29,.28);
  --bg-hover:      rgba(255,255,255,.08);
  --bg-hover-soft: rgba(255,255,255,.04);
  --border:        #2b2b2b;
  --border-soft:   #232323;

  --text:          #f3f3f3;
  --text-secondary:#a8a8a8;
  --text-faint:    #6c6c6c;

  --ink:           #f3f3f3;   /* fills: buttons, active states */
  --paper:         #0e0e0e;   /* content sitting on ink fills */

  /* translucent scrims (photo captions, sold ribbon, selection) */
  --scrim-rgb:      0,0,0;
  --selection-rgb:  255,255,255;
  --shadow-rgb:     0,0,0;

  --radius-pill:   9999px;
  --radius-card:   16px;

  --font-sans: -apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',Helvetica,Arial,sans-serif;
  --font-wordmark: 'Cormorant SC', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* =======================================================
     GLASSMORPHISM TOKENS
     은은한 세피아/샴페인 톤 글로우 위에 반투명 유리 패널을 얹는
     "빈티지 아카이브"용 글래스 시스템. 톤은 모노크롬을 유지하되
     블롭(blob) 광원만 아주 옅은 앰버 톤을 사용합니다.
     ======================================================= */
  --glass-bg:          rgba(255,255,255,.08);
  --glass-bg-strong:   rgba(255,255,255,.14);
  --glass-bg-soft:     rgba(255,255,255,.05);
  --glass-border:      rgba(255,255,255,.18);
  --glass-border-soft: rgba(255,255,255,.10);
  --glass-highlight:   rgba(255,255,255,.5);
  --glass-shadow:      0 8px 32px rgba(0,0,0,.45), 0 1.5px 0 rgba(255,255,255,.05) inset;
  --glass-shadow-lg:   0 20px 60px rgba(0,0,0,.55), 0 1.5px 0 rgba(255,255,255,.06) inset;
  --glass-blur:        0px;
  --glass-blur-lg:     0px;
  --glass-radius:      22px;
  --glass-radius-sm:   14px;
  --glow-amber:        rgba(255,255,255,.07);
  --glow-white:        rgba(255,255,255,.10);

  color-scheme: dark;
}

*{box-sizing:border-box;}
html{scrollbar-gutter:stable both-edges; overflow-y:scroll; background:var(--bg); touch-action:pan-x pan-y; overflow-anchor:none;}
body{margin:0;padding:0;color:var(--text);font-family:var(--font-sans);}
body{font-size:15px;line-height:1.35;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;}
/* 넓은 화면에서 #app(88+600+380=1068px 고정폭)이 좌우 어느 쪽으로도
   치우치지 않고 뷰포트 정중앙에 오도록, grid의 margin:auto 센터링에
   flex 센터링을 한 겹 더 씌워 이중으로 보정합니다. */
body{display:flex; flex-direction:column; align-items:center;}

/* =========================================================
   콘텐츠 보호(캡처/녹화 억제) — content-protect.js와 함께 동작
   ========================================================= */
body{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
}
img{-webkit-user-drag:none; user-drag:none; pointer-events:auto;}

#captureGuardOverlay{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  color:var(--text-secondary);
  font-size:13px; letter-spacing:.02em;
  opacity:0; pointer-events:none;
  filter:blur(0px);
  transition:opacity .15s ease;
}

.capture-product-watermark{
  position:absolute; top:50%; left:50%; z-index:4;
  display:block; width:82%; max-width:82%; padding:5px 8px;
  transform:translate(-50%, -50%);
  pointer-events:none; user-select:none;
  color:rgba(255,255,255,.5); font-size:8px; font-weight:700;
  line-height:1.35; letter-spacing:.04em; text-align:center; white-space:pre-line;
}
html.capture-guard-active #captureGuardOverlay{
  opacity:1;
}
html.capture-guard-active #app,
html.capture-guard-active .auth-shell,
html.capture-guard-active .splash-screen{
  filter:blur(22px);
  transition:filter .15s ease;
}

/* 로그인 화면과 동일하게, 은은한 광원 블롭 없이 완전한 플랫 블랙 배경을 사용합니다. */
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
select{font-family:inherit;}
::selection{background:rgba(var(--selection-rgb),.12);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

/* =========================================================
   전체 페이지 배경 로고 패턴 — 화면 전체(뷰포트 고정) 뒤에 깔려서
   rail/dossier/card 등 반투명 처리된 박스들 사이로 은은하게 비칩니다.
   ========================================================= */
.page-brand-pattern{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:-1;
}
.page-brand-pattern img{
  position:absolute;
  transform:translate(-50%, -50%);
  pointer-events:none;
  object-fit:contain;
  opacity:.05;
  filter:invert(1);
  animation:pageBrandShade 5.5s ease-in-out infinite;
  animation-delay:var(--shade-delay, 0s);
}

/* 명암이 대각선으로 훑고 지나가며 입체감(엠보싱)을 표현 — 로그인 화면과 동일한 연출 */
@keyframes pageBrandShade{
  0%,100%{ opacity:.025; filter:invert(1) brightness(.75); }
  50%{ opacity:.07; filter:invert(1) brightness(1.35); }
}
@media (prefers-reduced-motion: reduce){
  .page-brand-pattern img{ animation:none; }
}

#app{
  width:min(100%, 1360px);
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(88px,380px) 600px minmax(88px,380px);
  margin-inline:auto;
  justify-content:center;
}

/* =========================================================
   LEFT RAIL — flat icon-only nav (X-style), no profile mark
   ========================================================= */
.rail{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-right:none;
  box-shadow:none;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 10px;
  position:sticky; top:0; align-self:start; height:100vh;
  width:88px;
  justify-self:end;
  margin:12px 24px 12px 0;
  border-radius:var(--glass-radius);
  height:calc(100vh - 24px);
}

.rail-nav{margin-top:auto; margin-bottom:auto; display:flex; flex-direction:column; gap:14px; width:100%; align-items:center;}
.rail-bottom{display:flex; flex-direction:column; align-items:center; gap:2px; width:100%;}
.rail-nav-icons{display:flex; flex-direction:column; align-items:center; gap:2px;}
.rail-nav-icons:empty{display:none;}

/* ---------- 좌측 메뉴 바 아이콘: 홈 화면(브랜드 인트로) 진입 시
   로고 버튼만 먼저 튀지 않도록, 모든 아이콘이 거의 동시에 하나의
   그룹처럼 부드럽게 함께 떠오릅니다(아주 미세한 순서차만 부여). ---------- */
.rail-intro-item.rail-intro-anim{
  animation:railIconIn .82s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.08s + var(--ri, 0) * .028s);
}
@keyframes railIconIn{
  0%{opacity:0; transform:translateY(-10px) scale(.88); filter:blur(4px);}
  60%{opacity:1; filter:blur(0);}
  100%{opacity:1; transform:none; filter:none;}
}
/* 주의: 위 100% 키프레임을 "transform:none"으로 적어도 실제로는 소용이
   없습니다. animation-fill-mode:both 로 애니메이션이 끝난 뒤에도 그
   상태를 유지하는 요소는, getComputedStyle 상 transform 값이 항상
   matrix(1,0,0,1,0,0) 같은 행렬로 계산되어(브라우저가 "none" 을 행렬로
   구체화) 영구적으로 남습니다. 이는 스펙상 "transform 이 none 이 아닌
   값" 에 해당해 그 요소가 position:fixed 자손의 새로운 containing
   block 이 되어버립니다.
   그래서 이 애니메이션(rail-intro-anim)은 position:fixed 인 모바일
   카테고리 펼침 패널(.mobile-category-panel)을 자손으로 둔 요소
   (#menuFlyout)에는 절대 직접 걸면 안 됩니다. 대신 그 안의 아이콘
   버튼(#mobileMenuToggle, .mobile-menu-toggle)에만 걸어야 패널이
   뷰포트 기준으로 정상적으로 전체 폭을 펼칠 수 있습니다.
   (관련 처리: index.html의 rail-intro-item 클래스 위치,
   script.js playRailIntroAnimation()의 items 배열 참고) */
/* 페이지 첫 진입 시(스크립트가 rail-intro-anim을 붙이기 전) 아이콘이
   완성된 모습으로 한 프레임 반짝 보이는 "깜빡임"을 막기 위해, PC/모바일
   모두 기본 상태를 애니메이션 시작 프레임(0%)과 동일하게 미리 숨겨둡니다.
   rail-intro-anim 클래스가 붙는 순간 이어서 부드럽게 떠오릅니다. */
.rail-intro-item{
  opacity:0;
  transform:translateY(-10px) scale(.88);
  filter:blur(4px);
}
@media (prefers-reduced-motion: reduce){
  .rail-intro-item{
    opacity:1; transform:none; filter:none;
  }
  .rail-intro-item.rail-intro-anim{
    animation:none !important;
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}
.nav-item{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; cursor:pointer;
  color:var(--text);
  position:relative;
  transition:background-color .18s ease, box-shadow .18s ease;
}
.nav-item.active{
  background:transparent;
}
.nav-item svg{
  width:28px; height:28px; display:block; stroke-width:1.3;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.nav-item:hover svg{transform:translateY(-3px) scale(1.13) rotate(-3deg);}
.nav-item:active svg{transform:translateY(1px) scale(.9); transition:transform .16s cubic-bezier(.22,1,.36,1);}

.nav-item.active svg{
  animation:navPop .56s cubic-bezier(.22,1,.36,1);
}

@keyframes navPop{
  0%{transform:scale(.6) rotate(0);}
  50%{transform:scale(1.22) rotate(6deg);}
  75%{transform:scale(.96) rotate(-1.5deg);}
  100%{transform:scale(1) rotate(0);}
}

/* ---------- 계정(로그인/로그아웃) 링크 ---------- */
.account-link{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-top:6px; border-radius:50%;
  color:var(--text-secondary); text-decoration:none;
  transition:color .25s cubic-bezier(.22,1,.36,1), background-color .25s cubic-bezier(.22,1,.36,1);
}
.account-link:hover{color:var(--text); background:var(--bg-hover-soft);}
.account-link svg{width:26px; height:26px; stroke-width:1.3; transition:transform .45s cubic-bezier(.22,1,.36,1);}
.account-link:hover svg{transform:translateY(-3px) scale(1.13) rotate(-3deg);}
.account-link:active svg{transform:translateY(1px) scale(.9); transition:transform .16s cubic-bezier(.22,1,.36,1);}

.account-avatar{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-top:6px; border-radius:50%;
  background:var(--glass-bg-strong); color:var(--text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-border);
  font-size:14px; font-weight:800; letter-spacing:0;
  border:1px solid var(--glass-border-soft); cursor:pointer;
}
.account-avatar:hover{opacity:.82;}
.account-avatar.active{outline:2px solid var(--text); outline-offset:2px;}

/* =========================================================
   프로필 탭
   ========================================================= */
.profile-view{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  min-height:0;
  padding:8px 24px 60px;
}
.profile-view[hidden]{
  display:none;
}
/* PC: 브랜드 로고 헤더 바로 아래, 다른 탭(상품 등록 등)과 동일하게
   정상적인 문서 흐름 안에서 살짝의 여백만 두고 상단에 붙입니다.
   (예전에는 -360px 같은 고정 음수 margin으로 강제로 끌어올렸는데,
   헤더 높이가 바뀔 때마다 값이 어긋나 카드가 헤더와 겹치거나
   화면 밖으로 잘려 보이는 원인이었습니다. 매직 넘버 대신 자연스러운
   흐름 + 작은 여백으로 항상 헤더 바로 아래에 오도록 고정합니다.) */
@media (min-width:961px){
  .profile-view{
    padding-top:150px;
    padding-bottom:48px;
  }
  .profile-card{
    gap:14px;
  }
  .profile-card-head{
    gap:0;
  }
  .profile-avatar{
    margin-bottom:2px;
    width:64px;
    height:64px;
  }
}
.profile-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:28px;
  width:100%;
  max-width:340px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  transition:max-width .2s ease;
}
.profile-card--wide{max-width:560px;}
.profile-card-head{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center;
}
.profile-avatar{
  width:76px; height:76px; border-radius:50%;
  background:#000000; color:var(--text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; letter-spacing:0;
  margin-bottom:10px;
  overflow:hidden;
}
.profile-avatar-img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:invert(1);
}
.profile-name{font-size:19px; font-weight:800; color:var(--text); margin:0;}
.profile-email{font-size:13px; color:var(--text-secondary); margin:0;}

.profile-edit-form{display:flex; flex-direction:column; gap:22px;}
.profile-edit-form[hidden]{display:none;}
.profile-banner{margin:0;}

.profile-info-display{display:flex; flex-direction:column; gap:10px;}
.profile-info-display[hidden]{display:none;}
.profile-info-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:13px; padding:10px 0; border-bottom:1px solid var(--glass-border-soft);
}
.profile-info-row span{color:var(--text-faint);}
.profile-info-row strong{color:var(--text); font-weight:700; text-align:right; word-break:break-all;}
.profile-edit-toggle-btn{
  margin-top:2px; width:40px; height:40px; align-self:flex-end;
  display:flex; align-items:center; justify-content:center;
  border-radius:0;
  background:transparent; color:var(--text-secondary);
  border:none; cursor:pointer;
  transition:opacity .12s ease, color .12s ease;
}
.profile-edit-toggle-btn svg{width:17px; height:17px;}
.profile-edit-toggle-btn:hover{background:transparent; opacity:.6; color:var(--text);}

.profile-edit-form .admin-form-actions{display:flex; align-items:center; justify-content:flex-end; gap:6px;}
.profile-edit-form .admin-cancel-btn,
.profile-edit-form .admin-submit-btn{
  flex:none; width:40px; height:40px; padding:0; margin-top:0;
  border-radius:0; border:none; background:transparent; box-shadow:none;
  color:var(--text-secondary);
}
.profile-edit-form .admin-form-actions .admin-submit-btn{flex:none;}
.profile-edit-form .admin-cancel-btn:hover,
.profile-edit-form .admin-submit-btn:hover{background:transparent; opacity:.6; color:var(--text);}
.profile-edit-form .admin-cancel-btn:active,
.profile-edit-form .admin-submit-btn:active{transform:scale(.9);}
.profile-edit-form .admin-cancel-btn svg,
.profile-edit-form .admin-submit-btn svg{width:19px; height:19px;}

.profile-logout-btn{
  width:44px; height:44px; padding:0; border-radius:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  border:none;
  cursor:pointer;
  transition:opacity .12s ease, transform .12s ease;
}
.profile-logout-btn svg{width:20px; height:20px;}
.profile-logout-btn:hover{opacity:.65;}
.profile-logout-btn:active{transform:scale(.9);}

.profile-withdraw-btn{
  width:44px; height:44px; padding:0; border-radius:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-faint);
  border:none;
  cursor:pointer;
  transition:opacity .12s ease, color .12s ease, transform .12s ease;
}
.profile-withdraw-btn svg{width:20px; height:20px;}
.profile-withdraw-btn:hover{opacity:.65; color:var(--text);}
.profile-withdraw-btn:active{transform:scale(.9);}

.profile-actions-row{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:22px;
}

.profile-qr-btn{
  width:44px; height:44px; padding:0; border-radius:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  border:none;
  cursor:pointer;
  transition:opacity .12s ease, transform .12s ease;
}
.profile-qr-btn svg{width:20px; height:20px;}
.profile-qr-btn:hover{opacity:.65;}
.profile-qr-btn:active{transform:scale(.9);}

/* =========================================================
   거래내역 / 주문 관리 (프로필 탭 내부)
   ========================================================= */
.order-section{display:flex; flex-direction:column; gap:14px;}
.order-section[hidden]{display:none;}
.order-section-empty{margin:0; font-size:12.5px; color:var(--text-faint); text-align:center; padding:16px 0;}

.order-manage-btn{
  margin:0; padding:0; width:44px; height:44px; border-radius:0;
  background:transparent; color:var(--text);
  border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .12s ease, transform .12s ease;
}
.order-manage-btn svg{width:20px; height:20px;}
.order-manage-btn:hover{opacity:.65;}
.order-manage-btn:active{transform:scale(.9);}

.order-manage-back{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-bottom:14px;
  padding:0; border:none; background:none; cursor:pointer;
  border-radius:var(--radius-pill);
  color:var(--text-secondary);
  transition:color .12s ease, background .12s ease;
}
.order-manage-back svg{width:18px; height:18px;}
.order-manage-back:hover{color:var(--text); background:var(--glass-bg-soft);}

/* =========================================================
   주문 카드 — 미니멀 / 플랫
   상단: 주문 정보(이미지·상품·상태)만 노출
   중단: 배송지·운송장·지연/환불 안내 (텍스트 위주, 불필요한 박스 제거)
   하단: 조작 가능한 요소(셀렉트·입력·버튼) 전부 배치
   ========================================================= */
.order-list{display:flex; flex-direction:column; gap:0;}
.order-card{
  display:flex; flex-direction:column; gap:12px;
  padding:16px 2px; border:none; border-bottom:1px solid var(--glass-border-soft);
  background:transparent; border-radius:0;
}
.order-list > .order-card:first-child{padding-top:2px;}
.order-list > .order-card:last-child{border-bottom:none; padding-bottom:2px;}

.order-card-top{display:flex; gap:12px; align-items:center;}
.order-card-img{width:48px; height:48px; flex:none; object-fit:cover; border-radius:6px;}
.order-card-info{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.order-card-name{font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.order-card-meta{font-size:11px; color:var(--text-faint);}
.order-card-price{font-size:12px; font-weight:800; color:var(--text);}

.order-status-badge{
  flex:none; font-size:11px; font-weight:700; padding:0; border:none; background:transparent;
  color:var(--text-secondary); white-space:nowrap;
}
.order-status-badge[data-status="0"]{color:var(--text-secondary);}
.order-status-badge[data-status="1"],
.order-status-badge[data-status="2"]{color:var(--text);}
.order-status-badge[data-status="3"]{color:var(--text); font-weight:800;}
.order-status-badge[data-status="4"]{color:var(--text); font-weight:800;}
.order-status-badge[data-status="5"]{color:var(--text-faint);}

/* ---- 중단: 주문 상세 텍스트 (박스 없이, 좌측 여백만으로 구분) ---- */
.order-card-body{display:flex; flex-direction:column; gap:6px; padding-left:60px;}
.order-card-buyer{
  margin:0; font-size:11.5px; line-height:1.6; color:var(--text-secondary);
}
.order-card-buyer strong{color:var(--text); font-weight:700;}
.order-card-tracking{margin:0; font-size:11.5px; color:var(--text-secondary);}
.order-card-tracking strong{color:var(--text); font-weight:700; letter-spacing:.02em;}
.order-card-expiry{margin:0; font-size:10.5px; line-height:1.5; color:var(--text-faint);}

.order-refund-box,
.order-delay-box{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 0 8px 10px; margin-top:2px; border:none; border-radius:0;
  border-left:2px solid var(--glass-border);
  background:transparent;
}
.order-refund-box.pending,
.order-delay-box{border-left-color:#c98a2b;}
.order-refund-box.completed{opacity:.7;}
.order-refund-title{margin:0; font-size:11.5px; font-weight:800; color:var(--text);}
.order-refund-desc{margin:0; font-size:11px; line-height:1.5; color:var(--text-secondary);}
.order-delay-title{margin:0; font-size:11.5px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:6px;}
.order-delay-title svg{width:13px; height:13px; flex:none; color:#c98a2b;}
.order-delay-desc{margin:0; font-size:11px; line-height:1.6; color:var(--text-secondary); white-space:pre-wrap; word-break:break-word;}
.order-delay-meta{margin:0; font-size:10.5px; color:var(--text-faint);}

/* ---- 하단: 조작 영역 (선택/입력/버튼 전부 여기 배치) ---- */
.order-card-actions{display:flex; flex-direction:column; gap:8px; padding-left:60px;}

.order-card-controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.order-status-select,
.order-courier-select,
.order-tracking-input{
  font-size:12px; padding:7px 9px; border-radius:6px;
  border:1px solid var(--glass-border-soft); background:transparent;
  color:var(--text); font-family:inherit;
}
.order-status-select{flex:0 0 auto; cursor:pointer;}
.order-courier-select{flex:0 0 auto; cursor:pointer;}
.order-tracking-input{flex:1 1 140px; min-width:120px;}
.order-status-select:focus,
.order-courier-select:focus,
.order-tracking-input:focus{border-color:var(--glass-border); background:var(--glass-bg-soft);}
.order-save-btn{
  flex:none; width:30px; height:30px; padding:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); border:none; cursor:pointer;
  transition:opacity .12s ease;
}
.order-save-btn svg{width:14px; height:14px;}
.order-save-btn:hover{opacity:.85;}
.order-save-msg{
  flex:0 0 100%; font-size:11px; color:var(--text-faint);
}
.order-save-msg.success{color:var(--text); font-weight:700;}
.order-save-msg.error{color:#e04b4b; font-weight:700;}

/* 상태 변경 외 부가 조작(취소/지연/삭제/환불요청)은 아이콘 버튼으로 하단 우측에 정렬 */
.order-card-icon-actions{display:flex; align-items:center; justify-content:flex-end; gap:4px;}

.order-confirm-cancel-btn,
.order-payment-cancel-btn,
.order-delay-btn,
.order-delete-btn{
  flex:none; width:28px; height:28px; padding:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-faint);
  border:none; cursor:pointer;
  transition:color .12s ease, background-color .12s ease;
}
.order-confirm-cancel-btn svg{width:13px; height:13px;}
.order-confirm-cancel-btn:hover{color:var(--text); background:var(--glass-bg-soft);}
.order-confirm-cancel-btn:disabled{opacity:.4; cursor:not-allowed;}

.order-payment-cancel-btn svg{width:12px; height:12px;}
.order-payment-cancel-btn:hover{color:#c0392b; background:rgba(192,57,43,.08);}
.order-payment-cancel-btn:disabled{opacity:.4; cursor:not-allowed;}

.order-delay-btn svg{width:13px; height:13px;}
.order-delay-btn:hover{color:#c98a2b; background:rgba(201,138,43,.08);}
.order-delay-btn.is-active{color:#c98a2b; background:rgba(201,138,43,.08);}
.order-delay-btn:disabled{opacity:.4; cursor:not-allowed;}

.order-delete-btn svg{width:12px; height:12px;}
.order-delete-btn:hover{color:#c0392b; background:rgba(192,57,43,.08);}
.order-delete-btn:disabled{opacity:.4; cursor:not-allowed;}

.order-refund-cancel-btn{
  display:flex; align-items:center; gap:5px;
  padding:5px 9px 5px 7px; border-radius:6px;
  background:transparent; color:#c98a2b;
  border:none; cursor:pointer;
  font-size:11px; font-weight:700;
  transition:background-color .12s ease;
}
.order-refund-cancel-btn svg{width:13px; height:13px; flex:none;}
.order-refund-cancel-btn:hover{background:rgba(201,138,43,.1);}
.order-refund-cancel-btn:disabled{opacity:.4; cursor:not-allowed;}

/* 구매자 화면 전용 하단 액션(현재는 배송 완료 주문의 "간이 영수증" 버튼) */
.order-card-buyer-actions{
  display:flex; justify-content:flex-end;
}
.order-receipt-btn{
  display:flex; align-items:center; gap:5px;
  padding:5px 9px 5px 7px; border-radius:6px;
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--glass-border-soft); cursor:pointer;
  font-size:11px; font-weight:700;
  transition:color .12s ease, background-color .12s ease, border-color .12s ease;
}
.order-receipt-btn svg{width:13px; height:13px; flex:none;}
.order-receipt-btn:hover{color:var(--text); background:var(--glass-bg-soft); border-color:var(--glass-border);}

.order-refund-input-btn,
.order-refund-complete-btn{
  align-self:flex-start;
  font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:6px;
  background:var(--ink); color:var(--paper); border:none; cursor:pointer;
  transition:opacity .12s ease;
}
.order-refund-input-btn:hover,
.order-refund-complete-btn:hover{opacity:.85;}

.order-delay-actions{display:flex; gap:8px; margin-top:2px;}
.order-delay-register-btn,
.order-delay-resolve-btn{
  align-self:flex-start;
  font-size:11.5px; font-weight:700; padding:6px 10px; border-radius:6px;
  border:none; cursor:pointer; transition:opacity .12s ease, background-color .12s ease;
}
.order-delay-register-btn{background:var(--ink); color:var(--paper);}
.order-delay-register-btn:hover{opacity:.85;}
.order-delay-resolve-btn{background:transparent; color:#c98a2b; border:1px solid rgba(201,138,43,.4);}
.order-delay-resolve-btn:hover{background:rgba(201,138,43,.1);}
.order-delay-resolve-btn:disabled,
.order-delay-register-btn:disabled{opacity:.4; cursor:not-allowed;}

#adminProductManageList .admin-product-edit-btn{color:var(--text);}
.admin-product-row .admin-product-edit-btn:hover{opacity:.65;}
.admin-product-row .admin-product-delete-btn:hover{color:#e04b4b;}

/* =========================================================
   구매/결제 페이지
   ========================================================= */
.checkout-view{
  display:flex; align-items:flex-start; justify-content:center;
  min-height:420px; padding:60px 24px;
}
.checkout-view[hidden]{display:none;}
.checkout-card{
  display:flex; flex-direction:column; gap:24px;
  width:100%; max-width:420px;
  padding:32px 28px 36px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}
.checkout-bank h3{margin:0 0 10px; font-size:13px; font-weight:800; color:var(--text); letter-spacing:-.005em;}
.checkout-bank-box{
  display:flex; flex-direction:column;
  padding:0; border-radius:0;
  border:none; background:transparent;
}
.checkout-bank-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--text-secondary);
  padding:10px 0; border-bottom:1px solid var(--glass-border-soft);
}
.checkout-bank-row:first-child{border-top:1px solid var(--glass-border-soft);}
.checkout-bank-row strong{color:var(--text); font-weight:700;}
.checkout-bank-amount{padding-top:10px;}
.checkout-bank-amount strong{font-size:15px; font-weight:800;}

/* ---------- 주문 접수 완료 페이지 ---------- */
.order-complete-head{display:flex; flex-direction:column; gap:8px; text-align:center;}
.order-complete-title{margin:0; font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.005em;}
.order-complete-status{margin:0; font-size:12.5px; line-height:1.6; color:var(--text-secondary);}
.order-complete-status strong{color:var(--text); font-weight:800;}
.order-complete-actions{display:flex; gap:10px;}
.order-complete-btn{
  flex:1; height:46px; padding:0 12px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700; letter-spacing:-.005em;
  cursor:pointer; transition:opacity .12s ease, background-color .12s ease, color .12s ease;
}
.order-complete-btn.is-ghost{
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--glass-border-soft);
}
.order-complete-btn.is-ghost:hover{color:var(--text); border-color:var(--glass-border); background:var(--glass-bg-soft);}
.order-complete-btn.is-solid{
  background:var(--ink); color:var(--paper); border:none;
}
.order-complete-btn.is-solid:hover{opacity:.85;}

.checkout-form .admin-form-actions{
  display:flex; align-items:stretch; justify-content:space-between;
  margin-top:6px; padding-top:16px; border-top:1px solid var(--glass-border-soft);
}
.checkout-form .admin-cancel-btn,
.checkout-form .admin-submit-btn{
  flex:1; width:auto; height:48px; padding:0; border-radius:0;
  border:none; background:transparent;
  box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .12s ease, transform .12s ease;
}
.checkout-form .admin-cancel-btn{
  color:var(--text-secondary);
  border-right:1px solid var(--glass-border-soft);
}
.checkout-form .admin-submit-btn{color:var(--text); margin-top:0;}
.checkout-form .admin-cancel-btn:hover,
.checkout-form .admin-submit-btn:hover{background:transparent; opacity:.6;}
.checkout-form .admin-cancel-btn:active,
.checkout-form .admin-submit-btn:active{transform:scale(.9);}
.checkout-form .admin-cancel-btn svg,
.checkout-form .admin-submit-btn svg{width:21px; height:21px;}
.checkout-form .admin-submit-btn:disabled{background:transparent; color:var(--text-faint); cursor:not-allowed;}
.checkout-banner.success{color:var(--text); border-color:var(--glass-border);}
.checkout-banner{white-space:pre-line;}
.checkout-hold-hint{
  margin:2px 0 0; text-align:center;
  font-size:10.5px; line-height:1.6; color:var(--text-faint);
  letter-spacing:.01em;
}
.checkout-form .checkout-hold-btn{
  position:relative; overflow:visible; touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.checkout-form .checkout-hold-btn:active{transform:none; opacity:1;}
.checkout-form .admin-submit-btn .checkout-hold-progress{
  position:absolute; left:50%; top:50%;
  width:40px; height:40px;
  transform:translate(-50%, -50%) rotate(-90deg);
  pointer-events:none;
}
.checkout-hold-progress circle{
  fill:none; stroke:rgba(255,255,255,.86); stroke-width:1.5;
  stroke-linecap:round; stroke-dasharray:113.1; stroke-dashoffset:113.1;
  transition:stroke-dashoffset 0s linear;
}
.checkout-hold-btn.is-holding .checkout-hold-progress circle{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 2s linear;
}
.checkout-hold-btn.is-confirmed .checkout-hold-progress circle,
.checkout-hold-btn.is-submitting .checkout-hold-progress circle{stroke-dashoffset:0;}
.checkout-form .admin-submit-btn .checkout-submit-check{position:relative; z-index:1; width:19px; height:19px;}

/* 확인 안내 배너는 PC/모바일 공통으로 테두리/배경 박스 없이 텍스트만 표시합니다.
   (.admin-banner 기본 규칙과 동일 특이도라 소스 순서상 밀리므로 .admin-banner.checkout-banner로 특이도를 높였습니다) */
.admin-banner.checkout-banner{
  background:transparent; border:none; box-shadow:none;
  padding:6px 0 0; text-align:center; border-radius:0;
}

/* 주문/결제 카드가 우측 dossier 안에 들어갈 때: 바깥 여백/테두리는 dossier가
   이미 갖고 있으므로 카드 자체의 배경/테두리/그림자는 없애고 내용만 남깁니다. */
.dossier .checkout-card{
  width:auto; max-width:none; padding:0; margin:0;
  background:transparent; border:none; box-shadow:none;
  gap:22px;
}

/* =========================================================
   거래 진행 상태 안내 팝업 — 구매 동의서/회원탈퇴와 같은 flat / minimal 형식
   ========================================================= */
.checkout-confirm-scrim{
  position:fixed; inset:0; z-index:2100;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.checkout-confirm-scrim[hidden]{display:none;}
.checkout-confirm-modal{
  width:min(320px, 100%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:28px 24px 24px;
  text-align:center;
  background:transparent;
  border:none;
  box-shadow:none;
  position:relative;
}
.checkout-confirm-modal > *{position:relative; z-index:1;}

/* SOLD OUT 팝업 — 박스 없이 텍스트에 쉐도우만 얹어 강조 */
.sold-out-modal{
  padding:140px 24px;
  gap:0;
}
.sold-out-modal .checkout-confirm-eyebrow{
  color:#fff;
  font-size:18px;
  letter-spacing:.28em;
  text-shadow:0 4px 18px rgba(0,0,0,.85);
}
.sold-out-modal > .sold-out-close{
  position:static;
  margin:20px 0 0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
}

/* =========================================================
   상품 등록 탭 (관리자 전용) — 미니멀 플랫 스타일
   ========================================================= */
.admin-view{
  width:min(480px, 100%); margin:24px auto 60px; padding:36px 28px 40px;
  min-height:640px;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:none;
  border-radius:var(--glass-radius);
  box-shadow:none;
}

.admin-head{margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--glass-border-soft);}
.admin-head h2{
  font-size:15px; font-weight:700; color:var(--text); margin:0 0 6px;
  text-transform:uppercase; letter-spacing:.12em;
}
.admin-sub{font-size:12.5px; color:var(--text-faint); margin:0;}

/* ---------- 등록된 상품 관리(상품 등록 탭 안에서만 수정 진입) ---------- */
.admin-product-manage{margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--glass-border-soft);}
.admin-product-manage-title{
  margin:0; font-size:11px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.08em;
}
.admin-collapse-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:44px; padding:12px 2px; margin-bottom:0; border:none; background:transparent;
  color:inherit; cursor:pointer; text-align:left;
}
.admin-collapse-toggle:hover .admin-product-manage-title{color:var(--text);}
.admin-collapse-chevron{
  width:15px; height:15px; flex:none; color:var(--text-faint);
  transition:transform .2s ease, color .12s ease;
}
.admin-collapse-toggle:hover .admin-collapse-chevron{color:var(--text-secondary);}
.admin-collapse-toggle[aria-expanded="true"] .admin-collapse-chevron{transform:rotate(180deg);}
#adminProductManage > .admin-collapse-toggle{margin-bottom:12px;}
/* .order-list는 기본 display:flex라 [hidden] 속성만으로는 브라우저 기본 display:none이
   덮어써지지 않아 접힘이 동작하지 않았습니다. 모든 .order-list에 공통 적용되도록 일반화. */
.order-list[hidden]{display:none;}
.admin-product-manage .order-list{max-height:320px; overflow-y:auto; padding-right:2px; margin-top:4px; gap:0;}

/* ---------- 회원 관리 · 간이 영수증: 아이디 검색 ---------- */
.admin-search-row{margin-top:4px;}
.admin-search-row[hidden]{display:none;}
#adminProductManageSearchRow{margin:0 0 12px;}
.admin-search-input{
  width:100%; box-sizing:border-box;
  font-size:12.5px; padding:9px 11px; border-radius:8px;
  border:1px solid var(--glass-border-soft); background:transparent;
  color:var(--text); font-family:inherit;
}
.admin-search-input::placeholder{color:var(--text-faint);}
.admin-search-input:focus{border-color:var(--glass-border); background:var(--glass-bg-soft);}

/* 박스(테두리+배경) 대신 얇은 구분선으로만 구획하는 플랫 리스트 로우 */
.admin-product-row{
  display:flex; flex-direction:row; align-items:center; gap:12px;
  padding:12px 2px; border:none; border-radius:0; background:transparent;
  border-bottom:1px solid var(--glass-border-soft);
  position:relative;
  transition:padding-left .12s ease;
}
.admin-product-manage .order-list > .admin-product-row:last-child{border-bottom:none;}
.admin-product-row .order-card-img{
  width:38px; height:38px; border:none; border-radius:8px; flex:none;
}
.admin-product-row .admin-product-edit-btn,
.admin-product-row .admin-product-delete-btn{
  flex:none;
}
.admin-product-row.is-editing{
  padding-left:12px;
  box-shadow:inset 2px 0 0 var(--ink);
}

/* ---------- 로그인 사용자 접속 기록 (회원 관리 팝업 내부 로우) ---------- */
.admin-access-log-row.is-suspicious{
  padding-left:12px;
  box-shadow:inset 2px 0 0 #e04b4b;
}
.admin-access-log-row.is-suspicious .admin-product-row-name{color:#e04b4b;}

.admin-product-row-info{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.admin-product-row-name{font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.admin-product-row-meta{font-size:11px; color:var(--text-faint);}
.admin-product-manage-empty{margin:0; font-size:12px; color:var(--text-faint); text-align:center; padding:14px 0;}

/* ---------- 판매 완료 상품 인증서 관리 ---------- */
.admin-certificate-body{margin-top:4px;}
.admin-certificate-body[hidden]{display:none;}
#adminCertificateSearchRow{margin:0 0 12px;}
.admin-certificate-list{max-height:none !important; overflow:visible !important;}
.admin-certificate-editor{
  margin-top:16px; padding:20px 2px 4px;
  border-top:1px solid var(--glass-border-soft);
  border-bottom:none;
}
.admin-certificate-editor-grid{
  display:flex; flex-direction:column; gap:18px;
}
.admin-certificate-image-panel{
  display:flex; flex-direction:row; align-items:center; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--glass-border-soft);
}
.admin-certificate-preview{
  width:96px; aspect-ratio:1/1; display:block; object-fit:cover;
  border-radius:var(--glass-radius-sm); background:var(--glass-bg-soft);
  border:1px solid var(--glass-border-soft);
}
.admin-certificate-image-actions{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
}
.admin-certificate-upload-btn,
.admin-certificate-default-btn{
  flex:none; width:38px; height:38px; min-height:0; padding:0;
  border-radius:6px; border:1px solid var(--glass-border-soft);
  background:var(--glass-bg-soft); color:var(--text-secondary);
  font:inherit; text-align:center; cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.admin-certificate-upload-btn{display:flex; align-items:center; justify-content:center;}
.admin-certificate-default-btn{display:flex; align-items:center; justify-content:center;}
.admin-certificate-upload-btn svg,
.admin-certificate-default-btn svg{width:16px; height:16px;}
.admin-certificate-upload-btn:hover,
.admin-certificate-default-btn:hover{
  color:var(--text); border-color:var(--glass-border); background:var(--glass-bg-strong);
}
.admin-certificate-fields{display:flex; flex-direction:column; gap:14px; min-width:0;}
.admin-certificate-code{
  margin:0; color:var(--text-faint);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
}
.admin-certificate-actions{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:18px;
}
#adminCertificateForm .admin-certificate-actions .admin-submit-btn{
  flex:none; width:52px; height:52px; padding:0; gap:0; margin:0;
  border-radius:50%; background:var(--glass-bg-soft);
  color:var(--text-secondary); box-shadow:none;
}
#adminCertificateForm .admin-certificate-actions .admin-submit-btn:hover{
  background:var(--glass-bg-strong); color:var(--text); opacity:1;
}
#adminCertificateForm .admin-certificate-actions .admin-submit-btn:disabled{
  background:var(--glass-bg-soft); color:var(--text-faint);
}
.admin-certificate-actions svg{width:18px; height:18px;}
.admin-certificate-banner{margin:14px 0 0;}

@media (max-width:600px){
  .admin-certificate-editor{padding-top:18px;}
  .admin-certificate-image-panel{gap:12px;}
  .admin-certificate-preview{width:88px;}
}

/* ---------- 매출 · 재고 통계 대시보드 ---------- */
#adminStatsSection > .admin-collapse-toggle{margin-bottom:0;}
.admin-stats-body[hidden]{display:none;}
.admin-stats-body{margin-top:16px;}
.admin-stats-block{margin-top:22px;}
.admin-stats-block-title{
  margin:0 0 10px; font-size:11px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.08em;
}

.admin-stats-kpi-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--glass-border-soft);
  border:1px solid var(--glass-border-soft);
}
.admin-stat-card{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px; background:var(--bg);
}
.admin-stat-label{font-size:10.5px; color:var(--text-faint); letter-spacing:.02em;}
.admin-stat-value{font-size:17px; font-weight:800; color:var(--text); letter-spacing:-.01em;}
.admin-stat-value-sub{font-size:11px; font-weight:600; color:var(--text-faint);}

.admin-stats-stock-list{display:flex; flex-direction:column; gap:12px;}
.admin-stock-row-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px;}
.admin-stock-row-label{font-size:12.5px; font-weight:700; color:var(--text);}
.admin-stock-row-count{font-size:11px; color:var(--text-faint);}
.admin-stock-bar-track{height:3px; background:var(--glass-border-soft); border-radius:2px; overflow:hidden;}
.admin-stock-bar-fill{height:100%; background:var(--ink); border-radius:2px; transition:width .3s ease;}

.admin-stats-status-list{display:flex; flex-direction:column; gap:0;}
.admin-status-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--glass-border-soft);
}
.admin-status-row:last-child{border-bottom:none;}
.admin-status-row-count{font-size:12px; font-weight:700; color:var(--text);}

@media (max-width:520px){
  .admin-stats-kpi-grid{grid-template-columns:1fr;}
}

/* 리스트 로우의 아이콘 버튼: 배경/테두리 없이 아이콘만, 호버 시 원형 하이라이트 */
.admin-product-row .order-save-btn{
  flex:none; width:30px; height:30px; padding:0; border-radius:50%;
  background:transparent; color:var(--text-faint); border:none;
  transition:color .12s ease, background .12s ease;
}
.admin-product-row .order-save-btn:hover{background:var(--bg-hover-soft); opacity:1;}
.admin-product-row .order-save-btn svg{width:15px; height:15px;}

/* 판매 완료 토글: 꺼짐(판매중)일 땐 다른 아이콘과 동일한 플랫 스타일,
   켜짐(판매완료)일 땐 잉크색 원으로 채워 상태를 바로 구분할 수 있게 합니다. */
.admin-product-sold-btn.is-sold{background:var(--ink); color:var(--paper);}
.admin-product-sold-btn.is-sold:hover{background:var(--ink); opacity:.85;}

/* ---------- 회원 관리: 접속 기록 / 강제 탈퇴 버튼 ---------- */
.admin-user-access-log-btn:hover{color:var(--text);}
.admin-user-force-withdraw-btn:hover{color:#e04b4b;}
.admin-user-block-ip-btn:hover{color:var(--text);}
.admin-product-row-name .admin-user-admin-badge{
  font-size:9.5px; font-weight:800; letter-spacing:.04em; color:var(--text-faint);
  border:none; padding:0; margin-left:6px;
}
.admin-user-ip-meta.is-suspicious{color:#e04b4b; font-weight:700;}

/* ---------- 회원 관리: 회원별 로그인 접속 기록 팝업 ---------- */
.user-access-log-overlay{
  position:fixed; inset:0; z-index:2100;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.user-access-log-overlay[hidden]{display:none;}
.user-access-log-modal{
  position:relative;
  width:min(440px, 100%);
  max-height:min(560px, 80vh);
  display:flex; flex-direction:column;
  background:var(--bg);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius-sm);
  box-shadow:var(--glass-shadow-lg);
  padding:28px 20px 20px;
  overflow:hidden;
}
.user-access-log-close{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; padding:0; border:none; background:transparent;
  color:var(--text-faint); font-size:15px; cursor:pointer;
}
.user-access-log-close:hover{color:var(--text);}
.user-access-log-title{
  margin:0 0 12px; padding-right:30px;
  font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--text);
}
.user-access-log-body{
  overflow-y:auto; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}
.user-access-log-body .admin-product-row:last-child{border-bottom:none;}

/* ---------- 내 거래내역: 간이 영수증 팝업 ----------
   관리자 "간이 영수증" 메뉴의 거래내역 팝업(user-access-log-overlay) 위에서
   또 열리는 경우가 있어(회원 선택 → 거래내역 → 영수증 보기), 동일한
   z-index(2100)에 DOM 순서만으로 쌓이면 나중에 열린 거래내역 팝업의
   블러 배경에 영수증 팝업이 가려질 수 있습니다. 항상 최상단에 보이도록
   z-index를 한 단계 더 높여줍니다. */
.receipt-overlay{z-index:2200;}
.receipt-modal{max-height:min(640px, 86vh);}
.receipt-body{gap:18px;}
.receipt-summary{
  display:flex; flex-direction:column; gap:2px;
  padding-bottom:14px; margin-bottom:2px;
  border-bottom:1px solid var(--glass-border-soft);
}
.receipt-summary-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:12.5px; color:var(--text-secondary);
}
.receipt-summary-row strong{color:var(--text); font-weight:700;}
.receipt-section-title{
  margin:0 0 10px; font-size:12px; font-weight:800; color:var(--text);
  letter-spacing:.02em;
}
.receipt-agreement-list{
  display:flex; flex-direction:column; gap:10px; margin-bottom:16px;
}
.receipt-agreement-item{
  padding:10px 12px; border-radius:10px;
  background:var(--glass-bg-soft); border:1px solid var(--glass-border-soft);
}
.receipt-agreement-item-title{
  margin:0 0 4px; font-size:11.5px; font-weight:800; color:var(--text);
}
.receipt-agreement-item-text{
  margin:0; font-size:11.5px; line-height:1.6; color:var(--text-secondary);
}
.receipt-signature-box{
  display:flex; flex-direction:column; gap:6px; margin-bottom:16px;
}
.receipt-signature-label{
  font-size:10.5px; color:var(--text-faint); font-weight:700; letter-spacing:.01em;
}
.receipt-signature-canvas-box{
  width:100%; height:84px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border-soft);
  border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.receipt-signature-canvas-box img{width:100%; height:100%; object-fit:contain;}
.receipt-signature-missing{
  font-size:11px; color:var(--text-faint); text-align:center;
}
.receipt-bank-box{margin-bottom:16px;}
.receipt-bank-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--text-secondary);
  padding:9px 0; border-bottom:1px solid var(--glass-border-soft);
}
.receipt-bank-row:first-child{border-top:1px solid var(--glass-border-soft);}
.receipt-bank-row strong{color:var(--text); font-weight:700;}
.receipt-section{margin-bottom:0;}
.receipt-section + .receipt-section{
  padding-top:16px; border-top:1px solid var(--glass-border-soft);
}
.receipt-empty{
  font-size:12px; color:var(--text-faint); text-align:center; padding:20px 0;
}

/* ---------- 이미지 업로드 (다중, 최대 20장, 드래그 정렬) ---------- */
.admin-images-field{margin-bottom:28px;}
.admin-images-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px;}
.admin-images-head label{
  font-size:11px; color:var(--text-faint); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
}
.admin-images-count{font-size:12px; color:var(--text-faint);}
.admin-images-hint{font-size:12px; color:var(--text-faint); margin:0 0 14px; line-height:1.5;}
.admin-images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:10px;
}
.admin-upload{display:block; cursor:pointer;}
.admin-upload-tile{aspect-ratio:1/1; align-self:start;}
.admin-upload-preview{
  width:100%; height:100%; aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--glass-border-soft); color:var(--text-faint);
  background:var(--glass-bg-soft);
  border-radius:var(--glass-radius-sm);
  overflow:hidden; transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.admin-upload:hover .admin-upload-preview{border-color:var(--glass-border); color:var(--text-secondary); background:var(--glass-bg);}
.admin-upload-preview img{width:100%; height:100%; object-fit:cover;}
.admin-upload-plus{font-size:22px; font-weight:300; line-height:1;}
.admin-upload-text{font-size:11px; letter-spacing:.02em; text-align:center; padding:0 6px;}

.admin-image-item{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  overflow:hidden;
  cursor:grab;
  background:var(--glass-bg-soft);
}
.admin-image-item:active{cursor:grabbing;}
.admin-image-item img{width:100%; height:100%; object-fit:cover; pointer-events:none;}
.admin-image-item.dragging{opacity:.35;}
.admin-image-item.drag-over{outline:2px solid var(--text); outline-offset:-2px;}
.admin-image-badge{
  position:absolute; top:5px; left:5px;
  background:transparent; color:var(--text); border:1px solid var(--text);
  font-size:10px; font-weight:800; letter-spacing:.02em;
  padding:3px 7px; border-radius:var(--radius-pill);
  pointer-events:none;
}
.admin-image-remove{
  position:absolute; top:5px; right:5px;
  width:20px; height:20px; border-radius:50%; border:none;
  background:rgba(var(--scrim-rgb),.6); color:#fff;
  font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.admin-image-remove:hover{background:rgba(var(--scrim-rgb),.85);}
.admin-image-thumb-btn{
  position:absolute; left:0; right:0; bottom:0;
  padding:5px 0; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--scrim-rgb),.55); color:#fff; border:none; cursor:pointer;
  opacity:0; transition:opacity .12s ease;
}
.admin-image-thumb-btn svg{width:13px; height:13px;}
.admin-image-item:hover .admin-image-thumb-btn{opacity:1;}

.admin-image-cell{display:flex; flex-direction:column; gap:6px;}
.admin-image-caption-input{
  width:100%; min-width:0; box-sizing:border-box;
  font-size:11px; padding:5px 7px;
  border:1px solid var(--glass-border-soft); border-radius:6px;
  background:var(--glass-bg-soft); color:var(--text);
}
.admin-image-caption-input:focus{border-color:var(--glass-border); outline:none;}
.admin-image-caption-input::placeholder{color:var(--text-faint);}


/* ---------- 필드 ---------- */
.admin-form{display:flex; flex-direction:column; gap:22px;}
.admin-field{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0;}
.admin-field-row{display:flex; gap:14px;}
.admin-field label{
  font-size:11px; color:var(--text-faint); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
}
.admin-field input,
.admin-field select,
.admin-field textarea{
  width:100%; max-width:100%; min-width:0;
  background:var(--glass-bg-soft);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm); color:var(--text); font-family:inherit; font-size:14px;
  padding:10px 12px; outline:none; transition:border-color .12s ease, background .12s ease;
}
.admin-field select{cursor:pointer;}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus{border-color:var(--glass-border); background:var(--glass-bg);}
.admin-field textarea{resize:vertical; min-height:70px;}

/* 프로필 주소 검색 (도로명/지번) UI */
.admin-field .field-input-wrap--with-btn{display:flex; gap:8px; align-items:stretch;}
.admin-field .field-input-wrap--with-btn input{flex:1; min-width:0; width:auto;}
.admin-field .field-input-wrap--with-btn input[readonly]{cursor:pointer;}
.admin-field .field-inline-btn{
  flex:none; width:44px; padding:0; border:1px solid var(--glass-border-soft); border-radius:var(--glass-radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-secondary); cursor:pointer;
  transition:color .12s ease, border-color .12s ease;
}
.admin-field .field-inline-btn svg{width:17px; height:17px;}
.admin-field .field-inline-btn:hover{color:var(--text); border-color:var(--glass-border);}
.admin-field .field-input-detail{margin-top:8px;}
/* 숫자 입력(가격)의 네이티브 스피너가 좁은 컬럼에서 폭을 밀어내지 않도록 축소 */
.admin-field input[type="number"]{-moz-appearance:textfield; appearance:textfield;}
.admin-field input[type="number"]::-webkit-outer-spin-button,
.admin-field input[type="number"]::-webkit-inner-spin-button{margin-left:2px;}

/* ---------- 배너 / 버튼 ---------- */
.admin-field-checkbox{margin-bottom:18px;}
.admin-field-checkbox label{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text); cursor:pointer; user-select:none;
}
.admin-field-checkbox input{width:16px; height:16px; cursor:pointer; accent-color:var(--ink);}

.admin-form-actions{display:flex; gap:10px;}
.admin-form-actions .admin-submit-btn{flex:1;}
.admin-cancel-btn{
  flex:none; width:52px; height:52px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; background:var(--glass-bg-soft); color:var(--text-secondary);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  cursor:pointer; transition:background .12s ease;
}
.admin-cancel-btn svg{width:17px; height:17px;}
.admin-cancel-btn:hover{background:var(--glass-bg-strong);}

.dossier-edit-btn{
  width:44px; height:44px; padding:0; border-radius:0; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--text);
  cursor:pointer; transition:opacity .12s ease, transform .12s ease;
}
.dossier-edit-btn svg{width:19px; height:19px;}
.dossier-edit-btn:hover{opacity:.65;}
.dossier-edit-btn:active{transform:scale(.9);}

.admin-banner{
  font-size:12.5px; padding:12px 14px; border-top:none;
  background:var(--glass-bg-soft); border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  color:var(--text-secondary);
  white-space:pre-line;
}
.admin-banner.success{color:var(--text); border-color:var(--glass-border);}
.admin-banner.error{color:var(--text-secondary);}

.admin-submit-btn{
  padding:15px; border-radius:var(--radius-pill); border:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--glass-bg-strong); color:var(--text);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-border);
  cursor:pointer; transition:opacity .12s ease, background .12s ease;
  margin-top:6px;
}
.admin-submit-btn svg{width:18px; height:18px;}
.admin-submit-btn-label{font-size:13.5px; font-weight:700; letter-spacing:.01em;}
.admin-submit-btn:hover{opacity:.88; background:var(--glass-bg-strong);}

/* ---------- 상품 등록 탭 전용: "등록/수정 저장" 버튼을 플랫 아이콘 버튼으로 ---------- */
#adminForm .admin-form-actions{justify-content:center;}
#adminForm .admin-submit-btn{
  flex:none; width:52px; height:52px; padding:0; gap:0; margin-top:0;
  border-radius:50%;
  background:var(--glass-bg-soft); color:var(--text-secondary);
  box-shadow:none;
}
#adminForm .admin-submit-btn:hover{background:var(--glass-bg-strong); opacity:1;}
#adminForm .admin-submit-btn svg{width:18px; height:18px;}
#adminForm .admin-submit-btn-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- 상품 등록/수정 입력 필드 (우측 상세 화면, 관리자 전용) ----------
   버튼(등록/수정 저장 · 취소)도 이 안(최하단 #adminForm)에 함께 있습니다. */
.admin-fields{display:flex; flex-direction:column; gap:22px;}
.admin-fields[hidden]{display:none;}
.admin-fields-title{
  font-size:15px; font-weight:700; color:var(--text); margin:0 0 4px;
  text-transform:uppercase; letter-spacing:.12em;
  padding-bottom:16px; border-bottom:1px solid var(--glass-border-soft);
}
.admin-fields #adminForm{
  padding-top:22px; border-top:1px solid var(--glass-border-soft);
}

/* =========================================================
   CENTER — flat SNS-style feed
   ========================================================= */
.stacks{padding:0 0 60px; min-width:0; border-right:none; display:flex; flex-direction:column;}

/* ---------- 브랜드 로고 (정중앙 배치) ---------- */
.ig-profile-logo-only{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:28px;
  padding:40px 24px;
  margin:12px 12px 14px;
  border:none;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
}
/* PC: 로고 헤더 하단 여백을 줄여 아래 프로필/콘텐츠가 더 위에 오도록 */
@media (min-width:961px){
  .ig-profile-logo-only{
    padding:32px 24px 16px;
    margin:8px 12px 4px;
  }
}

/* display:flex 선언이 브라우저 기본 [hidden] 규칙(display:none)보다
   우선순위가 높아 JS의 .hidden = true 가 무시되는 문제를 방지합니다. */
.ig-profile-logo-only[hidden]{
  display:none;
}
.ig-profile-logo-only > *{
  position:relative; z-index:1;
}
.ig-brand-logo-wrap{
  position:relative; display:inline-block; width:80px; height:80px; flex:none;
}
.ig-brand-logo{
  width:80px; height:80px; object-fit:contain;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  filter:invert(1);
}
.ig-brand-logo-base,
.ig-brand-logo-hover{
  position:absolute; top:0; left:0;
}
.ig-brand-logo-base{
  opacity:1; transform:scale(1);
}
.ig-brand-logo-hover{
  opacity:0; transform:scale(.92);
}
.ig-brand-logo-wrap:hover .ig-brand-logo-base{
  opacity:0; transform:scale(1.08);
}
.ig-brand-logo-wrap:hover .ig-brand-logo-hover{
  opacity:1; transform:scale(1);
}
.ig-brand-logo-side{
  width:44px; height:44px; object-fit:contain; flex:none;
  animation:sideLogoSpin 12s linear infinite;
  filter:invert(1);
}
@keyframes sideLogoSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@media (prefers-reduced-motion: reduce){
  .ig-brand-logo-side{animation:none;}
}
/* =========================================================
   브랜드 인트로 애니메이션 — 카테고리를 선택하기 전, 상품 그리드
   자리에 노출되는 패셔너블한 로고/브랜드명 연출.
   메뉴에서 카테고리를 고르면 사라지고 상품 그리드가 나타납니다.
   ========================================================= */
.brand-intro{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:min(62vh, 560px);
  padding:24px 24px 48px;
  overflow:hidden;
  isolation:isolate;
}
.brand-intro[hidden]{display:none;}

/* PC 화면에서는 좌측 레일의 프로필 아이콘 정도의 높이에서 로고가
   시작되도록, 기존보다 훨씬 아래로 내립니다(레일 아이콘과 시각적
   수평선을 맞추기 위함). 단, 프로필 아이콘과 정확히 같은 높이에서
   시작하면 너무 낮아 보여, 그보다 조금 더 위에서 시작하도록
   padding-top을 살짝 줄여둡니다. */
@media (min-width:961px){
  .brand-intro{
    min-height:min(84vh, 760px);
    padding-top:24vh;
  }
}

.brand-intro-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:2px;
}

/* ---------- 로고 마크 애니메이션 ----------
   만화경(kaleidoscope) 링으로 S·T·U·D·I·O·F·E·M·B·O·Y 글자를
   Fake 3D 회전시키고, 중심 빈 공간에 로고 마크를 fly-in → float
   으로 등장시킵니다. */
.brand-logo-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-logo-wrap{
  position:relative;
  z-index:1;
  width:clamp(180px, 30vw, 264px);
  color:var(--text);
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.3));
}

.brand-logo-svg{width:100%; height:auto; display:block; overflow:visible; transform-style:preserve-3d;}

/* ---------- 만화경 중심 로고 마크 — fly-in → float ----------
   만화경 링 안쪽 빈 공간에 로고 마크를 올려, 등장 후 부드럽게 부유합니다. */
.brand-center-logo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}
.brand-center-logo-img{
  width:clamp(52px, 12vw, 78px);
  height:auto;
  object-fit:contain;
  filter:invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.35));
  opacity:0;
  transform:translateY(28px) scale(.72);
  animation:
    brandCenterLogoFlyIn 1.1s cubic-bezier(.16,1,.3,1) 0.6s forwards,
    brandCenterLogoFloat 4.2s ease-in-out 1.8s infinite;
}
@keyframes brandCenterLogoFlyIn{
  0%{opacity:0; transform:translateY(28px) scale(.72);}
  70%{opacity:1; transform:translateY(-4px) scale(1.04);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes brandCenterLogoFloat{
  0%, 100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-7px) scale(1.02);}
}
@media (prefers-reduced-motion: reduce){
  .brand-center-logo-img{
    animation:none !important;
    opacity:1;
    transform:none;
  }
}

/* ---------- 만화경(kaleidoscope) 배경 레이어 — Fake 3D ----------
   "STUDIO FEMBOY" 글귀를 11.25°~78.75° 사이 여러 각도로 복제해 겹쳐두고,
   링(ring)마다 서로 다른 회전 방향·속도로 무한 회전시킵니다. 여기에
   각 요소 자신의 transform 안에 perspective()를 함께 넣어(가짜 3D),
   평평한 Z축 회전만이 아니라 rotateX/rotateY 로 기울었다 펴지고
   translateZ 로 앞뒤로 출렁이는 입체적인 움직임을 더했습니다. 링마다
   방향·주기·기울기 폭을 다르게 줘 서로 다른 리듬으로 출렁이며 도는
   레이어드 입체감을 만듭니다. 예전 점선 하나 자리에 S·T·U·D·I·O·F·E·M·B·O·Y
   글자 하나씩을 크게 배치해, 점선이 글자로 바뀐 느낌을 줍니다.
   색은 더하지 않고 불투명도·크기·회전만으로 표현해 브랜드의 흑백 톤을
   그대로 유지합니다. */
.logo-kaleido{
  color:var(--text);
  mix-blend-mode:screen;
  transform-style:preserve-3d;
}
.logo-kaleido use{
  fill:currentColor;
  stroke:none;
}
.kaleido-spin{
  transform-box:view-box;
  transform-origin:100px 100px;
  opacity:0;
  animation-name:logoKaleidoIn;
  animation-duration:1.4s;
  animation-timing-function:ease-out;
  animation-fill-mode:forwards;
}
.kaleido-ring-a{
  animation-name:logoKaleidoIn, kaleidoFake3DA;
  animation-duration:1.4s, 13s;
  animation-timing-function:ease-out, ease-in-out;
  animation-delay:1.7s, 1.7s;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, both;
  --s:1.0;
  --ring-opacity:.55;
}
.kaleido-ring-b{
  animation-name:logoKaleidoIn, kaleidoFake3DB;
  animation-duration:1.4s, 17s;
  animation-timing-function:ease-out, ease-in-out;
  animation-delay:1.9s, 1.9s;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, both;
  --s:1.35;
  --ring-opacity:.38;
}
.kaleido-ring-c{
  animation-name:logoKaleidoIn, kaleidoFake3DC;
  animation-duration:1.4s, 23s;
  animation-timing-function:ease-out, ease-in-out;
  animation-delay:2.1s, 2.1s;
  animation-iteration-count:1, infinite;
  animation-fill-mode:forwards, both;
  --s:1.7;
  --ring-opacity:.25;
}
@keyframes logoKaleidoIn{
  0%{opacity:0;}
  100%{opacity:var(--ring-opacity, 1);}
}
/* 링 A: 시계 방향, 완만한 기울기로 빠르게 회전 */
@keyframes kaleidoFake3DA{
  0%{  transform:perspective(640px) scale(var(--s,1)) rotateZ(0deg)   rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
  20%{ transform:perspective(640px) scale(var(--s,1)) rotateZ(72deg)  rotateX(20deg)  rotateY(-16deg) translateZ(26px);}
  40%{ transform:perspective(640px) scale(var(--s,1)) rotateZ(144deg) rotateX(-14deg) rotateY(18deg)  translateZ(-16px);}
  60%{ transform:perspective(640px) scale(var(--s,1)) rotateZ(216deg) rotateX(16deg)  rotateY(-20deg) translateZ(20px);}
  80%{ transform:perspective(640px) scale(var(--s,1)) rotateZ(288deg) rotateX(-18deg) rotateY(14deg)  translateZ(-12px);}
  100%{transform:perspective(640px) scale(var(--s,1)) rotateZ(360deg) rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
}
/* 링 B: 반시계 방향, 더 큰 폭으로 출렁이며 회전 */
@keyframes kaleidoFake3DB{
  0%{  transform:perspective(700px) scale(var(--s,1)) rotateZ(0deg)    rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
  25%{ transform:perspective(700px) scale(var(--s,1)) rotateZ(-90deg)  rotateX(-26deg) rotateY(24deg)  translateZ(-30px);}
  50%{ transform:perspective(700px) scale(var(--s,1)) rotateZ(-180deg) rotateX(22deg)  rotateY(-28deg) translateZ(34px);}
  75%{ transform:perspective(700px) scale(var(--s,1)) rotateZ(-270deg) rotateX(-24deg) rotateY(26deg)  translateZ(-26px);}
  100%{transform:perspective(700px) scale(var(--s,1)) rotateZ(-360deg) rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
}
/* 링 C: 시계 방향, 가장 느리고 가장 큰 진폭으로 묵직하게 출렁임 */
@keyframes kaleidoFake3DC{
  0%{  transform:perspective(780px) scale(var(--s,1)) rotateZ(0deg)   rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
  16.6%{transform:perspective(780px) scale(var(--s,1)) rotateZ(60deg) rotateX(30deg)  rotateY(-24deg) translateZ(40px);}
  33.3%{transform:perspective(780px) scale(var(--s,1)) rotateZ(120deg) rotateX(-20deg) rotateY(30deg) translateZ(-30px);}
  50%{ transform:perspective(780px) scale(var(--s,1)) rotateZ(180deg) rotateX(26deg)  rotateY(-30deg) translateZ(36px);}
  66.6%{transform:perspective(780px) scale(var(--s,1)) rotateZ(240deg) rotateX(-28deg) rotateY(22deg) translateZ(-34px);}
  83.3%{transform:perspective(780px) scale(var(--s,1)) rotateZ(300deg) rotateX(18deg) rotateY(-20deg) translateZ(24px);}
  100%{transform:perspective(780px) scale(var(--s,1)) rotateZ(360deg) rotateX(0deg)   rotateY(0deg)   translateZ(0px);}
}

@media (prefers-reduced-motion: reduce){
  .kaleido-spin{animation:logoKaleidoIn 1.4s ease-out forwards !important;}
  .kaleido-ring-a,
  .kaleido-ring-b,
  .kaleido-ring-c{
    animation:logoKaleidoIn 1.4s ease-out forwards !important;
    transform:scale(var(--s,1)) !important;
  }
}

@media (max-width:960px){
  .brand-intro{
    min-height:min(68vh, 560px);
    padding:40px 20px 56px;
  }
  .brand-logo-wrap{
    width:clamp(200px, 52vw, 280px);
  }
  .brand-center-logo-img{
    width:clamp(56px, 15vw, 74px);
  }
}
@media (max-width:600px){
  .brand-intro{
    min-height:min(66vh, 540px);
    padding:44px 18px 60px;
  }
}

.stacks-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px;
  padding:14px 24px;
  position:relative;
  z-index:50;
}
.stacks-head[hidden]{display:none;}

/* 상세 설명 프레임(인라인 뷰어)이 열려 있는 동안에도 브랜드 태그는
   계속 보이고 클릭할 수 있어야 합니다(브랜드를 눌러 다른 상품을
   바로 리스트업할 수 있게 하기 위함). 아래 규칙으로 그 의도를
   명확히 고정합니다. */
.brand-tags-wrap[hidden]{display:flex !important;}

/* ---------- 브랜드 태그 (가로 스크롤) ---------- */
.brand-tags-wrap{
  flex:1;
  min-width:0;
  position:relative;
  display:flex;
  align-items:center;
}
.brand-tags-arrow{
  display:none;
  align-items:center; justify-content:center;
  flex:none;
  width:22px; height:22px;
  padding:0; margin:0;
  border:1px solid var(--glass-border-soft);
  border-radius:50%;
  background:rgba(12,12,12,.9);
  color:var(--text-secondary);
  cursor:pointer;
  opacity:0;
  transition:opacity .16s ease, color .16s ease, background-color .16s ease;
  pointer-events:none;
  position:relative;
  z-index:2;
}
.brand-tags-arrow.is-hidden{opacity:0 !important; pointer-events:none !important;}
.brand-tags-arrow-prev{margin-right:4px;}
.brand-tags-arrow-next{margin-left:4px;}
.brand-tags-arrow:hover{color:var(--text); background:var(--glass-bg-soft);}
@media (hover:hover) and (pointer:fine){
  .brand-tags-wrap.has-overflow .brand-tags-arrow{display:inline-flex;}
  .brand-tags-wrap.has-overflow:hover .brand-tags-arrow:not(.is-hidden){
    opacity:1;
    pointer-events:auto;
  }
}
.brand-tags{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-behavior:smooth;
  padding:2px 4px;
  touch-action:pan-x;
  cursor:grab;
  user-select:none;
  flex:1;
  min-width:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 16px), transparent 100%);
}
.brand-tags.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}
.brand-tags::-webkit-scrollbar{display:none;}
.brand-tag{
  flex:none;
  padding:6px 8px;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--text-faint);
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:color .16s ease;
}
.brand-tag:hover{
  color:var(--text-secondary);
}
.brand-tag.is-active{
  color:var(--text);
}

/* ---------- 정렬 필터 아이콘 (톤: flat / minimal / 흑백) ---------- */
.sort-filter{
  position:relative;
  flex:none;
  margin-left:0;
}
.sort-filter-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  padding:0; margin:0;
  background:transparent;
  border:none;
  border-radius:50%;
  color:var(--text-secondary);
  cursor:pointer;
  transition:color .18s ease, transform .18s cubic-bezier(.22,1,.36,1), background-color .18s ease;
}
.sort-filter-btn:hover{
  color:var(--text);
  background:var(--glass-bg-soft);
}
.sort-filter-btn:active{
  transform:scale(.92);
}
.sort-filter-btn[aria-expanded="true"]{
  color:var(--text);
}
.sort-filter-btn svg{
  display:block;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.sort-filter-btn:hover svg{transform:translateY(-1px);}
.sort-filter-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:132px;
  padding:6px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(12,12,12,.98);
  border:1px solid var(--glass-border-soft);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  z-index:500;
}
.sort-filter-menu[hidden]{display:none;}
.sort-filter-option{
  display:block; width:100%;
  padding:9px 12px;
  border:none; border-radius:8px;
  background:transparent;
  color:var(--text-secondary);
  font-family:inherit; font-size:12px; font-weight:400;
  text-align:left; cursor:pointer;
  transition:background-color .14s ease, color .14s ease;
}
.sort-filter-option:hover{
  background:var(--glass-bg-soft);
  color:var(--text);
}
.sort-filter-option.is-active{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.stacks-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding:12px 24px 24px;
}
#productGrid[hidden]{display:none;}

.stacks-grid-wrap{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
/* display:flex 선언이 브라우저 기본 [hidden] 규칙(display:none)보다
   우선 적용되는 문제를 막기 위해 명시적으로 덮어씁니다.
   (이게 빠져 있어서 프로필/관리자 탭에서 hidden 처리해도
   flex:1 박스가 그대로 높이를 차지해 프로필 카드가 아래로 밀려났습니다.) */
.stacks-grid-wrap[hidden]{
  display:none;
}
.stacks-grid-wrap > .stacks-grid{
  position:relative;
  z-index:1;
}


/* ---------- 페이지/뷰 전환 애니메이션 ---------- */
@keyframes viewEnter{
  0%{opacity:0; transform:translateY(18px) scale(.985); filter:blur(5px);}
  55%{opacity:1; filter:blur(0);}
  100%{opacity:1; transform:none; filter:none;}
}
@keyframes cardEnter{
  0%{opacity:0; transform:translateY(14px) scale(.96);}
  100%{opacity:1; transform:none;}
}
@keyframes dossierEnter{
  0%{opacity:0; transform:translateX(12px);}
  100%{opacity:1; transform:none;}
}
.view-enter{
  animation:viewEnter .58s cubic-bezier(.16,1,.3,1) both;
}
.card-enter{
  animation:cardEnter .48s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(var(--ci, 0) * 0.045s);
}
.dossier-enter{
  animation:dossierEnter .45s cubic-bezier(.16,1,.3,1) both;
}
@media (prefers-reduced-motion: reduce){
  .view-enter,
  .card-enter,
  .dossier-enter{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

.card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  box-shadow:var(--glass-shadow);
  cursor:pointer;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--glass-border);
  box-shadow:var(--glass-shadow-lg);
}
.card.selected::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--glass-radius-sm);
  box-shadow: inset 0 0 0 2px var(--text);
}

.card-media{
  aspect-ratio:1/1; background:transparent;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.card-media img{width:100%; height:100%; object-fit:cover;}

.card.is-sold .card-media{background:transparent;}
.card.is-sold .card-media img:not(.card-sold-badge){opacity:.2; filter:brightness(.6) saturate(.7);}

.card-sold-badge-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  z-index:2;
}
.card-sold-badge-wrap .card-sold-badge{
  width:80%; height:80%; object-fit:contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 -1px 0 rgba(255,255,255,.4))
    drop-shadow(0 2px 3px rgba(0,0,0,.5))
    drop-shadow(0 6px 12px rgba(0,0,0,.45));
  pointer-events:none;
}

.stamp{
  position:absolute; top:8px; right:8px;
  min-width:20px; height:20px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700;
  background:transparent;
}

/* subtext overlay — flat, centered, brand + price only */
.card-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 8px 10px;
  text-align:center;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.92) 0%, rgba(var(--scrim-rgb),0) 100%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  opacity:1;
  transition:opacity .2s ease;
}
.card-brand{
  font-size:10px; letter-spacing:.06em;
  color:var(--text-secondary); text-transform:uppercase; font-weight:600;
}
.card-price{font-size:13px; color:var(--text); font-weight:700;}

/* 품절 상품 호버 안내 — 썸네일 하단에 "SOLD OUT" 문구가 떠오르며 등장 */
.card.is-sold:hover .card-overlay{opacity:0;}

.card-sold-hover{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:18px 8px 14px;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.92) 0%, rgba(var(--scrim-rgb),0) 100%);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.card.is-sold:hover .card-sold-hover{
  opacity:1;
  transform:translateY(0);
}
.card-sold-hover-label{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.18em;
  color:var(--text);
}
.card-sold-hover-label::before,
.card-sold-hover-label::after{
  content:""; width:0; height:1px; background:var(--text-faint);
  transition:width .3s ease .08s;
}
.card.is-sold:hover .card-sold-hover-label::before,
.card.is-sold:hover .card-sold-hover-label::after{
  width:14px;
}
@media (prefers-reduced-motion: reduce){
  .card-overlay, .card-sold-hover, .card-sold-hover-label::before, .card-sold-hover-label::after{
    transition:none;
  }
}
/* 터치 기기: hover가 불안정하므로 배지는 항상 은은하게 노출 */
@media (hover:none){
  .card-sold-hover{opacity:1; transform:none;}
  .card.is-sold .card-overlay{opacity:0;}
}

.empty-state{
  grid-column:1/-1; padding:60px 20px; text-align:center; color:var(--text-faint);
  font-size:13px;
}

/* =========================================================
   RIGHT — flat dossier (detail + purchase)
   ========================================================= */
.dossier{
  display:none;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
  width:380px;
  min-height:0; overflow-y:auto;
  position:fixed; top:12px; right:max(4px, calc((100vw - 1376px) / 2));
  z-index:1000;
  padding:232px 24px 40px;
  margin:0;
  border-radius:var(--glass-radius);
  height:calc(100vh - 24px);
  pointer-events:none;
}
#app.has-dossier .dossier{display:block;}
.dossier > *{pointer-events:auto;}
.dossier-sheet-toggle{display:none;}
.dossier-empty{
  height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--text-faint); font-size:13px; text-align:center; padding:0 30px;
}
/* 프로필 화면용 안내 문구: 세로 중앙 정렬 대신, 가운데(중앙) 컬럼의
   콘텐츠가 시작되는 행(row)에 맞춰 상단 정렬합니다. */
.dossier-empty-profile{
  align-items:flex-start; justify-content:center;
}

/* =========================================================
   INLINE VIEWER — 메인 페이지 내부에서 확대되는 이미지 슬라이드
   (팝업/오버레이가 아니라 그리드 자리를 대신 차지하는 형태)
   ========================================================= */
.inline-viewer{padding:12px 24px 30px; min-width:0;}
.inline-viewer-back{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border:none; background:transparent; color:var(--text-secondary);
  cursor:pointer; padding:0; border-radius:var(--radius-pill);
  transition:color .12s ease, background .12s ease;
}
.inline-viewer-back[hidden]{display:none;}
.inline-viewer-back:hover{color:var(--text); background:var(--glass-bg-soft);}

.inline-viewer-slide{
  display:flex; align-items:center; gap:10px; width:100%; min-width:0;
}
.inline-viewer-stage{
  position:relative; flex:1 1 auto; min-width:0; aspect-ratio:4/5; max-height:78vh;
  background:var(--glass-bg-soft); overflow:hidden;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius);
  display:flex; align-items:center; justify-content:center;
}
.inline-viewer-img{
  width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
  animation:inlineViewerIn .22s ease;
}
.inline-viewer-stage.show-original .inline-viewer-img{object-fit:contain;}
.inline-viewer-stage.is-sold .inline-viewer-img{opacity:.2; filter:brightness(.6) saturate(.7);}
.inline-viewer-sold-badge-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  z-index:5;
}
.inline-viewer-sold-badge-wrap[hidden]{display:none;}
.inline-viewer-sold-badge{
  width:80%; height:80%; object-fit:contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 -1px 0 rgba(255,255,255,.4))
    drop-shadow(0 2px 3px rgba(0,0,0,.5))
    drop-shadow(0 6px 12px rgba(0,0,0,.45));
  pointer-events:none;
}
.inline-viewer-fit-toggle{
  position:absolute; top:14px; right:14px; z-index:7;
  width:34px; height:34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:0; outline:0;
  background:transparent; color:#fff;
  font-size:23px; font-weight:300; line-height:1; cursor:pointer;
  box-shadow:none; -webkit-tap-highlight-color:transparent;
}
.inline-viewer-fit-toggle:active{transform:scale(.94);}
@keyframes inlineViewerIn{
  0%{opacity:0; transform:scale(.97);}
  100%{opacity:1; transform:scale(1);}
}
.inline-viewer-nav{
  position:static; flex:0 0 auto;
  width:38px; height:38px; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  border:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  font-size:20px; cursor:pointer; line-height:1;
  text-shadow:none;
  transition:opacity .12s ease, color .12s ease;
}
.inline-viewer-nav:hover{background:transparent; color:var(--text); opacity:.6;}

.inline-viewer-thumbs{
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:14px 2px 4px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  cursor:grab;
  touch-action:pan-x;
}
.inline-viewer-thumbs.is-dragging{cursor:grabbing; scroll-behavior:auto;}
.inline-viewer-thumbs::-webkit-scrollbar{display:none;}
.inline-viewer-thumb{
  flex:0 0 auto; width:104px; height:104px; padding:0;
  position:relative;
  border-radius:10px; overflow:hidden;
  background:var(--glass-bg-soft);
  border:1.5px solid transparent;
  cursor:pointer; opacity:.55;
  transition:opacity .15s ease, border-color .15s ease;
}
.inline-viewer-thumb img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none;}
.inline-viewer-thumb:hover{opacity:.85;}
.inline-viewer-thumb.active{opacity:1; border-color:var(--ink);}
.inline-viewer-thumb.is-sold .inline-viewer-thumb-img{
  opacity:.2;
  filter:brightness(.6) saturate(.7);
}
.inline-viewer-thumb-sold-badge-wrap{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:transparent;
  pointer-events:none; z-index:2;
}
.inline-viewer-thumb .inline-viewer-thumb-sold-badge{
  width:80%; height:80%; object-fit:contain;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 -1px 0 rgba(255,255,255,.4))
    drop-shadow(0 2px 3px rgba(0,0,0,.5))
    drop-shadow(0 4px 8px rgba(0,0,0,.45));
  pointer-events:none;
}

/* ---------- 썸네일 목록 하단 커스텀 스크롤바 ----------
   .inline-viewer-thumbs는 브라우저 기본 스크롤바를 숨겨두고 있어
   (scrollbar-width:none) 이미지가 몇 장 더 있는지, 지금 어디쯤을
   보고 있는지 시각적으로 알기 어려웠습니다. 아래 트랙/바는 실제
   scrollLeft 비율에 맞춰 JS(updateInlineViewerThumbsScrollbar)가
   폭과 위치를 갱신하는 순수 표시용 UI입니다(드래그 불가, 클릭도
   현재는 처리하지 않음). 썸네일이 컨테이너 폭보다 좁아 스크롤이
   필요 없는 경우에는 hidden 처리됩니다. */
.inline-viewer-thumbs-scrollbar{
  width:100%; height:3px;
  margin:6px 2px 0;
  background:var(--glass-bg-soft);
  border-radius:var(--radius-pill);
  overflow:hidden;
  position:relative;
}
.inline-viewer-thumbs-scrollbar[hidden]{display:none;}
.inline-viewer-thumbs-scrollbar-thumb{
  position:absolute; top:0; left:0; height:100%;
  min-width:24px;
  background:var(--ink);
  opacity:.45;
  border-radius:var(--radius-pill);
  transition:opacity .15s ease;
}
.inline-viewer-thumbs-scrollbar:hover .inline-viewer-thumbs-scrollbar-thumb{opacity:.7;}

/* ---------- 거래정보 주의사항 슬라이더 (상품 상세 이미지 상단) ----------
   짧은 문구 6개가 세로로 슬라이드되며 순환 노출됩니다. 박스/배경/아이콘
   없이 텍스트만 화면 가운데 정렬로 노출합니다.
   - width:100%(fit-content 아님)로 고정해야 .trade-notice-track이
     실제 폭을 가집니다. fit-content였을 때는 트랙이 0폭으로 계산되어
     문구가 화면에 보이지 않는 문제가 있었습니다.
   - z-index: PC에서 .dossier(우측 상세/구매 패널, position:fixed,
     z-index:1000)가 화면 폭에 따라 이 영역과 겹칠 수 있어, 그보다 높은
     값으로 지정해 항상 위에 보이도록 합니다. */
.trade-notice-slider{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  margin:0 auto 10px;
  position:relative;
  z-index:1001;
}
.trade-notice-track{
  position:relative;
  width:100%;
  max-width:100%;
  height:16px;
}
.trade-notice-item{
  position:absolute; left:0; top:0; right:0;
  margin:0;
  font-size:12.5px; line-height:16px;
  color:var(--text-muted, var(--text)); opacity:.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-align:center;
  letter-spacing:-.005em;
  transform:translateY(60%);
  opacity:0;
  transition:transform .46s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  pointer-events:none;
}
.trade-notice-item.is-active{
  transform:translateY(0);
  opacity:.6;
}
.trade-notice-item.is-prev{
  transform:translateY(-60%);
  opacity:0;
}

@media (max-width:960px){
  .inline-viewer-stage{aspect-ratio:1/1; max-height:none;}
  .inline-viewer-slide{gap:6px;}
  .inline-viewer-nav{width:30px; height:30px; font-size:17px;}
  .inline-viewer-thumb{width:88px; height:88px;}
  .trade-notice-slider{margin-bottom:8px;}
}

/* 상품 등록에서 사진마다 입력한 짧은 설명(20자 이내)은
   마우스 호버 여부와 관계없이 확대 이미지 하단에 항상 표시합니다. */
.inline-viewer-hover-desc{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:22px 20px 14px;
  text-align:center;
  font-size:12.5px; color:#fff; letter-spacing:-.005em;
  background:linear-gradient(to top, rgba(var(--scrim-rgb),.85) 0%, rgba(var(--scrim-rgb),0) 100%);
  opacity:1; transform:translateY(0);
  pointer-events:none;
}
.inline-viewer-hover-desc[hidden]{display:none;}

/* ---------- 서브 안내사항 (상품제목 위쪽) — 플랫 ---------- */
.dossier-top-notice{
  width:100%;
  max-width:100%;
  margin:0 0 16px;
}
.dossier-top-notice .checkout-site-notice{
  margin-top:0;
  align-items:flex-start;
  gap:6px;
}
.dossier-top-notice .checkout-site-notice + .checkout-site-notice{
  margin-top:8px;
}
.dossier-top-notice .checkout-site-notice-icon{
  width:14px; height:14px;
}
.dossier-top-notice .checkout-site-notice-icon svg{
  width:13px; height:13px;
}
.dossier-top-notice .checkout-site-notice-text{
  font-size:11.5px;
  line-height:1.4;
  white-space:normal;
  word-break:keep-all;
}
.dossier-top-notice .checkout-site-notice.has-detail{
  border-radius:0;
  margin-left:0; margin-right:0;
  padding:2px 0;
  background-color:transparent;
}
.dossier-top-notice .checkout-site-notice.has-detail:hover,
.dossier-top-notice .checkout-site-notice.has-detail:focus-visible{
  background-color:transparent;
}
.dossier-top-notice .checkout-site-notice.has-detail:hover .checkout-site-notice-text,
.dossier-top-notice .checkout-site-notice.has-detail:focus-visible .checkout-site-notice-text{
  text-decoration:underline;
  text-underline-offset:2px;
}
.dossier-top-notice .checkout-site-notice-chevron{
  width:11px; height:11px;
}

.dossier-name{font-weight:800; font-size:21px; line-height:1.25; margin:0 0 16px; letter-spacing:-.01em; color:var(--text);}

.dossier-price-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0; border:none;
  background:transparent; border-radius:0;
  margin-bottom:18px;
}
.dossier-price{font-size:21px; color:var(--text); font-weight:800;}

.spec-table{
  width:100%; border-collapse:collapse; margin-bottom:20px;
}
.spec-table tr{
  border-bottom:1px solid var(--glass-border-soft);
}
.spec-table tr:first-child{
  border-top:1px solid var(--glass-border-soft);
}
.spec-table th{
  text-align:left; font-size:12px; color:var(--text-faint);
  font-weight:400; padding:10px 12px 10px 0; width:88px; vertical-align:top;
}
.spec-table td{
  padding:10px 0; font-size:13px; color:var(--text); vertical-align:top;
  white-space:pre-line; /* 실측 등 여러 줄로 입력된 값의 줄바꿈을 그대로 표시 */
}

/* ---------- 실측: 여러 줄 값은 한 줄로 접어두고 펼쳐보기로 확인 ---------- */
.spec-measure{
  display:flex; align-items:center; gap:8px; white-space:normal;
}
.spec-measure-text{flex:1 1 auto; min-width:0;}
.spec-measure-preview{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.spec-measure-full{display:none; white-space:pre-line; margin:0;}
.spec-measure[data-expanded="true"] .spec-measure-preview{display:none;}
.spec-measure[data-expanded="true"] .spec-measure-full{display:block;}
.spec-measure[data-expanded="true"]{align-items:flex-start;}
.spec-measure-toggle-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin:0; padding:0; border:none; background:none;
  color:var(--text-faint); cursor:pointer;
}
.spec-measure-toggle-btn:hover{color:var(--text-secondary);}
.spec-measure-toggle-icon{
  width:13px; height:13px; display:block; transition:transform .15s ease;
}
.spec-measure[data-expanded="true"] .spec-measure-toggle-btn{margin-top:1px;}
.spec-measure[data-expanded="true"] .spec-measure-toggle-icon{transform:rotate(180deg);}

/* ---------- 컨디션 별점 표시 (0.5점 단위, --star-size로 크기 조절) ---------- */
.spec-star{
  position:relative; display:inline-block;
  width:var(--star-size, 14px); height:var(--star-size, 14px);
  font-size:var(--star-size, 14px); line-height:var(--star-size, 14px);
}
.spec-star-bg{
  position:absolute; inset:0;
  background-color:var(--border);
  -webkit-mask-image:url(assets/petal-icon-flat.svg);
  mask-image:url(assets/petal-icon-flat.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.spec-star-fg{
  position:absolute; left:0; top:0;
  width:0%; height:var(--star-size, 14px); overflow:hidden; white-space:nowrap;
  background-color:#ffffff; opacity:1;
  -webkit-mask-image:url(assets/petal-icon-flat.svg);
  mask-image:url(assets/petal-icon-flat.svg);
  -webkit-mask-size:var(--star-size, 14px) var(--star-size, 14px); mask-size:var(--star-size, 14px) var(--star-size, 14px);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
}
.spec-star-value{
  margin-left:4px; font-size:12px; font-weight:600; color:#ffffff; vertical-align:middle;
}

.dossier-desc{font-size:13.5px; color:var(--text-secondary); line-height:1.65; margin-bottom:22px; white-space:pre-line;}

.buy-btn{
  width:44px; height:44px; padding:0; border-radius:0; border:none; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text);
  cursor:pointer; transition:opacity .12s ease, transform .12s ease;
}
.buy-btn svg{width:21px; height:21px;}
.buy-btn:hover{opacity:.65; transform:translateY(-1px);}
.buy-btn:active{transform:scale(.9);}
.buy-btn:disabled{color:var(--text-faint); cursor:not-allowed; transform:none;}
.buy-btn:disabled:hover{opacity:1;}

/* =========================================================
   모델 정보 카드 — 이미지 상단 좌측, 클릭해서 접고/펼치기
   ========================================================= */
.model-info-card{
  position:absolute; top:14px; left:14px; z-index:5;
  max-width:calc(100% - 28px);
}
.model-info-toggle{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0;
  border:0; outline:0; border-radius:50%;
  background:transparent; cursor:pointer;
  color:#fff;
  filter:none; box-shadow:none; text-shadow:none;
  transition:opacity .12s ease, transform .12s ease;
}
.model-info-toggle:hover{opacity:.72;}
.model-info-toggle:active{transform:scale(.9);}
.model-info-card.open .model-info-toggle{opacity:.72;}

.model-info-detail{
  margin-top:6px;
  min-width:148px;
  padding:4px 12px; display:none; flex-direction:column; gap:0;
  background:#000;
  border:1px solid rgba(255,255,255,.28);
  border-radius:6px;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.model-info-card.open .model-info-detail{
  display:flex;
  animation:modelInfoIn .18s ease;
}
@keyframes modelInfoIn{
  0%{opacity:0; transform:translateY(-4px);}
  100%{opacity:1; transform:translateY(0);}
}
.model-info-row{
  display:flex; align-items:baseline; gap:18px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.12);
  font-size:12px; white-space:nowrap;
}
.model-info-row:last-child{border-bottom:none;}
.model-info-key{
  color:rgba(255,255,255,.58); font-weight:400; min-width:26px;
}
.model-info-val{
  color:#fff; font-weight:600; letter-spacing:.01em;
  margin-left:auto; padding-left:8px;
}

.dossier-close{display:none;}
.dossier-scrim{display:none;}

/* =========================================================
   구매 동의서 모달 — flat / minimal / rough
   ========================================================= */
.agreement-scrim{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.agreement-scrim[hidden]{display:none;}

.agreement-modal{
  width:min(360px, 100%);
  height:min(300px, 56vh);
  display:flex; flex-direction:column;
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius-sm);
  box-shadow:var(--glass-shadow-lg);
  overflow:hidden;
}

.agreement-body{
  overflow:hidden; padding:6px 6px 0; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

.agreement-slides{
  overflow:hidden; flex:1 1 auto; min-height:0; position:relative;
}
.agreement-track{
  display:flex; width:calc(var(--agreement-steps, 6) * 100%); height:100%;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.agreement-step{
  width:calc(100% / var(--agreement-steps, 6)); flex-shrink:0; overflow-y:auto;
  padding:2px 10px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  text-align:center;
  position:relative; isolation:isolate;
}
.agreement-step::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("assets/studio-femboy-logo-uploaded.png");
  background-size:70% auto;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(0) invert(1);
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
.agreement-step h3{
  margin:0; font-size:13px; font-weight:800; color:#fff;
  letter-spacing:-.005em;
  position:relative; z-index:1;
  text-shadow:0 1px 2px #000;
}
.agreement-step-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:2px;
}
.agreement-step-icon svg{width:26px; height:26px; color:var(--text);}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.agreement-step p{
  margin:0; font-size:12px; line-height:1.6; color:rgba(255,255,255,.86);
  position:relative; z-index:1;
  text-shadow:0 1px 2px #000;
}

.agreement-footer{
  flex-shrink:0; padding:2px 14px 10px;
  background:transparent;
}
.agreement-modal-title{
  display:block;
  margin:0 0 4px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  text-align:center;
  text-shadow:0 1px 2px #000;
}
.agreement-progress{
  margin:0 0 6px; font-size:11px; color:rgba(255,255,255,.68); font-weight:700;
  letter-spacing:.03em; text-align:center; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px #000;
}

#agreementScrim .agreement-modal,
#withdrawScrim .agreement-modal,
#refundAccountScrim .agreement-modal,
#delayReasonScrim .agreement-modal,
#checkoutSignScrim .agreement-modal{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:none;
  box-shadow:none;
}
#agreementScrim .agreement-step::before,
#withdrawScrim .agreement-step::before,
#refundAccountScrim .agreement-step::before,
#delayReasonScrim .agreement-step::before,
#checkoutSignScrim .agreement-step::before{content:none;}
#agreementScrim .agreement-step-icon svg,
#withdrawScrim .agreement-step-icon svg,
#refundAccountScrim .agreement-step-icon svg,
#checkoutSignScrim .agreement-step-icon svg{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.85));
}
#agreementScrim .agreement-step h3,
#withdrawScrim .agreement-step h3,
#refundAccountScrim .agreement-step h3,
#checkoutSignScrim .agreement-step h3{
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
#agreementScrim .agreement-step p,
#withdrawScrim .agreement-step p,
#refundAccountScrim .agreement-step p,
#checkoutSignScrim .agreement-step p{
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
#agreementScrim .agreement-modal-title,
#agreementScrim .agreement-progress,
#withdrawScrim .agreement-modal-title,
#withdrawScrim .agreement-progress,
#refundAccountScrim .agreement-modal-title,
#refundAccountScrim .agreement-progress,
#checkoutSignScrim .agreement-modal-title{
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

.agreement-actions{display:flex; align-items:center; justify-content:center; gap:12px;}

.agreement-cancel-btn{
  width:clamp(34px, 9vw, 38px); height:clamp(34px, 9vw, 38px);
  flex:none; padding:0; border-radius:50%; border:none;
  background:var(--glass-bg-soft); cursor:pointer;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .12s ease;
}
.agreement-cancel-btn:hover{background:var(--glass-bg-strong);}
.agreement-cancel-icon{
  width:38%; height:38%; pointer-events:none;
  background-color:var(--text-secondary);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.agreement-cancel-btn.is-back .agreement-cancel-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.agreement-confirm-btn{
  width:clamp(38px, 10vw, 44px); height:clamp(38px, 10vw, 44px);
  flex:none; padding:0; border-radius:50%; border:none;
  background:rgba(255,255,255,.82); cursor:pointer;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--glass-shadow);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .12s ease, background-color .12s ease;
}
.agreement-confirm-btn:hover:not(:disabled){opacity:.88;}
.agreement-confirm-btn:disabled{
  background:var(--glass-bg-soft); cursor:not-allowed;
}
.agreement-confirm-icon{
  width:40%; height:40%; pointer-events:none;
  background-color:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.agreement-confirm-btn:disabled .agreement-confirm-icon{background-color:var(--text-faint);}
.agreement-confirm-btn.is-last .agreement-confirm-icon{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 11.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1.2 11.2a2 2 0 0 1-2 1.8H9.2a2 2 0 0 1-2-1.8L6 8Z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- 서명 단계 (구매 동의서 마지막 단계) ----------
   매크로/단순 클릭으로 통과하지 못하도록, 사람이 직접 캔버스에
   궤적을 그려야만(최소 이동 거리·시간 기준 충족) 구매 버튼이
   활성화됩니다. 스타일은 동의서 모달의 어두운 글래스 톤에 맞춥니다. */
.agreement-signature-pad-wrap{
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; gap:6px;
  margin-top:2px;
}
.agreement-signature-canvas-box{position:relative; width:100%;}
.agreement-signature-canvas{
  width:100%; height:84px; display:block;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.3);
  border-radius:10px;
  touch-action:none; cursor:crosshair;
}
.agreement-signature-placeholder{
  position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%);
  text-align:center; pointer-events:none;
  font-size:10.5px; line-height:1.4; letter-spacing:-.005em;
  color:rgba(255,255,255,.4);
  text-shadow:0 1px 2px #000;
}
.agreement-signature-placeholder[hidden]{display:none;}
.agreement-signature-pad-actions{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.agreement-signature-hint{
  font-size:9.5px; color:rgba(255,255,255,.5); text-align:left;
  text-shadow:0 1px 2px #000;
}
.agreement-signature-hint.is-ready{color:rgba(255,255,255,.85);}
.agreement-signature-clear{
  flex:none; background:none; border:none; padding:2px 4px;
  font-size:11px; font-weight:700; color:rgba(255,255,255,.65);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.agreement-signature-clear:hover{color:#fff;}

@media (max-width:520px){
  #agreementScrim, #withdrawScrim, #refundAccountScrim, #delayReasonScrim, #checkoutSignScrim{padding:16px; align-items:center;}
  #agreementScrim .agreement-modal,
  #withdrawScrim .agreement-modal,
  #checkoutSignScrim .agreement-modal{
    width:min(340px, 100%); height:min(300px, 56dvh); max-height:56dvh;
    border-radius:18px;
  }
  #refundAccountScrim .agreement-modal,
  #delayReasonScrim .agreement-modal{
    width:min(340px, 100%); height:auto; max-height:80dvh;
    border-radius:18px;
  }
  #agreementScrim .agreement-body,
  #withdrawScrim .agreement-body,
  #checkoutSignScrim .agreement-body{padding:12px 8px 0;}
  #refundAccountScrim .agreement-body,
  #delayReasonScrim .agreement-body{padding:12px 8px 0; overflow-y:auto;}
  #agreementScrim .agreement-step,
  #withdrawScrim .agreement-step,
  #checkoutSignScrim .agreement-step{padding:8px 12px 6px; gap:8px;}
  #refundAccountScrim .agreement-step,
  #delayReasonScrim .agreement-step{padding:8px 12px 6px; gap:8px;}
  #agreementScrim .agreement-footer,
  #withdrawScrim .agreement-footer,
  #checkoutSignScrim .agreement-footer{padding:2px 14px 16px;}
  #refundAccountScrim .agreement-footer,
  #delayReasonScrim .agreement-footer{padding:2px 14px 16px;}
}

/* ---------- 환불 계좌 입력 모달: 폼이 있어 높이가 가변적입니다 ---------- */
#refundAccountScrim .agreement-modal{
  height:auto; max-height:min(480px, 80vh);
}
#refundAccountScrim .agreement-body{overflow-y:auto;}
#refundAccountScrim .agreement-slides{overflow:visible;}
#refundAccountScrim .agreement-track{height:auto;}
#refundAccountScrim .agreement-step{
  width:100%; overflow:visible; padding:2px 10px 8px;
}

/* ---------- 배송 지연 사유 등록 모달: 아이콘/설명 없이 입력창 + 버튼만 두는
   미니멀 레이아웃입니다. 폼이 있어 높이가 가변적입니다. ---------- */
#delayReasonScrim .agreement-modal{
  height:auto; max-height:min(420px, 80vh);
}
#delayReasonScrim .agreement-body{overflow-y:auto;}
#delayReasonScrim .agreement-slides{overflow:visible;}
#delayReasonScrim .agreement-track{height:auto;}
#delayReasonScrim .agreement-step{
  width:100%; overflow:visible; padding:14px 14px 6px;
}
.delay-reason-step{
  align-items:stretch; justify-content:center; text-align:left; gap:0;
}
.delay-reason-fields{
  width:100%; position:relative; z-index:1;
}
.delay-reason-textarea{
  display:block; width:100%; resize:none;
  min-height:60px; max-height:160px; line-height:1.6;
  font-size:13.5px; font-family:inherit; color:var(--text); text-align:left;
  background:transparent; border:none; border-bottom:1px solid var(--glass-border-soft);
  padding:4px 2px 10px; outline:none;
  transition:border-color .15s ease;
}
.delay-reason-textarea::placeholder{color:var(--text-faint);}
.delay-reason-textarea:focus{border-bottom-color:var(--text);}

/* ---------- 회원탈퇴 모달 마지막 단계: 아이디/비밀번호 확인 입력 ---------- */
.withdraw-confirm-fields{
  width:100%; display:flex; flex-direction:column; gap:8px; margin-top:8px;
  position:relative; z-index:1;
}
.withdraw-confirm-input{
  width:100%; font-size:13px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--glass-border-soft); background:var(--glass-bg);
  color:var(--text); font-family:inherit; text-align:left;
}
.withdraw-confirm-input:focus{border-color:var(--glass-border); background:var(--glass-bg-strong);}
.withdraw-confirm-banner{
  width:100%; margin-top:8px; position:relative; z-index:1;
  text-align:center;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:1181px){
  .ig-profile-logo-only{width:576px; align-self:center; flex:none;}
}

@media (min-width:961px) and (max-width:1180px){
  .ig-profile-logo-only{width:576px; align-self:center; flex:none;}
}

@media (min-width:1181px) and (max-width:1359px){
  .dossier{
    width:calc((100vw - 600px) / 2);
    right:0;
    padding-left:clamp(14px, 2vw, 24px);
    padding-right:clamp(14px, 2vw, 24px);
  }
}

/* =========================================================
   전체 메뉴 플라이아웃 (PC: 호버 펼침 / 모바일: 클릭 펼침)
   ========================================================= */
.menu-flyout{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  width:100%;
}
/* 홈 버튼(로고) 클릭으로 카테고리 패널을 닫을 때, 마우스 커서가 여전히
   .menu-flyout 위에 머물러 있어도(=CSS :hover가 계속 유지되어도) 패널이
   다시 펼쳐지지 않도록 강제로 접어두는 상태입니다. 마우스가 실제로
   영역을 벗어나면(mouseleave) 이 클래스는 제거되어 평소의 호버 동작으로
   복귀합니다. */
.menu-flyout.menu-force-closed .mobile-category-panel{
  max-height:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  margin-top:0 !important;
}
.menu-flyout.menu-force-closed .mobile-menu-toggle svg{
  transform:none !important;
  opacity:1 !important;
}
.mobile-menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  margin:0; padding:0; border:none; border-radius:12px;
  background:transparent; color:var(--text); cursor:pointer;
  position:relative; z-index:2;
}
.mobile-menu-toggle svg{
  width:28px; height:28px; display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.mobile-menu-toggle:hover svg{transform:translateY(-3px) scale(1.13) rotate(-3deg);}
.mobile-menu-toggle:active svg{transform:translateY(1px) scale(.9); transition:transform .16s cubic-bezier(.22,1,.36,1);}
.mobile-menu-toggle[aria-expanded="true"] svg{
  transform:rotate(45deg) scale(1.08);
  opacity:.92;
}

/* PC: 카테고리 패널 — 기본 접힘, 호버/포커스 시 아래로 펼침 */
.mobile-category-panel{
  display:block;
  width:100%;
  max-height:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:max-height .42s cubic-bezier(.22,1,.36,1), opacity .32s ease, margin .42s cubic-bezier(.22,1,.36,1);
  margin:0;
}
.mobile-category-icons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  width:100%;
  padding:4px 0 2px;
}
.mobile-category-icons .nav-item{width:52px; height:52px;}
.mobile-category-icons .nav-item svg{width:28px; height:28px;}

/* PC 호버 / 키보드 포커스 / JS open 클래스로 펼침 */
@media (min-width:961px){
  .menu-flyout:hover .mobile-category-panel,
  .menu-flyout:focus-within .mobile-category-panel,
  .menu-flyout.is-open .mobile-category-panel{
    max-height:320px;
    opacity:1;
    pointer-events:auto;
    margin-top:4px;
  }
  .menu-flyout:hover .mobile-menu-toggle svg,
  .menu-flyout:focus-within .mobile-menu-toggle svg,
  .menu-flyout.is-open .mobile-menu-toggle svg{
    transform:rotate(45deg) scale(1.06);
    opacity:.92;
  }
  /* 인라인 categoryNav는 사용하지 않음 */
  #categoryNav{display:none !important;}
}

@media (max-width:960px){
  html{scrollbar-gutter:auto; overflow-y:auto;}
  input, textarea, select{font-size:16px !important;}
  button, a, [role="button"], .nav-item, .notif-bell, .notif-item,
  .notif-item-delete, .notif-panel-readall, .notif-refund-btn,
  .checkbox, .checkbox input, .mobile-menu-toggle{touch-action:manipulation;}
  #app, #app.has-dossier{
    width:100%; grid-template-columns:1fr; align-content:start;
    padding-top:calc(60px + env(safe-area-inset-top));
  }
  .rail{
    position:fixed; top:0; left:0; right:0; z-index:900;
    width:100%; height:calc(60px + env(safe-area-inset-top)); min-height:calc(60px + env(safe-area-inset-top));
    flex-direction:row; align-items:center; justify-content:space-between;
    justify-self:stretch; margin:0; padding:calc(8px + env(safe-area-inset-top)) 10px 8px;
    border-bottom:1px solid transparent; border-radius:0;
    background:rgba(0,0,0,0);
    overflow:visible; gap:0;
    transition:background-color .7s ease, border-color .7s ease;
  }
  .rail.rail-intro-ready{
    border-bottom-color:var(--glass-border-soft);
    background:rgba(0,0,0,.94);
  }
  /* 모바일: 메뉴 플라이아웃은 상단 바 좌측에 배치, 패널은 바 아래로 */
  .menu-flyout{
    flex-direction:row;
    align-items:center;
    width:auto;
    margin-right:auto;
    position:static;
  }
  .mobile-menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none;
    margin:0; padding:0; border:none; border-radius:12px;
    background:transparent; color:var(--text); cursor:pointer;
    position:relative; z-index:2;
  }
  .mobile-menu-toggle svg{
    width:26px; height:26px; display:block;
    transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  }
  .mobile-menu-toggle:hover svg{transform:scale(1.1);}
  .mobile-menu-toggle:active svg{transform:scale(.92); transition:transform .16s cubic-bezier(.22,1,.36,1);}
  .mobile-menu-toggle[aria-expanded="true"] svg{
    transform:rotate(45deg) scale(1.08);
    opacity:.92;
  }

  .rail-nav{
    flex-direction:row; align-items:center; flex:1;
    margin:0; width:auto; gap:2px;
    justify-content:flex-end;
  }
  .rail-nav > #categoryNav{display:none !important;}
  .rail-nav-icons{flex-direction:row; gap:2px; flex:none;}
  .rail-nav-right{
    display:flex;
    opacity:1; transform:translateX(0);
    /* 카테고리 패널이 완전히 사라진 뒤(아래 .mobile-category-panel 기본
       전환이 .18s에 끝남) 살짝의 여유(.02s)를 두고 재등장을 시작해,
       두 아이콘 세트가 같은 자리에서 동시에 겹쳐 보이지 않게 합니다. */
    transition:opacity .18s ease .2s, transform .18s ease .2s;
  }
  /* 메뉴가 펼쳐지면 프로필/알림/관리자/계정 아이콘은 모두 사라지고,
     그 자리(상단 바 우측)로 카테고리 메뉴가 슬라이드 인 됩니다.
     이 아이콘들에는 rail-intro-anim(등장 애니메이션, fill-mode:both)이
     걸려 있어 opacity/transform이 계속 유지되므로, 반드시 !important로
     덮어써야 실제로 사라지고 클릭도 카테고리 메뉴가 받게 됩니다.
     지연 없이 빠르게(.16s) 사라져야, 뒤이어 나타나는 카테고리 패널과
     자리가 겹치지 않습니다. */
  .rail.mobile-menu-open .rail-nav-right,
  .rail.mobile-menu-open .rail-bottom{
    opacity:0 !important;
    transform:translateX(10px) !important;
    pointer-events:none !important;
    transition:opacity .16s ease, transform .16s ease;
  }
  .rail-bottom{
    flex-direction:row; align-items:center; gap:2px; flex:none; margin:0; width:auto;
    order:3;
    opacity:1; transform:translateX(0);
    transition:opacity .18s ease .2s, transform .18s ease .2s;
  }
  .nav-item{width:44px; height:44px;}
  .theme-toggle{margin:0;}
  .stacks{border-right:none;}
  .profile-view{padding-top:40px;}

  /* 펼쳐지는 카테고리 메뉴 — 더 이상 상단 바 아래로 내려오는 드롭다운이
     아니라, 로고 버튼을 누르면 우측의 프로필/알림/관리자/계정 아이콘이
     있던 자리(상단 바 전체 우측 끝)로 카테고리 아이콘들이 곧바로
     슬라이드 인 되는 방식입니다. .rail(position:fixed)을 기준으로
     배치해, rail-nav뿐 아니라 rail-bottom 자리까지 모두 덮습니다. */
  .mobile-category-panel{
    display:flex;
    align-items:center;
    position:absolute;
    top:0; bottom:0; right:10px;
    /* 데스크톱용 기본 규칙(.mobile-category-panel{width:100%})이 그대로
       상속되면, 실제 아이콘은 우측에 몰려 보여도 패널의 히트박스(클릭
       영역)는 상단바 전체 너비를 차지하게 됩니다. 그 결과 패널이 열린
       동안 좌측의 메뉴(로고) 버튼이 이 투명한 패널에 가려져 탭이 버튼에
       도달하지 못하는 문제가 있었습니다. 반드시 내용물 크기(auto)로
       제한해 아이콘이 실제로 차지하는 영역만 클릭을 가로채도록 합니다. */
    width:auto; left:auto;
    z-index:3;
    background:transparent;
    border:none;
    padding:0;
    max-height:none; overflow:visible;
    opacity:0;
    transform:translateX(14px);
    /* 메뉴를 닫을 때(=이 기본 상태로 되돌아갈 때)는 지연 없이 빠르게
       사라져야, 뒤이어 재등장하는 프로필/알림/관리자 아이콘과 같은
       자리에서 시간이 겹치지 않습니다. */
    transition:opacity .16s ease, transform .18s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    margin:0;
  }
  .rail.mobile-menu-open .mobile-category-panel{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
    /* 프로필/알림/관리자 아이콘이 완전히 사라진 뒤(.16s) 여유(.02s)를
       두고 슬라이드 인을 시작합니다. */
    transition:opacity .22s ease .18s, transform .26s cubic-bezier(.22,1,.36,1) .18s;
  }
  .mobile-category-icons{
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
    gap:2px;
    padding:0;
  }
  .mobile-category-icons .nav-item{width:44px; height:44px;}
  .mobile-category-icons .nav-item svg{width:24px; height:24px;}

  /* 모바일: 하단 시트("상세 정보 열기") 제거 — 상세 이미지 아래에 인라인으로 바로 표시 */
  .dossier{
    position:static;
    top:auto; right:auto; bottom:auto; left:auto;
    width:100%; height:auto; min-height:0;
    max-height:none;
    transform:none !important;
    transition:none;
    z-index:auto;
    margin:0;
    border-radius:0;
    padding:8px 18px calc(28px + env(safe-area-inset-bottom));
    background:transparent;
    border:none;
    box-shadow:none;
    pointer-events:auto;
    overflow:visible;
    display:none;
  }
  #app.has-dossier .dossier,
  .dossier.open{
    display:block;
    transform:none !important;
  }
  .dossier-sheet-toggle,
  .dossier-sheet-handle{
    display:none !important;
  }
  .dossier-close{
    display:none; align-items:center; justify-content:center;
    width:32px; height:32px; border:1px solid var(--glass-border); border-radius:50%;
    background:var(--glass-bg-strong);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    color:var(--text-secondary); margin-bottom:14px; font-size:16px;
  }
  .dossier-scrim,
  .dossier-scrim.open{
    display:none !important;
  }
  /* 모바일에서는 "좌측에서 상품을 선택하면 상세 정보가 표시됩니다." 안내 문구 숨김
     (모바일은 좌측 목록/상세가 같은 화면에서 전환되는 구조가 아니라
     상품을 아직 선택하지 않은 빈 dossier 자체가 노출될 일이 없으므로 불필요) */
  .dossier-empty{
    display:none !important;
  }

  /* 프로필 탭(내 거래내역 / 전체 주문 관리)에서는 #dossier가 DOM상
     .profile-view보다 앞에 있어 기본 문서 순서대로면 프로필 카드
     위쪽에 나타납니다. 프로필 화면일 때만 순서를 바꿔 프로필 카드
     "아래"에 오도록 재배치합니다(상품 상세 화면 쪽 배치는 그대로 유지). */
  .view-profile .profile-view{order:1;}
  .view-profile .dossier{order:2;}
  .view-profile .site-footer{order:3;}

  /* 관리자 탭("등록된 상품 관리" 목록에서 상품을 탭해 수정 모드로 들어갈 때)도
     마찬가지로 #dossier가 DOM상 .admin-view보다 앞에 있어 기본 순서대로면
     상품 등록 폼이 관리자 메뉴 "위쪽"에 나타납니다. 목록 "아래"에 오도록
     재배치합니다. */
  .view-admin .admin-view{order:1;}
  .view-admin .dossier{order:2;}
  .view-admin .site-footer{order:3;}
}

@media (max-width:520px){
  .stacks-grid{grid-template-columns:repeat(2,1fr); gap:10px; padding:10px 14px 20px;}
  .inline-viewer{padding:10px 14px 22px;}
  .rail{margin:0; padding-inline:8px;}
  .ig-profile-logo-only{margin:8px 8px 10px;}

  .ig-profile{padding:18px 16px 16px; gap:16px;}
  .ig-avatar{width:64px; height:64px;}
  .ig-username{font-size:14px;}
  .ig-top-row{gap:8px; margin-bottom:10px;}
  .ig-follow-btn, .ig-message-btn{padding:6px 12px; font-size:12px;}
  .ig-stats{gap:14px; margin-bottom:10px;}
  .ig-stat{font-size:12px;}
  .ig-stat strong{font-size:13px;}
  .ig-bio{font-size:12.5px;}
}

@media (prefers-reduced-motion: reduce){
  .nav-item svg{transition:none; animation:none;}
  .nav-item.active svg{animation:none;}
}

/* =========================================================
   푸터
   ========================================================= */
.site-footer{
  margin-top:auto;
  padding:28px 24px 10px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  /* 첫 로드/홈 인트로: 애니메이션 시작 후 페이드 인 */
  opacity:0;
}
.site-footer.site-footer-ready{
  opacity:1;
  transition:opacity .9s ease;
}
.site-footer.site-footer-intro{
  opacity:0;
  animation:siteFooterFadeIn 1s ease .85s forwards;
}
@keyframes siteFooterFadeIn{
  0%{opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .site-footer,
  .site-footer.site-footer-intro{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}
.site-footer-brand{
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-secondary);
}
.site-footer-links{display:flex; align-items:center; gap:8px;}
.site-footer-link{
  border:none; background:transparent; padding:2px 0;
  font-size:11.5px; color:var(--text-faint); cursor:pointer;
  transition:color .12s ease;
}
.site-footer-link:hover{color:var(--text);}
.site-footer-dot{font-size:11.5px; color:var(--text-faint);}
.site-footer-copy{margin:0; font-size:10.5px; color:var(--text-faint); opacity:.7;}

/* ---------- 이용약관 / 개인정보처리방침 모달 ---------- */
.footer-modal-overlay{
  position:fixed; inset:0; z-index:2100;
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.footer-modal-overlay[hidden]{display:none;}
.footer-modal{
  position:relative;
  width:min(440px, 100%);
  max-height:min(560px, 80vh);
  display:flex; flex-direction:column;
  background:#000000;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius-sm);
  box-shadow:var(--glass-shadow-lg);
  padding:28px 24px 24px;
  overflow:hidden;
  isolation:isolate;
}
.footer-modal::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("assets/studio-femboy-logo-uploaded.png");
  background-size:70% auto;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(0) invert(1);
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
.footer-modal-close{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; padding:0; border:none; background:transparent;
  color:#fff; font-size:15px; cursor:pointer;
  z-index:1;
}
.footer-modal-close:hover{color:var(--text);}
.footer-modal-title{
  margin:0 0 16px; padding-right:30px;
  font-size:14px; font-weight:800; letter-spacing:.02em; color:#fff;
  position:relative; z-index:1;
  text-shadow:0 1px 2px #000;
}
.footer-modal-body{
  overflow-y:auto; flex:1 1 auto; min-height:0;
  font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.86);
  display:flex; flex-direction:column; gap:14px;
  position:relative; z-index:1;
  font-weight:500; text-shadow:0 1px 2px #000;
}
.footer-modal-body h4{margin:0 0 4px; font-size:12px; font-weight:800; color:#fff; text-shadow:0 1px 2px #000;}
.footer-modal-body p{margin:0;}

/* ---------- 환불 계좌 입력 폼: 회원탈퇴 확인 입력과 동일한 스타일 재사용 ---------- */

@media (min-width:761px){
  .footer-modal-body,
  .agreement-step{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .footer-modal-body::-webkit-scrollbar,
  .agreement-step::-webkit-scrollbar{display:none; width:0; height:0;}
}

/* =========================================================
   알림(거래 상태 변경) — 벨 아이콘 / 드롭다운 / 토스트
   ========================================================= */
.notif-bell{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; cursor:pointer;
  color:var(--text); position:relative;
}
.notif-bell svg{
  width:26px; height:26px; stroke-width:1.3; display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.notif-bell:hover svg{transform:translateY(-3px) scale(1.13) rotate(-3deg);}
.notif-bell:active svg{transform:translateY(1px) scale(.9); transition:transform .16s cubic-bezier(.22,1,.36,1);}
.notif-bell-badge{
  position:absolute; top:6px; right:8px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:10px; font-weight:800; line-height:16px; text-align:center;
}
.notif-bell-badge:empty,
.notif-bell-badge[hidden]{display:none;}

.notif-panel{
  position:fixed; z-index:950;
  width:320px; max-width:calc(100vw - 24px);
  max-height:420px; overflow-y:auto;
  background:var(--bg);
  border:1px solid var(--border); border-radius:14px;
  padding:8px;
}
.notif-panel[hidden]{display:none;}
.notif-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px 10px; margin-bottom:6px;
}
.notif-panel-title{font-size:12.5px; font-weight:800; color:var(--text); margin:0;}
.notif-panel-readall{
  background:transparent; border:none; color:var(--text-faint);
  font-size:11px; padding:2px 4px;
}
.notif-panel-readall:hover{color:var(--text);}
.notif-empty{margin:0; padding:24px 10px; text-align:center; font-size:12px; color:var(--text-faint);}
.notif-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px; border-radius:10px; cursor:default;
}
.notif-item + .notif-item{margin-top:2px;}
.notif-item-dot{
  flex:none; width:8px; height:8px; margin-top:5px;
  border-radius:50%; background:#232323;
}
.notif-item-dot.is-new{background:#2ecc71;}
.notif-item-body{
  display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;
}
.notif-item-msg{font-size:12.5px; line-height:1.5; color:var(--text); margin:0;}
.notif-item-delay-reason{
  font-size:11.5px; line-height:1.5; color:var(--text-secondary); margin:0;
  padding:6px 8px; border-radius:7px; background:rgba(201,138,43,.08);
  white-space:pre-wrap; word-break:break-word;
}
.notif-item-time{font-size:10.5px; color:var(--text-faint); margin:0;}
.notif-item-delete{
  flex:none; width:24px; height:24px; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; border-radius:7px;
  color:var(--text-faint); cursor:pointer; padding:0;
  transition:background-color .15s ease, color .15s ease, opacity .15s ease;
}
.notif-item-delete svg{width:14px; height:14px; display:block;}
.notif-item-delete:hover{background:var(--bg-hover-soft); color:var(--text);}
.notif-item-delete:disabled{opacity:.4; cursor:default;}
.notif-item.removing{
  opacity:0; transform:translateX(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.notif-refund-btn{
  align-self:flex-start; margin-top:2px;
  font-size:11px; font-weight:700; padding:6px 10px; border-radius:7px;
  background:var(--ink); color:var(--paper); border:none; cursor:pointer;
  transition:opacity .12s ease;
}
.notif-refund-btn:hover{opacity:.85;}
.notif-refund-status{margin:2px 0 0; font-size:10.5px; color:var(--text-faint);}
.notif-refund-status.done{color:var(--text-secondary);}

/* 팝업 안내/알림 메세지 뒤 배경 — SOLD OUT 팝업과 동일하게 블러+톤다운을 줘서
   어떤 배경(영상/이미지) 위에서도 텍스트 가독성이 유지되도록 합니다. */
.notif-toast-scrim{
  position:fixed; inset:0; z-index:899;
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}
.notif-toast-scrim.is-visible{opacity:1;}
.notif-toast-scrim[hidden]{display:none;}

.notif-toast-stack{
  position:fixed; top:50%; left:50%; z-index:900;
  transform:translate(-50%, -50%);
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none;
}
.notif-toast{
  pointer-events:auto;
  width:280px; max-width:calc(100vw - 32px);
  background:transparent; border:none; box-shadow:none;
  padding:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  animation:notifToastIn .28s cubic-bezier(.34,1.56,.64,1);
}
.notif-toast-icon{
  width:26px; height:26px; flex:none;
  color:#fff;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(0,0,0,.55));
}
.notif-toast-msg{
  font-size:13px; line-height:1.5; font-weight:700;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.55);
}
.notif-toast.leaving{animation:notifToastOut .22s ease forwards;}
@keyframes notifToastIn{
  from{opacity:0; transform:translateY(-8px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
@keyframes notifToastOut{
  to{opacity:0; transform:translateY(-8px) scale(.96);}
}

@media (max-width:960px){
  /* 모바일에서는 상단 고정 메뉴 바(rail) 아래로 알림 패널을 내려서
     메뉴 바에 패널 상단이 가려지지 않도록 합니다. */
  .notif-panel{
    left:12px; right:12px; width:auto;
    top:calc(60px + env(safe-area-inset-top) + 8px) !important;
    max-height:calc(100vh - 60px - env(safe-area-inset-top) - 24px);
    max-height:calc(100dvh - 60px - env(safe-area-inset-top) - 24px);
  }
}

/* 모바일 화면에서도 알림 토스트를 PC와 동일한 흰색 + 그림자 스타일로 표시 */
@media (max-width:960px){
  .notif-toast-stack{width:calc(100vw - 32px);}
  .notif-toast{width:100%;}
  .notif-toast-icon{
    color:#fff;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(0,0,0,.55));
  }
  .notif-toast-msg{
    color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.55);
  }
}

/* =========================================================
   사이트 안내사항 (헤드 상단 바 · 구매 페이지 하단 · 관리자 편집)
   ========================================================= */
.site-notice-bar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1200;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding:0;
  background:transparent;
}
.site-notice-bar[hidden]{display:none !important;}
.site-notice-bar-btn{
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  max-width:356px;
  margin:0 auto;
  padding:8px 8px;
  padding-top:calc(8px + env(safe-area-inset-top, 0px));
  border:none;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:12.5px;
  line-height:1.45;
  letter-spacing:.02em;
  text-align:center;
  cursor:pointer;
  transition:color .16s ease, opacity .16s ease;
}
.site-notice-bar-btn:hover{color:var(--text);}
.site-notice-bar-btn:active{opacity:.7;}
.site-notice-bar-main{
  flex:none;
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 14px;
  border:1px solid var(--glass-border-soft);
  border-radius:8px;
}
.site-notice-bar-icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  color:var(--text-faint);
}
.site-notice-bar-icon[hidden]{display:none;}
.site-notice-bar-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.site-notice-bar-text{
  min-width:0;
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:anywhere;
  text-align:center;
}
.site-notice-bar-close{
  display:none;
}
body.has-site-notice{
  /* 상단 고정 바 높이만큼 본문을 살짝 내려 가려지지 않게 함 */
  padding-top:0;
}
body.has-site-notice #app{
  margin-top:42px;
}
@media (max-width:960px){
  /* 상단 메뉴 네비게이션 바(.rail) 아래쪽에 위치시킵니다 */
  .site-notice-bar{
    top:calc(60px + env(safe-area-inset-top, 0px));
    justify-content:center;
  }
  body.has-site-notice #app{margin-top:0;}
  body.has-site-notice #app,
  body.has-site-notice #app.has-dossier{
    padding-top:calc(60px + 62px + env(safe-area-inset-top, 0px));
  }
  .site-notice-bar-btn{
    padding:8px 8px;
    padding-top:8px;
    font-size:12px;
    gap:6px;
    margin:8px auto 0;
  }
  .site-notice-bar-main{
    padding:6px 12px;
  }
}

/* 구매(체크아웃) · 우측 상품 상세 하단 안내 — 박스 없이 아이콘+텍스트만 */
.checkout-site-notice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:22px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}
/* 우측 상품 상세(dossier)에서는 구매 버튼 바로 아래에 붙도록 */
#dossierDynamic > .checkout-site-notice{
  margin-top:18px;
  margin-bottom:4px;
}
.checkout-site-notice-icon{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-top:1px;
  color:var(--text-faint);
}
.checkout-site-notice-icon svg{
  width:16px;
  height:16px;
  display:block;
}
.checkout-site-notice-text{
  flex:1;
  min-width:0;
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--text-secondary);
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.checkout-site-notice.has-detail{
  cursor:pointer;
  border-radius:8px;
  margin-left:-8px; margin-right:-8px;
  padding:6px 8px;
  transition:background-color .14s ease;
}
.checkout-site-notice.has-detail:hover,
.checkout-site-notice.has-detail:focus-visible{
  background-color:var(--bg-hover-soft);
  outline:none;
}
.checkout-site-notice.has-detail .checkout-site-notice-text{
  color:var(--text);
}
.checkout-site-notice-chevron{
  flex:none;
  width:14px; height:14px;
  margin-top:2px;
  color:var(--text-faint);
}

/* 관리자 — 안내사항 편집 영역 */
.admin-notice-body{
  padding:4px 2px 8px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.admin-notice-body[hidden]{display:none !important;}
.admin-notice-hint{
  margin:0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--text-faint);
}
.admin-notice-actions{
  display:flex;
  gap:10px;
  margin-top:2px;
}
.admin-notice-actions .admin-submit-btn{flex:1;}
#adminNoticeSection > .admin-collapse-toggle{margin-bottom:0;}

/* 모바일: 안내 바 위치/여백 보정은 위쪽 .site-notice-bar 미디어쿼리에서 처리 */

/* 안내사항 저장 버튼: 상품 등록 폼과 동일하게 원형 아이콘 버튼 */
.admin-notice-actions{
  justify-content:center;
  align-items:center;
}
.admin-notice-actions .admin-submit-btn{
  flex:none; width:52px; height:52px; padding:0; gap:0; margin-top:0;
  border-radius:50%;
  background:var(--glass-bg-soft); color:var(--text-secondary);
  box-shadow:none;
}
.admin-notice-actions .admin-submit-btn:hover{background:var(--glass-bg-strong); opacity:1;}
.admin-notice-actions .admin-submit-btn svg{width:18px; height:18px;}

/* ---------- 안내사항 다중 · 메인/서브 관리 ---------- */
.admin-notice-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:12px;
}
.admin-notice-row{
  padding:12px 0;
  border-bottom:1px solid var(--glass-border-soft);
}
.admin-notice-row:last-child{border-bottom:none;}
.admin-notice-row-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.admin-notice-type{
  flex:1;
  min-width:0;
  height:36px;
  padding:0 10px;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  background:var(--glass-bg-soft);
  color:var(--text-secondary);
  font-family:inherit;
  font-size:12px;
}
.admin-notice-enabled-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:none;
  font-size:12px;
  color:var(--text-secondary);
  cursor:pointer;
  user-select:none;
}
.admin-notice-enabled-label input{
  width:14px; height:14px;
  accent-color:var(--ink);
  cursor:pointer;
}
.admin-notice-remove-btn{
  flex:none;
  width:28px; height:28px;
  border:none; background:transparent;
  color:var(--text-faint);
  font-size:12px;
  cursor:pointer;
  transition:color .12s ease;
}
.admin-notice-remove-btn:hover{color:var(--text);}
.admin-notice-text{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  background:var(--glass-bg-soft);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  line-height:1.5;
  resize:vertical;
  min-height:56px;
}
.admin-notice-text:focus{
  outline:none;
  border-color:var(--glass-border);
}
.admin-notice-detail{
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border:1px dashed var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  background:transparent;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:12.5px;
  line-height:1.5;
  resize:vertical;
  min-height:44px;
}
.admin-notice-detail:focus{
  outline:none;
  border-style:solid;
  border-color:var(--glass-border);
  color:var(--text);
}
.admin-notice-add-btn{
  width:100%;
  margin:4px 0 12px;
  padding:12px;
  border:1px dashed var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  background:transparent;
  color:var(--text-faint);
  font-family:inherit;
  font-size:12px;
  letter-spacing:.04em;
  cursor:pointer;
  transition:color .12s ease, border-color .12s ease;
}
.admin-notice-add-btn:hover{
  color:var(--text-secondary);
  border-color:var(--glass-border);
}
.checkout-site-notice + .checkout-site-notice{
  margin-top:10px;
}
.checkout-site-notice.is-sub{
  opacity:.85;
}

/* 이벤트 팝업 안내 — 중앙 토스트 + 하단 X */
.event-notice-toast{
  gap:12px;
  pointer-events:auto;
}
.event-notice-icon{
  width:28px;
  height:28px;
}
.event-notice-msg{
  max-width:280px;
  white-space:pre-wrap;
  word-break:keep-all;
}
.event-notice-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin-top:4px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  opacity:.75;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
  transition:opacity .14s ease;
}
.event-notice-close svg{
  width:16px;
  height:16px;
  display:block;
}
.event-notice-close:hover{opacity:1;}
.event-notice-close:active{opacity:.55;}

/* 안내사항 클릭 시 상세 팝업 — 이벤트 팝업과 동일한 토스트 스타일 + 제목 강조 */
.notice-detail-toast{
  gap:10px;
  pointer-events:auto;
}
.notice-detail-icon{
  width:28px;
  height:28px;
}
.notice-detail-title{
  font-size:14px;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.55);
}
.notice-detail-msg{
  max-width:300px;
  font-weight:500;
  white-space:pre-wrap;
  word-break:keep-all;
}
.admin-notice-icon{
  flex:none;
  width:108px;
  height:36px;
  padding:0 8px;
  border:1px solid var(--glass-border-soft);
  border-radius:var(--glass-radius-sm);
  background:var(--glass-bg-soft);
  color:var(--text-secondary);
  font-family:inherit;
  font-size:11.5px;
}
@media (max-width:420px){
  .admin-notice-row-head{flex-wrap:wrap;}
  .admin-notice-type{flex:1 1 100%;}
  .admin-notice-icon{width:auto; flex:1;}
}

/* ---------- 상품 링크 첨부 (등록 폼 · 상세) ---------- */
.admin-field-optional{
  font-weight:400;
  color:var(--text-faint);
  letter-spacing:0;
  text-transform:none;
  font-size:11px;
}

/* ---------- 컨디션 별점 입력 (상품 등록 폼, 0.5점 단위) ---------- */
.admin-star-rating{
  display:flex; align-items:center; gap:2px;
}
.admin-star{
  position:relative; display:inline-block;
  width:24px; height:24px; font-size:22px; line-height:24px;
  cursor:pointer; user-select:none;
}
.admin-star-bg{
  position:absolute; inset:0;
  background-color:var(--border);
  -webkit-mask-image:url(assets/petal-icon-flat.svg);
  mask-image:url(assets/petal-icon-flat.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.admin-star-fg{
  position:absolute; left:0; top:0;
  width:0%; height:24px; overflow:hidden; white-space:nowrap;
  background-color:#ffffff; opacity:1;
  -webkit-mask-image:url(assets/petal-icon-flat.svg);
  mask-image:url(assets/petal-icon-flat.svg);
  -webkit-mask-size:24px 24px; mask-size:24px 24px;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
}

.admin-star:hover{
  transform:scale(1.05);
}
.admin-star-value{
  margin-left:6px; font-size:12.5px; color:var(--text-faint); min-width:26px;
}
.admin-star-clear-btn{
  margin-left:8px;
  border:0; background:none;
  font-size:11px; color:var(--text-faint);
  text-decoration:underline;
  cursor:pointer;
  padding:2px 4px;
}
.admin-star-clear-btn:hover{
  color:var(--text);
}
.admin-link-row{margin-top:0;}
.admin-link-row + .admin-link-row{margin-top:14px;}
.admin-link-input-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.admin-link-icon-preview{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:var(--text-faint);
}
.admin-link-icon-preview svg{
  width:18px;
  height:18px;
  display:block;
}
.admin-link-input-row input{
  flex:1;
  min-width:0;
}
.admin-link-label-input{
  margin-top:8px;
}
.admin-link-remove-btn{
  flex:none; width:26px; height:26px; padding:0; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-faint); font-size:12px;
  cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.admin-link-remove-btn:hover{color:#e04b4b; background:var(--bg-hover-soft);}
.admin-link-add-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:14px; padding:0; border:none; background:transparent;
  color:var(--text-faint); font-size:12px; font-weight:600; letter-spacing:.01em;
  cursor:pointer;
  transition:color .12s ease;
}
.admin-link-add-btn svg{width:14px; height:14px; flex:none;}
.admin-link-add-btn:hover{color:var(--text);}
.admin-link-add-btn[hidden]{display:none;}

.dossier-link-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 20px;
}
.dossier-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:12.5px;
  line-height:1.4;
  text-decoration:none;
  transition:color .14s ease, opacity .14s ease;
  cursor:pointer;
}
.dossier-link:hover{color:var(--text);}
.dossier-link-icon{
  width:15px;
  height:15px;
  flex:none;
  display:block;
}
.dossier-link-label{
  letter-spacing:.01em;
}