/*
 * fx 부품 — 시안 C main.html 의 실제 클래스 모양을 옮긴 것(BEM, 접두사 fx-).
 * 시안 이름 → 여기 이름: .wrap→fx-wrap  .sec→fx-sec  .btn→fx-button  .chip→fx-pill  .rows→fx-list
 *   .win/.mock→fx-panel  .field→fx-field  .dep/.gz→fx-tile
 * 옛 레이어가 .fx-btn·.fx-chip·.fx-rows·.fx-section·.fx-status 를 이미 쓰므로 그 이름은 피했다.
 */

/* ===== 섹션 컨테이너 1200px ===== */
.fx-wrap{max-width:var(--fx-wrap-w);margin:0 auto;padding:0 var(--fx-gut)}
.fx-sec{position:relative;overflow-x:clip;background:var(--fx-bg);color:var(--fx-fg);padding:var(--fx-sec-y) 0}
.fx-sec--tall{min-height:85vh}
.fx-sec--center{display:flex;align-items:center}
.fx-sec--center>.fx-wrap{width:100%}
.fx-sec--tight{padding:var(--fx-sp-16) 0}

/* ===== 버튼 ===== */
.fx-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--fx-sp-2);
  min-height:56px;padding:0 30px;border-radius:var(--fx-radius-pill);
  font-weight:700;font-size:18px;line-height:1;white-space:nowrap;
  transition:transform .25s var(--fx-ease-std),background-color .25s var(--fx-ease-std),color .2s;
}
.fx-button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 36px 6px var(--fx-brand-glow);opacity:0;pointer-events:none;
  transition:opacity var(--fx-time-mid) var(--fx-ease-std);
}
.fx-button:hover{transform:translateY(-2px)}
.fx-button:hover::after{opacity:1}
.fx-button:active{transform:translateY(0)}
.fx-button--lime{background:var(--fx-brand);color:var(--fx-brand-ink)}
.fx-button--lime:hover{background:var(--fx-brand-hover)}
.fx-button--line{box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg)}
.fx-button--line::after{box-shadow:0 0 24px 2px rgba(255,255,255,.12)}
[data-fx-surface="light"] .fx-button--line::after{box-shadow:0 0 24px 2px rgba(17,17,17,.10)}
.fx-button--ink{background:var(--fx-fg);color:var(--fx-bg)}
.fx-button--sm{min-height:44px;padding:0 20px;font-size:16px}
.fx-button--block{display:flex;width:100%}
.fx-button[disabled],.fx-button[aria-disabled=true]{opacity:.4;pointer-events:none}

/* ===== 칩 / 상태 칩 (색만으로 전달하지 않도록 점 + 글자) ===== */
.fx-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--fx-radius-pill);background:var(--fx-card-2);font-size:var(--fx-size-min);font-weight:600;line-height:1.5;color:var(--fx-fg)}
.fx-pill--ok{background:rgba(200,240,90,.14);color:var(--fx-brand)}
.fx-pill--warn{background:rgba(255,122,107,.14);color:var(--fx-alert)}
.fx-pill--info{background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-edge);color:var(--fx-fg-2)}
.fx-pill--ok::before,.fx-pill--warn::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* 라이트 면: 라임 글자 금지 — 잉크 글자 + 라임 면 / 진한 위험색 */
[data-fx-surface="light"] .fx-pill--ok{background:var(--fx-brand);color:var(--fx-brand-ink)}
[data-fx-surface="light"] .fx-pill--warn{background:rgba(180,35,24,.1);color:var(--fx-alert-paper)}
.fx-pills{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2)}

/* ===== 행 목록 ===== */
.fx-list{list-style:none;position:relative}
.fx-list__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 14px;
  min-height:54px;padding:8px 14px;border-radius:var(--fx-radius-s);font-size:15px;
}
.fx-list__item:nth-child(odd){background:var(--fx-tint)}
.fx-list__id{color:var(--fx-fg-3);font-size:var(--fx-size-small);font-variant-numeric:tabular-nums}
.fx-list__amt{font-weight:700;font-variant-numeric:tabular-nums}
.fx-list__item>.fx-pill{grid-column:1/-1;justify-self:start}
.fx-list--lined .fx-list__item{border-radius:0;background:none;border-bottom:1px solid var(--fx-edge)}

