/* 로그인 후 상단 버튼 스타일 및 배치 */
#topbarRow2 {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#btnOpenDrawer, #btnSlot, #btnCompat, #btnLogout {
  font-size: 10.2px;
  height: calc(var(--tap) * 0.729);
  padding: 0 11.3px;
  border-radius: 17.5px;
}
.user-management-card {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #333 !important;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}
.user-management-card {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #333 !important;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 24px 28px;
}
.user-management-card * {
  color: #111 !important;
}
#modalWrap .modal .btn, #modalWrap .modal .btn * {
  color: unset !important;
}
.drawer .selectAllRow {
  background: #232b28;
  color: #fff !important;
}
.drawer .selectAllRow * {
  color: #fff !important;
}
.drawer .sb-actions .btn, .drawer .sb-actions .btn * {
  color: #111 !important;
}
.drawer .sb-meta {
  background: #232b28;
  color: #fff !important;
}
.drawer .sb-meta * {
  color: #fff !important;
}
.drawer .sb-top {
  background: #768c80;
}
.drawer .list, .drawer .sb-top, .drawer .list * {
  color: #111 !important;
}
.drawer .list {
  background: #768c80;
}
.filetransfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.filetransfer-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Reduce size for topbar login/signup buttons by 10% */
#btnSignup, #btnEmailLogin, #btnLogin {
  font-size: 10.2px;
  height: calc(var(--tap) * 0.729);
  padding: 0 11.3px;
  border-radius: 17.5px;
}
#signupModalWrap .modal, #emailLoginModalWrap .modal {
  border: 2px solid #333 !important;
}
/* Signup Modal: all text dark gray */
#signupModalWrap .modal, #signupModalWrap .modal *,
#emailLoginModalWrap .modal, #emailLoginModalWrap .modal * {
  color: #333 !important;
}
:root{
  --bg:#0b1220;
  --panel:#0f1a30;
  --panel2:#0c1629;
  --line:#223152;
  --text:#e6edf7;
  --muted:#a9b7d0;
  --btn:#1c2a48;
  --btnHover:#24355c;
  --btnActive:#14213c;
  --primary:#2b6cff;
  --primaryHover:#3a79ff;
  --danger:#e05252;
  --dangerHover:#ff6a6a;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:14px;
  --radius2:18px;
  --tap:46px;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --tooltipBg:#0a0f1a;
}

*{box-sizing:border-box;}

