@font-face {
  font-family: "Presentation";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-3Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Presentation";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Presentation";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Presentation";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Presentation";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

*{box-sizing:border-box}
:root{
  --font-main:"Presentation","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
html,body,
input,select,button,textarea,option,
table,th,td,a,span,div,p,strong,b,label{
  font-family:var(--font-main);
}
body{
  margin:0;
  font-family:var(--font-main);
  font-weight:400;
  color:#111
}
body[data-vault]{
  background:#fff;
}
body[data-my-info]{
  background:#fff;
}
strong,b{font-weight:600}
a{color:inherit}

.index-page{
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.index-page .topbar{flex:0 0 auto}
.index-page .container{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:20px;
}
.index-page .controls,
.index-page #selectedBar{flex:0 0 auto}
.index-page .table-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px;background:#fff;border-bottom:none
}
.index-page .topbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding-top:20px;
}
.index-page .top-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.brand{display:flex;gap:12px;align-items:baseline}
.index-page .brand > strong{
  font-size:20px;
  line-height:1.2;
}
.index-page .brand #btnAddFile{
  margin-left:8px;
  min-width:auto;
  min-height:34px;
  padding:8px 12px;
  font-size:13px;
  line-height:1;
}
.index-page .home-btn{
  padding:8px 12px;
}
.sub{font-size:12px;color:#666}
.brand-social{
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin-left:auto;
  justify-content:flex-end;
}
.sub-btn{
  font-size:12px;
  color:#666;
  text-decoration:none;
  border:1px solid #d8d8d8;
  border-radius:12px;
  padding:2px 8px;
  background:#fff;
  line-height:1.4;
  white-space:nowrap;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.index-page .brand-social .sub-btn:first-child{
  font-size:16px;
}
.index-page .brand-social .sub-btn:nth-child(2){
  font-size:16px;
}
.index-page .brand-social .sub-btn:nth-child(3){
  font-size:16px;
}
.index-page .brand-social{
  background:#f2f3f5;
  border:1px solid #e1e4ea;
  border-radius:12px;
  padding:2px;
  gap:0;
  width:fit-content;
  margin-left:0;
  align-self:flex-start;
}
.index-page .brand-social .sub-btn{
  border:none;
  background:transparent;
  border-radius:10px;
  color:#4f5766;
  padding:6px 12px;
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.index-page .brand-social .sub-btn + .sub-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:1px;
  background:#d9dde4;
}
.index-page .brand-social .sub-btn:hover{
  background:#eceef2;
  border-color:transparent;
  color:#2f3748;
}
.sub-btn:hover{
  color:#222;
  border-color:#bfbfbf;
}
.sub-btn.is-current{
  color:#2f6ff2;
  border-color:#2f6ff2;
}
#packageTitle{
  font-size:20px;
}
#packageNamePreview{
  font-size:12px;
}
#packageVaultBtn{
  font-size:12px;
  border-radius:10px;
  padding:6px 9px;
  border:none;
  background:#eaf2ff;
}
.link{font-size:13px;color:#333;text-decoration:none;border:1px solid #ddd;border-radius:10px;padding:7px 10px;background:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.top-actions{display:flex;align-items:center;gap:8px}
.mobile-tabbar{
  display:none;
}
.mobile-tabbar-item{
  border:none;
  background:none;
  text-decoration:none;
  color:#8b9098;
}
.mobile-tabbar-profile{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}
.mobile-tabbar-profile-head{
  fill:currentColor;
}
.mobile-tabbar-profile-body{
  fill:currentColor;
}
.mobile-tabbar-home{
  width:21px;
  height:21px;
  display:block;
  fill:currentColor;
}
.mobile-tabbar-image{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  filter:grayscale(1) contrast(.55) brightness(1.22);
  opacity:.52;
}
.mobile-tabbar-image-high{
  transform:translateY(0);
}
.mobile-tabbar-image-middle{
  transform:translateY(0);
}
.mobile-tabbar-image-allvault{
  transform:translateY(0);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.my-info-link{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#a9a9a9;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.my-info-icon{
  width:30px;
  height:30px;
  display:block;
}
.my-info-ring{
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
}
.my-info-head{
  fill:currentColor;
  stroke:none;
}
.my-info-body{
  fill:currentColor;
}
.my-info-link:hover{
  color:#a9a9a9;
}
.my-info-link:focus-visible{
  outline:2px solid #c8ccd2;
  outline-offset:3px;
  border-radius:999px;
}

body[data-vault] .brand{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:8px;
}
body[data-vault] #vaultTitle{
  font-size:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}
.vault-title-icon{
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
}
body[data-vault] .brand-social{
  margin-left:8px;
  justify-content:flex-start;
}
.add-fab{
  border-radius:10px;
  min-width:40px;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
}

.container{max-width:1100px;margin:0 auto;padding:14px}
.controls{
  display:grid;grid-template-columns: 1fr 140px 90px 90px 120px 120px 100px;
  gap:10px;align-items:center;margin-bottom:12px
}
.input,.select{
  width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:12px;background:#fff;
  font-size:14px;outline:none
}
.search-wrap{
  position:relative;
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  background:transparent;
}
.search-wrap .input{
  border:none;
  background:transparent;
  outline:none;
  box-shadow:none;
  border-radius:0;
  width:100%;
  padding:0;
  padding-right:24px;
  font-size:16px;
  color:#171c26;
  text-align:left;
}
.search-clear{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border:none;
  border-radius:50%;
  background:#d9d9d9;
  color:#555;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}
.search-clear:hover{
  background:#cfcfcf;
}
.sort-dropdown{
  position:relative;
  z-index:80;
}
.sort-trigger{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.sort-trigger::after{
  content:"⌄";
  font-size:12px;
  color:#666;
}
.sort-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  padding:4px;
  z-index:30;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.sort-option{
  width:100%;
  border:none;
  background:#fff;
  border-radius:9px;
  padding:8px 10px;
  text-align:left;
  font-size:13px;
  cursor:pointer;
}
.sort-option:hover{background:#f4f4f4}
.sort-option.active{
  background:#111;
  color:#fff;
}
.native-sort{
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}
.btn{
  border:1px solid #ddd;background:#fff;border-radius:12px;padding:6px 12px;font-size:13px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{border-color:#111;background:#111;color:#fff}
.btn.small{padding:6px 10px;font-size:12px;border-radius:10px}

#btnShareSelected,
#btnMergeSelected{
  border:none;
  background:#bfbfbf;
  color:#fff;
}
#btnShareSelected:disabled,
#btnMergeSelected:disabled{
  background:#bfbfbf;
  color:#fff;
  border:none;
  cursor:not-allowed;
  opacity:1;
}
#btnShareSelected:not(:disabled){
  background:#2f80ed;
  color:#fff;
  border:none;
}
#btnMergeSelected:not(:disabled){
  background:#111;
  color:#fff;
  border:none;
}

.table-wrap{
  position:relative;
  background:transparent;border:1px solid #e6e6e6;border-radius:14px;
  overflow:hidden;
  --scroll-rail-w:16px;
  --scroll-rail-bg:#f7f7f7;
  padding-right:var(--scroll-rail-w);
}
.table-wrap::after{
  content:"";
  position:absolute;
  right:0;
  top:calc(var(--table-head-h, 0px) - 32px);
  width:var(--scroll-rail-w);
  height:32px;
  background:var(--scroll-rail-bg);
  pointer-events:none;
  z-index:3;
}
.table{width:100%;border-collapse:collapse;min-width:720px;table-layout:fixed}
.table-head{
  border-bottom:none;
}
.table-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-x:auto;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.table-scroll::-webkit-scrollbar{
  width:0;
  height:0;
}
th,td{padding:8px;border-bottom:1px solid #f0f0f0;font-size:14px;vertical-align:middle}
th{font-size:12px;color:#666;text-align:left;background:transparent}
.col-key{width:70px;text-align:center}
.col-act{width:70px}
.col-move{width:56px;text-align:center;display:none !important}
th.col-key,th.col-act,th.col-move{text-align:center}
th.col-title{text-align:center}
.col-artist{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.artist-text{
  display:block;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.col-check{
  width:44px;text-align:center;white-space:nowrap;overflow:hidden;
  transition:width .2s ease,padding .2s ease,opacity .2s ease
}
.table:not(.select-mode) .col-check{
  width:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
}
.table:not(.select-mode) .col-check > *{
  display:none;
}
.scroll-index{
  position:absolute;
  right:0;
  top:var(--table-head-h, 0px);
  bottom:0;
  width:var(--scroll-rail-w);
  padding:6px 2px;
  overflow:hidden;
  pointer-events:none;
  opacity:.95;
  background:var(--scroll-rail-bg);
  transition:opacity .15s ease, background-color .15s ease;
  z-index:4;
}
.table-wrap:hover .scroll-index,
.scroll-index:focus-within{
  pointer-events:auto;
  opacity:1;
  --scroll-rail-bg:#f5f5f5;
  background:var(--scroll-rail-bg);
}
.scroll-index-item{
  position:absolute;
  left:50%;
  transform:translate(-50%, -50%) scale(1);
  font-size:9px;
  line-height:1;
  color:#111;
  font-weight:600;
  white-space:nowrap;
  transition:transform .12s ease, color .12s ease;
}
.scroll-index-item.clickable{
  cursor:pointer;
}
.scroll-index-item.dot{
  color:#cfcfcf;
}
.scroll-index-item.current{
  transform:translate(-50%, -50%) scale(1.3);
  font-weight:700;
}
.scroll-index-thumb{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:#bfbfbf;
  opacity:.9;
  pointer-events:none;
}
.scroll-index-hint{
  position:absolute;
  right:calc(var(--scroll-rail-w, 16px) + 38px);
  transform:translateY(-50%);
  min-width:64px;
  height:64px;
  padding:0 18px;
  border-radius:20px;
  background:rgba(226,226,226,.8);
  color:rgba(143,143,143,.8);
  font-size:32px;
  font-weight:600;
  line-height:64px;
  text-align:center;
  pointer-events:none;
  z-index:6;
}
.scroll-index-hint.hidden{
  display:none !important;
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border-radius:50%;
  border:1px solid #ddd;background:#fff;font-size:12px;color:#333
}
.badge:not(:empty){
  background:#2f80ed;
  border-color:#2f80ed;
  color:#fff;
}
.row-actions{display:flex;gap:8px}
.smallbtn{
  border:1px solid #ddd;background:#fff;border-radius:10px;padding:7px 10px;font-size:12px;cursor:pointer
}
.smallbtn:disabled,
.smallbtn.is-disabled{
  background:transparent;
  color:#b5b5b5;
  pointer-events:none;
  cursor:not-allowed;
}
.table td.col-act{text-align:center}
.table tbody tr.selected-row td{
  background:#f2f8ff;
  border-top:1px solid #f0f0f0 !important;
  border-bottom:1px solid #f0f0f0 !important;
}
.table tbody tr.selected-row td,
.table tbody tr.selected-row td .titlebtn,
.table tbody tr.selected-row td .artist-sub,
.table tbody tr.selected-row td .artist-text,
.table tbody tr.selected-row td .smallbtn,
.table tbody tr.selected-row td .icon-action{
  color:#2f80ed;
}
.table tbody tr.selected-row td .icon-action path{
  stroke:#2f80ed;
}
.table tbody tr.selected-row.mobile-sticky-row td{
  background:#f2f8ff;
  box-shadow:inset 0 0 0 9999px #f2f8ff;
}
.table td.col-act .smallbtn{
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-action{
  width:16px;
  height:16px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.titlebtn{
  border:none;background:none;padding:0;font:inherit;font-size:15px;color:#111;cursor:pointer;text-align:left
}
.titlebtn:hover{text-decoration:underline}
.artist-sub{display:none}

.selected-bar{
  background:#fff;border:1px solid #e6e6e6;border-radius:14px;
  padding:10px 12px;margin-bottom:12px
}
.selected-bar.selected-bar-collapsed{
  max-height:0;
  opacity:0;
  transform:translateY(-8px);
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  border-color:transparent;
  pointer-events:none;
}
@media (min-width: 769px){
  th.col-move,
  td.col-move{
    display:none !important;
  }
  .modal-head .btn[data-close]{
    min-width:48px;
  }
  #mDownload{
    display:none !important;
  }
  .selected-bar{
    overflow:hidden;
    max-height:240px;
    opacity:1;
    transform:translateY(0);
    transition:max-height .24s ease, opacity .2s ease, transform .2s ease, margin .24s ease, padding .24s ease, border-color .24s ease;
  }
}
.selected-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.selected-title{font-size:12px;color:#666;margin-bottom:0}
#btnClearSelected{
  background: none;
  color:#d32f2f;
  border: solid #d32f2f 1px;
}
#btnClearSelected:disabled{
  background:#bfbfbf;
  color:#fff;
  border:none;
  cursor:not-allowed;
  opacity:1;
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:flex;gap:8px;align-items:center;
  border:1px solid #ddd;border-radius:999px;padding:6px 10px;background:#fff;font-size:12px;
  position:relative;cursor:grab;user-select:none;touch-action:none;transition:transform .06s linear
}
.chip.dragging{
  opacity:.9;cursor:grabbing;z-index:2;pointer-events:none
}
.chip.drop-before::before,
.chip.drop-after::after{
  content:"|";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#222;
  font-weight:700;
  font-size:16px;
  line-height:1;
}
.chip.drop-before::before{left:-8px}
.chip.drop-after::after{right:-8px}
.chip-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  line-height:1;
  font-weight:600;
  color:#333;
}
.chip-text{
  display:inline-block;
  line-height:1.25;
}
.chip button{
  border:none;background:transparent;cursor:pointer;color:#666;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px
}
.chip button:hover{background:#f2f2f2;color:#333}
.chip button:disabled{opacity:.35;cursor:not-allowed}
.chip button[data-action="remove"]{color:#d32f2f}
.chip button[data-action="remove"]:hover{color:#b71c1c}

.hidden{display:none}

/* Modal */
.modal{position:fixed;inset:0;z-index:100}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.modal-card{
  position:relative;left:50%;transform:translateX(-50%);margin-top:6vh;max-width:900px;width:92vw;
  background:#fff;border-radius:16px;overflow:hidden;border:1px solid #ddd
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:none}
.m-title{font-weight:600}
.m-meta{font-size:12px;color:#666;margin-top:2px}
.modal-body{padding:12px 14px;max-height:75vh;overflow:auto;background:#fafafa;position:relative}
.preview-img{width:100%;height:auto;border-radius:10px;border:1px solid #e6e6e6;background:#fff}
.preview-nav{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:50%;
  border:none;
  background:rgba(17,17,17,.65);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  z-index:5;
}
.preview-nav.hidden{
  display:none !important;
}
.preview-nav:disabled{
  opacity:.35;
}
.preview-nav-prev{left:6px}
.preview-nav-next{right:6px}
.pdf-main-wrap{border:1px solid #e6e6e6;border-radius:10px;background:#fff;padding:8px}
.pdf-main-canvas{display:block;width:100%;height:auto}
.page-strip{
  margin-top:12px;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px
}
.page-thumb{
  border:1px solid #ddd;background:#fff;border-radius:10px;padding:6px;cursor:pointer;
  width:140px;flex:0 0 auto
}
.page-thumb.page-slide{
  width:min(72vw, 340px);
  padding:0;
  border:none;
  background:transparent;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.page-thumb.active{border-color:#111}
.page-thumb-canvas{
  display:block;width:100%;height:auto;border:1px solid #666;border-radius:8px;background:#fff;
  vertical-align:top;
}
.page-thumb-image{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #666;
  border-radius:8px;
  background:#fff;
  vertical-align:top;
}
.page-thumb-image.hidden,
.page-thumb-canvas.hidden{
  display:none !important;
}
.page-thumb.page-slide .page-thumb-canvas{
  border:1px solid #ccc;
  border-radius:10px;
}
.page-thumb.page-slide .page-thumb-image{
  border:1px solid #ccc;
  border-radius:10px;
}
.preview-partial-mode .page-thumb{
  position:relative;
}
.preview-partial-mode .page-thumb .page-thumb-canvas{
  filter:brightness(.45);
  transition:filter .18s ease;
}
.preview-partial-mode .page-thumb.page-thumb-picked .page-thumb-canvas{
  filter:brightness(1);
}
.preview-partial-mode .page-thumb.page-thumb-picked::after{
  content:"✓";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(17,17,17,.9);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.preview-edit-mode .page-thumb.page-thumb-edit-picked .page-thumb-canvas{
  filter:brightness(.65);
  box-shadow:inset 0 0 0 999px rgba(209,67,67,.18);
}
.preview-edit-mode .page-strip{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  overflow-x:visible;
  overflow-y:visible;
  padding-bottom:0;
}
.preview-edit-mode .page-thumb{
  position:relative;
  width:auto;
  max-width:100%;
  margin:0;
}
.preview-edit-mode #mPdfMainWrap{
  display:none !important;
}
.preview-edit-mode .preview-nav{
  display:none !important;
}
.preview-edit-mode .page-thumb.page-thumb-edit-picked::after{
  content:"삭제";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  min-width:42px;
  height:24px;
  border-radius:999px;
  background:rgba(209,67,67,.92);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  line-height:1;
  pointer-events:none;
}
.preview-edit-mode .page-thumb[draggable="true"]{
  cursor:grab;
}
.preview-edit-mode .page-thumb.dragging{
  opacity:.55;
}
.preview-edit-mode .page-thumb.page-thumb-drop-before{
  box-shadow:inset 3px 0 0 #2f80ed;
}
.preview-edit-mode .page-thumb.page-thumb-drop-after{
  box-shadow:inset -3px 0 0 #2f80ed;
}
.page-thumb-reorder{
  position:absolute;
  right:10px;
  top:10px;
  display:flex;
  gap:4px;
  z-index:3;
}
.page-thumb-reorder-btn{
  width:22px;
  height:22px;
  border:none;
  border-radius:6px;
  background:rgba(17,17,17,.7);
  color:#fff;
  font-size:13px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.page-thumb-reorder-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.preview-edit-panel{
  margin-bottom:10px;
  border:1px solid #e5e7ec;
  border-radius:12px;
  background:#fff;
  padding:10px;
}
.preview-edit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.preview-edit-hint{
  margin-top:8px;
  font-size:12px;
  color:#666;
}
.preview-edit-actions{
  margin-top:8px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.preview-edit-mode #mEditSong{
  background:#2f80ed;
  border-color:#2f80ed;
  color:#fff;
}
.preview-edit-mode .modal-foot{
  display:none;
}
.page-slide-badge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(120,120,120,.88);
  color:#fff;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.page-thumb-num{display:block;margin-top:6px;font-size:12px;color:#555;text-align:center}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:20px;border-top:1px solid #eee;background:#fff}
#mDownloadPage{
  border-color:#ddd;
  color:#111;
  background:#fff;
}
#mDownloadPage.is-selecting{
  border-color:#d14343;
  color:#d14343;
  background:#fff;
}
#mSaveImage{
  border-color:#0f9f8f;
  background:#0f9f8f;
  color:#fff;
}
#mShareImage{
  border-color:#1f3a8a;
  background:#1f3a8a;
  color:#fff;
}
#mSharePdf{
  border-color:#111;
  background:#111;
  color:#fff;
}
#mDownload{
  border-color:#2f6ff2;
  background:#2f6ff2;
  color:#fff;
  text-decoration:none;
}
.add-modal-card{
  max-width:560px;
}
.package-modal-card{
  max-width:520px;
}
.myinfo-page-card{
  max-width:520px;
  margin:0 auto;
  background:transparent;
  border:none;
  border-radius:0;
  overflow:visible;
}
.package-modal-card .modal-foot{
  border-top:none;
  padding:12px 24px 24px;
}
.add-form{
  background:#fff;
}
.package-form{
  display:grid;
  gap:0;
  padding:20px;
  background:transparent;
}
.package-name-line{
  display:grid;
  grid-template-columns:3fr 7fr;
  align-items:center;
  gap:12px;
  padding:12px 0;
}
.package-name-line.add-label > span{
  color:#4f5766;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
}
body[data-my-info] .package-name-line > span{
  font-size:16px;
}
body[data-my-info] #myInfoNewPassword,
body[data-my-info] #myInfoNewPasswordConfirm{
  font-size:16px;
}
body[data-my-info] #myInfoNewPassword::placeholder,
body[data-my-info] #myInfoNewPasswordConfirm::placeholder{
  font-size:16px;
}
.package-name-input{
  border:none;
  background:transparent;
  outline:none;
  box-shadow:none;
  font-size:18px;
  color:#171c26;
  text-align:center;
  width:100%;
  padding:0;
}
.package-name-input::placeholder{
  color:#bcc3cf;
}
.myinfo-value{
  font-size:18px;
  font-weight:500;
  color:#171c26;
  text-align:center;
}
body[data-my-info] #myInfoNickname,
body[data-my-info] #myInfoEmail,
body[data-my-info] #myInfoRole{
  font-size:16px;
}
#myInfoNewPassword,
#myInfoNewPasswordConfirm{
  font-size:18px;
  line-height:1;
  letter-spacing:.04em;
  -webkit-text-security:disc;
}
#myInfoNewPassword::placeholder,
#myInfoNewPasswordConfirm::placeholder{
  font-size:20px;
  letter-spacing:normal;
}
.myinfo-status{
  min-height:20px;
  margin-top:8px;
  font-size:13px;
  color:#666;
}
.myinfo-status.error{
  color:#d32f2f;
}
.myinfo-actions{
  margin-top:20px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.theme-toggle{
  margin-right:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:none;
  background:transparent;
  color:#171c26;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle-track{
  position:relative;
  width:42px;
  height:24px;
  border-radius:999px;
  background:#dedede;
  flex:0 0 auto;
}
.theme-toggle-thumb{
  position:absolute;
  left:3px;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:transform .2s ease;
}
.theme-toggle.is-dark .theme-toggle-thumb{
  transform:translateX(18px);
}
.theme-toggle-label{
  font-size:14px;
  font-weight:500;
  line-height:1;
}
.myinfo-packages-title{
  display:block;
  margin-top:10px;
  padding:0 20px 10px;
  font-size:16px;
  font-weight:600;
  color:#171c26;
  text-align:center;
}
#myInfoModal #btnMyInfoLogout,
#myInfoModal #btnMyInfoChangePassword,
#myInfoModal #btnMyInfoPackages{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  padding:6px 14px;
  line-height:1.1;
  vertical-align:middle;
}
#btnMyInfoLogout{
  color:#d14343;
  border-color:#d14343;
  background:#fff;
}
#btnMyInfoPackages{
  text-decoration:none;
}
#myInfoModal .m-title{
  font-size:20px;
}
.myinfo-close-btn{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  background:transparent;
  color:#d14343;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.myinfo-close-btn svg{
  width:30px;
  height:30px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
}
.myinfo-close-btn:hover{
  color:#bb3535;
}
.myinfo-close-btn:focus-visible{
  outline:2px solid rgba(209, 67, 67, .22);
  outline-offset:3px;
  border-radius:999px;
}
#myPackagesTitle{
  font-size:20px;
}
.package-vault-line{
  display:grid;
  grid-template-columns:3fr 7fr;
  align-items:center;
  gap:12px;
  padding:14px 0;
}
.package-note-line{
  display:grid;
  grid-template-columns:3fr 7fr;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;
}
.package-vault-line.add-label > span{
  color:#4f5766;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
}
.package-note-line.add-label > span{
  color:#4f5766;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  padding-top:10px;
}
.package-note-input{
  min-height:96px;
  padding:10px 12px;
  line-height:1.45;
  resize:vertical;
  text-align:start;
  background:#bfbfbf;
}
.add-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.upload-progress{
  margin-top:12px;
  display:grid;
  gap:8px;
}
.upload-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#555;
}
.upload-progress-track{
  width:100%;
  height:8px;
  background:#eceff4;
  border-radius:999px;
  overflow:hidden;
}
.upload-progress-bar{
  width:0%;
  height:100%;
  background:#2f80ed;
  transition:width .18s ease;
}
.add-modal-card .modal-head .btn[data-close-add],
#btnSubmitAddFile{
  min-width:48px;
}
.add-modal-close-mobile{
  display:none;
}
#btnClosePackageModal,
#btnSubmitPackage{
  min-width:56px;
  padding:8px 14px;
}
#btnSubmitPackage{
  min-height:46px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  padding:0 16px;
}
#btnSubmitPackage:disabled{
  background:#bfbfbf;
  color:#fff;
  border:none;
  opacity:1;
  cursor:not-allowed;
}
.add-label{
  display:grid;
  gap:6px;
}
.add-label > span{
  font-size:12px;
  color:#666;
}
.add-file-field{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.add-file-field > span{
  font-size:12px;
  color:#666;
}
.team-toggle{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.team-option{
  position:relative;
}
.team-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.team-option span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 10px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  color:#333;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:all .2s ease;
}
.team-option input:checked + span{
  background:#111;
  border-color:#111;
  color:#fff;
}
.team-option.is-disabled span{
  background:#f3f3f3;
  border-color:#e3e3e3;
  color:#a4a4a4;
  cursor:not-allowed;
}

/* Share page */
.share-card{
  background:#fff;border:none;border-radius:14px;padding:15px;margin-bottom:12px
}
.h2{margin:0 0 10px 0;font-size:15px}
.summary-inline{display:flex;flex-wrap:wrap;gap:10px}
.summary-item{display:inline-flex;align-items:center;gap:5px}
.summary-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background: #e7e7e7;
  color:#222;
  font-size:11px;
  font-weight:400;
  line-height:1;
}
.summary-text{
  font-family:var(--font-main);
  font-size:14px;
  color:#111;
  font-weight:400;
}

