:root{
  --bg0:#0f1b34;
  --bg1:#0f1b34;
  --line:rgba(255,255,255,.10);
  --text:#e8eef9;
  --muted:#9fb0cf;
  --btn:#4f67c8;
  --danger:#ef4444;
  --shadow:0 12px 40px rgba(0,0,0,.38);
  --radius:16px;

  --focusRing:rgba(99,102,241,.14);
  --focusBorder:rgba(129,140,248,.48);
  --focusOutline:rgba(165,180,252,.72);

  --panelBg:#182746;
  --sheetBg:#162341;
  --sheetCardBg:#1a294b;
  --sheetBorder:rgba(255,255,255,.10);
  --sheetCardLine:rgba(255,255,255,.10);
  --toolbarBg:#13203b;

  --surface0:#111c35;
  --surface1:#162341;
  --fieldBg:rgba(7,14,28,.34);
  --fieldBgStrong:#0f1a31;

  --rowHoverBg:rgba(99,102,241,.12);
  --rowHoverLine:rgba(99,102,241,.28);
  --rowStripe:rgba(255,255,255,.025);

  --pillBg:rgba(255,255,255,.05);
  --pillLine:var(--line);
  --pillHoverBg:rgba(255,255,255,.08);
  --pillHoverLine:rgba(99,102,241,.25);
  --pillHoverLine2:rgba(255,255,255,.18);

  --btnBgHover:#5b72d1;
  --secondaryBgHover:rgba(255,255,255,.08);
  --secondaryLineHover:rgba(255,255,255,.18);
  --secondaryHoverText:#ffffff;

  --controlBorder:rgba(255,255,255,.12);
  --controlBorderHover:rgba(255,255,255,.22);
  --controlInset:inset 0 1px 0 rgba(255,255,255,.04);
  --buttonHoverShadow:none;

  --dangerBg:rgba(239,68,68,.16);
  --dangerLine:rgba(239,68,68,.34);
  --dangerText:#fecaca;
  --dangerBgHover:rgba(239,68,68,.24);
  --dangerLineHover:rgba(239,68,68,.50);

  --pwBg:rgba(34,197,94,.14);
  --pwLine:rgba(34,197,94,.34);
  --pwText:#bbf7d0;
  --pwBgHover:rgba(34,197,94,.22);
  --pwLineHover:rgba(34,197,94,.52);
  --pwTextHover:#dcfce7;

  --recommendBg:rgba(34,197,94,.12);
  --recommendLine:rgba(34,197,94,.38);
}

html[data-theme="light"]{
  --bg0:#dcedff;
  --bg1:#dcedff;
  --line:rgba(92,122,181,.24);
  --text:#24446e;
  --muted:#5f7ea8;
  --btn:#78a6ef;
  --danger:#d84c68;
  --shadow:0 14px 40px rgba(85,120,180,.16);

  --focusRing:rgba(79,70,229,.10);
  --focusBorder:rgba(79,70,229,.34);
  --focusOutline:rgba(79,70,229,.56);

  --panelBg:#eff6ff;
  --sheetBg:#e8f2ff;
  --sheetCardBg:#f4f9ff;
  --sheetBorder:rgba(92,122,181,.22);
  --sheetCardLine:rgba(92,122,181,.24);
  --toolbarBg:#deecff;

  --surface0:#f5faff;
  --surface1:#e8f2ff;
  --fieldBg:rgba(120,166,239,.10);
  --fieldBgStrong:#f7fbff;

  --rowHoverBg:rgba(120,166,239,.12);
  --rowHoverLine:rgba(120,166,239,.30);
  --rowStripe:rgba(120,166,239,.04);

  --pillBg:rgba(120,166,239,.10);
  --pillLine:rgba(92,122,181,.22);
  --pillHoverBg:rgba(120,166,239,.14);
  --pillHoverLine:rgba(120,166,239,.32);
  --pillHoverLine2:rgba(92,122,181,.24);

  --btnBgHover:#6799e8;
  --secondaryBgHover:rgba(120,166,239,.14);
  --secondaryLineHover:rgba(92,122,181,.28);
  --secondaryHoverText:var(--text);

  --controlBorder:rgba(92,122,181,.24);
  --controlBorderHover:rgba(92,122,181,.36);
  --controlInset:inset 0 1px 0 rgba(255,255,255,.55);
  --buttonHoverShadow:none;

  --dangerBg:rgba(216,76,104,.14);
  --dangerLine:rgba(216,76,104,.30);
  --dangerText:#8f1d3d;
  --dangerBgHover:rgba(216,76,104,.20);
  --dangerLineHover:rgba(216,76,104,.44);

  --pwBg:rgba(82,191,153,.16);
  --pwLine:rgba(82,191,153,.44);
  --pwText:#17624d;
  --pwBgHover:rgba(82,191,153,.22);
  --pwLineHover:rgba(82,191,153,.52);
  --pwTextHover:#114d3c;

  --recommendBg:rgba(82,191,153,.16);
  --recommendLine:rgba(82,191,153,.44);
}