/* ===== 사실 표 (spec sheet) ===== */
.fx-facts{border-top:1px solid var(--fx-edge-strong)}
.fx-facts__row{display:grid;gap:4px 32px;padding:20px 0;border-bottom:1px solid var(--fx-edge)}
.fx-facts__k{font-size:16px;font-weight:600;color:var(--fx-fg-2)}
.fx-facts__v{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--fx-fg)}
.fx-facts__v b{font-variant-numeric:tabular-nums}
.fx-facts__row--dim .fx-facts__v{color:var(--fx-fg-3)}

/* ===== 패널 (제품 화면 틀) / 타일 ===== */
.fx-panel{border-radius:var(--fx-radius-l);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge-strong),var(--fx-shadow-m);overflow:hidden}
[data-fx-surface="light"] .fx-panel{box-shadow:inset 0 0 0 1px var(--fx-edge-strong),0 24px 48px -28px rgba(17,17,17,.28)}
.fx-panel__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 18px;background:var(--fx-s0);border-bottom:1px solid var(--fx-edge-ink);font-size:var(--fx-size-small);color:var(--fx-t2)}
.fx-panel__body{padding:20px}
.fx-tile{padding:16px;border-radius:var(--fx-radius-m);background:var(--fx-tint)}
.fx-tile__k{font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-tile__v{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-hover-lift{transition:transform var(--fx-time-mid) var(--fx-ease-out),box-shadow var(--fx-time-mid) var(--fx-ease-std)}
.fx-hover-lift:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--fx-fg-3)}

/* ===== 입력 ===== */
.fx-field{display:block;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:var(--fx-radius-pill);background:var(--fx-bg);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);font-size:17px}
.fx-field::placeholder{color:var(--fx-fg-3)}
.fx-field:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-field[aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--fx-danger)}
.fx-field-msg{min-height:22px;font-size:15px;color:var(--fx-danger)}

/* ===== 빈 상태 카드 (다음 행동 포함) ===== */
.fx-empty{display:grid;align-content:start;justify-items:start;gap:var(--fx-sp-3);padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);border:1px dashed var(--fx-edge-strong);background:var(--fx-tint)}
.fx-empty__t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-empty__d{max-width:520px;font-size:var(--fx-size-body);color:var(--fx-fg-2)}
.fx-empty__act{margin-top:var(--fx-sp-2);display:flex;flex-wrap:wrap;gap:var(--fx-sp-3)}

/* ===== 스켈레톤 (transform 만 움직인다) ===== */
.fx-skeleton{position:relative;overflow:hidden;border-radius:var(--fx-radius-s);background:var(--fx-card-2);min-height:16px}
.fx-skeleton::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:rgba(255,255,255,.04);transform:translateX(-100%);animation:fx-skeleton 1.4s var(--fx-ease-std) infinite}
[data-fx-surface="light"] .fx-skeleton::after{background:rgba(255,255,255,.65)}
.fx-skeleton--line{height:16px}
.fx-skeleton--title{height:32px;width:60%}
.fx-skeleton--block{height:120px;border-radius:var(--fx-radius-m)}
@keyframes fx-skeleton{to{transform:translateX(250%)}}

/* ===== 반응형 ===== */
@media (min-width:768px){
  .fx-sec--tall{min-height:85vh}
  .fx-list__item{grid-template-columns:auto 1fr auto auto}
  .fx-list__item>.fx-pill{grid-column:auto;justify-self:end}
  .fx-facts__row{grid-template-columns:200px 1fr}
}
@media (max-width:768px){
  .fx-button{min-height:48px;font-size:15px}
  .fx-button--sm{min-height:44px;font-size:14px}
}
@media (max-width:480px){
  .fx-button{padding:0 24px}
}
@media (prefers-reduced-motion:reduce){
  .fx-skeleton::after{animation:none;opacity:0}
  .fx-button:hover,.fx-hover-lift:hover{transform:none}
}