/* Vault page */
.vault-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.vault-search-wrap{
  position:relative;
  margin-bottom:10px;
  padding:10px 20px;
}
.vault-search-wrap::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:1px;
  background:#dfe3ea;
}
.vault-search-wrap:focus-within{
}
.vault-search-wrap:focus-within::after{
  background:#2f80ed;
}
.vault-search-wrap .input{
  border:none;
  background:transparent;
  outline:none;
  box-shadow:none;
  border-radius:0;
  width:100%;
  padding:0 15px;
  font-size:16px;
  color:#171c26;
  text-align:left;
}
.vault-search-wrap .input::placeholder{
  color:#bcc3cf;
}
.vault-search-clear{
  position:absolute;
  right:30px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border:none;
  border-radius:50%;
  background:#d9d9d9;
  color:#555;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}
.vault-search-clear:hover{
  background:#cfcfcf;
}
.vault-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 30px;
  border:none;
  border-radius:0;
  background:transparent;
}
.vault-item-meta{
  min-width:0;
}
.vault-item-name{
  font-size:16px;
  color:#222;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:flex;
  align-items:flex-end;
  gap:6px;
}
.vault-package-name{
  color:#2f80ed;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vault-item-nickname{
  color:#444;
  font-size:14px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vault-item-date{
  margin-top:2px;
  font-size:11px;
  color:#777;
}
.vault-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.vault-item-actions .btn{
  padding:6px 12px;
}
.vault-btn-open{
  color:#2f80ed;
  background:#eaf2ff;
  border:none;
}
.vault-btn-copy{
  color:#444;
  background:#f1f1f1;
  border:none;
}
.vault-btn-share{
  color:#2f80ed;
  background:#eaf2ff;
  border:none;
}
.vault-btn-delete{
  color:#d14343;
  background:#ffecec;
  border:none;
}
.vault-empty{
  padding:16px 12px;
  border:none;
  border-radius:0;
  color:#666;
  font-size:13px;
  background:transparent;
  text-align:center;
}

/* Auth page */
.auth-wrap{
  max-width:520px;
}
.auth-card{
  margin-top:36px;
  text-align:center;
}
.auth-card .h2,
.auth-card .hint,
.auth-card #authStatus,
.auth-card .row{
  justify-content:center;
}
.auth-card .add-label{
  justify-items:center;
}
.auth-card .add-label > span{
  text-align:center;
}
.auth-card .add-label .input{
  max-width:360px;
}
.auth-card .auth-field{
  width:100%;
  max-width:420px;
  display:grid;
  grid-template-columns:3fr 7fr;
  align-items:center;
  gap:10px;
  justify-items:stretch;
}
.auth-card .auth-field > span{
  text-align:left;
}
.auth-card .auth-field .input{
  max-width:none;
  width:100%;
}
#authNickname,
#authEmail,
#authPassword,
#authPasswordConfirm{
  text-align:center;
}
.auth-actions .btn{
  min-width:110px;
}
.auth-contact-title{
  color:#444;
}
.auth-contact-accordion summary{
  list-style:none;
  cursor:pointer;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:22px;
}
.auth-contact-accordion summary::-webkit-details-marker{
  display:none;
}
.auth-contact-accordion summary::after{
  content:"▼";
  color:#666;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.auth-contact-accordion[open] summary::after{
  content:"▲";
}
.auth-contact-body{
  margin-top:10px;
}
.auth-contact-btn{
  border-color:#444;
  background:#444;
  color:#fff;
}
.auth-card #contactMessage{
  max-width:360px;
}
.btn-text{
  border:none;
  background:transparent;
  color:#555;
  font-size:13px;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.btn-text:hover{
  color:#222;
}
.download-actions .btn{
  flex:0 0 auto;
  width:auto;
  font-size:12px;
  padding: 8px;
  min-height:32px;
  line-height:1.2;
}
#btnSharePackageLink{
  border-color:#c9c9c9;
  color:#4f4f4f;
}
#btnPickSheets{
  border-color:#2f80ed;
  color:#2f80ed;
  background:#fff;
}
#btnDownloadPicked{
  background:#2f80ed;
  border-color:#2f80ed;
  color:#fff;
}
.textarea{
  width:100%;min-height:120px;border:1px solid #ddd;border-radius:12px;padding:10px 12px;font-size:14px;
  background:#fafafa;resize:vertical
}
.row{display:flex;gap:10px;margin:10px 0px;flex-wrap:wrap}
.hint{font-size:12px;color:#666;margin:10px 0 0 0;line-height:1.45}
.share-list{display:flex;flex-direction:column;gap:8px}
.share-item{
  padding:10px 12px;border:1px solid #eee;border-radius:12px;background:#fafafa;
  display:flex;justify-content:space-between;gap:10px
}
.share-item .left{display:flex;gap:10px;align-items:center}
.sheet-list{display:flex;flex-direction:column;gap:12px}
.sheet-item{
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
  padding:0;
}
.sheet-head{
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
  padding-left:0;
  margin-bottom:0;
  transition:none;
}
.sheet-select-mode .sheet-head{
  padding-left:24px;
}
.sheet-title{
  margin:20px 0 0 20px;
  font-family:var(--font-main);
  font-size:14px;
  font-weight:500;
  line-height:20px;
}
.share-note{
  margin:0 0 12px;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:#fafafa;
  color:#4e5968;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
}
.page-gallery{
  display:flex;
  gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:0;
}
.page-box{
  flex:0 0 auto;
  position:relative;
  margin:15px;
  max-width:160px;
}
.sheet-select-mode .page-box,
.sheet-select-mode .page-canvas{
  cursor:pointer;
}
.sheet-select-mode .page-box.selected .page-canvas{
  box-shadow:inset 0 0 0 999px rgba(47,128,237,.14);
}
.sheet-select-mode .page-box:not(.selected){
  opacity:.75;
  filter:brightness(.92);
}
.page-label{
  font-size:11px;
  color:#666;
  margin-bottom:4px;
  margin-left:4px;
}
.page-canvas{
  width:100%;
  height:auto;
  border:1px solid #e6e6e6;
  border-radius:8px;
  background:#fff;
}
.page-box.selected .page-canvas{
  border-color:#2f6ff2;
}
.sheet-empty{
  font-size:12px;
  color:#888;
}
.song-select-dot,
.page-select-dot{
  position:relative;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
.page-select-dot{
  border:1.5px dashed #111;
}
.song-select-dot{
  position:absolute;
  left:0;
  top:50%;
  margin:0;
  width:18px;
  height:18px;
  border:none;
  opacity:0;
  transform:translate(-10px, -50%);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  will-change:transform, opacity;
}
.song-select-dot::before{
  content:"";
  position:absolute;
  inset:1.5px;
  border:1.5px dashed #111;
  border-radius:50%;
}
.page-select-dot{
  display:none !important;
}
.sheet-select-mode .song-select-dot{
  opacity:1;
  transform:translate(0, -50%);
  pointer-events:auto;
}
.song-select-dot.active{
  background:#111;
}
.page-select-dot.active{
  background:#e6e6e6;
}
.song-select-dot.active::after{
  content:"✓";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -52%);
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:600;
}
.song-select-dot.partial{
  background:#fff;
}
.page-select-dot{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);
}