html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{
  transition:none !important;
  animation:none !important;
}

*{box-sizing:border-box}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

body{
  margin:0;
  color:var(--text);
  font-family:"Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg0);
  min-height:100vh;
}

button,input,textarea,select{
  font-family:inherit;
}

.wrap{
  max-width:1400px;
  margin:0 auto;
  padding:18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-radius:var(--radius);
  background:var(--panelBg);
  border:1px solid var(--sheetBorder);
  box-shadow:var(--shadow);
  gap:12px;
}

.title{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.2px;
  flex-wrap:wrap;
}

.top-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

button{
  border-radius:12px;
  padding:11px 14px;
  cursor:pointer;
  color:white;
  background:var(--btn);
  border:1px solid var(--line);
  box-shadow:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease;
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

button:not(.secondary):not(.danger):not(.pill):not(.customSelectTrigger):not(:disabled):hover{
  background:var(--btnBgHover);
  border-color:var(--secondaryLineHover);
  color:#ffffff;
  box-shadow:var(--buttonHoverShadow);
}

button.secondary{
  background:var(--surface0);
  border:1px solid var(--controlBorder);
  color:var(--text);
  box-shadow:var(--controlInset);
}

html[data-theme="light"] button.secondary{
  background:#f3f9ff;
}

button.secondary:not(.pw):not(:disabled):hover{
  background:var(--secondaryBgHover);
  border-color:var(--controlBorderHover);
  color:var(--secondaryHoverText);
  box-shadow:var(--buttonHoverShadow);
}

button.secondary.pw{
  background:var(--pwBg);
  border-color:var(--pwLine);
  color:var(--pwText);
  box-shadow:none;
}

button.secondary.pw:not(:disabled):hover{
  background:var(--pwBgHover);
  border-color:var(--pwLineHover);
  color:var(--pwTextHover);
}

button.danger{
  background:var(--dangerBg);
  border:1px solid var(--dangerLine);
  color:var(--dangerText);
  box-shadow:none;
}

button.danger:not(:disabled):hover{
  background:var(--dangerBgHover);
  border-color:var(--dangerLineHover);
  color:inherit;
}

.iconBtn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.iconBtn svg{
  width:20px;
  height:20px;
  display:block;
}

.accountBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--controlBorder);
  background:var(--surface0);
  color:var(--text);
  box-shadow:var(--controlInset);
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
}

html[data-theme="light"] .accountBadge{
  background:#f3f9ff;
}

.panel{
  margin-top:14px;
  border-radius:var(--radius);
  background:var(--sheetBg);
  border:1px solid var(--sheetBorder);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.toolbar{
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--sheetBorder);
  background:var(--toolbarBg);
}

input, textarea, select{
  background:var(--fieldBg);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:12px 12px;
  outline:none;
  transition:border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,background-color .12s ease,color .12s ease;
}

.modal input,
.modal textarea,
.modal select{
  font-size:16px;
  background:var(--fieldBgStrong);
  border:1px solid var(--controlBorder);
  box-shadow:var(--controlInset);
}

.modal input:hover,
.modal textarea:hover,
.modal select:hover,
input.search:hover,
select.genreFilter:hover{
  border-color:var(--controlBorderHover);
}

.modal input:focus,
.modal input:focus-visible,
.modal textarea:focus,
.modal textarea:focus-visible,
.modal select:focus,
.modal select:focus-visible,
input.search:focus,
input.search:focus-visible,
select.genreFilter:focus,
select.genreFilter:focus-visible{
  border-color:var(--focusBorder);
  outline:2px solid var(--focusOutline);
  outline-offset:0;
  box-shadow:0 0 0 3px var(--focusRing),var(--controlInset);
}

input::placeholder,
textarea::placeholder{
  color:rgba(159,176,207,.88);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:rgba(95,126,168,.82);
}

.search{
  flex:1 1 340px;
  min-width:240px;
}

input.search{
  height:44px;
  border-radius:14px;
  border:1px solid var(--controlBorder);
  background-color:var(--fieldBgStrong);
  padding:10px 14px;
  box-shadow:var(--controlInset);
  font-size:14px;
}

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:42px;
}

select.genreFilter{
  width:180px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--controlBorder);
  background-color:var(--fieldBgStrong);
  color:var(--text);
  padding:10px 42px 10px 14px;
  box-shadow:var(--controlInset);
  cursor:pointer;
}