/* =====================================================================
   3-B 공통 부품 (갈래 C0, 2026-10-15) — 위의 기존 규칙은 바꾸지 않고 아래에만 추가한다.
   스피너·로더·스켈레톤 · 토스트 · 모달 · 알림(fx-alert) · 빈 상태 보강.
   옛 fluxhub-loading(loading.css)의 스피너·블록/풀 로더·스켈레톤 규칙은 .fs-* 이름 그대로 새 토큰으로 옮겼다
   (켠 화면은 fluxhub-loading 을 내리므로 이 규칙이 없으면 로딩 표시가 사라진다). 조립 장면(.fs-build*)은 거래 갈래 몫.
   ===================================================================== */

/* ===== 스피너 (fx-spinner = 새 이름, fs-spin = 옛 마크업 호환) ===== */
.fx-spinner,.fs-spin{
  display:inline-block;flex:none;width:var(--fx-spin-size,16px);height:var(--fx-spin-size,16px);
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.85;
  animation:fx-spin .7s linear infinite;
}
.fx-spinner--lg,.fs-spin--lg{--fx-spin-size:28px;border-width:3px}
.fs-spin--onDark{color:var(--fx-t1);opacity:.9}
.fx-button[aria-busy=true],.fs-btn[aria-busy=true],.is-loading[aria-busy=true]{cursor:progress}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* ===== 블록 로더 / 풀 로더 (대기 상태 안내 — 글은 사실만) ===== */
.fs-blockloader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fx-sp-3);padding:28px 16px;text-align:center;color:var(--fx-fg-2)}
.fs-blockloader__spin{color:var(--fx-fg)}
.fs-blockloader__text{font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
.fs-blockloader__elapsed{font-size:var(--fx-size-min);color:var(--fx-fg-3);font-variant-numeric:tabular-nums}
.fs-blockloader__icon{font-size:26px;line-height:1}
.fs-blockloader__cta{margin-top:var(--fx-sp-1)}
.fs-blockloader--stalled .fs-blockloader__text{color:var(--fx-danger)}
.fs-blockloader--card{border-radius:var(--fx-radius-l);background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-edge)}
.fs-fullloader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fx-sp-4);padding:48px 20px;text-align:center;border-radius:var(--fx-radius-l);background:var(--fx-tint)}
.fs-fullloader--overlay{position:fixed;inset:0;z-index:500;border-radius:0;background:rgba(10,10,11,.9)}
[data-fx-surface="light"] .fs-fullloader--overlay{background:rgba(247,247,245,.92)}
.fs-fullloader__title{font-size:18px;font-weight:700;line-height:1.4;color:var(--fx-fg)}
.fs-fullloader__desc{max-width:360px;font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
.fs-fullloader__elapsed{font-size:var(--fx-size-min);color:var(--fx-fg-3);font-variant-numeric:tabular-nums}
.fs-fullloader--stalled{box-shadow:inset 0 0 0 1.5px var(--fx-danger)}
.fs-fullloader--stalled .fs-fullloader__title{color:var(--fx-danger)}

/* ===== 스켈레톤 보강 (fx-skeleton 위에 변형 추가 + fs-skeleton 호환) ===== */
.fs-skeleton{position:relative;display:block;overflow:hidden;border-radius:var(--fx-radius-s);background:var(--fx-card-2)}
.fs-skeleton::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:rgba(255,255,255,.04);transform:translateX(-100%);animation:fx-skeleton 1.4s var(--fx-ease-std) infinite}
[data-fx-surface="light"] .fs-skeleton::after{background:rgba(255,255,255,.65)}
.fx-skeleton--text,.fs-skeleton--text{display:block;height:14px;margin:6px 0}
.fs-skeleton--title{height:22px;margin:8px 0;width:60%}
.fx-skeleton--avatar,.fs-skeleton--avatar{width:44px;height:44px;border-radius:50%}
.fs-skeleton--block{height:120px}
.fx-skeleton--row{height:54px;border-radius:var(--fx-radius-s)}