@media (max-width: 768px){
  body.index-page,
  body[data-vault],
  body[data-my-packages],
  body:not(.auth-page){
    padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));
  }
  #packageModal #btnSubmitPackage{
    width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  #packageModal #btnSubmitPackage:not(:disabled){
    background:#2f80ed;
    border-color:#2f80ed;
    color:#fff;
  }
  #packageModal .modal-head{
    padding:15px;
  }
  #packageModal .m-title{
    font-size:24px;
    line-height:1.2;
    font-weight:700;
  }
  .scroll-index{
    pointer-events:auto;
    opacity:1;
    touch-action:none;
  }
  .scroll-index.dragging{
    --scroll-rail-bg:#f1f1f1;
    background:var(--scroll-rail-bg);
  }
  .scroll-index-hint{
    display:block;
  }
  body{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  .preview-img,
  .page-thumb-image,
  #modal.mobile-slide-mode .page-thumb{
    -webkit-user-select:auto;
    user-select:auto;
    -webkit-touch-callout:default;
    touch-action:auto;
  }
  input, textarea{
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
  }
  .table.select-mode .mobile-reorder-row,
  .table.select-mode .mobile-reorder-row td,
  .table.select-mode .mobile-move-handle{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  .table tbody tr.mobile-reorder-row{
    cursor:default;
    touch-action:auto;
  }
  .mobile-move-handle{
    width:30px;
    height:30px;
    border:none;
    background:transparent;
    color:#333;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:grab;
    touch-action:none;
    padding:0;
  }
  .table tbody tr.mobile-row-dragging .mobile-move-handle{
    cursor:grabbing;
  }
  .table tbody tr.mobile-row-dragging{
    position:relative;
    z-index:140;
  }
  .table-body{
    border-collapse:separate;
    border-spacing:0;
  }
  .table tbody tr.mobile-sticky-row td{
    position:sticky;
    top:var(--sticky-top, 0px);
    z-index:var(--sticky-z, 30);
    background:#fff;
    background-clip:padding-box;
    box-shadow:inset 0 0 0 9999px #fff;
    border-left:0 !important;
    border-right:0 !important;
  }
  .table tbody tr.mobile-sticky-row.mobile-row-dragging td{
    position:sticky;
    top:var(--sticky-top, 0px);
    transform:translateY(var(--drag-dy, 0px)) scale(1.01);
    background:#f2f8ff;
    box-shadow:0 10px 18px -10px rgba(0,0,0,.18), inset 0 0 0 9999px #f2f8ff !important;
    z-index:160 !important;
    pointer-events:none;
  }
  .table tbody tr.mobile-row-dragging td{
    position:relative;
    transform:translateY(var(--drag-dy, 0px)) scale(1.01);
    background:#f2f8ff;
    box-shadow:0 10px 18px -10px rgba(0,0,0,.18), inset 0 0 0 9999px #f2f8ff !important;
    z-index:160 !important;
    pointer-events:none;
  }
  .table tbody tr.mobile-row-dragging{
    filter:none;
  }
  .table tbody tr.mobile-row-drop-before td{
    border-top:2px solid #2f80ed !important;
  }
  .table tbody tr.mobile-row-drop-after td{
    border-bottom:2px solid #2f80ed !important;
  }
  .topbar{
    align-items:center;
    justify-content:space-between;
    padding:20px;
    flex-direction:row;
  }
  .brand{
    align-items:center;
  }
  .brand{
    flex-wrap:nowrap;
    gap:8px;
  }
  body[data-vault] .brand{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
  }
  body[data-vault] .topbar{
    justify-content:center;
    padding:20px;
  }
  body[data-vault] .brand{
    width:100%;
    justify-content:center;
  }
  body[data-vault] #vaultTitle{
    text-align:center;
  }
  body[data-vault] .brand-social{
    display:none;
  }
  .index-page .topbar{
    align-items:center;
    gap:8px;
  }
  .index-page .top-main{
    width:100%;
    justify-content:center;
  }
  .index-page .brand{
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:auto;
    justify-content:center;
  }
  .index-page .brand-social{
    display:none;
  }
  .index-page .top-actions{
    display:none;
  }
  body[data-my-packages] .top-actions{
    display:none;
  }
  body[data-share] .container{
    padding:0 20px;
  }
  body[data-my-info] .top-actions{
    display:none;
  }
  body[data-my-info] .topbar{
    justify-content:center;
    padding:20px;
  }
  body[data-my-info] .brand{
    width:100%;
    justify-content:center;
  }
  body[data-my-info] .brand > strong{
    font-size:20px;
    text-align:center;
  }
  body[data-vault] .top-actions{
    display:none;
  }
  .brand-social{
    gap:4px;
  }
  .sub-btn{
    padding:2px 7px;
    font-size:11px;
  }
  .index-page .container{
    padding:20px 20px 0 20px;
  }
  .container{padding:10px}
  .mobile-tabbar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:140;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:0;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.98);
    border-top:1px solid #ececef;
  }
  .mobile-tabbar-item{
    min-height:46px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-tabbar-item.is-current{
    color:#111;
  }
  .mobile-tabbar-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:18px;
    font-size:17px;
    line-height:1;
  }
  .mobile-tabbar-label{
    font-size:10px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.01em;
  }
  .mobile-tabbar-item:not(.is-current) .mobile-tabbar-label{
    font-weight:500;
  }
  .mobile-tabbar-item.is-current .mobile-tabbar-profile{
    color:#111;
  }
  .mobile-tabbar-item.is-current .mobile-tabbar-image{
    filter:none;
    opacity:1;
  }
  .vault-item{
    align-items:center;
    flex-direction:row;
  }
  .vault-item-actions{
    width:auto;
  }
  .vault-item-actions .btn{
    flex:0 0 auto;
  }
  .controls{
    grid-template-columns:repeat(9,minmax(0,1fr));
    gap:8px;
  }
  .index-page .controls{
    align-items:center;
    min-height:36px;
  }
  .controls .search-wrap{grid-column:1 / 4}
  .controls #sortDropdown{grid-column:4 / 6}
  .controls #btnSelectMode{grid-column:6 / 7}
  .controls #btnClearSelected{grid-column:7 / 8}
  .controls #btnShareSelected{grid-column:8 / 9}
  .controls #btnMergeSelected{grid-column:9 / 10}
  .controls #btnAddFile{grid-column:1 / 13}
  .index-page .controls .search-wrap,
  .index-page .controls .sort-trigger{
    min-height:36px;
    height:36px;
  }
  .index-page .controls .sort-trigger{
    position:relative;
    justify-content:flex-start;
    padding-right:24px;
  }
  .index-page .controls .sort-trigger::after{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    line-height:1;
  }
  .index-page .controls > .btn.home-btn{
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:0;
    line-height:1;
  }
  .index-page .controls > .btn.home-btn::before{
    content:"";
    width:18px;
    height:18px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
  }
  .index-page .controls #btnSelectMode::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.2 16.6 4.95 12.35l1.4-1.4 2.85 2.85 8.45-8.45 1.4 1.4z'/%3E%3C/svg%3E");
  }
  .index-page .controls #btnClearSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 1 1-6.32 10H3l3.4-3.4.1-.1L10 15H7.72A5 5 0 1 0 12 7h-1V5z'/%3E%3C/svg%3E");
  }
  .index-page .controls #btnShareSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7.5A2.5 2.5 0 0 1 6.5 5h3V3h5v2h3A2.5 2.5 0 0 1 20 7.5v10a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5zm2.5-.5a.5.5 0 0 0-.5.5V10h12V7.5a.5.5 0 0 0-.5-.5zM6 12v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V12zm5-7v1h2V5z'/%3E%3C/svg%3E");
  }
  .index-page .controls #btnMergeSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
  }
  th,td{padding:8px}
  .table{
    min-width:0;
    table-layout:fixed;
  }
  .col-key{width:52px}
  .col-move{width:52px}
  .col-act{width:60px}
  .index-page .table-head th:nth-child(6),
  .index-page .table-body td:nth-child(6),
  .index-page .table-head th:nth-child(7),
  .index-page .table-body td:nth-child(7){
    display:none;
  }
  th.col-title{text-align:left}
  .table.select-mode th.col-act,
  .table.select-mode td.col-act{
    display:none;
  }
  .table.select-mode th.col-move,
  .table.select-mode td.col-move{
    display:table-cell !important;
  }
  .titlebtn{
    display:block;
    width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.25;
  }
  .package-note-line{
    grid-template-columns:1fr;
    gap:8px;
  }
  .package-note-line.add-label > span{
    padding-top:0;
  }
  .package-note-input{
    min-height:120px;
  }
  .smallbtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:32px;
    padding:6px 4px;
    font-size:11px;
    white-space:nowrap;
  }
  .share-card{
    padding:10px;
    margin-bottom:10px;
    border-radius:0;
  }
  .table td.col-act .smallbtn{
    width:30px;
    height:30px;
    min-height:30px;
    padding:0;
  }
  .index-page .table-wrap{
    border:none;
    border-radius:0;
  }
  .table-wrap{
    --scroll-rail-w:14px;
  }
  .scroll-index{padding:6px 1px}
  .scroll-index-item{
    font-size:8px;
  }
  th.col-artist,
  td.col-artist{display:none}
  .artist-sub{
    display:block;
    margin-top:2px;
    color:#666;
    font-size:80%;
    line-height:1.2;
  }
  .selected-bar{padding:8px 10px}
  #selectedBar{display:none !important}
  #selectedChips{display:none}
  .chips{gap:6px}
  .chip{padding:6px 8px}

  .modal-card{
    left:0;
    transform:none;
    width:100vw;
    max-width:none;
    margin-top:0;
    min-height:100dvh;
    border-radius:0;
    border:none;
  }
  .modal-head,.modal-foot{padding:20px}
  .modal-foot{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  #addModal .modal-head{
    justify-content:center;
  }
  #addModal .modal-head .brand{
    width:100%;
    justify-content:center;
  }
  #addModal .modal-head .m-title{
    text-align:center;
  }
  #addModal .modal-head .btn[data-close-add]{
    display:none;
  }
  #addModal .modal-foot{
    justify-content:flex-end;
  }
  #addModal .add-modal-close-mobile{
    display:inline-flex;
  }
  #modal .btn[data-close]{
    background:#e2e2e2;
    border-color:#e2e2e2;
    color:#111;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #mDownload{
    min-width:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .modal-body{padding:24px;max-height:calc(100dvh - 112px)}
  #addModal .add-form{
    display:grid;
    gap:0;
    padding:30px;
    background:transparent;
  }
  #addModal .add-form-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
  }
  #addModal .add-file-field{
    margin-top:20px;
  }
  #addModal .add-file-field > span{
    font-size:16px;
    color:#4f5766;
    font-weight:500;
    line-height:1.2;
  }
  #addModal .add-label{
    display:grid;
    grid-template-columns:3fr 7fr;
    align-items:center;
    gap:12px;
    padding:12px 0;
  }
  #addModal .add-label > span{
    color:#4f5766;
    font-size:16px;
    font-weight:500;
    line-height:1.2;
  }
  #addModal .add-label .input{
    border:none;
    background:transparent;
    outline:none;
    box-shadow:none;
    border-radius:0;
    width:100%;
    padding:0;
    font-size:16px;
    color:#171c26;
    text-align:center;
  }
  #addModal .add-label .select{
    border:none;
    background:transparent;
    outline:none;
    box-shadow:none;
    border-radius:0;
    width:100%;
    padding:0;
    font-size:16px;
    color:#171c26;
    text-align:center;
    appearance:none;
    -webkit-appearance:none;
  }
  #addModal #addFileInput{
    font-size:16px;
    text-align:left;
    border:none;
    border-radius:0;
    background:transparent;
    padding:0;
  }
  #addModal .upload-progress{
    margin-top:20px;
  }
  #modal.mobile-slide-mode #mPdfMainWrap{
    display:none !important;
  }
  #modal.mobile-slide-mode .preview-nav{
    display:none !important;
  }
  #modal.mobile-slide-mode .page-strip{
    margin-top:0;
    gap:12px;
  }
  #modal.mobile-slide-mode .page-thumb{
    width:78vw;
    padding:0;
    border:none;
    background:transparent;
  }
  #modal.preview-edit-mode .page-strip{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow-x:visible;
    overflow-y:visible;
  }
  #modal.preview-edit-mode .page-thumb{
    width:auto;
    padding:6px;
    border:1px solid #ddd;
    background:#fff;
  }
  #modal.preview-edit-mode #mPdfMainWrap{
    display:none !important;
  }
  #modal.mobile-slide-mode .page-thumb-num{display:none}
  .preview-nav{
    width:37px;
    height:37px;
    font-size:24px;
  }
  .page-thumb{width:90px}
  .add-fab{
    position:fixed;
    right:16px;
    bottom:44px;
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    border-radius:50%;
    background:#111;
    color:#fff;
    border:none;
    box-shadow:0 10px 24px rgba(0,0,0,.24);
    z-index:40;
    font-size:30px;
    padding:0;
    color:transparent;
  }
  .add-fab::before{
    content:"+";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -54%);
    color:#fff;
    font-size:30px;
    line-height:1;
  }
}

