/* ============================================================
   ARIFE 이야기 짜기 옷 v5000 — 한 장짜리

   가짜 아이디를 왜 쓰나 (중요 — v1810 에서 배운 것)
     arife-glass-pages-v600.css 가 이렇게 걸어 둔다.
       html body[data-glass-page].a-glass-page:not(#nope) button { …!important }
     가짜 아이디 하나 + 클래스 셋이라, 클래스만 쓰는 규칙은 전부 진다.
     이기려면 ① 가짜 아이디 **둘**(:not(#nope):not(#_)) ② 우리도 !important
     ③ ::before 광택은 content:none 으로 따로 끄기 — 셋이 다 필요하다.

   색은 사이트 것을 그대로 쓴다. 여기서만 새로 정하면 사이트 색을 바꿀 때
   이 화면만 혼자 남는다.
   ============================================================ */

.fx-wrap{
  --fx-card:#fff;
  --fx-edge:#d3ddec;
  --fx-edge-strong:#b3c4dc;
  --fx-ink:#101d2e;
  --fx-dim:#56637a;
  --fx-faint:#8592a8;
  --fx-key:#2f62ad;
  --fx-key-soft:#eaf1fc;

  max-width:1180px;
  margin:26px auto 90px;
  padding:0 20px;
  position:relative;
  z-index:1;
  color:var(--fx-ink);
}

