/*
 * fx 공용 상태 부품 덮기 — 플러그인(FluxShop)이 JS 로 만드는 토스트·장바구니 서랍·모달을 켠 화면에서 새 톤으로 덮는다.
 * 갈래 C0, 2026-10-15. 모든 켠 화면에서 로드된다(inc/fx/screens-commerce.php).
 * 규칙: 클래스·id·DOM 은 그대로(플러그인 JS 가 이 이름으로 찾는다), 위치·transform·is-open·display 전환은 건드리지 않는다.
 * 선택자 앞에 html[data-fx-surface] 를 붙여 플러그인 CSS 가 먼저/나중에 실려도 이긴다.
 * 새 부품 정의(fx-modal·fx-alert·스피너, 알림은 island.css)는 components.css, 사용법은 stage3-C0-changes.md.
 */

/* ===== 0. 플러그인이 쓰는 옛 이름 색 변수를 새 토큰으로 되돌려 준다(이 요소들 안에서만) ===== */
html[data-fx-surface] :is(#fhs-cart-drawer, .fhs-modal, .fhs-cart-fab, #fhs-toast-container){
  --fx-ink:var(--fx-fg);--fx-ink-2:var(--fx-fg-2);--fx-ink-3:var(--fx-fg-3);--fx-ink-4:var(--fx-fg-3);
  --fx-surface:var(--fx-card);--fx-canvas:var(--fx-bg-2);--fx-sunken:var(--fx-tint);
  --fx-line:var(--fx-edge);--fx-line-strong:var(--fx-edge-strong);--fx-lime-row:var(--fx-tint);
  --fx-accent:var(--fx-brand);--fx-accent-hover:var(--fx-brand-hover);--fx-on-accent:var(--fx-brand-ink);
  --fx-radius-xs:var(--fx-radius-s);--fx-font:var(--fx-face);
  --fhs-bg:var(--fx-card);--fhs-bg-gray:var(--fx-bg-2);--fhs-bg-soft:var(--fx-tint);
  --fhs-border:var(--fx-edge-strong);--fhs-border-light:var(--fx-edge);
  --fhs-text:var(--fx-fg);--fhs-text-sub:var(--fx-fg-2);--fhs-text-muted:var(--fx-fg-3);--fhs-text-light:var(--fx-fg-3);
  --fhs-primary:var(--fx-brand);--fhs-white:var(--fx-brand-ink);
  --fhs-accent:var(--fx-danger); /* 필수 표시·삭제 강조에만 쓰이는 값 — 라임이 아니라 위험색 */
  --fhs-radius:var(--fx-radius-m);
}

/* 0-b. 결제 수단 B3 - 자동 연장 카드 고르기 모달(.fhs-ar-*, 플러그인 mypage-shop.css 가 모양을 낸다). 공통 부품 .fxu-payitem 이 쓰는 라임 토큰을 이 모달 안에서만 새 토큰으로 되돌린다 */
html[data-fx-surface] #fhs-autorenew-modal{--fx-lime:var(--fx-brand);--fx-lime-soft:var(--fx-tint)}
html[data-fx-surface] #fhs-autorenew-modal .fxu-radio__dot{background:var(--fx-card)}
html[data-fx-surface] #fhs-autorenew-modal .fxu-payitem:has(input:checked) .fxu-radio__dot{background:var(--fx-brand)}
html[data-fx-surface] #fhs-autorenew-modal .fxu-check input:checked + .fxu-check__box{background:var(--fx-brand)}
html[data-fx-surface] #fhs-autorenew-modal .fxu-check input:checked + .fxu-check__box::after{border-color:var(--fx-brand-ink)}
html[data-fx-surface] #fhs-autorenew-modal button.fxu-btn,html[data-fx-surface] #fhs-autorenew-modal button.fluxshop-btn,html[data-fx-surface] #fhs-autorenew-modal button.fxu-btn.fhs-ar-add{min-height:44px}

/* ===== 1. 토스트 — 플러그인이 만드는 #fhs-toast-container .fhs-toast / .fluxboard-toast 는 js/fx/island-bridge.js 가
   FluxIsland 알약으로 넘기고 원본은 .is-island 로 숨긴다. 아래는 브리지가 못 돌 때를 위한 모양 맞춤(위쪽 가운데 알약) ===== */