html, body{
  margin:0;
  background: linear-gradient(135deg, #9bc4bc 0%, #ffffff 100%);
  min-height: 100vh;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans KR",sans-serif;
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  background:#e8ddd0;
  border-bottom:1px solid rgba(0,0,0,.1);
  backdrop-filter: blur(8px);
}

.topbar-inner{
  max-width:1100px;margin:0 auto;
  display:flex;
  gap:8px;
  align-items:center;
  padding:12px 14px;
}

.title{
  font-weight:800;
  font-size:16px;
  white-space:nowrap;
  color:#555555 !important;
  display:flex;
  align-items:center;
}

.title span {
  color:#555555 !important;
}


 .sub{
  font-size:10px !important;
  color:#555555 !important;
  white-space:nowrap;
  display:flex;
  align-items:center;
  margin-right: auto;
}

.sub span {
  color:#555555 !important;
}

/* Buttons */
.btn{
  height:var(--tap);
  padding:0 16px;
  border-radius:24px;
  border:3px solid #5a6b7d;
  background:#e5f3f7;
  color:#5a6b7d;
  cursor:pointer;
  transition: background .15s ease, transform .06s ease, box-shadow .15s ease, border-color .15s ease;
  user-select:none;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Push buttons to the right */
.topbar-inner .btn:not([style*="display:none"]):first-of-type,
#btnSignup {
  margin-left: auto;
}

/* Smaller buttons for topbar login/signup */

.btn:hover{ 
  background:#d5e8ed; 
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.btn:active{ 
  background:#c5dde3; 
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.btn.primary{
  background:#7dd3e8; 
  color:#2c4e5a;
  border-color:#2c4e5a;
}
.btn.primary:hover{
  background:#6dc8dd;
  box-shadow: 0 4px 12px rgba(125,211,232,.3);
  border-color:#234049;
}
.btn.primary:active{
  background:#5dbdd2;
  border-color:#1a3035;
}

.btn.danger{
  background:#f5a5b1; 
  color:#7d3d46;
  border-color:#7d3d46;
}
.btn.danger:hover{
  background:#f395a4;
  box-shadow: 0 4px 12px rgba(245,165,177,.3);
  border-color:#6d3540;
}
.btn.danger:active{
  background:#f18597;
  border-color:#5d2d38;
}

.btn.ghost{
  background:transparent;
  box-shadow: none;
  border:3px solid #5a6b7d;
}
.btn.ghost:hover{
  background:rgba(255,255,255,.1);
  box-shadow: none;
  border-color:#4a5b6d;
}

.btn.small{ 
  height:auto; 
  padding:6px 12px; 
  font-size:12px; 
  border-radius:16px; 
}

.btn.slot{
  background:#fce8ec;
  color:#8d5a64;
  border-color:#8d5a64;
}
.btn.slot:hover{
  background:#f5d8de;
  box-shadow: 0 4px 12px rgba(252,232,236,.3);
  border-color:#7d4a54;
}
.btn.slot:active{
  background:#efc8d0;
  border-color:#6d3a44;
}

.btn.saveone{
  background:#f5a5b1;
  color:#7d3d46;
  border-color:#7d3d46;
}
.btn.saveone:hover{
  background:#f395a4;
  box-shadow: 0 4px 12px rgba(245,165,177,.3);
  border-color:#6d3540;
}
.btn.saveone:active{
  background:#f18597;
  border-color:#5d2d38;
}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:14px;}

.card{
  background: linear-gradient(135deg, #9bc4bc 0%, #ffffff 100%);
  border:1px solid #000000;
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}

.card-head{padding:12px 14px;border-bottom:1px solid #000000;color:#3a4b5d;}
.card-body{padding:14px;}

.dropzone{
  border:2px dashed #8a9bb8;
  border-radius:var(--radius2);
  padding:40px 10px;
  text-align:center;
  color:#3a4b5d;
}

.dropzone.dragover{
  border-color: var(--primary);
  background: #9bc4bc;
}

.queue{margin-top:12px;}
.qitem{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px;
  margin-bottom:8px;
  background: #9bc4bc;
}

/* Overlay + Drawer */
.overlay{
  position:fixed;inset:0;
  background: transparent;
  display:none;
  z-index:90;
}
.overlay.on{display:block;}

.drawer{
  position:fixed;top:0;right:0;height:100%;
  width:min(460px,84vw);
  background: transparent;
  border-left:2px solid #222;
  transform:translateX(100%);
  transition:transform .2s ease;
  z-index:100;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow: none;
}
.drawer.open{transform:translateX(0);}

/* Files Drawer */
.sb-top{
  padding:12px 12px 10px 12px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.sb-meta{
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sb-meta .sbHint{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

.brandWrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.sbTitle{
  font-weight:800;
  letter-spacing:.2px;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sbHint{
  font-size:11px;
  color:var(--muted);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.95;
}

.sb-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
  flex-wrap: wrap;
}

/* Mobile optimization for drawer buttons */
@media (max-width: 600px) {
  .sb-actions .btn {
    padding: 0 6px;
    font-size: 11px;
    height: 36px;
    border-radius: 10px;
  }
  
  .sb-top {
    padding: 8px 6px 6px 6px;
  }
  
  .sb-actions {
    gap: 5px;
    flex: 1 1 auto;
    justify-content: space-evenly;
  }
}

.selectAllRow{
  display:none;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  user-select:none;
}
.selectionMode .selectAllRow{ display:flex; }

.list{
  padding:8px;
  overflow:auto;
  flex:1;
  position:relative;
  -webkit-overflow-scrolling: touch;
}

/* File Item */
.item{
  position:relative;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding:10px 10px;
  margin-bottom:8px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.chk{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: var(--primary);
  display:none;
  flex:0 0 auto;
}
.selectionMode .chk{ display:inline-block; }

.bullet{
  width:10px;
  height:10px;
  border-radius: 999px;
  margin-top:5px;
  flex:0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
  background: rgba(255,255,255,.25);
}

.meta{
  flex:1;
  min-width:0;
}

.titleRow{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.title{
  font-weight:700;
  font-size:13px;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1;
}

.sub{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sbStatusRow{
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
}

/* Modal */
.modalWrap{
  position:fixed;inset:0;
  display:none;
  align-items:center;justify-content:center;
  z-index:110;
}
.modalWrap.on{display:flex;}

.modal{
  background:#9bc4bc;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius2);
  padding:20px;
  width:min(520px,94vw);
  box-shadow: none;
}

/* Settings Modal text color override */
#modalWrap .modal,
#modalWrap .modal *:not(.btn):not(.btn *):not(input):not(#adminBadge) {
  color: #2c2c2c !important;
}

/* Input fields with dark background need white text */
#modalWrap .modal input {
  color: #fff !important;
}

/* Admin badge with white text */
#modalWrap .modal #adminBadge {
  color: #fff !important;
}

/* Keep input placeholder color readable */
#modalWrap .modal input::placeholder {
  color: #999 !important;
}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:16px;
  transform:translateX(-50%);
  background:#9bc4bc;
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  padding:10px 14px;
  display:none;
  z-index:120;
  box-shadow: none;
}
.toast.on{display:block;}

/* Thumbnail View */
.thumbMode .list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
  gap:10px;
}

.thumbMode .item{
  flex-direction:column;
  align-items:stretch;
}

.thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  background:#000;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.thumbVideo{
  font-size:11px;
  color:#fff;
  opacity:.7;
}

.thumbMode .meta{
  padding-top:6px;
}

.thumbMode .titleRow{
  flex-wrap:wrap;
}

/* File Icon Card */
.fileIcon{
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  background: linear-gradient(145deg, #121a2e, #0b1220);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
}

.fileIcon .ext{
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--primary);
}

.fileIcon .label{
  font-size:11px;
  color:var(--muted);
  max-width:90%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

/* Video Card */
.videoCard{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.65) 100%
    ),
    linear-gradient(145deg, #121a2e, #0b1220);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.videoCard .play{
  width:46px;
  height:46px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  transition: transform .15s ease, background .15s ease;
}

.videoCard .label{
  font-size:11px;
  opacity:.85;
  letter-spacing:.3px;
}

.videoCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.videoCard:hover .play{
  transform: scale(1.15);
  background: rgba(0,0,0,.75);
}

.videoCard .ext{
  position:absolute;
  top:8px;
  right:8px;
  font-size:10px;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(0,0,0,.55);
  opacity:.9;
}