:root{
  --bg:#0b0f17;
  --card:#121a27;
  --text:#e9eef7;
  --muted:#a8b3c7;
  --border:#25334a;
  --primary:#4f8cff;
  --danger:#ff5a6a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #0b0f17 0%, #070a10 100%);
  color:var(--text);
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 40px;
}

.header h1{
  margin:0 0 8px;
  font-size: 24px;
  letter-spacing: -0.2px;
}
.sub{
  margin:0 0 18px;
  color:var(--muted);
  line-height: 1.5;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
}
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: rgba(18,26,39,0.92);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  /* details 패널이 카드 밖으로 나가도 잘 보이도록 */
  overflow: visible;
}

.card h2{
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--text);
}

/* form */
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){
  .form-row{ grid-template-columns: 1fr; }
}
.field{ position: relative; }
.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}

.hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.divider{
  border:0;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* -------- Multi dropdown (details/summary) -------- */
.multi{
  position: relative;
}

.multi summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display:flex;
  align-items:center;
  justify-content: space-between;

  width: 100%;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(7,10,16,0.4);
  color: var(--text);
  outline: none;
}

/* marker(▶) 제거: 크롬/사파리/파폭 대응 */
.multi summary::-webkit-details-marker{ display:none; }
.multi summary::marker{ content:""; }
.multi summary:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,140,255,0.2);
}

.multi-summary{
  display:block;
  font-size: 14px;
  line-height: 1.2;
}
.placeholder{ color: var(--muted); }

/* 우측 화살표 */
.multi summary::after{
  content:"▾";
  color: var(--muted);
  font-size: 14px;
  transform: translateY(-1px);
}
.multi[open] summary::after{
  content:"▴";
}
.multi[open] summary{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,140,255,0.14);
}

.multi-panel{
  position: absolute;
  z-index: 999;           /* 카드/프리뷰 위로 확실히 */
  left: 0;
  right: 0;
  top: calc(100% + 8px);

  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(12,16,24,0.98);
  box-shadow: 0 18px 46px rgba(0,0,0,0.45);

  max-height: 260px;
  overflow: auto;
  padding: 10px;
}

.group-title{
  margin: 10px 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.group-title:first-child{ margin-top: 0; }

.chk{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.chk:hover{
  background: rgba(79,140,255,0.08);
}
.chk input{
  width: 16px;
  height: 16px;
}

/* disabled 체크박스 라인 표시 */
.chk input:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
.chk input:disabled + span{ opacity: 0.6; }

/* dropzone */
.dropzone{
  position: relative;
  border: 1px dashed #3a4a66;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  outline: none;
}
.dropzone:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,140,255,0.2);
}
.dropzone.dragover{
  border-color: var(--primary);
  background: rgba(79,140,255,0.08);
}
.dropzone-inner{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.dz-title{ font-weight: 600; }
.dz-hint{ color: var(--muted); font-size: 13px; }

.file-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

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

.controls{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

button{
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
}
button:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.primary{
  background: var(--primary);
  color: #08101f;
}
.primary:hover{ filter: brightness(1.03); }

.secondary{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.secondary:hover{ border-color: #3a4a66; }

.status{
  margin-top: 12px;
  min-height: 20px;
  font-size: 13px;
  color: var(--muted);
}
.error{ color: var(--danger); }

.api-note{
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(7,10,16,0.4);
}
.api-note .label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.api-note .hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* preview */
.preview{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  height: 380px;
  background: rgba(7,10,16,0.4);
}
.pdf-frame{
  width:100%;
  height:100%;
  border:0;
  display:none;
}
.preview-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  padding: 14px;
  text-align:center;
}

/* results */
.results{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.result-group-title{
  margin: 8px 0 2px;
  font-size: 13px;
  color: var(--muted);
}
.result-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(7,10,16,0.35);
}
.result-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.code{
  font-weight: 800;
  letter-spacing: 0.2px;
}
.conf{
  color: var(--muted);
  font-size: 12px;
}
.statement{
  margin-top: 8px;
  line-height: 1.5;
}
.reason{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.muted{ color: var(--muted); }

.footer{
  margin-top: 14px;
  color: var(--muted);
}