/* ============================================================
   ARIFE 취향 칩 · 생성 설정 창 v4700
   콘솔·모델 팝업과 같은 유리 재질을 쓴다.
   ============================================================ */

/* ── 지금 걸린 취향 ───────────────────────────────────────────
   콘솔의 만드는 칸은 자리 이름으로 배치된다(v4300). 이름 없는 것을
   끼워 넣으면 이름 붙은 칸들 '뒤' 로 밀려나 맨 아래에 붙는다 —
   실제로 그렇게 나왔다. 칩이 있을 때만 맨 윗줄을 하나 더 연다. */
.ic-dock .tool-composer-grid-v2000:has(> .tx-taste-chip):not(#_):not(#_){
  grid-template-areas:
    "taste    taste"
    "prompt   ref"
    "controls submit"!important;
}
.ic-dock .tx-taste-chip:not(#_):not(#_){ grid-area:taste!important; }


.tx-taste-chip:not(#_):not(#_){
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:36px!important;
  margin:0 0 2px!important;
  padding:0 6px 0 12px!important;
  border:1px solid rgba(143,125,255,.34)!important;
  border-radius:11px!important;
  background:rgba(143,125,255,.11)!important;
  font-size:12px!important;
}
.tx-taste-chip > b{ color:#c9c2ff; font-weight:850; white-space:nowrap; }
.tx-taste-chip > span{ color:#eef4ff; font-weight:750; }
.tx-taste-chip > em{
  flex:1 1 auto; min-width:0;
  color:#9aa8c0; font-style:normal; font-size:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tx-taste-chip > em.tx-none{ color:#7d8ca1; }
.tx-taste-chip .tx-x{
  flex:0 0 auto;
  width:26px; height:26px;
  border:0; border-radius:8px;
  background:transparent; color:#9aa8c0;
  font-size:16px; line-height:1; cursor:pointer;
}
.tx-taste-chip .tx-x:hover{ background:rgba(255,255,255,.08); color:#eef4ff; }

/* ── 탭 줄의 '생성 설정' 단추 ───────────────────────────────── */
.ic-dock .tx-open-btn svg{ flex:0 0 auto; }

/* ── 생성 설정 창 ───────────────────────────────────────────── */
.tx-set{
  position:fixed; inset:0; z-index:640;
  display:grid; place-items:center;
  padding:24px;
}
.tx-set[hidden]{ display:none; }
.tx-set-back{
  position:absolute; inset:0;
  border:0; padding:0;
  background:rgba(2,6,12,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  cursor:default;
}
.tx-set-box{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(720px,calc(100vw - 40px));
  max-height:min(760px,calc(100vh - 80px));
  overflow:hidden;
  border:1px solid rgba(151,197,231,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,19,30,.78),rgba(7,11,18,.84));
  box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.09);
  color:#e8f0fb;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .tx-set-box{
    background:linear-gradient(180deg,rgba(12,19,30,.6),rgba(7,11,18,.68));
    -webkit-backdrop-filter:blur(26px) saturate(1.25);
    backdrop-filter:blur(26px) saturate(1.25);
  }
}
.tx-set-box > header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(151,197,231,.14);
}
.tx-set-box h2{ margin:0; color:#f0f6ff; font-size:19px; letter-spacing:-.03em; }
.tx-set-box header p{ margin:5px 0 0; color:#8b9bb1; font-size:11.5px; line-height:1.5; }
.tx-set-x{
  flex:0 0 auto;
  width:40px; height:40px;
  border:1px solid rgba(151,197,231,.2); border-radius:12px;
  background:rgba(9,15,24,.55); color:#cfdcec;
  font-size:18px; cursor:pointer;
}
.tx-set-x:hover{ border-color:rgba(120,225,250,.4); background:rgba(20,38,54,.7); }
.tx-set-body{ padding:16px 22px 20px; overflow:auto; overscroll-behavior:contain; }

.tx-sec{ padding:0 0 16px; }
.tx-sec + .tx-sec{ padding-top:16px; border-top:1px solid rgba(151,197,231,.11); }
.tx-sec h3{
  margin:0 0 11px;
  color:#cfdcec; font-size:12.5px; font-weight:820;
}
.tx-sec h3 em{
  margin-left:8px;
  color:#7d8ca1; font-size:11px; font-style:normal; font-weight:700;
}

/* 화면 비율 : 왼쪽에 나올 모양, 오른쪽에 고르는 칸 */
.tx-ratio{ display:grid; grid-template-columns:124px minmax(0,1fr); align-items:center; gap:16px; }
.tx-ratio-prev{
  display:grid; place-items:center; gap:8px;
  height:124px;
  border:1px dashed rgba(151,197,231,.24); border-radius:14px;
}
.tx-ratio-prev .tx-box{
  border:1px solid rgba(120,225,250,.45); border-radius:6px;
  background:rgba(95,214,245,.1);
  transition:width .18s ease,height .18s ease;
}
.tx-ratio-prev .tx-lab{ color:#bdeeff; font-size:11px; font-weight:800; }
.tx-seg{
  display:inline-flex; gap:4px;
  margin:0 0 9px; padding:4px;
  border:1px solid rgba(151,197,231,.16); border-radius:12px;
  background:rgba(6,12,20,.42);
}
.tx-seg button{
  min-height:32px; padding:0 14px;
  border:0; border-radius:9px;
  background:transparent; color:#8b9bb1;
  font-size:11.5px; font-weight:800; cursor:pointer;
  transition:color .18s ease,background-color .18s ease;
}
.tx-seg button.on{ background:rgba(95,214,245,.16); color:#bdeeff; }
.tx-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tx-chips button{
  min-height:34px; padding:0 12px;
  border:1px solid rgba(151,197,231,.16); border-radius:10px;
  background:rgba(255,255,255,.04); color:#a9b8cc;
  font-size:11.5px; font-weight:750; cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.tx-chips button:hover{ border-color:rgba(120,225,250,.36); color:#e2eefb; }
.tx-chips button.on{
  border-color:rgba(120,225,250,.5);
  background:rgba(95,214,245,.14);
  color:#bdeeff;
}

/* 느낌 슬라이더 */
.tx-aes{ display:grid; gap:14px; }
.tx-aes-row{ display:grid; gap:5px; }
.tx-aes-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.tx-aes-top span{ color:#dbe6f4; font-size:12px; font-weight:780; }
.tx-aes-top b{ color:#bdeeff; font-size:11.5px; font-weight:850; }
.tx-aes-row small{ color:#75839a; font-size:10.5px; line-height:1.45; }
.tx-aes-row input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; margin:2px 0;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(95,214,245,.5),rgba(143,125,255,.5));
  cursor:pointer;
}
.tx-aes-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  box-shadow:0 2px 8px rgba(55,182,224,.45);
}
.tx-aes-row input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:#4ec9e8;
}
/* 무엇이 붙는지 감추지 않는다 — 이 값들은 진짜 손잡이가 아니라
   '말로 옮겨' 프롬프트에 붙는 것이므로, 붙는 말을 그대로 보여 준다. */
.tx-aes-out{
  margin:12px 0 0; padding:10px 12px;
  border:1px solid rgba(151,197,231,.14); border-radius:11px;
  background:rgba(9,15,24,.5);
  color:#9fb0c6; font-size:11px; line-height:1.6;
  word-break:break-word;
}
.tx-aes-out.tx-empty{ color:#75839a; }

/* 품질 */
.tx-qual{ display:grid; gap:10px; }
.tx-qrow{ display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px; }
.tx-qrow > span{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.tx-qchips{ display:flex; flex-wrap:wrap; gap:6px; }
.tx-qchips button{
  min-height:34px; padding:0 13px;
  border:1px solid rgba(151,197,231,.16); border-radius:10px;
  background:rgba(255,255,255,.04); color:#a9b8cc;
  font-size:11.5px; font-weight:750; cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.tx-qchips button:hover{ border-color:rgba(120,225,250,.36); color:#e2eefb; }
.tx-qchips button.on{
  border-color:rgba(120,225,250,.5);
  background:rgba(95,214,245,.14);
  color:#bdeeff;
}

.tx-set-box > footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px 18px;
  border-top:1px solid rgba(151,197,231,.14);
}
.tx-foot-note{ color:#75839a; font-size:11px; line-height:1.5; }
.tx-done{
  flex:0 0 auto;
  min-height:44px; padding:0 24px;
  border:1px solid rgba(120,225,250,.5); border-radius:12px;
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  box-shadow:0 8px 24px rgba(55,182,224,.28),inset 0 1px rgba(255,255,255,.4);
  color:#04222c; font-size:13.5px; font-weight:850; cursor:pointer;
}
.tx-done:hover{ background:linear-gradient(160deg,#7ce6fb,#45c3ea); }

@media (max-width:640px){
  .tx-set{ padding:10px; }
  .tx-set-box{ max-height:calc(100vh - 20px); border-radius:18px; }
  .tx-ratio{ grid-template-columns:minmax(0,1fr); }
  .tx-ratio-prev{ height:104px; }
  .tx-set-box > footer{ flex-direction:column; align-items:stretch; gap:10px; }
  .tx-done{ width:100%; }
}

/* ============================================================
   '나의 취향 이미지' 가 비어 있을 때 v4700
   전에는 비어 보이지 않게 추천 여덟 장을 대신 세웠다. 그러면 고른
   것처럼 보인다. 이제는 비어 있음을 그대로 말하고, 고르러 가는 문을
   같이 둔다 — 빈 칸이 막다른 길이 되지 않게.
   ============================================================ */
.image-personalization-empty-v415 > div{
  display:grid;
  justify-items:center;
  gap:10px;
  max-width:420px;
}
.image-personalization-empty-v415 strong{
  color:#e8f0fb; font-size:14px; font-weight:820;
}
.image-personalization-empty-v415 p{
  margin:0; color:#8b9bb1; font-size:12px; line-height:1.65;
}
.image-personalization-go-v415{
  display:inline-flex; align-items:center;
  min-height:40px; margin-top:4px; padding:0 18px;
  border:1px solid rgba(120,225,250,.4); border-radius:11px;
  background:rgba(95,214,245,.12);
  color:#bdeeff; font-size:12.5px; font-weight:820; text-decoration:none;
  transition:border-color .18s ease,background-color .18s ease;
}
.image-personalization-go-v415:hover{
  border-color:rgba(120,225,250,.7);
  background:rgba(95,214,245,.2);
}

/* ============================================================
   무드보드 v4700d
   무드보드는 여러 개다. 그러니 담을 이미지도 무드보드마다 따로 고른다.
   계정에 저장된 '취향 20장' 을 끌어다 쓰면 몇 개를 만들든 전부 같은
   20장에서 시작한다 — 그건 '내가 만든 무드보드' 가 아니다.
   ============================================================ */
.ic-dock .ic-board-new:not(#_):not(#_){
  gap:2px;
  padding:14px 12px;
  border-color:rgba(120,225,250,.34)!important;
  background:rgba(95,214,245,.07)!important;
  color:#bdeeff!important;
  line-height:1.6;
}
.ic-dock .ic-board-new b{ color:#eaf9ff; font-weight:900; }
.ic-dock .ic-board-new:hover:not(#_):not(#_){
  border-color:rgba(120,225,250,.6)!important;
  background:rgba(95,214,245,.13)!important;
}
.ic-dock .ic-board-new .ic-bn-plus{
  display:grid; place-items:center;
  width:34px; height:34px; margin:0 0 8px;
  border:1px solid rgba(120,225,250,.36); border-radius:11px;
  background:rgba(95,214,245,.14);
  color:#6fd3ee; font-size:18px; font-style:normal;
}
.ic-dock .ic-board-new .ic-bn-txt{ display:block; line-height:1.6; }

/* 이미 있는 무드보드의 담긴 이미지 고쳐 담기 */
.ic-dock .ic-board .ic-board-add{
  position:absolute; top:7px; left:7px;
  display:inline-flex; align-items:center;
  height:24px; padding:0 9px;
  border:1px solid rgba(120,225,250,.44); border-radius:99px;
  background:rgba(8,34,45,.86);
  color:#bdeeff; font-size:10.5px; font-weight:850; font-style:normal;
  line-height:1; white-space:nowrap; cursor:pointer;
  opacity:0; transition:opacity .15s ease,border-color .15s ease,background-color .15s ease;
}
.ic-dock .ic-board:hover .ic-board-add{ opacity:1; }
.ic-dock .ic-board .ic-board-add:hover{
  border-color:rgba(120,225,250,.8); background:rgba(12,56,72,.94);
}
.ic-dock .ic-board:hover:not(#_):not(#_){ transform:none!important; }

/* ── 담을 이미지 고르는 창 ─────────────────────────────────── */
.mb-pick{
  position:fixed; inset:0; z-index:660;
  display:grid; place-items:center;
  padding:24px;
}
.mb-pick[hidden]{ display:none; }
.mb-back{
  position:absolute; inset:0;
  border:0; padding:0;
  background:rgba(2,6,12,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  cursor:default;
}
.mb-box{
  position:relative;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  width:min(1000px,calc(100vw - 40px));
  max-height:min(820px,calc(100vh - 72px));
  overflow:hidden;
  border:1px solid rgba(151,197,231,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,19,30,.78),rgba(7,11,18,.84));
  box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.09);
  color:#e8f0fb;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .mb-box{
    background:linear-gradient(180deg,rgba(12,19,30,.6),rgba(7,11,18,.68));
    -webkit-backdrop-filter:blur(26px) saturate(1.25);
    backdrop-filter:blur(26px) saturate(1.25);
  }
}
.mb-box > header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px 15px;
  border-bottom:1px solid rgba(151,197,231,.14);
}
.mb-box h2{ margin:0; color:#f0f6ff; font-size:19px; letter-spacing:-.03em; }
.mb-box header p{ margin:5px 0 0; color:#8b9bb1; font-size:11.5px; line-height:1.5; }
.mb-x{
  flex:0 0 auto; width:40px; height:40px;
  border:1px solid rgba(151,197,231,.2); border-radius:12px;
  background:rgba(9,15,24,.55); color:#cfdcec; font-size:18px; cursor:pointer;
}
.mb-x:hover{ border-color:rgba(120,225,250,.4); background:rgba(20,38,54,.7); }

.mb-namebar{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px;
  padding:14px 22px;
  border-bottom:1px solid rgba(151,197,231,.11);
}
.mb-namefield{ display:grid; gap:6px; min-width:0; }
.mb-namefield > span{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.mb-name{
  width:100%; min-height:42px; padding:0 13px;
  border:1px solid rgba(151,197,231,.18); border-radius:12px;
  background:rgba(9,15,24,.55); color:#eef4ff; font-size:13.5px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.mb-name::placeholder{ color:#5f6e83; }
.mb-name:focus{
  outline:none;
  border-color:rgba(120,225,250,.55);
  box-shadow:0 0 0 3px rgba(95,214,245,.14);
}
.mb-count{
  display:inline-flex; align-items:center;
  min-height:42px; padding:0 14px;
  border:1px solid rgba(120,225,250,.3); border-radius:12px;
  background:rgba(95,214,245,.1);
  color:#bdeeff; font-size:12.5px; font-weight:850; white-space:nowrap;
}

.mb-grid{
  display:grid;
  /* 취향 고르는 화면처럼 크게 본다 — 작으면 무엇을 고르는지 알 수 없다 */
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  grid-auto-rows:178px;
  align-content:start;
  gap:9px;
  padding:16px 22px 20px;
  overflow:auto; overscroll-behavior:contain;
}
.mb-empty{
  grid-column:1/-1;
  padding:40px 8px; margin:0;
  color:#8b9bb1; font-size:12.5px; text-align:center; line-height:1.7;
}
/* 칸 높이를 못 박는다 — `<button>` 은 제 속으로 키를 못 재서
   자동으로 두면 줄이 주저앉고 사진이 잘린다(모델·참조 팝업과 같은 문제). */
.mb-tile{
  position:relative;
  display:block; width:100%; height:178px;
  padding:0; overflow:hidden;
  border:1px solid rgba(151,197,231,.16); border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.mb-tile > img{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
}
.mb-tile > small{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 8px 6px;
  background:linear-gradient(180deg,transparent,rgba(3,7,13,.86));
  color:#cfdcec; font-size:10px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left;
}
.mb-check{
  position:absolute; top:7px; right:7px; z-index:3;
  display:grid; place-items:center;
  width:22px; height:22px;
  border:1px solid rgba(255,255,255,.5); border-radius:7px;
  background:rgba(3,9,15,.6);
  transition:background-color .18s ease,border-color .18s ease;
}
.mb-check::after{
  content:''; width:9px; height:5px;
  border-left:2px solid #04222c; border-bottom:2px solid #04222c;
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0; transition:opacity .15s ease;
}
.mb-tile:hover{ border-color:rgba(120,225,250,.4); }
.mb-tile:hover > img{ transform:scale(1.05); }
.mb-tile.on{
  border-color:rgba(120,225,250,.75);
  box-shadow:0 0 0 2px rgba(95,214,245,.35),0 10px 26px rgba(55,182,224,.22);
}
.mb-tile.on > img{ opacity:.82; }
.mb-tile.on .mb-check{
  border-color:rgba(120,225,250,.9);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
}
.mb-tile.on .mb-check::after{ opacity:1; }

.mb-box > footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px 18px;
  border-top:1px solid rgba(151,197,231,.14);
}
.mb-hint{ color:#75839a; font-size:11.5px; line-height:1.5; }
.mb-save{
  flex:0 0 auto;
  min-height:46px; padding:0 26px;
  border:1px solid rgba(120,225,250,.5); border-radius:12px;
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  box-shadow:0 8px 24px rgba(55,182,224,.28),inset 0 1px rgba(255,255,255,.4);
  color:#04222c; font-size:13.5px; font-weight:850; cursor:pointer;
}
.mb-save:hover:not(:disabled){ background:linear-gradient(160deg,#7ce6fb,#45c3ea); }
.mb-save:disabled{ opacity:.45; box-shadow:none; cursor:not-allowed; }

@media (max-width:640px){
  .mb-pick{ padding:10px; }
  .mb-box{ max-height:calc(100vh - 20px); border-radius:18px; }
  .mb-namebar{ grid-template-columns:minmax(0,1fr); }
  .mb-grid{ grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); grid-auto-rows:128px; padding:12px 16px 16px; }
  .mb-tile{ height:128px; }
  .mb-box > footer{ flex-direction:column; align-items:stretch; gap:10px; }
  .mb-save{ width:100%; }
}

/* ── AI 생성 결과에 붙는 '스타일에 올리기' ─────────────────────
   내가 만든 것은 자동으로 올라가지 않는다. 올릴 것만 고른다. */
.image-result-card .ic-pub-btn{
  position:absolute; left:8px; bottom:8px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border:1px solid rgba(120,225,250,.44); border-radius:99px;
  background:rgba(8,34,45,.86);
  color:#bdeeff; font-size:11px; font-weight:820;
  line-height:1; white-space:nowrap; cursor:pointer;
  opacity:0; transition:opacity .15s ease,border-color .15s ease,background-color .15s ease;
}
.image-result-card:hover .ic-pub-btn,
.image-result-card .ic-pub-btn:focus-visible,
.image-result-card .ic-pub-btn.is-done{ opacity:1; }
.image-result-card .ic-pub-btn:hover{
  border-color:rgba(120,225,250,.8); background:rgba(12,56,72,.94);
}
.image-result-card .ic-pub-btn > i{ font-style:normal; font-size:13px; }
.image-result-card .ic-pub-btn.is-done{
  border-color:rgba(120,225,250,.7);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  color:#04222c; cursor:default;
}
.image-result-card .ic-pub-btn:disabled{ cursor:default; }

/* ══════════════════════════════════════════════════════════
   2026-08-27 — 취향 칩: 껐다 켰다 + 무드보드 갈아 끼우기
   ──────────────────────────────────────────────────────────
   · 유리(밝은) 페이지에서 칩 안 글씨가 흰 계열이라 흰 알약 위에서
     안 보였다. ai-studio 단추와 같은 문제 — 글씨 색을 여기서 잡는다.
   · 칩은 overflow:hidden 이라 목록을 안에 넣으면 잘린다.
     목록은 몸통(body)에 붙이고 칩 자리에 맞춰 띄운다.
   ══════════════════════════════════════════════════════════ */

/* ── 고른 무드보드 이름 (누르면 목록) ───────────────────────── */
.tx-taste-chip .tx-pick{
  display:inline-flex; align-items:center; gap:5px;
  flex:0 1 auto; min-width:0;
  max-width:46%;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#eef4ff; font-weight:750; font-size:12px;
  cursor:pointer;
}
.tx-taste-chip .tx-pick > span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tx-taste-chip .tx-pick > i{ font-style:normal; opacity:.7; font-size:10px; }
.tx-taste-chip .tx-pick:hover{ background:rgba(255,255,255,.12); }

/* ── 켜짐/꺼짐 스위치 ───────────────────────────────────────── */
.tx-taste-chip .tx-sw{
  flex:0 0 auto;
  width:38px; height:22px;
  padding:0; border:0; border-radius:999px;
  background:rgba(120,140,175,.45);
  cursor:pointer; position:relative;
  transition:background .16s ease;
}
.tx-taste-chip .tx-sw > i{
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; display:block;
  box-shadow:0 1px 2px rgba(10,25,55,.35);
  transition:transform .16s ease;
}
.tx-taste-chip .tx-sw[aria-checked="true"]{ background:#3b6fe0; }
.tx-taste-chip .tx-sw[aria-checked="true"] > i{ transform:translateX(16px); }

/* 꺼 두면 한눈에 알아보게 흐린다 — 고른 것은 그대로 남아 있다 */
.tx-taste-chip.is-off > b,
.tx-taste-chip.is-off > em,
.tx-taste-chip.is-off .tx-pick{ opacity:.5; }

/* ── 무드보드 목록 ──────────────────────────────────────────── */
.tx-menu{
  position:fixed; z-index:900;
  width:290px; max-height:56vh; overflow:auto;
  padding:7px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(238,244,253,.96))!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 18px 40px -18px rgba(16,40,90,.55), 0 2px 6px -3px rgba(16,40,90,.3);
}
.tx-menu-head,
.tx-menu-load{
  margin:2px 4px 6px; padding:0;
  color:#5b6b86; font-size:11px; font-weight:800;
}
.tx-menu-item{
  display:block; width:100%; text-align:left;
  padding:8px 10px; margin:0 0 4px;
  border:1px solid transparent; border-radius:10px;
  background:transparent; cursor:pointer;
}
.tx-menu-item:hover{ background:rgba(59,111,224,.09); }
.tx-menu-item.is-on{ border-color:rgba(59,111,224,.4); background:rgba(59,111,224,.11); }
.tx-menu-item > span{ display:block; color:#16233a; font-weight:800; font-size:13px; }
.tx-menu-item > em{ display:block; color:#5b6b86; font-style:normal; font-size:11px; margin-top:2px; }
.tx-menu-item > i{ display:block; color:#3b6fe0; font-style:normal; font-size:10px; font-weight:800; margin-top:3px; }
.tx-menu-go{
  display:block; padding:8px 10px;
  color:#3b6fe0; font-size:12px; font-weight:800; text-decoration:none;
  border-top:1px solid rgba(20,45,90,.1);
}
.tx-menu-go:hover{ text-decoration:underline; }

/* ── 밝은 유리 페이지에서 글씨가 보이게 ─────────────────────── */
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip > b{ color:#2b3f86!important; }
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip > em{ color:#41536f!important; }
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip > em.tx-none{ color:#6b7c95!important; }
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-pick{
  color:#14202e!important;
  border-color:rgba(20,45,90,.16)!important;
  background:rgba(255,255,255,.72)!important;
}
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-pick:hover{
  background:rgba(255,255,255,.95)!important;
}
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-x{ color:#5b6b86!important; }
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-x:hover{
  background:rgba(20,45,90,.08)!important; color:#14202e!important;
}

/* 유리 페이지에는 도크 안의 단추를 흰 알약으로 바꾸는 규칙이 !important 로
   걸려 있다(실측: 스위치 바탕이 rgba(150,190,242,.32) 로 덮여 켬/끔이
   구분되지 않았다). 스위치만 그 규칙 밖으로 빼낸다. */
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-sw{
  width:38px!important; height:22px!important; min-height:22px!important;
  padding:0!important; border:0!important; border-radius:999px!important;
  background:rgba(116,136,170,.55)!important;
  background-image:none!important;
  box-shadow:inset 0 1px 2px rgba(16,40,90,.3)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-sw[aria-checked="true"]{
  background:#2f62d8!important;
  background-image:none!important;
  box-shadow:inset 0 1px 2px rgba(10,30,80,.35)!important;
}
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip .tx-sw > i{
  width:16px!important; height:16px!important; top:3px!important; left:3px!important;
  background:#fff!important; border-radius:50%!important;
}

/* 그림을 읽는 동안 — 뒤에서 도는 일이라 화면을 막지 않는다.
   다만 아무 표시가 없으면 '고장 났나' 싶다. 진행을 적어 준다. */
.tx-taste-chip > em.tx-reading{ color:#3b6fe0; font-weight:750; }
html body.image-studio-page:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .tx-taste-chip > em.tx-reading{
  color:#2f62d8!important;
}