:root{
  --rb-panel-bg:#fff; --rb-panel-border:#E5E7EB; --rb-text:#0F172A; --rb-muted:#64748B;
  --rb-accent:#7C3AED; --rb-accent-weak:#EDE9FE;
}

.rb-wrap{display:flex; justify-content:center; padding:50px; background-color: #f0f5f9;}
.rb-panel{width:450px; background:var(--rb-panel-bg); border:1px solid var(--rb-panel-border); border-radius:16px; box-shadow:0 8px 24px rgba(15,23,42,.08)}
.rb-head{display:flex; align-items:center; justify-content:space-between; padding:25px 30px 0px}
.rb-head h2{margin:0; font-size:18px; font-weight:normal}
.rb-close{border:0; background:transparent; padding:6px; border-radius:8px; cursor:pointer}

.rb-section{padding:25px 30px}
.rb-section + .rb-section{border-top:1px dashed #ddd}
.rb-section .rb-select {height:40px !important;}
.rb-label{display:block; font-weight:normal; font-size:12px; margin-bottom:8px; margin-top: 10px;}
.rb-title {font-weight: bold; font-size: 16px; margin-top: 0px;}
.rb-hint{font-size:12px; color:var(--rb-muted)}
.rb-grid{display:grid; gap:16px}
.rb-stack{display:grid; gap:10px}
.rb-inline{display:flex; gap:10px; align-items:center}
.rb-inline .rb-select {height:30px !important;}
.rb-inline .grow{flex:1}
.rb-w110{width:110px}

.rb-input,.rb-select{width:100%; height:30px !important; border:1px solid #E5E7EB !important; border-radius:6px !important; padding:0 10px !important; background:#fff !important; font-size: 11px !important; color:var(--rb-text) !important}
.rb-select{appearance:none !important; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2364748B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') !important; background-repeat:no-repeat !important; background-position:right 10px center !important}

/* Switch */
.rb-switch{position:relative; width:40px; height:22px; background:#E5E7EB; border-radius:999px; cursor:pointer}
.rb-switch input{display:none}
.rb-switch .dot{position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.12); transition:.2s}
.rb-switch input:checked + .dot{left:21px}
.rb-switch:has(input:checked){ background: var(--rb-accent, #7C3AED); }

/* Chips */
.rb-chips{display:flex; gap:5px}

/* Range (심플) */
.slider-wrap{position:relative}
.slider-row{display:flex; align-items:center; gap:10px; margin-top: 10px; position:relative}
.rb-range{appearance:none; width:40%; height:4px; border-radius:999px; background:#E5E7EB; outline:none}
.rb-range::-webkit-slider-thumb{appearance:none; width:16px; height:16px; border-radius:50%; background:#7C3AED; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.2)}
.rb-range::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#7C3AED; cursor:pointer; border:0}
.rb-tip{position:absolute; top:-22px; transform:translateX(-50%); font-size:12px; font-weight:normal; color:#334155; padding:2px 6px; border-radius:6px; background:#F1F5F9; border:1px solid #E2E8F0; pointer-events:none; display: none;}

/* Color swatch */
.rb-color{position:relative; width:28px; height:28px; border-radius:8px; border:1px solid #E5E7EB; overflow:hidden; cursor:pointer}
.rb-color input{position:absolute; inset:0; opacity:0; cursor:pointer}

/* Preview / Code */
.rb-card{display:flex; align-items:center; justify-content:center; min-height:88px; border:1px dashed #EEF2F7; border-radius:12px; padding:12px; background:#fff}
.rb-codearea{width:100%; height:100px; margin-top: 10px; resize:none; background:#0B1220; color:#E5E7EB; border-radius:10px; border:0 !important; padding:10px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:12px; line-height:1.5; outline:none}
.rb-codearea:focus {border:0px !important;}

/* Buttons */
.rb-actions{display:flex; gap:10px}
.rb-btn{height:44px; padding:0 16px; border-radius:10px; border:0px; background:#F8FAFC; color:#0F172A; font-weight:normal; cursor:pointer}
.rb-btn.primary{background:#7C3AED; color:#fff; border-color:#7C3AED}
.rb-btn.secondary{background:#EEF2FF; color:#3730A3; border-color:#C7D2FE}
.mini{height:34px}

/* Utils */
.border-0{--rb-border-w:0}.border-1{--rb-border-w:1px}.border-solid{--rb-border-s:solid}.border-dashed{--rb-border-s:dashed}
.font-B{--rb-fw:700}.font-M{--rb-fw:600}.font-R{--rb-fw:400}
.font-14{--rb-font-size:14px}.round-30{--rb-round:30px}

/* Library */
.lib-dim{position:fixed; inset:0; background:rgba(2,6,23,.35); display:none}
.lib-panel{position:fixed; right:0; top:0; bottom:0; width:340px; transform:translateX(100%); transition:.2s; background:#fff; border-left:1px solid #E5E7EB; box-shadow:-8px 0 24px rgba(15,23,42,.08); z-index: 997}
.lib-panel .rb-section {padding: 20px; padding-top: 0px; border-bottom:1px solid #eee;}
.lib-panel .rb-select {height:40px !important;}
.lib-open .lib-dim{display:block}.lib-open .lib-panel{transform:none}
.lib-head{display:flex; align-items:center; justify-content:space-between; padding:20px; padding-bottom: 10px;}
.lib-head h3{margin:0; font-size:16px; font-weight:normal}
.lib-body {
  position: absolute;
  top: 120px;
  bottom: 80px;
  left: 0;
  right: 0;
  overflow: auto;            /* 스크롤은 유지 */
  border-bottom: 1px solid #eee;

  /* ▼ 스크롤바 숨김 (Firefox/Edge/IE 계열) */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge 레거시 */
}

/* ▼ 스크롤바 숨김 (Chrome/Safari/신형 Edge, iOS 등 WebKit/Blink) */
.lib-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.lib-list{padding:20px 20px; display:flex; flex-direction:column; gap:10px}
.lib-item{position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #E5E7EB; border-radius:10px; background:#fff; cursor: pointer;}
.lib-item.selected{outline:1px solid #7C3AED}
.lib-sample{display:flex; gap:2px; align-items:center}
.dot{width:14px; height:14px; border-radius:4px; border:1px solid #E5E7EB}
.lib-meta{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.lib-name{font-weight:normal; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lib-time{font-size:11px; color:#64748B}
.lib-del{margin-left:auto; border:0; background:#F8FAFC; border-radius:8px; width:30px; height:30px; cursor:pointer}
.lib-apply{position:absolute; left:16px; right:16px; bottom:16px; height:48px; border-radius:12px; background:#7C3AED; color:#fff; border:0; font-weight:normal; cursor:pointer}

.rb-filecard{margin:0px 30px 30px; border:0px; border-radius:10px; padding:14px; background:#F8FAFC}
.rb-filecard h4{margin:0 0 4px; font-size:13px; font-weight:normal}
.rb-filecard p{margin:0; color:#64748B; font-size:12px}