/* ===== 토스트는 없다 — 알림은 island.css(.fx-island, 위쪽 가운데 알약)가 맡는다. 호출은 FXUI.toast(msg,'ok'|'error'|'info') 한 곳. ===== */

/* ===== 모달 — 마크업 (js/fx/ui.js 가 열고 닫는다):
   <button data-fx-modal="ID">열기</button>
   <div class="fx-modal" id="ID" role="dialog" aria-modal="true" aria-labelledby="ID-t" hidden>
     <div class="fx-modal__scrim" data-fx-modal-close></div>
     <div class="fx-modal__panel">
       <header class="fx-modal__head"><h2 class="fx-modal__title" id="ID-t">제목</h2><button class="fx-modal__close" type="button" data-fx-modal-close aria-label="닫기">&times;</button></header>
       <div class="fx-modal__body">…</div>
       <footer class="fx-modal__foot"><button class="fx-button fx-button--line fx-button--sm" data-fx-modal-close>취소</button><button class="fx-button fx-button--lime fx-button--sm">확인</button></footer>
     </div></div>
   포커스 가두기는 JS 가 맡고, CSS 는 스크롤 잠금·배치·모바일 시트만 한다. ===== */
.fx-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:var(--fx-sp-4)}
.fx-modal.is-open{display:flex}
.fx-modal[hidden]{display:none}
.fx-modal__scrim{position:absolute;inset:0;background:rgba(10,10,11,.7)}
.fx-modal__panel{
  position:relative;display:flex;flex-direction:column;width:min(480px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  overflow:hidden;border-radius:var(--fx-radius-l);background:var(--fx-card);color:var(--fx-fg);
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong),var(--fx-shadow-l);
  animation:fx-modal-in .28s var(--fx-ease-out);
}
.fx-modal--wide .fx-modal__panel{width:min(680px,100%)}
.fx-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fx-sp-3);padding:20px 8px 0 24px}
.fx-modal__title{margin:6px 0 0;font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-modal__close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--fx-fg-2);font-size:28px;line-height:1;cursor:pointer;transition:background-color .2s,color .2s}
.fx-modal__close:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fx-modal__close:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--fx-sp-3) 24px 24px;font-size:16px;line-height:1.7;color:var(--fx-fg-2)}
.fx-modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fx-sp-2);padding:var(--fx-sp-4) 24px 24px;border-top:1px solid var(--fx-edge)}
body.fx-modal-open{overflow:hidden}
@keyframes fx-modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* ===== 알림 (404·결제 실패·저장 실패 등 오류/안내 상태). 색만으로 전하지 않도록 기호 + 제목 + 글.
   <div class="fx-alert fx-alert--error" role="alert"><p class="fx-alert__t">결제가 끝나지 않았어요</p><p class="fx-alert__d">…</p><div class="fx-alert__act">…버튼…</div></div>
   fx-alert--error | --ok | (기본=안내) ===== */
.fx-alert{
  --fx-alert-c:var(--fx-fg);--fx-alert-glyph:"i";
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--fx-sp-4);align-items:start;
  padding:var(--fx-sp-4) 20px;border-radius:var(--fx-radius-m);background:var(--fx-tint);
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);
}
.fx-alert::before{content:var(--fx-alert-glyph);grid-row:1/span 3;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--fx-alert-c);color:var(--fx-bg);font-size:15px;font-weight:700;line-height:1}
.fx-alert--error{--fx-alert-c:var(--fx-danger);--fx-alert-glyph:"!";background:rgba(255,122,107,.09);box-shadow:inset 0 0 0 1.5px var(--fx-danger)}
[data-fx-surface="light"] .fx-alert--error{background:rgba(180,35,24,.06)}
.fx-alert--ok{--fx-alert-c:var(--fx-brand);--fx-alert-glyph:"✓"}
.fx-alert--ok::before{color:var(--fx-brand-ink)}
.fx-alert__t{grid-column:2;margin:0;font-size:17px;font-weight:700;line-height:1.4}
.fx-alert__d{grid-column:2;margin:0;font-size:16px;line-height:1.7;color:var(--fx-fg-2)}
.fx-alert__act{grid-column:2;display:flex;flex-wrap:wrap;gap:var(--fx-sp-2);margin-top:var(--fx-sp-2)}

