/* AI 기능 비교 매트릭스 — 스타일
   색·간격·각·글자 크기는 vendor/studio.css 의 ds 토큰(var(--ds-...))에서 온다.
   이 파일에는 ds 토큰만 쓰고, 앱 고유의 형태(레이아웃·캔버스·차트 스케치·스켈레톤)만 추가한다.
   ds- 클래스 오버라이드(칩 선택색·카드 간격)는 vendor 링크 이후에 오므로 이 규칙이 우선한다. */

/* ds- 요소가 flex·grid·inline-flex로 display를 바꾸므로, [hidden] 을 다시 막는다. */
[hidden] {
  display: none !important;
}

/* 좌우 2열: 레이더 차트(왼쪽) 60% : 비교 요약(오른쪽) 40% — 시각정보(차트)와
   상세 수치(표)의 비중을 반영한다. 카드 간격(Gutter)은 24px. 모바일은 1열. */
.results-grid {
  gap: var(--ds-s5);
}

@media (min-width: 860px) {
  .results-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
  }
}

/* 레이더 차트 무대: 캔버스와 빈 상태 안내가 같은 자리를 겹쳐 쓰므로 높이가 항상 일정하고
   좌우 패널 높이가 맞춰진다. 화면 높이의 60%를 목표로 해 차트가 화면의 주인공이 되고,
   모바일(390px)에서는 340px로 낮춘다. 400px = 캔버스 자체 크기(400x400) 기준. */
.chart-stage {
  position: relative;
  min-height: clamp(340px, 60vh, 560px);
}

.chart-stage {
  display: grid;
}

.chart-stage > * {
  grid-area: 1 / 1;
  width: 100%;
}

#radar-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
}

.chart-stage #radar-canvas[hidden] {
  display: none;
}

/* 빈 상태: 레이더 차트 도형(스케치) 위에 안내 문구를 중앙 정렬.
   스케치만 아니라 격자도 더 선명하게(비중 높임).
   데이터가 있으면 layout() 이 display:none 으로 숨긴다. */
#chart-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* grid 칸(캔버스 높이) 전체를 채워 안내 문구가 카드 중앙 기준에 오도록 한다. */
  height: 100%;
}

.chart-stage #chart-hint[hidden] {
  display: none;
}

.chart-sketch {
  width: min(72%, 240px);
  height: auto;
  margin-bottom: var(--ds-s4);
  color: var(--ds-ink-3);
  opacity: .75;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.chart-sketch polygon:last-child {
  fill: var(--ds-accent-soft);
  stroke: var(--ds-accent);
  opacity: .85;
}

.chart-sketch line {
  opacity: .8;
}

/* 점수 표: 열 이름(첫 열)은 왼쪽 정렬, 나머지는 숫자라 중앙 정렬. */
.ds-table th:first-child {
  text-align: left;
}

.ds-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.ds-table th:not(:first-child) {
  text-align: center;
}

.ds-table td:not(:first-child) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 도구 이름 열: 좁은 화면에서 이름이 한두 글자씩 세로로 줄바꿈되는 것을 막는다.
   이름은 한 줄을 유지하고, 너무 길면 .ds-table-wrap(overflow-x:auto) 내부만
   가로 스크롤한다(페이지 전체 가로 스크롤은 생기지 않는다). */
#matrix-table {
  table-layout: fixed;
}

#matrix-table th:first-child,
#matrix-table td:first-child {
  width: 160px;
  min-width: 96px;
  white-space: nowrap;
  word-break: normal;
}

#summary-json {
  margin: 0;
  padding: var(--ds-s3);
  background: var(--ds-surface-2);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  font: 12px/1.5 var(--ds-mono);
  overflow: auto;
  max-height: 260px;
  white-space: pre-wrap;
  word-break: break-all;
}

#summary-json:empty {
  display: none;
}

/* <details>가 접혀 있을 때 JSON 내용은 박스 밖으로 260px 튀어나와
   compare 버튼과 겹쳐 보였던 문제를 막는다. 접히면 display:none 으로
   높이를 0으로 만들고, 열리면 내용 높이만큼 details 가 자연스럽게 커진다. */
