* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:#f8f8fe;
  color:#14132f;
  font:15px/1.45 'Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;
}
button,input {
  font:inherit;
}
button,summary {
  cursor:pointer;
}
button {
  border:1px solid #c7c0e0;
  border-radius:7px;
  background:#fff;
  color:#201a46;
  font-weight:700;
  padding:7px 13px;
}
button:hover {
  filter:brightness(.96);
}
button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid #7846e5;
  outline-offset:1px;
}
button:disabled {
  opacity:.5;
  cursor:wait;
}
[hidden] {
  display:none!important;
}
.purple {
  color:white;
  background:linear-gradient(#913de7,#6013bb);
  border-color:#752ace;
}
.workspace {
  padding:12px;
}
aside {
  width:155px;
  background:linear-gradient(125deg,#111c34,#21304a);
  position:fixed;
  inset:0 auto 0 0;
  z-index:5;
  padding:76px 9px 15px;
}
nav button {
  display:block;
  white-space:nowrap;
  background:none;
  border:0;
  color:#e5ebf3;
  width:100%;
  padding:12px 10px;
  text-align:left;
  margin:3px 0;
  font-size:14px;
}
nav button.active {
  background:#235dec;
  color:white;
}
nav button i {
  font-style:normal;
  display:inline-block;
  width:23px;
}
main {
  margin-left:155px;
}
header {
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px 18px;
  background:linear-gradient(115deg,#b63fec,#5124ae 31%,#3a4dd8 59%,#2a68d9);
  color:white;
}
.brand {
  flex:0 1 280px;
  min-width:0;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}
.brand-logo {
  display:block;
  width:100%;
  height:auto;
}
.actions,.mobileactions {
  display:flex;
  gap:8px;
  margin-left:auto;
}
#hamb,.mobileactions {
  display:none;
}
.banner {
  display:flex;
  align-items:center;
  gap:18px;
  color:white;
  padding:8px 20px;
  background:linear-gradient(105deg,#6b24c8,#7836d5);
  border-radius:8px;
}
.banner b {
  font-size:22px;
}
.banner span {
  font-weight:600;
  border-left:1px solid #ffffff80;
  padding-left:18px;
}
.stages,.fields,#totals,footer {
  display:flex;
  align-items:center;
}
.stages {
  justify-content:space-evenly;
  margin:9px 0 12px;
  padding:5px;
  background:linear-gradient(100deg,#e5dffa,#eeebff);
  border-radius:9px;
  color:#562bb2;
}
.stages span {
  background:white;
  border:1px solid #b4a0e3;
  border-radius:28px;
  text-align:center;
  padding:3px 15px;
  min-width:15%;
  color:#241641;
  font-weight:650;
}
.stages span.on {
  background:linear-gradient(110deg,#8d30df,#641fc0);
  color:#fff;
}
.stages i {
  font-style:normal;
  border-radius:50%;
  background:#9171c6;
  color:#fff;
  padding:0 5px;
  margin-right:5px;
}
.stages .on i {
  background:#fff;
  color:#6a25bf;
}
.columns {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:12px;
}
.left {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.panel,footer,#other-content:not(:empty) {
  border:1px solid #d3c8f2;
  border-radius:9px;
  background:#fff;
  overflow:hidden;
}
.panel>summary {
  background:linear-gradient(110deg,#eae5fa,#f4f1fc);
  font-size:17px;
  font-weight:750;
  padding:8px 13px;
  list-style:none;
}
.panel>summary::-webkit-details-marker {
  display:none;
}
summary small {
  font-weight:500;
}
.upload {
  padding:12px;
}
#drop {
  min-height:105px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:#f8f4ff;
  border:2px dashed #9761db;
  border-radius:9px;
  padding:12px;
  text-align:center;
}
#drop.over {
  background:#ddd1fa;
}
#drop strong {
  font-size:clamp(14px,1.3vw,21px);
}
.cloud {
  font-size:38px;
  position:relative;
  color:#7524cf;
  line-height:1;
}
.cloud small {
  position:absolute;
  inset:14px 0 auto;
  color:white;
  font-size:18px;
}
.select {
  border-left:1px solid #cfc1e6;
  padding-left:18px;
}
.select button {
  min-width:100px;
}
.select small {
  display:block;
  font-size:11px;
  margin-top:4px;
}
.fields {
  padding:12px 10px;
  gap:9px;
}
.fields label {
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  min-width:0;
  font-weight:650;
  font-size:13px;
}
.fields input,.manage input {
  width:100%;
  min-width:0;
  border:1px solid #c9c3db;
  border-radius:5px;
  padding:7px;
  background:#fdfcfe;
}
.tablewrap,.scroll {
  overflow-x:auto;
}
.tablewrap {
  margin:9px 10px 0;
}
.tablewrap table {
  min-width:530px;
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
th,td {
  border:1px solid #cfc9dd;
  padding:4px;
  text-align:left;
}
th {
  text-align:center;
  background:#eee9fa;
}
#grid {
  table-layout:fixed;
}
#grid th:nth-child(1) {
  width:7%;
}
#grid th:nth-child(2) {
  width:20%;
}
#grid th:nth-child(3) {
  width:24%;
}
#grid th:nth-child(4) {
  width:8%;
}
#grid th:nth-child(7) {
  width:12%;
}
#grid td {
  padding:0;
}
#grid td:first-child {
  text-align:center;
}
#grid td:nth-child(6) {
  text-align:right;
  padding:2px 4px;
}
#grid input,#candidates input:not([type=checkbox]) {
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  padding:6px 4px;
  color:inherit;
}
#grid .num {
  text-align:right;
}
#grid tr.selected {
  background:#f4efff;
}
#check,#badge {
  float:right;
  color:#18732e;
  background:#e3f7dc;
  padding:2px 8px;
  border-radius:5px;
  font-size:12px;
}
#check.warn {
  color:#88561a;
  background:#fff1d9;
}
#badge {
  background:#faf9ff;
  color:#675086;
}
.rowtools {
  display:flex;
  gap:5px;
  align-items:center;
  padding:6px 10px;
  font-size:12px;
}
.rowtools button {
  font-size:11px;
  padding:2px 7px;
}
#state-label {
  margin-left:auto;
  color:#766985;
}
#totals {
  margin:3px 10px 10px;
  padding:9px 0;
  background:#f0ebff;
  border:1px solid #d9cdf2;
  border-radius:7px;
  justify-content:space-around;
  font-size:13px;
  font-weight:600;
}
#totals span+span {
  border-left:1px solid #d4c5e9;
  padding-left:9px;
}
#totals b {
  margin-left:5px;
}
#totals span:last-child {
  color:#651fc2;
}
.preview {
  background:#e6e3f2;
}
.preview #pages {
  padding:10px;
  max-height:73vh;
  overflow:auto;
}
footer {
  justify-content:space-between;
  padding:9px 13px;
  margin-top:12px;
  font-weight:600;
}
footer label {
  display:flex;
  align-items:center;
  gap:6px;
}
input[type=checkbox] {
  width:17px;
  height:17px;
  accent-color:#7829ce;
}
footer button {
  min-width:135px;
}
#other-content:not(:empty) {
  margin-top:12px;
  padding:16px;
}
.manage {
  display:flex;
  align-items:end;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:15px;
}
.manage label {
  display:grid;
  gap:3px;
  font-size:13px;
}
.manage input {
  width:145px;
}
.manage button,#other-content td button {
  padding:5px 10px;
}
.muted {
  color:#736c85;
}
.empty {
  padding:20px!important;
  text-align:center;
  color:#746c82;
}
dialog {
  width:min(850px,95vw);
  border:1px solid #cbb7e6;
  border-radius:12px;
  padding:20px;
  color:#201b39;
}
dialog::backdrop {
  background:#15132380;
}
dialog details {
  margin:12px 0;
}
dialog table {
  min-width:530px;
}
pre {
  white-space:pre-wrap;
  max-height:160px;
  overflow:auto;
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  z-index:12;
  max-width:90vw;
  background:#272039;
  color:#fff;
  border-radius:9px;
  padding:10px 16px;
  box-shadow:0 2px 15px #0003;
  pointer-events:none;
}
#toast:empty {
  display:none;
}
@media(max-width:1100px) {
  aside {
    width:127px;
  }
  main {
    margin-left:127px;
  }
  header {
    gap:9px;
  }
  .columns {
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  }
  .actions button {
    padding:5px 8px;
  }
  .fields label {
    display:grid;
    gap:3px;
  }
  .tablewrap table {
    min-width:460px;
  }
  .stages span {
    padding:3px 8px;
  }
  .cloud {
    display:none;
  }
}
@media(max-width:900px) {
  aside {
    transform:translateX(-100%);
    width:180px;
    transition:transform .15s;
  }
  .navopen aside {
    transform:none;
  }
  #shade {
    position:fixed;
    inset:0;
    border:0;
    border-radius:0;
    background:#120c294a;
    z-index:4;
  }
  main {
    margin:0;
  }
  header {
    padding:10px 14px;
  }
  #hamb {
    display:inline;
    background:none;
    color:#fff;
    border:0;
    padding:2px;
    font-size:20px;
  }
  .actions {
    display:none;
  }
  .columns {
    display:block;
  }
  .preview {
    margin-top:10px;
  }
  .mobileactions {
    display:flex;
    justify-content:space-evenly;
    position:sticky;
    bottom:0;
    padding:10px;
    background:#fff;
    border-top:1px solid #ddd;
    z-index:3;
  }
  .mobileactions button {
    flex:1;
    max-width:210px;
  }
  .fields label {
    display:flex;
  }
  .panel>summary:after {
    content:'⌄';
    float:right;
    margin-left:8px;
    color:#776989;
  }
  .panel[open]>summary:after {
    content:'⌃';
  }
  .preview #pages {
    max-height:none;
  }
  #toast {
    bottom:65px;
  }
}
@media(max-width:560px) {
  body {
    font-size:14px;
  }
  .workspace {
    padding:8px;
  }
  .banner {
    padding:7px 10px;
    justify-content:center;
  }
  .banner span {
    display:none;
  }
  header {
    justify-content:center;
    position:relative;
  }
  .brand {
    flex:0 1 260px;
    max-width:calc(100% - 72px);
  }
  #hamb {
    position:absolute;
    left:12px;
  }
  .stages {
    gap:2px;
    padding:4px 2px;
    font-size:10px;
  }
  .stages span {
    min-width:0;
    padding:3px 5px;
  }
  .stages i {
    padding:0 3px;
    margin-right:2px;
  }
  #drop {
    flex-wrap:wrap;
    gap:8px;
  }
  .select {
    border:0;
    padding:0;
    flex-basis:100%;
  }
  .select button {
    width:85%;
  }
  .fields {
    display:grid;
  }
  .fields label {
    display:grid;
    grid-template-columns:60px 1fr;
  }
  .panel>summary {
    font-size:16px;
  }
  footer {
    font-size:12px;
    gap:6px;
  }
  footer button {
    min-width:75px;
    padding:6px;
  }
  #totals {
    font-size:11px;
  }
  #totals b {
    display:block;
    margin:0;
  }
  #other-content {
    overflow:auto;
  }
  #check {
    font-size:10px;
  }
  .mobileactions button {
    font-size:13px;
    padding:6px 4px;
  }
}
.extras {
  font-size:11px;
  padding:0 12px 6px;
  color:#675e7c;
}
.extras .manage {
  margin:6px 0;
}
.extras summary {
  width:max-content;
}
.rowtools {
  flex-wrap:wrap;
}
#pages .rendered {
  display:block;
  width:100%;
  margin:0 auto;
  max-width:650px;
  box-shadow:0 2px 8px #25114b38;
}
.pager {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:5px;
}
.pager button {
  padding:2px 8px;
}
.sources {
  padding:0 13px 8px;
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
@font-face {
  font-family:StudioKorean;
  src:url('/assets/fonts/DroidSansFallback.ttf') format('truetype');
  font-display:swap;
}
body {
  font-family:'Malgun Gothic','Apple SD Gothic Neo',StudioKorean,system-ui,sans-serif;
}
.sources:not([hidden]) {
  padding-top:7px;
}
.rowtools #sampleQuick {
  margin-left:auto;
}
.rowtools #state-label {
  color:#6c389f;
  font-weight:bold;
}
.padding-row td {
  height: 31px;
  color: transparent;
}
@media(min-width:901px) {
  .preview #pages {
    max-height:none;
  }
  #pages .rendered {
    width:auto;
    max-width:100%;
    max-height:calc(100vh - 230px);
    min-height:280px;
  }
}
#importdlg .scroll {
  margin-bottom:12px;
}
#originalTotal {
  width:160px;
}
#candidates {
  min-width:740px;
}
#candidates input[type=checkbox] {
  width:auto;
}
/* Fit the complete A4 sheet within the desktop workspace. */
@media(min-width:901px) {
  #pages .rendered {
    width:auto;
    max-width:100%;
    max-height:max(315px, calc(100dvh - 265px));
    object-fit:contain;
  }
}
.nav-save {
  display:none;
}
@media(max-width:560px) {
  header {
    background:white;
    color:#3e1887;
    padding:11px 14px 5px;
  }
  #hamb {
    color:#38265a;
  }
  .banner {
    background:linear-gradient(#fff,#f1ecff);
    color:#191934;
    border-radius:0;
  }
  .banner b {
    font-size:22px;
  }
  .cloud {
    display:inline-block;
  }
  #drop .cloud {
    width:2rem;
    height:2rem;
  }
  .mobileactions [data-act="save"] {
    display:none;
  }
  .nav-save {
    display:block;
    margin:22px 10px;
    color:white;
    border-color:#536079;
    background:transparent;
  }
}