.bmix {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 10px;
  background: rgba(4, 8, 13, .7); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif; color: #e8eef4;
}
.bmix-sheet {
  width: min(880px, 100%); height: min(460px, 100%); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px; border: 1px solid #3d5566;
  background: radial-gradient(110% 80% at 50% -10%, rgba(94, 170, 200, .16), transparent 60%), linear-gradient(180deg, #1c2a33, #131c23);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65);
}
.bmix-small { width: min(520px, 100%); height: auto; max-height: 100%; }
.bmix-top { display: flex; align-items: center; gap: 8px; min-height: 40px; flex: 0 0 auto; padding: 0 10px; border-bottom: 1px solid #2b3f49; }
.bmix-top > b { flex: 1 1 auto; font-size: 15px; }
.bmix-x {
  flex: 0 0 auto; width: 34px; height: 28px; border-radius: 9px; cursor: pointer; font-size: 13px; color: #d8ecf6;
  background: linear-gradient(180deg, #2d4653, #1f323b); border: 1px solid #466675;
}
.bmix-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 14px; font-size: 13px; }
.bmix-body p { margin: 4px 0; }
.bmix-small > p { margin: 8px 14px 0; font-size: 13px; }
.bmix-mix { margin: 6px 0; padding-left: 18px; }
.bmix-mix li { margin: 2px 0; }
.bmix-mix i { font-style: normal; color: #9fc2cf; font-size: 12px; }
.bmix-tip { color: #cfe3c4; }
.bmix-dim { color: #8fa9b6; font-size: 12px; }
.bmix-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px; border-top: 1px solid #2b3f49; background: rgba(10, 18, 22, .6); }
.bmix-foot .bmix-dim { flex: 1 1 auto; }
.bmix-go {
  padding: 7px 20px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 800; color: #06240f; text-decoration: none;
  background: linear-gradient(180deg, #4fbe7c, #2f9358); border: 1px solid #6fd99a;
}
.bmix-go[disabled] { opacity: .45; cursor: default; }
.bmix-del { padding: 7px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; color: #f3c9c0; background: #3a2526; border: 1px solid #6b3d3b; }


.bmix-use { display: flex; gap: 6px; flex: 0 0 auto; }
.bmix-use button, .bmix-makers button, .bmix-prods button, .bmix-line button {
  cursor: pointer; color: #e8eef4; border-radius: 8px; border: 1px solid #3f5a68; background: linear-gradient(180deg, #24384a, #1a2934);
}
.bmix-use button { padding: 4px 10px; font-size: 12.5px; }
.bmix-use button.on, .bmix-makers button.on, .bmix-prods button.on { border-color: #e6c25a; background: linear-gradient(180deg, #3d4a28, #2a3520); }

.bmix-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 112px 1fr 250px; }
.bmix-makers, .bmix-prods, .bmix-mine { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.bmix-makers { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid #2b3f49; }
.bmix-makers button { flex: 0 0 auto; padding: 6px 6px; font-size: 12.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmix-makers, .bmix-prods { scrollbar-width: none; }
.bmix-makers::-webkit-scrollbar, .bmix-prods::-webkit-scrollbar { display: none; }
.bmix-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; align-content: start; }
.bmix-prods button { padding: 5px 6px; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.bmix-prods b { font-size: 12.5px; font-weight: 700; }
.bmix-prods small { font-size: 10.5px; color: #9fc2cf; }
.bmix-mine { border-left: 1px solid #2b3f49; display: flex; flex-direction: column; gap: 4px; }
.bmix-line { display: grid; grid-template-columns: 1fr 28px 34px 28px 24px; align-items: center; gap: 3px; font-size: 12.5px; }
.bmix-line > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmix-line > b { text-align: center; }
.bmix-line button { height: 26px; padding: 0; font-size: 14px; }
.bmix-line.gone > span { color: #c9a; }
.bmix-water { grid-template-columns: 1fr 28px 34px 28px 24px; color: #9fd6ef; }
.bmix-ratio { margin: 2px 0 0; font-size: 12px; color: #e6c25a; }
.bmix-rm { color: #f3c9c0; }


.tb-bmix { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tb-bmix > b { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #9fc2cf; }
.tb-bm-row { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior: contain; touch-action: pan-x; padding: 2px; scrollbar-width: none; }
.tb-bm-row::-webkit-scrollbar { display: none; }
.tb-detail .tb-bm-row .tb-b.tb-bm { flex: 0 0 auto; min-width: 64px; min-height: 40px; padding: 3px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.tb-bm b { font-size: 13px; }
.tb-bm small { font-size: 10px; color: #9fc2cf; white-space: nowrap; }
.tb-bm.lock { opacity: .7; }
.tb-detail .tb-bm-row .tb-bm.lock { position: relative; }
.tb-bm-k { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 9px; line-height: 1; }
.tb-bm-new b { font-size: 16px; line-height: 1; }


.tb-dough .tb-bm-row, .tb-bmix:not(.tb-bmix-mine) .tb-bm-row { padding-top: 9px; }
.tb-bmix-mine { margin-top: 3px; }
.tb-bmix-mine .tb-bm-row { flex: 0 1 auto; }
.tb-detail .tb-bmix-mine .tb-bm-row .tb-b.tb-bm { min-height: 30px; padding: 2px 10px; flex-direction: row; gap: 4px; }
.tb-bmix-mine .tb-bm b { font-size: 12.5px; }
.tb-bmix-mine .tb-bm-new b { font-size: 14px; }

.tb-detail .tb-bmix-mine .tb-b.tb-bm.on::before { content: '✓'; position: static; padding: 0; border-radius: 0; font-size: 12px; color: #ffd166; background: none; box-shadow: none; }

.tb-detail .tb-slot > .tb-desc.tb-bn2 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.tb-bn2 > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-bn-mix { display: flex; align-items: center; color: #e6c25a; }
.tb-bmcard { white-space: nowrap; margin-left: 6px; padding: 1px 8px; border-radius: 8px; cursor: pointer; font-size: 11.5px; color: #e6c25a; background: transparent; border: 1px solid #6a5a2a; }