details.json-details:not([open]) > #summary-json {
  display: none;
}

/* "비교하기"는 화면의 주 버튼: 전폭·큰 버튼.
   비활성(도구 2개 미만)일 때 회색에서, 활성화 시 강한 파란색으로
   명확히 전환돼 '지금 누를 수 있다'는 확신을 준다. */
.compare-button {
  width: 100%;
  min-height: 56px;
  font-size: 17px;
  white-space: nowrap;
}

.compare-button:disabled {
  opacity: .55;
}

.live-hint {
  margin: 0;
  text-align: center;
}

/* 비교 요약 패널: 표·JSON·버튼·안내가 겹쳐 쌓이던 문제를 원천 제거한다.
   ds-stack 은 flex column(한 줄에 하나의 자식)이라, details/summary(2자녀)나
   json-hint/summary-json(2자녀) 같은 복합 요소를 각 행에 격리해
   h2 → 표 → 스켈레톤 → 안내 → JSON → 버튼 → 안내 순으로 한 줄 한 줄 쌓이게 한다.
   각 행은 grid(1x1)이므로, details 의 summary 와 내용이 겹치는 일도 없다. */
.summary-panel {
  display: grid;
  /* h2 / table-wrap / table-skeleton / table-hint / json-details-row /
     compare-button / live-hint = 7개 직접 자식. 각 자식은 grid-column:1 로
     하나의 행에 배정해 한 줄씩 쌓인다. (display:none 인 행은 0높이라 빈틈만 남는다.) */
  grid-auto-rows: auto;
  row-gap: var(--ds-s3);
}

/* JSON 요약 행: details가 1칸에 정확히 들어앉아 summary/내용이 겹치지 않는다.
   details 가 열려 있고 summary-json(내용)이 있으면 details 의 실제 높이 = JSON 박스 높이.
   (빈 상태: pre:empty{display:none} 로 pre 가 사라지니 details 는 summary 한 줄만 차지.) */
.json-details-row {
  min-width: 0;
}

.summary-panel > * {
  grid-column: 1;
  min-width: 0;
}

/* 세부 데이터(JSON) 요약 */
.json-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-ink-2);
}

/* 빈 상태 스켈레톤: 실제 점수 표의 행·열 구조를 연한 회색으로 미리 보여 준다.
   결과가 입력되면 layout() 이 숨기고 실제 표가 같은 자리에 들어서,
   화면이 갑자기 크게 변하지 않는다. */
.table-skeleton {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: var(--ds-s2);
  display: grid;
  gap: var(--ds-s2);
}

.table-skeleton .sk-row {
  display: grid;
  grid-template-columns: minmax(96px, 1.2fr) repeat(5, 1fr);
  gap: var(--ds-s1);
}

.table-skeleton .sk-cell {
  display: block;
  min-height: 28px;
  border-radius: var(--ds-radius-s);
  background: var(--ds-surface-2);
  color: var(--ds-ink-3);
  font-size: 13px;
  line-height: 28px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-skeleton .sk-name {
  text-align: left;
}

/* 점수 입력: 도구 이름은 좁게, 점수 칸은 좁은 폭의 ds-input. */
.tool-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-s2);
  padding: var(--ds-s3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-2);
}

.tool-name-input {
  width: 140px;
  min-width: 120px;
  flex: 1 1 140px;
}

.score-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-s2);
  flex: 2 1 100%;
}

.score-input {
  width: 72px;
  min-width: 0;
  text-align: center;
  background: var(--ds-surface);
}

.add-feature-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s1);
  width: 100%;
}

.add-feature-head .score-input {
  font-weight: 600;
  color: var(--ds-ink-2);
  width: auto;
  text-align: left;
  background: transparent;
  border: none;
  box-shadow: none;
}

.feature-label {
  font-size: 13px;
  color: var(--ds-ink-3);
}

.delete-button {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--ds-s3);
  font: 600 13px/1 var(--ds-font);
  border-radius: 999px;
  border: 1px solid var(--ds-bad-soft);
  background: transparent;
  color: var(--ds-bad);
  cursor: pointer;
}

