:root {
  --bg: #f1efe9;
  --panel: #fbfaf6;
  --panel-2: #f6f4ee;
  --ink: #24231f;
  --muted: #7d7970;
  --line: #dedad0;
  --accent: #6d5dfc;
  --accent-soft: #ece9ff;
  --green: #17835f;
  --green-soft: #e7f6ef;
  --red: #bf4f4f;
  --red-soft: #faeaea;
  --amber: #a16b08;
  --amber-soft: #fff2d6;
  --shadow: 0 18px 55px rgba(49, 43, 31, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font: 14px/1.5 Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px; background: #25241f; color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 5px 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg,#887bff,#5c4cf0); font-weight: 900; letter-spacing: -.04em; }
.brand strong,.brand small { display:block; }
.brand strong { font-size: 14px; }
.brand small { color: #aaa69d; font-size: 10px; margin-top: 2px; }
.nav { display: grid; gap: 7px; margin-top: 25px; }
.nav-btn { width: 100%; display: flex; align-items:center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 11px; background: transparent; color: #aaa79f; text-align: left; font-size: 12px; font-weight: 700; }
.nav-btn span { color: #747169; font-size: 9px; letter-spacing: .08em; }
.nav-btn:hover { background: rgba(255,255,255,.055); color:#fff; }
.nav-btn.active { background: rgba(109,93,252,.22); color: #fff; }
.nav-btn.active span { color:#bdb5ff; }
.sidebar-spacer { flex: 1; }
.server-status { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.04); }
.server-line { display:flex; align-items:center; gap:8px; margin-bottom: 5px; }
.dot { width: 8px; height:8px; border-radius:50%; background:#c94f4f; box-shadow:0 0 0 4px rgba(201,79,79,.14); }
.dot.online { background:#42c592; box-shadow:0 0 0 4px rgba(66,197,146,.14); }
.server-status strong { font-size:11px; }
.server-status small { display:block; color:#96938b; font-size:9px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main { width:100%; max-width: 1600px; padding: 38px 46px 80px; margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:26px; margin-bottom: 28px; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:7px; font-size:31px; letter-spacing:-.045em; line-height:1.15; }
h2 { margin-bottom:0; font-size:19px; letter-spacing:-.025em; }
h3 { margin-bottom:0; font-size:17px; }
.eyebrow { margin-bottom:7px; color: var(--accent); font-size:9px; font-weight:850; letter-spacing:.16em; }
.lead { margin:0; color:var(--muted); font-size:12px; }
.api-key-box { min-width:275px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.api-key-box span { display:block; color:var(--muted); font-size:9px; font-weight:700; margin-bottom:4px; }
.api-key-box input { width:100%; padding:0; border:0; outline:0; background:transparent; font-size:11px; }
.screen { display:none; }
.screen.active { display:block; animation: fade .18s ease; }
@keyframes fade { from{opacity:.25; transform:translateY(4px)} to{opacity:1; transform:none} }
.panel { margin-bottom:18px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:var(--shadow); }
.panel-head,.subhead { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.panel-head .eyebrow,.subhead .eyebrow { margin-bottom:4px; }
.badge,.status { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#ece9e1; color:#6e6a62; font-size:9px; font-weight:850; letter-spacing:.06em; }
.status.idle { background:#eceae5; color:#77736a; }
.status.queued { background:var(--amber-soft); color:var(--amber); }
.status.processing { background:var(--accent-soft); color:var(--accent); }
.status.completed { background:var(--green-soft); color:var(--green); }
.status.failed { background:var(--red-soft); color:var(--red); }
.upload-grid,.review-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); gap:18px; }
.dropzone { min-height:245px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:28px; border:1.5px dashed #c8c2b6; border-radius:15px; background:var(--panel-2); text-align:center; transition:.18s; }
.dropzone:hover,.dropzone.dragover { border-color:var(--accent); background:var(--accent-soft); transform:translateY(-1px); }
.upload-symbol { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:#2e2d28; color:#fff; font-size:13px; font-weight:900; box-shadow:0 8px 25px rgba(0,0,0,.16); }
.dropzone strong { margin-top:5px; font-size:14px; }
.dropzone span { color:var(--muted); font-size:10px; }
.file-chip { max-width:90%; margin-top:7px; padding:7px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--ink)!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.form-row { display:grid; grid-template-columns: 1fr 1.45fr; gap:10px; margin-top:11px; }
.field,.switch-field,.textarea-field { display:block; }
.field span,.textarea-field>span,.feedback-block>label { display:block; margin-bottom:6px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.04em; }
select,input[type="number"],textarea,.filter-row select { width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); outline:0; }
select,input[type="number"] { height:39px; padding:0 10px; font-size:11px; }
textarea { padding:11px 12px; resize:vertical; font-size:12px; }
select:focus,input:focus,textarea:focus { border-color:#a99ffe; box-shadow:0 0 0 3px var(--accent-soft); }
.switch-field { position:relative; display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.switch-field strong,.switch-field small { display:block; }
.switch-field strong { font-size:10px; }
.switch-field small { color:var(--muted); font-size:8px; margin-top:1px; }
.switch-field input { position:absolute; opacity:0; }
.switch-field i { width:35px; height:20px; padding:2px; border-radius:999px; background:#ccc7be; transition:.2s; }
.switch-field i:after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#fff; transition:.2s; }
.switch-field input:checked+i { background:var(--accent); }
.switch-field input:checked+i:after { transform:translateX(15px); }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.actions.tight { margin:0; }
.btn { border:0; border-radius:10px; padding:10px 13px; font-size:10px; font-weight:800; transition:.15s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(.98); }
.btn:disabled { opacity:.42; cursor:not-allowed; }
.btn.primary { background:var(--accent); color:#fff; box-shadow:0 8px 22px rgba(109,93,252,.25); }
.btn.dark { background:#292823; color:#fff; }
.btn.ghost { border:1px solid var(--line); background:#fff; color:#5e5a52; }
.btn.wide { min-width:290px; padding:12px 16px; }
.viewer-card { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.card-title { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; border-bottom:1px solid var(--line); background:#fff; font-size:10px; font-weight:800; }
.card-title small { color:var(--muted); font-weight:500; }
.viewer { position:relative; width:100%; height:355px; overflow:hidden; background:radial-gradient(circle at 50% 38%,#fff 0,#f2f0ea 70%,#e8e5dd 100%); }
.viewer.large { height:570px; }
.viewer canvas { display:block; width:100%; height:100%; }
.viewer-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:30px; color:#99948a; font-size:11px; text-align:center; }
.viewer-help { padding:8px 12px; border-top:1px solid var(--line); color:var(--muted); background:#fff; font-size:9px; text-align:center; }
.job-strip { display:grid; grid-template-columns:1.2fr 1fr .7fr; gap:9px; margin-bottom:18px; }
.job-strip>div { min-width:0; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); }
.job-strip small,.job-strip strong { display:block; }
.job-strip small { color:var(--muted); font-size:8px; margin-bottom:3px; }
.job-strip strong { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pipeline { display:grid; grid-template-columns:repeat(13,auto); align-items:center; justify-content:space-between; gap:7px; overflow-x:auto; padding:4px 1px 8px; }
.pipe { min-width:72px; display:flex; flex-direction:column; align-items:center; gap:5px; color:#9b978f; font-size:8px; font-weight:700; text-align:center; }
.pipe b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#e8e5de; color:#8d8981; font-size:9px; }
.pipeline>i { width:32px; height:2px; background:#e5e1d9; }
.pipe.active { color:var(--accent); }
.pipe.active b { color:#fff; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.pipe.done { color:var(--green); }
.pipe.done b { color:#fff; background:var(--green); }
.error-box { margin-top:13px; padding:11px 12px; border:1px solid #f2baba; border-radius:10px; background:var(--red-soft); color:#a83f3f; font:10px/1.5 ui-monospace,monospace; white-space:pre-wrap; }
.review-grid { grid-template-columns:minmax(520px,1.15fr) minmax(360px,.85fr); }
.transform-modes { display:flex; gap:4px; }
.mode-btn { padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:#fff; color:#777168; font-size:8px; font-weight:800; }
.mode-btn.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.result-side { display:grid; align-content:start; gap:11px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.metric-grid>div { padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }
.metric-grid span,.metric-grid strong { display:block; }
.metric-grid span { color:var(--muted); font-size:8px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.metric-grid strong { font-size:13px; }
.memory-used,.json-card { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.memory-used { padding:12px; }
.subhead { margin-bottom:11px; }
.subhead strong { font-size:11px; }
.subhead span,.hint { color:var(--muted); font-size:9px; }
.experience-list { display:grid; gap:6px; }
.experience-item { padding:8px 9px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); }
.experience-item div { display:flex; justify-content:space-between; gap:8px; font-size:9px; }
.experience-item small { display:block; margin-top:3px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empty-copy,.muted { color:var(--muted); font-size:10px; }
.json-tabs { display:flex; overflow-x:auto; border-bottom:1px solid var(--line); }
.json-tab { border:0; border-bottom:2px solid transparent; padding:9px 10px; background:#fff; color:#918c83; font-size:8px; font-weight:800; }
.json-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
pre { margin:0; min-height:248px; max-height:330px; overflow:auto; padding:12px; background:#1d1d1b; color:#d7d5ce; font:9px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.feedback-builder { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.rating-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:17px; }
.rating-card { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:11px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; }
.rating-card>span { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; align-self:center; border-radius:50%; background:#eeeae2; font-size:15px; font-weight:900; }
.rating-card strong { font-size:11px; }
.rating-card small { color:var(--muted); font-size:8px; }
.rating-card.selected[data-rating="SATISFIED"] { border-color:#62b991; background:var(--green-soft); }
.rating-card.selected[data-rating="SATISFIED"]>span { background:var(--green); color:#fff; }
.rating-card.selected[data-rating="DISSATISFIED"] { border-color:#d98b8b; background:var(--red-soft); }
.rating-card.selected[data-rating="DISSATISFIED"]>span { background:var(--red); color:#fff; }
.feedback-columns { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.feedback-block { padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); }
.chip-group { display:flex; flex-wrap:wrap; gap:6px; }
.chip-group button { padding:6px 8px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#716c63; font-size:8px; font-weight:750; }
.chip-group button.selected { border-color:#5eae87; background:var(--green-soft); color:var(--green); }
.chip-group.issue button.selected { border-color:#d08080; background:var(--red-soft); color:var(--red); }
.textarea-field { margin-top:13px; }
.correction-panel { margin-top:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); overflow:hidden; }
.correction-panel summary { padding:12px 14px; cursor:pointer; background:#fff; font-size:10px; font-weight:850; }
.correction-panel summary span { margin-left:7px; color:var(--muted); font-size:8px; font-weight:500; }
.correction-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:13px; }
.correction-group { padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.correction-group>strong { display:block; margin-bottom:8px; font-size:9px; }
.axis-inputs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.axis-inputs label { color:var(--muted); font-size:8px; }
.axis-inputs input { height:34px; margin-top:3px; padding:0 6px; }
.scale-row { display:grid; grid-template-columns:1fr 75px; gap:8px; align-items:center; }
.scale-row input[type="number"] { height:34px; }
.semantic-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:0 13px 13px; }
.semantic-grid label { color:var(--muted); font-size:8px; }
.semantic-grid select { margin-top:4px; height:34px; padding:0 6px; font-size:8px; }
.feedback-actions { display:flex; justify-content:flex-end; margin-top:13px; }
.feedback-result { margin-top:13px; padding:14px; border:1px solid #c7c0f8; border-radius:11px; background:var(--accent-soft); font-size:10px; }
.feedback-result h4 { margin:0 0 6px; font-size:11px; }
.feedback-result pre { min-height:0; max-height:220px; border-radius:8px; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.gallery-item { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; }
.gallery-item img { width:100%; aspect-ratio:1; display:block; object-fit:contain; background:#eceae4; }
.gallery-item div { padding:7px; color:var(--muted); font-size:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.filter-row { display:flex; gap:8px; margin-bottom:13px; }
.filter-row select { width:auto; min-width:145px; height:36px; padding:0 9px; font-size:9px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; background:#fff; font-size:9px; }
th,td { padding:10px 11px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { background:var(--panel-2); color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.05em; }
tbody tr:hover { background:#faf9f5; }
.table-action { padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:8px; }
.rating-pill { padding:4px 6px; border-radius:999px; font-size:7px; font-weight:850; }
.rating-pill.good { background:var(--green-soft); color:var(--green); }
.rating-pill.bad { background:var(--red-soft); color:var(--red); }
.summary-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; margin-bottom:18px; }
.summary-card { padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:var(--shadow); }
.summary-card span,.summary-card strong,.summary-card small { display:block; }
.summary-card span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.summary-card strong { margin:6px 0 3px; font-size:24px; letter-spacing:-.04em; }
.summary-card small { color:var(--muted); font-size:8px; }
.insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.bar-list { display:grid; gap:10px; }
.bar-row { display:grid; grid-template-columns:100px 1fr 55px; gap:9px; align-items:center; font-size:9px; }
.bar-track { height:8px; border-radius:999px; background:#e5e1d9; overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background:var(--accent); }
.version-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.version-card { padding:12px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.version-card strong,.version-card span { display:block; }
.version-card span { color:var(--muted); font-size:8px; margin-top:5px; }
.rule-list,.memory-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.rule-card,.memory-card { padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.rule-card header,.memory-card header { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; }
.rule-card h3,.memory-card h3 { font-size:11px; }
.rule-card p,.memory-card p { margin:5px 0; color:var(--muted); font-size:8px; }
.rule-stats { display:flex; flex-wrap:wrap; gap:5px; }
.rule-stats span { padding:4px 6px; border-radius:999px; background:var(--panel-2); color:#6e6960; font-size:7px; }
.toast { position:fixed; right:22px; bottom:22px; z-index:100; max-width:360px; padding:11px 14px; border-radius:10px; background:#24231f; color:#fff; box-shadow:0 15px 45px rgba(0,0,0,.2); font-size:10px; }
.hidden { display:none!important; }
@media (max-width:1200px) {
  .main { padding:30px 28px 70px; }
  .upload-grid,.review-grid { grid-template-columns:1fr; }
  .viewer.large { height:500px; }
  .semantic-grid { grid-template-columns:repeat(3,1fr); }
  .summary-cards { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:850px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; padding:16px; }
  .brand { padding-bottom:14px; }
  .nav { grid-template-columns:repeat(4,1fr); margin-top:13px; }
  .nav-btn { justify-content:center; padding:8px 5px; font-size:8px; text-align:center; }
  .nav-btn span,.sidebar-spacer,.server-status { display:none; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .api-key-box { width:100%; min-width:0; }
  .pipeline { justify-content:start; }
  .feedback-columns,.insight-grid,.correction-grid { grid-template-columns:1fr; }
  .summary-cards { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .main { padding:22px 14px 55px; }
  h1 { font-size:25px; }
  .panel { padding:16px; border-radius:15px; }
  .form-row,.job-strip,.rating-grid,.metric-grid,.summary-cards { grid-template-columns:1fr; }
  .semantic-grid { grid-template-columns:1fr 1fr; }
  .viewer,.viewer.large { height:390px; }
  .nav-btn { font-size:7px; }
}