html[data-fx-surface] #fhs-toast-container{
  top:calc(env(safe-area-inset-top,0px) + 8px);bottom:auto;left:var(--fx-sp-4);right:var(--fx-sp-4);transform:none;
  z-index:100020;pointer-events:none;
}
html[data-fx-surface] #fhs-toast-container .fhs-toast,
html[data-fx-surface] .fluxboard-toast{
  pointer-events:auto;display:flex;align-items:center;gap:var(--fx-sp-2);
  max-width:min(520px,100%);min-height:28px;padding:6px 14px;margin-inline:auto;
  border-radius:18px;background:var(--fx-s3);color:var(--fx-t1);
  box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);font-size:13px;font-weight:400;line-height:1.5;
}
html[data-fx-surface="light"] #fhs-toast-container .fhs-toast,
html[data-fx-surface="light"] .fluxboard-toast{background:var(--fx-k1)}
html[data-fx-surface] #fhs-toast-container .fhs-toast--error>span:first-child{color:var(--fx-alert)}
html[data-fx-surface] #fhs-toast-container .fhs-toast>span:last-child{min-width:0;overflow-wrap:anywhere}
html[data-fx-surface] :is(#fhs-toast-container .fhs-toast,.fluxboard-toast).is-island{display:none!important}

/* ===== 2. 장바구니 서랍 / 미니 모달 (.fhs-cart-drawer) ===== */
html[data-fx-surface] .fhs-cart-overlay{background:rgba(10,10,11,.66)}
html[data-fx-surface] .fhs-cart-overlay.fhs-cart-overlay--soft{background:rgba(10,10,11,.2)}
html[data-fx-surface] #fhs-cart-drawer.fhs-cart-drawer{background:var(--fx-card);color:var(--fx-fg);font-family:var(--fx-face)}
html[data-fx-surface] #fhs-cart-drawer.fhs-cart-drawer.is-open{box-shadow:inset 1px 0 0 var(--fx-edge-strong),var(--fx-shadow-l)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__head{padding:16px 8px 16px 20px;border-bottom:1px solid var(--fx-edge)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__title,
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__head h3{font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__count{min-width:24px;height:24px;padding:0 8px;border-radius:var(--fx-radius-pill);background:var(--fx-fg);color:var(--fx-bg);font-size:var(--fx-size-min);font-variant-numeric:tabular-nums}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__close{width:44px;height:44px;color:var(--fx-fg-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__close:hover{color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__body{padding:4px 20px}

/* 항목: 이미지 | 이름·옵션·가격 | 삭제 / (이미지) | 수량 — 수량 버튼은 터치 44px */
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item{
  grid-template-columns:56px minmax(0,1fr) 44px;grid-template-areas:"img info rm" "img qty rm";
  gap:4px 12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--fx-edge);
}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__img{grid-area:img;border-radius:var(--fx-radius-s);background:var(--fx-card-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__info{grid-area:info}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__qty{grid-area:qty;justify-self:start;display:inline-flex;align-items:center;gap:0;width:max-content;padding:0;border:0;background:none;box-shadow:none}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__remove{grid-area:rm;align-self:start;justify-self:end;width:44px;height:44px;min-width:44px;min-height:44px;font-size:24px;color:var(--fx-fg-3);display:inline-flex;align-items:center;justify-content:center}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__remove:hover{color:var(--fx-danger)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__name{font-size:15px;font-weight:600;line-height:1.4;color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__opt{margin-top:2px;font-size:var(--fx-size-min);color:var(--fx-fg-3)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__price{margin-top:4px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-qty{width:44px;height:44px;border:0;border-radius:50%;background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);font-size:20px;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-qty:hover{background:var(--fx-card-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__qnum{min-width:32px;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-fg)}

/* 합계·버튼 */
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__foot,
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__optfoot{padding:16px 20px;border-top:1px solid var(--fx-edge-strong);background:var(--fx-bg-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__row{min-height:0;padding:0;margin-bottom:var(--fx-sp-3);background:none;border-top:0;align-items:baseline}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__row span{font-size:15px;color:var(--fx-fg-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__total{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn{min-height:48px;height:auto;padding:0 20px;border-radius:var(--fx-radius-pill);font-size:15px;font-weight:700;transition:transform .25s var(--fx-ease-std),background-color .25s var(--fx-ease-std)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn--primary{background:var(--fx-brand);border:0;color:var(--fx-brand-ink);filter:none}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn--primary:hover{background:var(--fx-brand-hover);color:var(--fx-brand-ink);filter:none}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn--ghost{background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn--ghost:hover{background:var(--fx-tint);color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-btn:focus-visible,
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-qty:focus-visible,
html[data-fx-surface] #fhs-cart-drawer .fhs-cart-drawer__close:focus-visible,
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-item__remove:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
html[data-fx-surface] #fhs-cart-drawer .fhs-option-hint{border-color:var(--fx-danger);color:var(--fx-danger);font-size:var(--fx-size-min)}
html[data-fx-surface] #fhs-cart-drawer .fhs-option-hint::before{background:var(--fx-danger);color:var(--fx-bg)}

/* 빈 장바구니 — 글 + 다음 행동(쇼핑 계속하기) */
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty{margin:24px 0;padding:32px 20px;border-radius:var(--fx-radius-l);border:1px dashed var(--fx-edge-strong);background:var(--fx-tint);color:var(--fx-fg-2);text-align:center}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty h3{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--fx-fg)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty p{margin:0 0 8px;font-size:15px;color:var(--fx-fg-2)}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty .fhs-mini-empty__close{width:auto;min-width:160px;height:auto;min-height:48px;margin-top:var(--fx-sp-3);padding:0 24px;border-radius:var(--fx-radius-pill);background:var(--fx-brand);color:var(--fx-brand-ink);font-size:15px;font-weight:700;opacity:1}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty .fhs-mini-empty__close:hover{background:var(--fx-brand-hover);color:var(--fx-brand-ink);opacity:1}
html[data-fx-surface] #fhs-cart-drawer .fhs-mini-empty .fxu-ico{color:var(--fx-fg-3)}

/* 둥근 모서리: 데스크톱 미니 모달·모바일 아래 시트 */
html[data-fx-surface] .fhs-cart-drawer[data-mode="modal"]{border-radius:var(--fx-radius-l)}
html[data-fx-surface] .fhs-cart-drawer[data-mode="modal"] .fhs-cart-drawer__head{border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0}
@media (max-width:768px){
  html[data-fx-surface] .fhs-cart-drawer[data-mode="drawer"]{border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0}
  html[data-fx-surface] .fhs-cart-drawer[data-mode="drawer"] .fhs-cart-drawer__head{border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0}
}

/* 플로팅 버튼 (공용 독 안에서는 독이 자리를 잡는다 — 위치는 건드리지 않는다) */
html[data-fx-surface] .fhs-cart-fab{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:var(--fx-shadow-s)}
html[data-fx-surface] .fhs-cart-fab:focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px}
html[data-fx-surface] .fhs-cart-fab__count{background:var(--fx-fg);color:var(--fx-bg);border-color:var(--fx-brand);font-variant-numeric:tabular-nums}

/* ===== 3. 모달 (.fhs-modal — 마이페이지 클레임·리뷰·구독 창 공용). display 전환은 플러그인 JS 가 한다 ===== */
html[data-fx-surface] .fhs-modal{z-index:100000}
html[data-fx-surface] .fhs-modal__overlay,
html[data-fx-surface] .fhs-modal--sub{background:rgba(10,10,11,.7)}
html[data-fx-surface] .fhs-modal__panel,
html[data-fx-surface] .fhs-modal--sub .fhs-modal__body{
  background:var(--fx-card);color:var(--fx-fg);border-radius:var(--fx-radius-l);padding:24px;
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong),var(--fx-shadow-l);
}
html[data-fx-surface] .fhs-modal__title,
html[data-fx-surface] .fhs-modal--sub h3{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-fg)}
html[data-fx-surface] .fhs-modal--sub .description,
html[data-fx-surface] .fhs-claim-account__note,
html[data-fx-surface] .fhs-review-product-name{font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
html[data-fx-surface] .fhs-modal .fhs-field{font-size:15px;font-weight:600;color:var(--fx-fg)}
html[data-fx-surface] .fhs-modal .fhs-field select,
html[data-fx-surface] .fhs-modal .fhs-field textarea,
html[data-fx-surface] .fhs-modal .fhs-field input[type="text"],
html[data-fx-surface] .fhs-modal .fhs-field input[type="tel"],
html[data-fx-surface] .fhs-modal .fhs-field input[type="number"],
html[data-fx-surface] .fhs-modal .fhs-field input[type="email"]{
  min-height:48px;padding:10px 16px;border:0;border-radius:var(--fx-radius-m);background:var(--fx-bg);color:var(--fx-fg);
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:16px;
}
html[data-fx-surface] .fhs-modal .fhs-field textarea{min-height:96px}
html[data-fx-surface] .fhs-modal .fhs-field select:focus,
html[data-fx-surface] .fhs-modal .fhs-field textarea:focus,
html[data-fx-surface] .fhs-modal .fhs-field input:focus{outline:2px solid var(--fx-ring);outline-offset:2px;border:0;box-shadow:inset 0 0 0 1px var(--fx-edge-strong)}
html[data-fx-surface] .fhs-claim-account,
html[data-fx-surface] .fhs-claim-unpaid{border:0;border-radius:var(--fx-radius-m);background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-edge);color:var(--fx-fg-2);font-size:15px}
html[data-fx-surface] .fhs-modal__actions{gap:var(--fx-sp-2);margin-top:var(--fx-sp-4)}
html[data-fx-surface] .fhs-modal .fhs-btn-sm{min-height:44px;height:auto;padding:0 20px;border:0;border-radius:var(--fx-radius-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);font-size:15px;font-weight:700}
html[data-fx-surface] .fhs-modal .fhs-btn-sm:hover{background:var(--fx-tint);filter:none}
html[data-fx-surface] .fhs-modal .fhs-btn-sm--primary{background:var(--fx-brand);box-shadow:none;color:var(--fx-brand-ink)}
html[data-fx-surface] .fhs-modal .fhs-btn-sm--primary:hover{background:var(--fx-brand-hover)}
html[data-fx-surface] .fhs-modal .fhs-btn-sm:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
html[data-fx-surface] .fhs-cancel-reasons__item{min-height:48px;border:0;border-radius:var(--fx-radius-m);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:15px;color:var(--fx-fg)}
html[data-fx-surface] .fhs-cancel-reasons__item:hover{background:var(--fx-tint)}
html[data-fx-surface] .fhs-cancel-reasons__item:has(input:checked){background:var(--fx-tint);box-shadow:inset 0 0 0 2px var(--fx-fg)}
html[data-fx-surface] .fhs-cancel-reasons__item:focus-within{outline:2px solid var(--fx-ring);outline-offset:2px}
html[data-fx-surface] .fhs-star-input button{width:44px;height:44px;color:var(--fx-edge-strong);display:inline-flex;align-items:center;justify-content:center}
html[data-fx-surface] .fhs-star-input button.is-active{color:var(--fx-fg)}
html[data-fx-surface] .fhs-star-input button:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}

/* ===== 4. 모바일 360 ===== */
@media (max-width:480px){
  html[data-fx-surface] #fhs-toast-container{bottom:var(--fx-sp-3);left:var(--fx-sp-3);right:var(--fx-sp-3);top:auto}
  html[data-fx-surface] .fhs-modal{align-items:flex-end}
  html[data-fx-surface] .fhs-modal__panel,
  html[data-fx-surface] .fhs-modal--sub .fhs-modal__body{width:100%;max-width:100%;border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0}
  html[data-fx-surface] .fhs-modal--sub{padding:0}
  html[data-fx-surface] .fhs-modal__actions .fhs-btn-sm{flex:1 1 0}
}

/* ===== 5. 모션 줄이기 ===== */
@media (prefers-reduced-motion:reduce){
  html[data-fx-surface] #fhs-toast-container .fhs-toast{animation:none}
  html[data-fx-surface] #fhs-cart-drawer.fhs-cart-drawer,
  html[data-fx-surface] .fhs-cart-overlay{transition:none}
}