:root { font-size: 17px; }
* { box-sizing: border-box; }
body {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  line-height: 1.7;
  color: #111;
  background: #fff;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; border-bottom: 2px solid #ddd; padding-bottom: .3rem; }
h3 { font-size: 1.05rem; }
section { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.feature { border: 1px solid #ddd; border-radius: 6px; padding: .75rem 1rem; margin: .75rem 0; }
button {
  font-size: 1rem;
  padding: .5rem 1.1rem;
  border: 1px solid #444;
  border-radius: 6px;
  background: #f2f2f2;
  cursor: pointer;
}
button:hover { background: #e2e2e2; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus, a:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid #0057d8;
  outline-offset: 2px;
}
label { display: block; margin: .4rem 0; font-weight: 600; }
input, select, textarea { font-size: 1rem; padding: .45rem; border: 1px solid #888; border-radius: 4px; }
input[type="number"] { width: 8rem; }
textarea { width: 100%; }
pre {
  white-space: pre-wrap;
  word-break: break-all;
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #ddd;
}
figure { margin: 1rem 0; }
img { max-width: 100%; height: auto; border: 1px solid #bbb; }
figcaption { font-weight: 600; }
.error { color: #b00020; font-weight: 600; }
[role="status"] { font-weight: 700; min-height: 1.5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: .4rem .6rem; text-align: left; }
ul { padding-left: 1.2rem; }
.userbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* ── 작업대 배치 (메인 화면 전용) ──
   화면이 넓을 때: 왼쪽 기둥 = 조작(파일 올리기, 편집 기능, 기능 제안),
   오른쪽 기둥 = 실행 결과(보고서, 미리보기).
   HTML 문서 순서는 그대로이므로 화면낭독기 읽기 순서는 변하지 않음. */
@media (min-width: 901px) {
  body.workbench { max-width: 1400px; }
  body.workbench main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.2rem;
    grid-template-areas:
      "upload   result"
      "features result"
      "suggest  result";
    align-items: start;
  }
  body.workbench section[aria-labelledby="h-upload"]   { grid-area: upload; }
  body.workbench section[aria-labelledby="h-features"] { grid-area: features; }
  body.workbench section[aria-labelledby="h-suggest"]  { grid-area: suggest; }
  body.workbench section[aria-labelledby="h-result"] {
    grid-area: result;
    position: sticky;           /* 왼쪽을 스크롤해도 결과 기둥은 화면에 고정 */
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;           /* 결과가 길면 기둥 안에서만 스크롤 */
  }
}
/* 900px 이하(좁은 화면)에서는 아무 규칙도 적용되지 않아 기존 한 줄 배치 유지 */