/* ===== 빈 상태 보강 — .fx-empty 에 변형만 추가(항상 다음 행동 .fx-empty__act 를 둔다) ===== */
.fx-empty--center{justify-items:center;text-align:center}
.fx-empty--center .fx-empty__act{justify-content:center}
.fx-empty--solid{border-style:solid;border-color:var(--fx-edge)}
.fx-empty--compact{padding:var(--fx-sp-6)}
/* 밝은 면 위 카드형(장바구니·체크아웃·주문 완료 빈 상태 공통) */
.fx-empty--card{max-width:640px;margin:24px auto 0;padding:56px 32px;background:#fff;border:1px solid var(--fx-edge-paper);border-radius:var(--fx-radius-l);color:var(--fx-k1)}
.fx-empty--card .fx-empty__t{color:var(--fx-k1)}
.fx-empty--card .fx-empty__d{color:var(--fx-k2);font-size:17px;line-height:1.7}
.fx-empty--card .fx-empty__act{margin-top:12px}
.fx-empty--card .fx-button--line{color:var(--fx-k1);box-shadow:inset 0 0 0 1px rgba(17,17,17,.5)}
@media (max-width:767px){.fx-empty--card{padding:40px 20px}}

/* ===== 3-B 반응형·모션 ===== */
@media (max-width:480px){
  .fx-modal{align-items:flex-end;padding:0}
  .fx-modal__panel{width:100%;max-height:88vh;max-height:88dvh;border-radius:var(--fx-radius-l) var(--fx-radius-l) 0 0;padding-bottom:env(safe-area-inset-bottom,0)}
  .fx-modal__head{padding-left:20px}
  .fx-modal__body{padding:var(--fx-sp-3) 20px 20px}
  .fx-modal__foot{padding:var(--fx-sp-4) 20px 20px}
  .fx-modal__foot .fx-button{flex:1 1 0}
  .fx-alert{padding:var(--fx-sp-4)}
}
@media (max-width:380px){
  .fs-blockloader{padding:20px 12px}
  .fs-fullloader{padding:32px 14px}
}
@media (prefers-reduced-motion:reduce){
  .fx-spinner,.fs-spin{animation:none;border-top-color:currentColor;opacity:.45}
  .fs-skeleton::after{animation:none;opacity:0}
  .fx-modal__panel{animation:none}
}

/* 갈림길 링크(T4) - 줄 머리 + 밑줄 링크. 박스·띠 없음 */
.fx-xl__in{display:grid;gap:var(--fx-sp-6)}
.fx-xl__t{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.fx-xl__list{margin:0;padding:0;border-top:1px solid var(--fx-edge-strong)}
.fx-xl__row{display:grid;gap:0 var(--fx-sp-6);padding:var(--fx-sp-2) 0;border-bottom:1px solid var(--fx-edge-ink)}
.fx-xl__k{margin:0;display:flex;align-items:center;min-height:44px;font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-xl__v{margin:0;display:flex;flex-wrap:wrap;gap:0 20px}
.fx-xl__v--col{flex-direction:column;gap:0}
.fx-xl__v a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:600;line-height:1.4;color:var(--fx-fg);text-decoration:underline;text-decoration-color:var(--fx-edge-strong);text-underline-offset:.25em;transition:color .2s}
.fx-xl__v a:hover{color:var(--fx-brand)}
@media (min-width:768px){
  .fx-xl__row{grid-template-columns:220px minmax(0,1fr);align-items:start}
}