.toolbar button{
  height:44px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.meta{
  padding:10px 14px;
  color:var(--muted);
  font-size:13px;
}

table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

th, td{
  padding:14px 12px;
  border-top:1px solid var(--sheetBorder);
  vertical-align:middle;
  font-size:14px;
  overflow:hidden;
}

td{
  line-height:1.45;
}

th{
  color:var(--muted);
  font-weight:650;
  background:var(--toolbarBg);
}

td strong{
  font-weight:750;
}

thead th:nth-child(1),
thead th:nth-child(2),
tbody td:nth-child(1),
tbody td:nth-child(2){
  text-align:left;
}

tbody tr:nth-child(odd){
  background:var(--rowStripe);
}

tbody tr{
  transition:background-color .12s ease,box-shadow .12s ease,color .12s ease;
}

tbody tr:hover{
  background:var(--rowHoverBg);
  box-shadow:inset 0 0 0 1px var(--rowHoverLine);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--pillLine);
  background:var(--pillBg);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  line-height:1;
  user-select:none;
  text-decoration:none;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}

a.pill,
button.pill{
  color:var(--text);
}

button.pill{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  box-shadow:none;
  background:var(--pillBg);
  border:1px solid var(--pillLine);
  padding:6px 10px;
}

.panel .pill:hover,
.panel a.pill:hover,
.panel button.pill:hover{
  border-color:var(--pillHoverLine2);
  background:var(--pillHoverBg);
  color:inherit;
}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,16,32,.48);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
}

html[data-theme="light"] .backdrop{
  background:rgba(164,196,240,.30);
}

.backdrop.show{
  display:flex;
}

.modal{
  width:min(920px,100%);
  border-radius:18px;
  background:var(--sheetBg);
  border:1px solid var(--sheetBorder);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.modal.small{
  width:min(520px,100%);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--sheetBorder);
  background:var(--panelBg);
  gap:10px;
}

.modal-body{
  padding:14px 16px;
  background:transparent;
}

.modal-foot{
  padding:14px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--sheetBorder);
  background:var(--toolbarBg);
}

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.grid .full{
  grid-column:1 / -1;
}

.two-col{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:12px;
  align-items:center;
}

.label{
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}

.note{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
  min-height:18px;
}

textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
}

.footer{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid var(--sheetBorder);
  background:var(--toolbarBg);
  color:var(--muted);
}

.pager{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.pager .pages{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.pager button{
  padding:10px 12px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.pager button.current{
  background:rgba(99,102,241,.25);
  border:1px solid rgba(99,102,241,.45);
  color:#ffffff;
  box-shadow:none;
  cursor:default;
}

html[data-theme="light"] .pager button.current{
  color:var(--text);
}

#focusSink{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
  outline:none;
  pointer-events:none;
}

#focusSink:focus{
  outline:none;
}

button:focus{
  outline:none;
}

button:focus-visible{
  outline:2px solid var(--focusOutline);
  outline-offset:2px;
  box-shadow:0 0 0 3px var(--focusRing);
}

@media (max-width:860px){
  .grid{
    grid-template-columns:1fr;
  }

  .two-col{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .wrap{
    padding:14px;
  }

  .topbar{
    padding:14px 14px;
    gap:10px;
  }

  .title{
    font-size:24px;
  }

  .toolbar{
    padding:12px;
    gap:10px;
    align-items:stretch;
    flex-wrap:wrap;
  }

  .search{
    flex:1 1 100%;
    min-width:0;
    width:auto;
  }

  input.search,
  select.genreFilter{
    height:52px;
    padding:12px 16px;
    font-size:18px;
    border-radius:16px;
  }

  .toolbar button{
    height:48px;
  }

  table,thead,tbody,tr,th,td{
    display:block;
    width:100%;
  }

  thead{
    display:none;
  }

  tbody{
    padding:10px 12px 14px;
  }

  tbody tr{
    background:var(--sheetCardBg)!important;
    border:1.5px solid var(--sheetCardLine);
    border-radius:16px;
    margin:10px 0;
    overflow:hidden;
    box-shadow:0 10px 28px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
  }

  html[data-theme="light"] tbody tr{
    border:1.5px solid rgba(92,122,181,.24);
    box-shadow:0 10px 28px rgba(85,120,180,.10), inset 0 0 0 1px rgba(255,255,255,.35);
  }

  tbody tr:hover{
    background:rgba(99,102,241,.10)!important;
    box-shadow:inset 0 0 0 1px rgba(99,102,241,.25),0 10px 28px rgba(0,0,0,.26);
  }

  html[data-theme="light"] tbody tr:hover{
    border-color:rgba(120,166,239,.42);
    background:rgba(120,166,239,.10)!important;
    box-shadow:inset 0 0 0 1px rgba(120,166,239,.28),0 10px 28px rgba(85,120,180,.10);
  }

  tbody td{
    border-top:0;
    padding:12px 14px;
    text-align:left!important;
  }

  .modal{
    border-radius:20px;
  }

  .modal-head,
  .modal-body,
  .modal-foot{
    padding-left:14px;
    padding-right:14px;
  }
}

table thead th,
table tbody td{
  font-size:16px;
  line-height:1.45;
}

table th:nth-child(n+3),
table td:nth-child(n+3){
  text-align:center;
}