/* css/sidebar-right.css  —  오른쪽 사이드바: 구매 모달 · 회전 안내 · BOM · 합계 · CTA 버튼 · 토스트 · 언어 토글
   로드 순서 4/5: 캐스케이드(나중 규칙이 이긴다)가 원래 순서에 의존하므로 index.html 의 <link> 순서를 바꾸지 않는다. */

/* ── Right Sidebar ── */
#right {
  background: var(--white); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

.bom-scroll { flex: 1; overflow-y: auto; padding: 14px 12px; }
.bom-scroll::-webkit-scrollbar { width: 2px; }
.bom-scroll::-webkit-scrollbar-thumb { background: var(--border); }

/* Buy list modal */
.buy-modal {
  position: fixed; inset: 0; z-index: 1000; padding: 20px;
  background: rgba(29,47,47,.45);
  display: none; align-items: center; justify-content: center;
}
.buy-modal.on { display: flex; }
.buy-card {
  background: var(--bg); width: 100%; max-width: 440px; max-height: 84vh;
  border-radius: 5px; padding: 22px 22px 18px; position: relative;
  display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.buy-x {
  position: absolute; top: 11px; right: 14px; background: none; border: none;
  font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.buy-x:hover { color: var(--text); }
.buy-title { font-size: 16px; font-weight: 700; color: var(--text); }
.buy-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.buy-rows { margin-top: 15px; overflow-y: auto; }
.buy-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 0; border-top: 1px solid var(--border); font-size: 12.5px;
}
.buy-tag {
  flex: none; min-width: 34px; text-align: center; font-size: 10px;
  padding: 2px 5px; border-radius: 3px; color: var(--muted);
  background: var(--surface); letter-spacing: .03em;
}
.buy-tag.base { background: var(--accent); color: #fff; }
.buy-tag:empty { display: none; }
.buy-name { flex: 1; color: var(--text); }
.buy-qty { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.buy-price { flex: none; min-width: 58px; text-align: right; font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.buy-go {
  flex: none; min-width: 64px; text-align: right; font-size: 11px; color: var(--red); text-decoration: none;
  white-space: nowrap; font-weight: 500;
}
.buy-go:hover { text-decoration: underline; }
.buy-nourl { flex: none; min-width: 64px; text-align: right; font-size: 11px; color: var(--muted); }
.buy-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 11px; border-top: 1.5px solid var(--border2);
  font-size: 12px; color: var(--muted);
}
.buy-total-v { font-size: 17px; font-weight: 700; color: var(--text); }

/* 모바일 세로 접속 → 가로 회전 유도 (데스크톱·태블릿 가로는 영향 없음)
   touch 기기(pointer:coarse) + 세로(portrait)일 때만 표시 */
#rotate-overlay { display: none; }
/* 터치기기 세로 OR 아주 좁은 세로 화면 → 회전 유도 (둘 중 하나만 맞아도 표시) */
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-overlay { display: flex; }
}
@media (orientation: portrait) and (max-width: 600px) {
  #rotate-overlay { display: flex; }
}
#rotate-overlay {
  position: fixed; inset: 0; z-index: 99999;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 36px; text-align: center;
  background: var(--bg); color: var(--text);
}
.rotate-icon { width: 76px; height: 76px; color: var(--accent);
  animation: rotateHint 2.6s cubic-bezier(.7,0,.3,1) infinite; transform-origin: 50% 50%; }
@keyframes rotateHint {
  0%, 35%  { transform: rotate(0deg); }
  55%, 80% { transform: rotate(90deg); }
  100%     { transform: rotate(90deg); }
}
.rotate-msg { font-size: 18px; font-weight: 700; line-height: 1.4; }
.rotate-sub { font-size: 13px; color: var(--muted); margin-top: -6px; }
.buy-allset { padding: 16px 0; font-size: 12px; color: var(--muted); text-align: center; }
.buy-color {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.buy-actions { display: flex; gap: 8px; margin-top: 15px; }
.buy-actions .btn { flex: 1; padding: 11px; }

/* Empty state */
.empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; padding: 20px; text-align: center;
}
.empty svg { opacity: .25; }
.empty-txt {
  font-size: 13px; letter-spacing: .02em;
  color: var(--text); line-height: 1.8; font-weight: 500;
}

/* BOM */
.bom-group-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 7px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.bom-group-label:first-child { margin-top: 0; }

.bom-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; table-layout: fixed; }
.bom-table col.col-thumb { width: 36px; }
.bom-table col.col-qty   { width: 74px; }
.bom-table col.col-price { width: 74px; }
.bom-table th {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  padding: 0 0 6px; text-align: left; border-bottom: 1px solid var(--border);
}
.bom-table th.th-qty, .bom-table td.td-qty { text-align: left; }
.bom-table th.th-price, .bom-table td.td-price { text-align: right; }
.bom-table td {
  font-size: 11px; padding: 6px 0; border-bottom: 1px solid var(--surface);
  vertical-align: middle;
}
.bom-table tr:last-child td { border-bottom: none; }
/* BOM 썸네일 */
.bom-thumb {
  width: 32px; height: 32px;
  background: var(--surface); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.bom-thumb img {
  width: 32px; height: 32px; object-fit: contain; display: block;
}
.td-thumb { padding-right: 8px !important; }

.qty-badge {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 11px; padding: 3px 7px; min-width: 22px; text-align: center;
  margin-right: 3px;
}
.auto-tag {
  font-size: 11px; letter-spacing: .04em; color: var(--dim);
  vertical-align: middle; margin-left: 2px;
}
.part-sub { font-size: 11px; color: var(--muted); display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-cell {
  font-family: var(--font); font-size: 15px;
}
.hw-label {
  display: inline-block; font-size: 11px; letter-spacing: .06em;
  background: var(--surface); color: var(--muted);
  padding: 1px 4px; border-radius: 2px; margin-left: 3px;
  vertical-align: middle;
}
.pack-badge {
  display: inline-block; font-size: 11px; letter-spacing: .04em;
  background: var(--accent); color: #fff;
  padding: 2px 6px; border-radius: 2px; margin-left: 4px;
  vertical-align: middle;
}

/* BOM — inSet collapse */
.bom-inset-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; border-top: 1px solid var(--surface);
  font-family: var(--font); font-size: 11px; letter-spacing: .08em;
  color: var(--dim); padding: 5px 0 4px; cursor: pointer; margin-top: 2px;
}
.bom-inset-toggle:hover { color: var(--muted); }
.bom-inset-toggle .arrow { font-size: 11px; transition: transform .15s; }
.bom-inset-toggle.open .arrow { transform: rotate(180deg); }
.bom-inset-body { display: none; }
.bom-inset-body td { font-size: 11px; padding: 4px 0; }

.stat-n {
  font-family: var(--font);
  font-size: 22px; font-weight: 600; line-height: 1;
}
.stat-u { font-size: 11px; color: var(--muted); }
.stat-d {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px;
}

/* Total */
.total-blk { padding: 14px 12px; border-top: 1px solid var(--border); }
.total-row  { display: flex; justify-content: space-between; align-items: baseline; }
.total-lbl  { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.total-v    { font-family: var(--font); font-size: 30px; font-weight: 700; }
.total-note { font-size: 11px; color: var(--dim); margin-top: 3px; }
.dims-badge { font-size: 11px; color: var(--muted); letter-spacing: .04em; }

/* CTA */
.cta-blk { padding: 16px 12px 20px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.cta-blk .btn { text-align: center; }
.cta-full { width: 100%; }
.cta-row { display: flex; gap: 8px; }
.cta-row .btn { flex: 1; padding: 10px 10px; font-size: 11px; }

/* CTA buttons → Brand Red */
.cta-blk .btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
  padding: 13px 14px;
  font-size: 13px;
  letter-spacing: .16em;
}
.cta-blk .btn-primary:hover {
  background: #d44848;
  border-color: #d44848;
}

/* Toast */
#toast {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--accent); color: #fff;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 20px; pointer-events: none; z-index: 999;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
#toast.on { transform: translateX(-50%) translateY(0); }

/* ── Language toggle ── */
.lang-tab { letter-spacing: .08em; }
.lang-tab.on { background: var(--red); color: #fff; border-color: var(--red); }
.right-header {
  display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}