:root {
  color-scheme: light;
  --bg: #edf2f3;
  --surface: #ffffff;
  --ink: #14201e;
  --muted: #667774;
  --line: #d4dfdc;
  --line-strong: #aebfba;
  --teal: #078b7f;
  --teal-soft: #e4f5f1;
  --teal-border: #96d4c8;
  --danger: #d7261e;
  --terminal: #0e1513;
  --shadow: 0 14px 28px rgba(28, 54, 50, 0.09);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
button, select, input { font: inherit; }
button, select, .dropzone { -webkit-tap-highlight-color: transparent; }

.topbar {
  min-height: 82px;
  padding: 16px clamp(20px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { min-width: max-content; display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #13211f;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brand h1, .brand p, .panel-head h2, .panel-head p, .activity-grid h3 { margin: 0; }
.brand h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.brand p { margin-top: 4px; color: var(--muted); font-size: 16px; }

.ops-strip { display: flex; align-items: stretch; justify-content: flex-end; gap: 8px; }
.status-pill, .metric {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: flex;
  align-items: center;
}
.status-pill { min-width: 156px; padding: 0 14px; gap: 8px; color: var(--muted); font-weight: 700; }
.status-pill.status-ready { border-color: var(--teal-border); background: var(--teal-soft); color: #006c63; }
.status-pill.status-busy { border-color: #e4c57e; background: #fff8e8; color: #8a5f00; }
.status-pill.status-error { border-color: #efb1ad; background: #fff0ef; color: #a91f19; }
.metric { min-width: 72px; padding: 0 12px; justify-content: space-between; gap: 12px; }
.metric span { color: #7c8986; font-size: 16px; }
.metric strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.metric.danger strong { color: var(--danger); }

.workspace {
  width: min(1240px, calc(100% - 40px));
  margin: 22px auto 44px;
  display: grid;
  grid-template-columns: minmax(380px, 0.86fr) minmax(520px, 1.14fr);
  gap: 18px;
  align-items: stretch;
}
.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.input-panel, .output-panel { min-height: 702px; padding: 16px; }
.input-panel, .output-panel { display: flex; flex-direction: column; }
.panel-head {
  min-height: 46px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.panel-head h2 { font-size: 18px; line-height: 1.25; letter-spacing: -0.03em; }
.panel-head p { margin-top: 5px; color: var(--muted); font-size: 16px; }

.model-picker { margin-top: 8px; display: grid; gap: 7px; font-size: 16px; font-weight: 700; }
.model-picker select {
  width: 100%;
  height: 41px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  outline: none;
}
.model-picker select:focus-visible, button:focus-visible, .dropzone:focus-visible {
  outline: 3px solid rgba(7, 139, 127, 0.22);
  outline-offset: 2px;
}

.dropzone {
  min-height: 113px;
  margin-top: 13px;
  padding: 20px;
  border: 1px dashed #91aaa4;
  border-radius: 8px;
  background: #f9fbfa;
  cursor: pointer;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-content: center;
  transition: border-color 160ms ease, background 160ms ease;
}
.dropzone:hover, .dropzone.is-dragging { border-color: var(--teal); background: #f0faf8; }
.dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.drop-icon {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--teal);
  position: relative;
  align-self: center;
}
.drop-icon::before, .drop-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.drop-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.drop-main { align-self: end; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.drop-meta { align-self: start; margin-top: 5px; color: var(--muted); font-size: 16px; }
.file-list { min-height: 30px; padding-top: 9px; color: var(--muted); font-size: 16px; overflow-wrap: anywhere; }
.file-chip {
  display: inline-flex;
  max-width: 100%;
  margin: 0 6px 4px 0;
  padding: 4px 7px;
  border-radius: 5px;
  background: #eef4f2;
  color: #40524e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-wrap {
  min-height: 280px;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background-color: #fbfdfc;
  background-image:
    linear-gradient(45deg, #edf3f1 25%, transparent 25%),
    linear-gradient(-45deg, #edf3f1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #edf3f1 75%),
    linear-gradient(-45deg, transparent 75%, #edf3f1 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.preview-wrap img {
  display: none;
  width: 100%;
  height: 100%;
  max-height: 310px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.9);
}
.preview-wrap.has-image img { display: block; }
.preview-wrap.has-image .preview-empty { display: none; }
.preview-empty { color: #6d7d79; font-size: 16px; }
.work-overlay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 12px;
  background: rgba(14, 21, 19, 0.78);
  color: #fff;
}
.work-overlay.is-visible { display: grid; }

.actions { margin-top: 15px; display: flex; justify-content: flex-end; gap: 9px; }
button {
  min-width: 84px;
  height: 39px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: #53635f;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
button:hover:not(:disabled) { border-color: #96aaa5; background: #f7faf9; }
button.primary { border-color: var(--teal); background: var(--teal); color: #fff; font-weight: 800; }
button.primary:hover:not(:disabled) { border-color: #006f66; background: #006f66; }
button:disabled { opacity: 0.48; cursor: not-allowed; }

.result-head { padding-bottom: 10px; }
.result-head > div { margin-left: auto; text-align: left; }
.result-head button { order: 2; }
.result-text {
  flex: 1 1 auto;
  min-height: 580px;
  max-height: 650px;
  margin: 0;
  padding: 16px;
  border-radius: 7px;
  overflow: auto;
  background: var(--terminal);
  color: #f2f7f5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.result-meta { min-height: 22px; padding-top: 9px; color: var(--muted); font-size: 16px; }
.batch-list { display: grid; gap: 5px; }
.batch-row {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
}
.batch-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-row span { color: var(--muted); white-space: nowrap; }
.batch-row.is-error span { color: var(--danger); }

.activity-panel { grid-column: 1 / -1; padding: 16px; }
.activity-grid { margin-top: 10px; display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 16px; }
.activity-grid h3 { margin-bottom: 8px; color: #51615e; font-size: 16px; }
.activity-list { display: grid; gap: 7px; }
.activity-empty, .activity-item {
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfc;
  font-size: 16px;
}
.activity-empty { color: var(--muted); display: flex; align-items: center; }
.activity-item { display: grid; grid-template-columns: minmax(100px, 1fr) auto; gap: 4px 12px; }
.activity-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item time, .activity-item small { color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-item small { grid-column: 1 / -1; }
.event-list .activity-item strong {
  color: #175ee8;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 750ms linear infinite;
}
.spinner.large { width: 28px; height: 28px; border-width: 3px; }
.status-ready .spinner, .status-error .spinner { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 14px; }
  .ops-strip { width: 100%; justify-content: stretch; }
  .status-pill { flex: 1 1 auto; }
  .metric { min-width: 65px; }
  .workspace { grid-template-columns: 1fr; }
  .activity-panel { grid-column: auto; }
  .input-panel, .output-panel { min-height: auto; }
  .preview-wrap { margin-top: 22px; }
  .result-text { min-height: 460px; }
}
@media (max-width: 640px) {
  .topbar { min-height: auto; padding: 15px 16px; }
  .brand h1 { font-size: 21px; }
  .ops-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
  .status-pill { grid-column: 1 / -1; min-width: 0; }
  .metric { min-width: 0; padding: 0 9px; gap: 6px; }
  .workspace { width: calc(100% - 24px); margin-top: 12px; gap: 12px; }
  .input-panel, .output-panel, .activity-panel { padding: 14px; }
  .dropzone { padding: 16px; }
  .preview-wrap { min-height: 230px; }
  .result-text { min-height: 400px; }
  .activity-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* The sample is both the visual explanation and the real inference input. */
.brand-name { font-size: 24px; letter-spacing:-.04em }
.intro { width:min(1240px,calc(100% - 48px)); margin:46px auto 32px; display:grid; grid-template-columns:1fr .9fr; gap:44px; align-items:center }
.intro h1 { margin:0 0 20px; font-size:clamp(32px,3.7vw,52px); letter-spacing:-.05em; line-height:1.2; text-wrap:balance }
.intro p { font-size: 19px; line-height:1.65; color:#4a615a; margin:0 0 22px }
.intro .intro-note, .intro #sampleStatus { margin:14px 0 0; font-size: 16px }
.intro button { min-height:56px; height:auto; padding:14px 24px; font-size: 18px }
.intro figure { margin:0 }
.intro figure img { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 18px 42px #163e2620 }
.intro figcaption { font-size: 16px; color:#4a615a; margin-top:14px }
.sample-choices { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.sample-choices button { padding:10px 16px; min-height:48px; font-size:16px; background:#fff }
.sample-choices button[aria-pressed="true"] { background:#d5eee7; color:#055b51; border-color:#078b7f; font-weight:750 }
.ops-strip .metric { display:none }
.workspace { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px }
.input-panel,.output-panel { min-height:0; padding:24px }
.model-picker[hidden] { display:none }
.preview-wrap { margin-top:20px; min-height:220px }
.result-head>div { margin-left:0 }
.contact-result { flex:1; min-height:220px; padding:20px 0; font-size: 18px; line-height:1.65; overflow-wrap:anywhere }
.contact-result dl { display:grid; grid-template-columns:minmax(80px,auto) 1fr; margin:0; gap:16px 24px }
.contact-result dt { color:#52645e; font-size: 16px }
.contact-result dd { margin:0; font-weight:650 }
.result-text { min-height:0; max-height:420px; margin-top:14px }
.json-details { border-top:1px solid var(--line); padding-top:16px }
summary { cursor:pointer; min-height:40px; font-size: 16px }
button { height:auto; min-height:48px }
.dropzone { min-height:100px }
.activity-panel[open]>.panel-head { margin-top:16px }
.batch-row { flex-wrap:wrap; overflow-wrap:anywhere }
.batch-row span { white-space:normal }
.status-pill { min-height:44px }
@media(max-width:760px) {
 .intro { grid-template-columns:1fr; gap:24px; margin-top:28px; width:calc(100% - 32px) }
 .intro h1 { font-size: 34px }
 .intro p { font-size: 18px }
 .intro button { width:100% }
 .intro figure { max-width:540px }
 .intro figure img { max-height:230px; object-fit:contain }
 .intro .sample-choices button { width:auto }
 .topbar { flex-direction:row; align-items:center }
 .ops-strip { display:flex; width:auto }
 .ops-strip .status-pill { min-width:0; font-size: 16px }
 .workspace { grid-template-columns:1fr; width:calc(100% - 32px) }
 .output-panel { order:-1 }
 .input-panel,.output-panel { padding:20px }
 .contact-result dl { gap:14px }
}