/* ── 광택 걷어내기 (이게 없으면 아래 규칙이 전부 무시된다) ── */
.fx-wrap :is(button,select,textarea,input):not(#nope):not(#_){
  background:none !important;
  background-color:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--fx-edge) !important;
  box-shadow:none !important;
  color:var(--fx-ink) !important;
  font-family:inherit;
}
.fx-wrap :is(button,select,textarea,input):not(#nope):not(#_)::before{ content:none !important; }

/* ── 판 ─────────────────────────────────────────────── */
.fx-card{
  background:var(--fx-card);
  border:1px solid var(--fx-edge);
  border-radius:18px;
  padding:18px 20px 20px;
  margin:0 0 14px;
  box-shadow:0 18px 40px -30px rgba(16,45,95,.5);
}
.fx-card > header{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 13px;padding:0 0 11px;border-bottom:1px solid var(--fx-edge);
}
.fx-card > header b{color:var(--fx-ink);font:900 14.5px/1.3 inherit}
.fx-card > header span{color:var(--fx-dim);font:700 11.5px/1.5 inherit}
.fx-card > header .fx-re{margin-left:auto}

.fx-warn{
  background:#fff;border:1px solid var(--fx-edge);border-radius:16px;
  padding:22px;text-align:center;color:var(--fx-dim);font:800 13px/1.6 inherit;
}

/* ── 머리 · 작품 고르기 ─────────────────────────────── */
.fx-head{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 14px;
}
.fx-head label{display:flex;flex-direction:column;gap:4px;min-width:0}
.fx-head label span{color:var(--fx-dim);font:800 11.5px/1 inherit}
.fx-wrap .fx-head :is(input,select):not(#nope):not(#_){
  min-height:40px;padding:0 12px;border-radius:11px;font:800 13px/1 inherit;
  background:#fff !important;
}
.fx-head .fx-name input{min-width:240px}
.fx-head .fx-open select{min-width:180px;cursor:pointer}
.fx-wrap .fx-head > button:not(#nope):not(#_){
  min-height:40px;padding:0 15px;border-radius:11px;background:#fff !important;
  font:800 12px/1 inherit;cursor:pointer;
}

/* ── ① 무엇을 만들까요 ──────────────────────────────── */
.fx-wrap .fx-ask textarea:not(#nope):not(#_){
  width:100%;padding:13px 15px;border-radius:13px;resize:vertical;
  background:#fbfcfe !important;font:800 14.5px/1.6 inherit;
}
.fx-wrap .fx-ask textarea:not(#nope):not(#_)::placeholder{color:var(--fx-faint) !important;font-weight:700}
.fx-wrap .fx-ask textarea:not(#nope):not(#_):focus{
  outline:none;border-color:var(--fx-key) !important;
  box-shadow:0 0 0 3px rgba(47,98,173,.14) !important;
}
.fx-egs{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 0}
.fx-wrap .fx-eg:not(#nope):not(#_){
  min-height:28px;padding:0 10px;border-radius:999px;
  background:var(--fx-key-soft) !important;border-color:transparent !important;
  color:var(--fx-key) !important;font:700 11px/1 inherit;cursor:pointer;
}
.fx-hint{margin:10px 0 0;color:var(--fx-faint);font:700 11.5px/1.6 inherit}

.fx-rows{display:flex;gap:18px;flex-wrap:wrap;margin:15px 0 0}
.fx-rows label{display:flex;flex-direction:column;gap:6px;min-width:0}
.fx-rows label > span{color:var(--fx-dim);font:800 11.5px/1 inherit}
.fx-chips{display:flex;gap:6px;flex-wrap:wrap}
.fx-wrap .fx-chip:not(#nope):not(#_){
  min-height:34px;padding:0 13px;border-radius:10px;
  background:#fff !important;font:800 12px/1 inherit;cursor:pointer;
}
.fx-wrap .fx-chip.is-on:not(#nope):not(#_){
  background:var(--fx-key) !important;border-color:transparent !important;color:#fff !important;
}

.fx-acts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.fx-wrap .fx-acts button:not(#nope):not(#_){
  min-height:44px;padding:0 20px;border-radius:12px;background:#fff !important;
  font:800 13px/1 inherit;cursor:pointer;
}
/* ★ 이 줄에 type 선택자(button)를 꼭 붙인다.
   바로 위 `.fx-wrap .fx-acts button` 이 (클래스2 + type1) 이라, type 이 없는
   `.fx-wrap .fx-go` 는 진다. 실제로 졌다 — 파란 단추가 **흰 바탕에 흰 글씨**로
   나와서 빈 알약처럼 보였다(실측). 우열은 !important 로도 안 뒤집힌다. */
.fx-wrap .fx-acts button.fx-go:not(#nope):not(#_){
  background:var(--fx-key) !important;border-color:transparent !important;color:#fff !important;
}
.fx-wrap .fx-acts button.fx-go:hover:not(#nope):not(#_){background:#27538f !important}
.fx-wrap .fx-acts button[disabled]:not(#nope):not(#_){opacity:.55;cursor:default}
.fx-wrap .fx-re:not(#nope):not(#_){
  min-height:30px;padding:0 11px;border-radius:9px;background:#fff !important;
  font:800 11px/1 inherit;cursor:pointer;
}
.fx-wrap .fx-re[disabled]:not(#nope):not(#_){opacity:.5;cursor:default}

/* ── ② 톤앤매너 ─────────────────────────────────────── */
.fx-wrap .fx-tone:not(#nope):not(#_){
  width:100%;padding:11px 13px;border-radius:12px;resize:vertical;
  background:#fbfcfe !important;font:800 13px/1.7 inherit;
}
.fx-words{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0;align-items:center}
.fx-word{
  display:inline-flex;align-items:center;gap:5px;
  min-height:30px;padding:0 6px 0 11px;border-radius:999px;
  background:var(--fx-key-soft);color:var(--fx-key);font:800 12px/1 inherit;
}
.fx-wrap .fx-word button:not(#nope):not(#_){
  width:19px;height:19px;border-radius:50%;border-color:transparent !important;
  display:grid;place-items:center;color:var(--fx-key) !important;
  font:700 12px/1 inherit;cursor:pointer;opacity:.6;
}
.fx-wrap .fx-word button:hover:not(#nope):not(#_){opacity:1;background:#fff !important}
.fx-wrap .fx-addword:not(#nope):not(#_){
  min-height:30px;padding:0 11px;border-radius:999px;background:#fff !important;
  border-style:dashed !important;color:var(--fx-dim) !important;font:800 11.5px/1 inherit;cursor:pointer;
}

/* ── ③ 이야기 전개 ──────────────────────────────────── */
.fx-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fx-beats li{display:flex;gap:11px;align-items:flex-start}
.fx-beats b{
  flex:0 0 auto;min-width:64px;margin-top:9px;
  color:var(--fx-key);font:900 12px/1.3 inherit;
}
.fx-wrap .fx-beats textarea:not(#nope):not(#_){
  flex:1 1 auto;min-width:0;padding:10px 13px;border-radius:11px;resize:vertical;
  background:#fbfcfe !important;font:700 12.5px/1.7 inherit;
}

/* ── ④ 스토리보드 ───────────────────────────────────── */
.fx-shots{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:13px;
}
.fx-shot{
  display:flex;flex-direction:column;gap:8px;min-width:0;
  padding:10px;border:1px solid var(--fx-edge);border-radius:15px;background:#fbfcfe;
}
.fx-shot.is-busy{opacity:.72}
.fx-shotpic{
  position:relative;border-radius:11px;overflow:hidden;
  background:linear-gradient(180deg,#e7eefa,#d8e4f4);
  display:grid;place-items:center;
}
.fx-shotpic img{width:100%;height:100%;object-fit:cover;display:block}
.fx-nopic{color:#8ba0bd;font:800 11.5px/1 inherit}
.fx-shotpic .fx-no{
  position:absolute;left:7px;top:7px;
  min-width:26px;height:22px;padding:0 7px;border-radius:7px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);
  color:var(--fx-ink);font:900 12px/1 inherit;
}
.fx-ko{margin:0;color:var(--fx-ink);font:800 12.5px/1.55 inherit;min-height:1.55em}
.fx-wrap .fx-shot textarea:not(#nope):not(#_){
  width:100%;padding:9px 11px;border-radius:10px;resize:vertical;
  background:#fff !important;font:700 11.5px/1.6 inherit;
}
.fx-craft{margin:0;color:var(--fx-faint);font:800 10.5px/1.5 inherit}
.fx-craft em{font-style:normal;opacity:.8}
.fx-shotacts{display:flex;gap:6px;margin-top:auto}
.fx-wrap .fx-shotacts button:not(#nope):not(#_){
  flex:1 1 auto;min-height:34px;padding:0 9px;border-radius:10px;
  background:#fff !important;font:800 11.5px/1 inherit;cursor:pointer;
}
.fx-wrap .fx-shotacts button[disabled]:not(#nope):not(#_){opacity:.55;cursor:default}
.fx-wrap .fx-del:not(#nope):not(#_){flex:0 0 auto;color:#a2687e !important}
.fx-wrap .fx-del:hover:not(#nope):not(#_){background:#b03a28 !important;border-color:transparent !important;color:#fff !important}
.fx-note{margin:13px 0 0;color:var(--fx-faint);font:700 11px/1.6 inherit}

/* ── 다음 ───────────────────────────────────────────── */
.fx-next b{display:block;color:var(--fx-ink);font:900 14px/1.3 inherit}
.fx-next p{margin:7px 0 0;color:var(--fx-dim);font:700 12px/1.7 inherit}

/* ── 알림 한 줄 ─────────────────────────────────────── */
/* 화면 아래에 붙여 둔다. 글 흐름 안에 두면 카드 사이에 끼어 들어가
   ④ 머리글을 가린다(실측). */
.fx-msg{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;
  width:max-content;max-width:calc(100% - 40px);
  padding:11px 18px;border-radius:12px;
  background:rgba(243,248,254,.97);border:1px solid var(--fx-edge);
  box-shadow:0 18px 40px -22px rgba(16,45,95,.55);
  color:var(--fx-ink);font:800 12.5px/1.5 inherit;
}
.fx-msg.is-bad{background:#fdf1ee;border-color:#e6bcb1;color:#8f2f1c}
.fx-msg[hidden]{display:none}

/* ── 좁은 화면 ──────────────────────────────────────── */
@media (max-width:640px){
  .fx-wrap{padding:0 14px;margin:18px auto 70px}
  .fx-card{padding:15px 14px 16px;border-radius:15px}
  .fx-rows{gap:13px}
  .fx-shots{grid-template-columns:1fr}
  .fx-beats li{flex-direction:column;gap:5px}
  .fx-beats b{margin-top:0}
}

/* ============================================================
   어두운 화면 한 벌 (2026-08-31)

   여기 색은 밝은 화면 기준 한 벌뿐이었다(--fx-card:#fff …).
   어두울 때는 사이트 공용 시트가 대신 칠해 주는데, 그러다 보니
     · 판이 바닥(#26282b) 바로 위 한 칸(#2e3134)에만 서서 층이 눌렸다
     · [class*="hint"] 를 '안내 판'으로 보고 도움말 한 줄에까지
       움푹한 바닥색을 칠해, 판 안에 까만 띠가 생겼다(실측)
   다른 작업 화면들과 같은 층(바닥·판·칸)으로 맞추고,
   도움말은 글줄로 되돌린다.
   ============================================================ */
html[data-theme="dark"] .fx-wrap{
  --fx-card:#34383d;
  --fx-edge:rgba(255,255,255,.10);
  --fx-edge-strong:rgba(255,255,255,.20);
  --fx-ink:#f1f2f4;
  --fx-dim:#a8b0ba;
  --fx-faint:#8a929c;
  --fx-key:#9dc2ff;
  --fx-key-soft:#2b3a50;
}
html[data-theme="dark"] body:not(#_u):not(#_v):not(#_w):not(#_x):not(#_y):not(#_z):not(#_1):not(#_2):not(#_3) .fx-wrap .fx-card{
  background:#34383d!important;background-image:none!important;
  border-color:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 50px -24px rgba(0,0,0,.70),0 4px 12px -6px rgba(0,0,0,.5)!important;
}
/* 도움말은 판이 아니라 글 한 줄이다 — 바탕을 벗긴다 */
html[data-theme="dark"] body:not(#_u):not(#_v):not(#_w):not(#_x):not(#_y):not(#_z):not(#_1):not(#_2):not(#_3) .fx-wrap .fx-hint{
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;padding:0!important;
  color:#a8b0ba!important;
}

/* ============================================================
   v5100 (2026-09-05) — 길잡이 띠 · 짜는 중 표시 · 접힌 프롬프트 · 아래 고정 띠
   ============================================================ */
/* ── 길잡이 띠 ── */
.fx-steps{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:0 0 14px;padding:10px 12px;
  border:1px solid var(--fx-edge);border-radius:14px;background:var(--fx-card);
}
.fx-wrap .fx-steps .fx-step:not(#nope):not(#_){
  display:inline-flex;align-items:center;gap:7px;
  min-height:30px;padding:0 11px 0 6px;border-radius:999px;
  border:1px solid transparent !important;background:transparent !important;
  color:var(--fx-faint) !important;font:800 12px/1 inherit;cursor:default;
}
.fx-wrap .fx-steps .fx-step i{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--fx-edge);color:var(--fx-dim);font:900 11px/1 inherit;font-style:normal;
}
.fx-wrap .fx-steps .fx-step.is-done:not(#nope):not(#_){color:var(--fx-dim) !important;cursor:pointer}
.fx-wrap .fx-steps .fx-step.is-done i{background:#dfe9f7;color:var(--fx-key)}
.fx-wrap .fx-steps .fx-step.is-now:not(#nope):not(#_){
  background:var(--fx-key-soft) !important;border-color:rgba(47,98,173,.35) !important;color:var(--fx-key) !important;
}
.fx-wrap .fx-steps .fx-step.is-now i{background:var(--fx-key);color:#fff}
.fx-wrap .fx-steps .fx-step.is-next:not(#nope):not(#_){color:var(--fx-key) !important;cursor:pointer}
.fx-wrap .fx-steps .fx-step.is-next i{background:var(--fx-key);color:#fff}
.fx-wrap .fx-steps .fx-step.is-done:hover:not(#nope):not(#_),
.fx-wrap .fx-steps .fx-step.is-next:hover:not(#nope):not(#_){background:var(--fx-key-soft) !important}
.fx-step-arrow{color:var(--fx-edge-strong);font:900 14px/1 inherit}

/* ── 짜는 중 ── */
.fx-busy{padding:16px 20px 18px}
.fx-busy-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fx-busy-head b{color:var(--fx-ink);font:900 14px/1.3 inherit}
.fx-busy-head span{color:var(--fx-faint);font:700 11.5px/1.4 inherit}
.fx-busy-bar{height:6px;margin:12px 0 10px;border-radius:999px;background:var(--fx-edge);overflow:hidden}
.fx-busy-bar i{display:block;height:100%;border-radius:999px;background:var(--fx-key);transition:width 1s linear;position:relative}
.fx-busy-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:fx-shimmer 1.4s linear infinite}
@keyframes fx-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.fx-busy-label{margin:0;color:var(--fx-dim);font:800 12.5px/1.5 inherit}
.fx-busy-steps{display:flex;gap:8px;list-style:none;margin:10px 0 0;padding:0;flex-wrap:wrap}
.fx-busy-steps li{
  padding:5px 10px;border-radius:999px;border:1px solid var(--fx-edge);
  color:var(--fx-faint);font:800 11px/1 inherit;
}
.fx-busy-steps li.is-now{border-color:rgba(47,98,173,.4);background:var(--fx-key-soft);color:var(--fx-key)}
.fx-busy-steps li.is-done{background:#dfe9f7;border-color:transparent;color:var(--fx-key)}
.fx-busy-steps li.is-done::before{content:"✓ "}

/* ── 씬 카드: 프롬프트 접기 · 촬영 말 줄이기 ── */
.fx-prompt{margin:0 0 8px}
.fx-prompt > summary{
  list-style:none;cursor:pointer;
  color:var(--fx-key);font:800 11px/1.4 inherit;padding:2px 0;
}
.fx-prompt > summary::-webkit-details-marker{display:none}
.fx-prompt > summary::before{content:"▸ ";font-size:10px}
.fx-prompt[open] > summary::before{content:"▾ "}
.fx-prompt > textarea{margin-top:6px}
.fx-craft{cursor:help}

/* ── 모두 뽑기 ── */
.fx-wrap .fx-re.fx-drawall:not(#nope):not(#_){margin-left:auto;color:var(--fx-key) !important;border-color:rgba(47,98,173,.35) !important}
.fx-wrap .fx-re.fx-drawall + .fx-re:not(#nope):not(#_){margin-left:6px}
.fx-wrap .fx-re.fx-drawall.is-armed:not(#nope):not(#_){background:var(--fx-key) !important;color:#fff !important;border-color:transparent !important}

/* ── 아래 고정 띠 ── */
#fx-root.has-dock{padding-bottom:84px}
.fx-dock{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  z-index:60;width:min(1140px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px 10px 18px;border-radius:16px;
  background:var(--fx-card);border:1px solid var(--fx-edge-strong);
  box-shadow:0 18px 40px -18px rgba(16,45,95,.45),0 4px 12px -6px rgba(16,45,95,.25);
}
.fx-dock-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-dock-info b{color:var(--fx-ink);font:900 13px/1.3 inherit}
.fx-dock-info span{color:var(--fx-faint);font:700 11px/1.4 inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-dock-acts{display:flex;gap:8px;flex:none}
.fx-wrap .fx-dock-acts button:not(#nope):not(#_){
  min-height:38px;padding:0 14px;border-radius:11px;background:#fff !important;
  color:var(--fx-ink) !important;font:800 12.5px/1 inherit;cursor:pointer;
}
.fx-wrap .fx-dock-acts button.fx-go:not(#nope):not(#_){
  background:var(--fx-key) !important;border-color:transparent !important;color:#fff !important;padding:0 18px;
}
.fx-wrap .fx-dock-acts button.fx-go:hover:not(#nope):not(#_){background:#27538f !important}
@media (max-width:640px){
  .fx-dock{padding:9px 10px;gap:8px;bottom:10px}
  .fx-dock-info span{display:none}
  .fx-steps{gap:2px;padding:8px}
  .fx-wrap .fx-steps .fx-step:not(#nope):not(#_){padding:0 7px 0 4px;font-size:11px}
  .fx-wrap .fx-steps .fx-step span{display:none}
  .fx-wrap .fx-steps .fx-step.is-now span,.fx-wrap .fx-steps .fx-step.is-next span{display:inline}
}
/* 다크 */
html[data-theme="dark"] body:not(#_u):not(#_v):not(#_w):not(#_x):not(#_y):not(#_z):not(#_1):not(#_2):not(#_3) .fx-wrap :is(.fx-steps,.fx-dock){
  background:#34383d!important;background-image:none!important;border-color:rgba(255,255,255,.12)!important;
}
html[data-theme="dark"] .fx-wrap .fx-steps .fx-step.is-done i,
html[data-theme="dark"] .fx-wrap .fx-busy-steps li.is-done{background:#2b3a50;color:#9dc2ff}
html[data-theme="dark"] .fx-wrap .fx-dock-acts button:not(.fx-go):not(#nope):not(#_){background:#3e4348 !important}

/* ============================================================
   v5110 (2026-09-05) — 단추에 입체감 (사장님: "단추들이 입체감이 없다")
   사이트 「단추 한 벌 v900」과 같은 결: 테두리 + 위 하이라이트 + 아래 그림자,
   올리면 살짝 뜨고 누르면 눌린다. 선택자는 위 규칙들과 같은 세기(#nope #_)에
   뒤에 두어 이긴다. 바탕 규칙은 :not(#__), 그 위에 덮는 규칙(고른 칩·파란 단추·hover)은 :not(#___) 로 한 단계 더.
   ============================================================ */
.fx-wrap :is(.fx-chip,.fx-eg,.fx-re,.fx-acts button,.fx-shotacts button,.fx-head > button,.fx-addword,.fx-dock-acts button,.fx-steps .fx-step.is-done,.fx-steps .fx-step.is-next):not(#nope):not(#_):not(#__){
  background:#fff !important;
  background-image:linear-gradient(180deg,#ffffff,#f3f7fc) !important;
  border:1px solid #c9d7ea !important;
  box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(16,40,90,.14), 0 4px 10px -6px rgba(16,40,90,.35) !important;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
.fx-wrap :is(.fx-chip,.fx-eg,.fx-re,.fx-acts button,.fx-shotacts button,.fx-head > button,.fx-addword,.fx-dock-acts button):hover:not([disabled]):not(#nope):not(#_):not(#__):not(#___){
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(16,40,90,.16), 0 8px 16px -8px rgba(16,40,90,.4) !important;
}
.fx-wrap :is(.fx-chip,.fx-eg,.fx-re,.fx-acts button,.fx-shotacts button,.fx-head > button,.fx-addword,.fx-dock-acts button):active:not([disabled]):not(#nope):not(#_):not(#__):not(#___){
  transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(16,40,90,.18) !important;
}
/* 예시 알약은 연파랑 결을 지킨다 */
.fx-wrap .fx-eg:not(#nope):not(#_):not(#__):not(#___){
  background-image:linear-gradient(180deg,#f2f7ff,#e6efFb) !important;border-color:#c3d6f0 !important;
}
/* 고른 칩 · 파란 주 단추 — 파랑 입체 */
.fx-wrap :is(.fx-chip.is-on,.fx-acts button.fx-go,.fx-dock-acts button.fx-go,.fx-re.fx-drawall.is-armed):not(#nope):not(#_):not(#__):not(#___){
  background:var(--fx-key) !important;
  background-image:linear-gradient(180deg,#4a7fd0,#2f62ad) !important;
  border-color:#24509a !important;color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(16,40,90,.25), 0 6px 14px -6px rgba(31,80,170,.6) !important;
}
.fx-wrap :is(.fx-acts button.fx-go,.fx-dock-acts button.fx-go):hover:not([disabled]):not(#nope):not(#_):not(#__):not(#___){
  background-image:linear-gradient(180deg,#5289da,#27538f) !important;
}
.fx-wrap :is(.fx-chip.is-on,.fx-acts button.fx-go,.fx-dock-acts button.fx-go):active:not([disabled]):not(#nope):not(#_):not(#__):not(#___){
  box-shadow:inset 0 2px 5px rgba(10,30,70,.35) !important;
}
.fx-wrap .fx-del:hover:not(#nope):not(#_):not(#__){background-image:linear-gradient(180deg,#c94b37,#a8321f) !important;border-color:#8f2a19 !important}
.fx-wrap :is(button,.fx-chip)[disabled]:not(#nope):not(#_):not(#__){transform:none;box-shadow:none !important;opacity:.55}
/* 다크 */
html[data-theme="dark"] .fx-wrap :is(.fx-chip,.fx-eg,.fx-re,.fx-acts button,.fx-shotacts button,.fx-head > button,.fx-addword,.fx-dock-acts button,.fx-steps .fx-step.is-done,.fx-steps .fx-step.is-next):not(#nope):not(#_):not(#__){
  background:#3e4348 !important;
  background-image:linear-gradient(180deg,#464b51,#363a3f) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.35), 0 4px 10px -6px rgba(0,0,0,.6) !important;
}
html[data-theme="dark"] .fx-wrap .fx-eg:not(#nope):not(#_):not(#__){background-image:linear-gradient(180deg,#334158,#2b3a50) !important;border-color:rgba(157,194,255,.3) !important}
html[data-theme="dark"] .fx-wrap :is(.fx-chip.is-on,.fx-acts button.fx-go,.fx-dock-acts button.fx-go,.fx-re.fx-drawall.is-armed):not(#nope):not(#_):not(#__):not(#___){
  background-image:linear-gradient(180deg,#4a7fd0,#2f62ad) !important;border-color:#24509a !important;color:#fff !important;
}