@media (max-width: 480px){
  .sub{font-size:11px}
  .link{font-size:12px;padding:6px 9px}
  .btn{font-size:12px}
  .btn.small{padding:5px 8px}
  .modal-body{max-height:calc(100dvh - 108px)}
}

/* Toss-like Auth */
.auth-page{
  background:#f6f7f9;
  min-height:100dvh;
}
.auth-page .hidden{
  display:none !important;
}
.auth-shell{
  max-width:520px;
  margin:0 auto;
  padding:30px 30px 120px;
}
.auth-intro{
  min-height:calc(100dvh - 170px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding-top:8px;
}
.auth-intro-title{
  margin:8px 0 0;
  font-size:38px;
  line-height:1.22;
  letter-spacing:-0.02em;
  color:#202734;
  font-weight:700;
}
.auth-step{
  background:transparent;
  min-height:calc(100dvh - 170px);
  padding-top:8px;
}
.auth-hero{
  margin:8px 0 0;
  font-size:38px;
  line-height:1.22;
  letter-spacing:-0.02em;
  color:#202734;
  font-weight:700;
}
.auth-sub{
  margin:6px 0 22px;
  color:#7a8393;
  font-size:14px;
}
.auth-nav-row{
  margin:-8px 0 8px;
}
.auth-nav-link{
  border:none;
  background:transparent;
  color:#6d7584;
  font-size:13px;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}
.auth-fields{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-line{
  display:grid;
  grid-template-columns:3fr 7fr;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #dfe3ea;
}
.auth-line > span{
  color:#4f5766;
  font-size:15px;
  font-weight:500;
}
.auth-input{
  border:none;
  background:transparent;
  outline:none;
  font-size:20px;
  color:#171c26;
  text-align:center;
  width:100%;
  padding:0;
}
.auth-input::placeholder{
  color:#bcc3cf;
}
.auth-status{
  margin-top:14px;
  min-height:20px;
  color:#6f7786;
  font-size:13px;
}
.auth-mode-actions{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.auth-mode-actions .btn{
  min-height:46px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
}
.auth-forgot-link{
  display:inline-flex;
  align-self:center;
  color:#6b7382;
  font-size:13px;
  text-decoration:underline;
  padding:2px 0;
}
.auth-switch-link{
  border:none;
  background:transparent;
  color:#6b7382;
  font-size:13px;
  text-decoration:underline;
  padding:2px 0;
  align-self:center;
  cursor:pointer;
}
.auth-page .auth-contact-accordion{
  margin-top:18px;
  border-top:1px solid #e3e6ec;
  padding-top:14px;
}
.auth-page .auth-contact-title{
  list-style:none;
  margin:0;
  font-size:16px;
  color:#4a5261;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.auth-page .auth-contact-title::-webkit-details-marker{
  display:none;
}
.auth-page .auth-contact-title::after{
  content:"▼";
  font-size:12px;
  color:#7f8795;
}
.auth-page .auth-contact-accordion[open] .auth-contact-title::after{
  content:"▲";
}
.auth-contact-body{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.auth-contact-textarea{
  width:100%;
  border:1px solid #d7dce5;
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  font-size:14px;
  resize:vertical;
}
.auth-page .auth-contact-btn{
  align-self:flex-end;
  border-color:#4b5362;
  background:#4b5362;
  color:#fff;
}
.auth-bottom-actions{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  background:#f6f7f9;
  border-top:1px solid #e3e7ee;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.auth-bottom-actions .btn{
  min-height:46px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
}
.auth-start-btn{
  grid-column:1 / -1;
}
.auth-page .auth-fields.hidden,
.auth-page .auth-step.hidden,
.auth-page .auth-intro.hidden,
.auth-page .auth-bottom-actions.hidden{
  display:none !important;
}

@media (max-width: 768px){
  html[data-ui-theme="dark"] body:not(.auth-page){
    background:#020913;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .topbar,
  html[data-ui-theme="dark"] .modal-card,
  html[data-ui-theme="dark"] .modal-head,
  html[data-ui-theme="dark"] .modal-foot,
  html[data-ui-theme="dark"] .auth-bottom-actions{
    background:#020913;
    color:#f2f4f6;
    border-color:#191f28;
  }
  html[data-ui-theme="dark"] .modal-body,
  html[data-ui-theme="dark"] .selected-bar,
  html[data-ui-theme="dark"] .preview-edit-panel{
    background:#020913;
    color:#f2f4f6;
    border-color:#191f28;
  }
  html[data-ui-theme="dark"] .table-wrap,
  html[data-ui-theme="dark"] .vault-empty,
  html[data-ui-theme="dark"] .share-card,
  html[data-ui-theme="dark"] .page-thumb,
  html[data-ui-theme="dark"] .pdf-main-wrap,
  html[data-ui-theme="dark"] .page-thumb.page-slide .page-thumb-image,
  html[data-ui-theme="dark"] .page-thumb.page-slide .page-thumb-canvas{
    background:transparent;
    color:#191f28;
    border-color:#4e5968;
  }
  html[data-ui-theme="dark"] .table-body,
  html[data-ui-theme="dark"] .table-body tbody,
  html[data-ui-theme="dark"] .table-body tr,
  html[data-ui-theme="dark"] .table-body td{
    background:transparent;
  }
  html[data-ui-theme="dark"] .table tbody tr.selected-row td,
  html[data-ui-theme="dark"] .table tbody tr.selected-row.mobile-sticky-row td{
    background:#191f28;
    box-shadow:inset 0 0 0 9999px #191f28 !important;
    border-top:1px solid #191f28 !important;
    border-bottom:1px solid #191f28 !important;
  }
  html[data-ui-theme="dark"] .table tbody tr.selected-row td,
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .titlebtn,
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .artist-sub,
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .artist-text,
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .smallbtn,
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .icon-action{
    color:#c9e2ff;
  }
  html[data-ui-theme="dark"] .table tbody tr.selected-row td .icon-action path{
    stroke:#c9e2ff;
  }
  html[data-ui-theme="dark"] .table tbody tr.mobile-sticky-row td,
  html[data-ui-theme="dark"] .table tbody tr.mobile-row-dragging td{
    background:transparent;
    box-shadow:none !important;
  }
  html[data-ui-theme="dark"] .table tbody tr.mobile-sticky-row.mobile-row-dragging td{
    position:sticky;
    top:var(--sticky-top, 0px);
    background:#191f28;
    box-shadow:0 10px 18px -10px rgba(0,0,0,.32), inset 0 0 0 9999px #191f28 !important;
    z-index:160 !important;
  }
  html[data-ui-theme="dark"] .table tbody tr.mobile-row-dragging td{
    background:#191f28;
    box-shadow:0 10px 18px -10px rgba(0,0,0,.32), inset 0 0 0 9999px #191f28 !important;
    z-index:160 !important;
  }
  html[data-ui-theme="dark"] .table tbody tr.mobile-row-drop-before td{
    border-top:2px solid #c9e2ff !important;
  }
  html[data-ui-theme="dark"] .table tbody tr.mobile-row-drop-after td{
    border-bottom:2px solid #c9e2ff !important;
  }
  html[data-ui-theme="dark"] th,
  html[data-ui-theme="dark"] td,
  html[data-ui-theme="dark"] .package-name-line,
  html[data-ui-theme="dark"] .add-label,
  html[data-ui-theme="dark"] .vault-search-wrap::after{
    border-color:#191f28;
  }
  html[data-ui-theme="dark"] .vault-search-wrap::after{
    background:#191f28;
  }
  html[data-ui-theme="dark"] .vault-search-wrap:focus-within::after{
    background:#3182f6;
  }
  html[data-ui-theme="dark"] .search-wrap{
    background:transparent;
    border-color:#4e5968;
  }
  html[data-ui-theme="dark"] th{
    color:#8b95a1;
    background:transparent;
  }
  html[data-ui-theme="dark"] .titlebtn,
  html[data-ui-theme="dark"] .myinfo-value,
  html[data-ui-theme="dark"] .myinfo-packages-title,
  html[data-ui-theme="dark"] .mobile-tabbar-item.is-current,
  html[data-ui-theme="dark"] .mobile-tabbar-item.is-current .mobile-tabbar-profile,
  html[data-ui-theme="dark"] .vault-package-name,
  html[data-ui-theme="dark"] #packageTitle,
  html[data-ui-theme="dark"] .h2,
  html[data-ui-theme="dark"] .sheet-title,
  html[data-ui-theme="dark"] .brand,
  html[data-ui-theme="dark"] .m-title{
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] .vault-title-icon{
    filter:brightness(0) invert(1);
  }
  html[data-ui-theme="dark"] .artist-text,
  html[data-ui-theme="dark"] .artist-sub,
  html[data-ui-theme="dark"] .col-key,
  html[data-ui-theme="dark"] .vault-item-date,
  html[data-ui-theme="dark"] .vault-item-nickname,
  html[data-ui-theme="dark"] .m-meta,
  html[data-ui-theme="dark"] .myinfo-status,
  html[data-ui-theme="dark"] .mobile-tabbar-item:not(.is-current),
  html[data-ui-theme="dark"] .mobile-tabbar-item:not(.is-current) .mobile-tabbar-label,
  html[data-ui-theme="dark"] #packageNamePreview,
  html[data-ui-theme="dark"] .selected-title,
  html[data-ui-theme="dark"] .page-thumb-num{
    color:#8b95a1;
  }
  html[data-ui-theme="dark"] .summary-text{
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .share-note{
    background:#191f28;
    border-color:#4e5968;
    color:#b0b8c1;
  }
  html[data-ui-theme="dark"] .package-note-input{
    background:#191f28;
  }
  html[data-ui-theme="dark"] #packageMemoInput{
    background:#191f28;
    border-color:#4e5968;
  }
  html[data-ui-theme="dark"] body[data-my-info] #myInfoNickname,
  html[data-ui-theme="dark"] body[data-my-info] #myInfoEmail,
  html[data-ui-theme="dark"] body[data-my-info] #myInfoRole{
    color:#b0b8c1;
  }
  html[data-ui-theme="dark"] .page-label{
    color:#8b95a1;
  }
  html[data-ui-theme="dark"] .input,
  html[data-ui-theme="dark"] .select,
  html[data-ui-theme="dark"] .search-wrap .input,
  html[data-ui-theme="dark"] .vault-search-wrap .input,
  html[data-ui-theme="dark"] .package-name-input,
  html[data-ui-theme="dark"] .auth-input,
  html[data-ui-theme="dark"] .auth-contact-textarea,
  html[data-ui-theme="dark"] #addModal .add-label .input,
  html[data-ui-theme="dark"] #addModal .add-label .select,
  html[data-ui-theme="dark"] #addModal #addFileInput{
    color:#f2f4f6;
    background:transparent;
    border-color:#4e5968;
  }
  html[data-ui-theme="dark"] #addModal .add-label > span{
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] #addModal .add-label .select{
    text-align:center;
    text-align-last:center;
  }
  html[data-ui-theme="dark"] .input::placeholder,
  html[data-ui-theme="dark"] .package-name-input::placeholder,
  html[data-ui-theme="dark"] .vault-search-wrap .input::placeholder,
  html[data-ui-theme="dark"] .auth-input::placeholder,
  html[data-ui-theme="dark"] #myInfoNewPassword::placeholder,
  html[data-ui-theme="dark"] #myInfoNewPasswordConfirm::placeholder{
    color:#6b7684;
  }
  html[data-ui-theme="dark"] .btn,
  html[data-ui-theme="dark"] .smallbtn,
  html[data-ui-theme="dark"] .link,
  html[data-ui-theme="dark"] .sub-btn,
  html[data-ui-theme="dark"] #packageVaultBtn{
    background:#191f28;
    border-color:#4e5968;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .team-option.is-disabled span{
    background:#191f28;
    border-color:#191f28;
    color:#4e5968;
    cursor:not-allowed;
  }
  html[data-ui-theme="dark"] .team-option input:checked + span{
    background:#2272eb;
    border-color:#2272eb;
    color:#fff;
  }
  html[data-ui-theme="dark"] .btn.primary,
  html[data-ui-theme="dark"] #btnShareSelected:not(:disabled),
  html[data-ui-theme="dark"] #btnSubmitAddFile,
  html[data-ui-theme="dark"] #packageModal #btnSubmitPackage:not(:disabled),
  html[data-ui-theme="dark"] #mSharePdf,
  html[data-ui-theme="dark"] #mShareImage{
    background:#2272eb;
    border-color:#2272eb;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] .vault-btn-open{
    background:#1957c2;
    border-color:#1957c2;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] .vault-btn-share{
    background:#3182f6;
    border-color:#3182f6;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] #btnPickSheets{
    border-color:#194aa6;
    color:#ffffff;
    background:#194aa6;
  }
  html[data-ui-theme="dark"] #btnSharePackageLink{
    background:#191f28;
    border-color:#4e5968;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .sheet-item{
    border:none;
    padding:0;
    background:#191f28;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnSelectMode,
  html[data-ui-theme="dark"] .index-page .controls > #btnClearSelected,
  html[data-ui-theme="dark"] .index-page .controls > #btnShareSelected,
  html[data-ui-theme="dark"] .index-page .controls > #btnMergeSelected{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnSelectMode{
    border:1px solid #4e5968;
    color:#1957c2;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnSelectMode.is-active{
    background:#c9e2ff;
    border-color:transparent;
    color:#1b64da;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnClearSelected{
    border:1px solid #4e5968;
    color:#333d4b;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnClearSelected.has-selection{
    background:#ffeeee;
    border-color:transparent;
    color:#bc1b2a;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnShareSelected{
    border:1px solid #4e5968;
    color:#333d4b;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnShareSelected.has-selection{
    background:#c9e2ff;
    border-color:transparent;
    color:#1b64da;
  }
  html[data-ui-theme="dark"] .index-page .controls > #btnMergeSelected{
    background:#333d4b;
    color:#191f28;
  }
  html[data-ui-theme="dark"] .index-page .controls #btnSelectMode::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231957c2' d='M9.2 16.6 4.95 12.35l1.4-1.4 2.85 2.85 8.45-8.45 1.4 1.4z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnSelectMode.is-active::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b64da' d='M9.2 16.6 4.95 12.35l1.4-1.4 2.85 2.85 8.45-8.45 1.4 1.4z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnClearSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333d4b' d='M12 5a7 7 0 1 1-6.32 10H3l3.4-3.4.1-.1L10 15H7.72A5 5 0 1 0 12 7h-1V5z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnClearSelected.has-selection::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bc1b2a' d='M12 5a7 7 0 1 1-6.32 10H3l3.4-3.4.1-.1L10 15H7.72A5 5 0 1 0 12 7h-1V5z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnShareSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333d4b' d='M4 7.5A2.5 2.5 0 0 1 6.5 5h3V3h5v2h3A2.5 2.5 0 0 1 20 7.5v10a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5zm2.5-.5a.5.5 0 0 0-.5.5V10h12V7.5a.5.5 0 0 0-.5-.5zM6 12v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V12zm5-7v1h2V5z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnShareSelected.has-selection::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231b64da' d='M4 7.5A2.5 2.5 0 0 1 6.5 5h3V3h5v2h3A2.5 2.5 0 0 1 20 7.5v10a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5zm2.5-.5a.5.5 0 0 0-.5.5V10h12V7.5a.5.5 0 0 0-.5-.5zM6 12v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V12zm5-7v1h2V5z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .index-page .controls #btnMergeSelected::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ddd' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
  }
  html[data-ui-theme="dark"] .sort-menu{
    background:#020913;
    border-color:#4e5968;
  }
  html[data-ui-theme="dark"] .sort-option{
    background:#020913;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .sort-option:hover{
    background:#191f28;
  }
  html[data-ui-theme="dark"] .sort-option.active{
    background:#191f28;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] #btnShareSelected:not(.home-btn){
    background:#4e5968;
    border-color:#4e5968;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] #btnMergeSelected:not(:disabled),
  html[data-ui-theme="dark"] #mEditSong,
  html[data-ui-theme="dark"] #mDownloadPage,
  html[data-ui-theme="dark"] #mDownload{
    background:#191f28;
    border-color:#4e5968;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] #btnMyInfoLogout,
  html[data-ui-theme="dark"] .vault-btn-delete{
    background:#bc1b2a;
    border-color:#bc1b2a;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] #btnClearSelected:disabled:not(.home-btn){
    background:#4e5968;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] #modal .btn[data-close],
  html[data-ui-theme="dark"] .add-modal-close-mobile{
    background:#4e5968;
    border-color:#4e5968;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .search-clear,
  html[data-ui-theme="dark"] .vault-search-clear{
    background:#4e5968;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .mobile-tabbar{
    background:rgba(25,31,40,.98);
    border-top:1px solid #191f28;
  }
  html[data-ui-theme="dark"] .scroll-index{
    background:rgba(25,31,40,.98);
  }
  html[data-ui-theme="dark"] .table-wrap:hover .scroll-index,
  html[data-ui-theme="dark"] .scroll-index:focus-within,
  html[data-ui-theme="dark"] .scroll-index.dragging{
    --scroll-rail-bg:#020913;
    background:#020913;
  }
  html[data-ui-theme="dark"] .table-wrap::after{
    background:#020913;
  }
  html[data-ui-theme="dark"] .scroll-index-item,
  html[data-ui-theme="dark"] .scroll-index-hint{
    color:#d1d6db;
  }
  html[data-ui-theme="dark"] .scroll-index-hint{
    background:#333d4b;
    color:#b0b8c1;
  }
  html[data-ui-theme="dark"] .scroll-index-item.current{
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] .mobile-tabbar-profile{
    color:#8b95a1;
  }
  html[data-ui-theme="dark"] .mobile-tabbar-item.is-current .mobile-tabbar-image{
    filter:brightness(0) invert(1);
    opacity:1;
  }
  html[data-ui-theme="dark"] .mobile-tabbar-item:not(.is-current) .mobile-tabbar-image{
    filter:brightness(0) saturate(100%) invert(63%) sepia(10%) saturate(445%) hue-rotate(174deg) brightness(89%) contrast(90%);
    opacity:1;
  }
  html[data-ui-theme="dark"] .theme-toggle{
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .theme-toggle-track{
    background:#4e5968;
  }
  html[data-ui-theme="dark"] .theme-toggle.is-dark .theme-toggle-track{
    background:#3182f6;
  }
  html[data-ui-theme="dark"] .theme-toggle-thumb{
    background:#f9fafb;
  }
  html[data-ui-theme="dark"] .badge,
  html[data-ui-theme="dark"] .page-slide-badge{
    background:#191f28;
    color:#f9fafb;
  }
  html[data-ui-theme="dark"] .summary-num{
    background:#191f28;
    border:none;
    color:#f2f4f6;
  }
  html[data-ui-theme="dark"] .badge:not(:empty){
    background:#c9e2ff;
    border-color:#c9e2ff;
    color:#171c26;
    font-weight:600;
  }
  html[data-ui-theme="dark"] .upload-progress-track{
    background:#191f28;
  }
  html[data-ui-theme="dark"] .upload-progress-bar{
    background:#3182f6;
  }
  html[data-ui-theme="dark"] .page-thumb.active{
    border-color:#90c2ff;
  }
  html[data-ui-theme="dark"] .preview-nav{
    background:rgba(51,61,75,.9);
  }
}