.delete-button:hover {
  background: var(--ds-bad-soft);
}

/* 도구 추가·예시로 해 보기 버튼: 중앙 정렬, 예시가 주 버튼.
   ds-stack 의 margin-top 규칙을 0으로 눌러 박스 안에서 균형을 맞춘다. */
#empty-state > .ds-row {
  justify-content: center;
  margin-top: var(--ds-s2);
}

/* ds-stack 의 >*+* margin-top: 버튼이 사라진 뒤에도 잔여 여백/회색 바가 남지 않도록
   #empty-state 와 #input-row 가 서로 인접할 때 여백을 없앤다. */
.tools-body #empty-state + #input-row {
  margin-top: 0;
}

/* 버튼(hidden)이 있는 ds-row 가 padding/경계 없이 완전히 사라지도록.
   [hidden] 이 display:none !important 로 막으므로 box-sizing/padding 잔여가 없다. */
.ds-row:empty {
  display: none;
}

/* 3단계 안내: 단계 번호 옆에 안내 문구.
   현재 단계만 진하게(파란 번호·굵은 글씨), 진행 중인 단계가 아니라면
   번호와 문구를 모두 연하게 처리해 위계를 명확히 한다. */
.step-guide li {
  display: flex;
  align-items: baseline;
}

.step-guide li:not(.step-current) .ds-step {
  background: var(--ds-surface-2);
  color: var(--ds-ink-3);
}

.step-guide li.step-done .ds-step {
  background: var(--ds-good-soft);
  color: var(--ds-good);
}

.step-guide li.step-done .ds-hint {
  color: var(--ds-ink-3);
}

.step-guide li.step-current .ds-step {
  background: var(--ds-accent);
  color: var(--ds-accent-ink);
  box-shadow: 0 0 0 4px var(--ds-accent-soft);
}

.step-guide li.step-current .ds-hint {
  color: var(--ds-ink);
  font-weight: 600;
}

/* 인기 모델 프리셋: 칩 행.
   선택된 칩(aria-pressed=true)은 파란 배경·흰 글씨,
   선택되지 않은 칩은 흰 배경·회색 테두리로 명확히 구분한다. */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s2);
}

.preset-row .preset {
  width: auto;
  font-weight: 500;
  color: var(--ds-ink-2);
}

.preset-row .preset[aria-pressed="true"] {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-accent-ink);
  font-weight: 600;
}

/* 로컬·자체 모델 입력: 입력 칸은 좁게, '추가' 버튼은 입력 칸 바로 옆에
   붙여 하나의 유닛처럼 보이게 한다(인과관계 명확). */
.custom-model-row {
  align-items: stretch;
}

#custom-model-input {
  flex: 1 1 180px;
  max-width: 260px;
  min-width: 0;
}

#add-custom-model-button {
  width: auto;
}

#app-status {
  margin-top: var(--ds-s4);
  min-height: 0;
}

/* 모바일: 입력 칸이 화면 폭에 맞는다. */
@media (max-width: 859px) {
  .chart-stage {
    min-height: 340px;
  }

  .tool-name-input {
    width: 100%;
  }

  .score-input {
    width: 64px;
  }
}

@media (max-width: 520px) {
  /* ds-btn 이 모바일에서 전폭이 되므로(44px 터치 목표), 행 안 버튼들은 균등하게 늘어진다. */
  #empty-state > .ds-row {
    display: flex;
  }

  #empty-state > .ds-row .ds-btn {
    flex: 1 1 auto;
  }

  #input-row {
    display: flex;
  }

  #input-row .ds-btn {
    flex: 1 1 auto;
    width: auto;
  }

  /* 인기 모델 프리셋은 2x2 격자로. */
  .preset-row .preset {
    flex: 1 1 calc(50% - var(--ds-s1));
    width: auto;
  }

  /* 로컬 모델 입력은 2줄: 이름(전폭) + 추가 버튼(전폭). */
  #custom-model-input {
    flex: 1 1 100%;
    max-width: none;
  }

  #add-custom-model-button {
    flex: 1 1 100%;
  }
}