/*
 * @TASK 결정 59 - 기업 웹사이트 수어영상 화면(관리자 사이트 상세 · 기업 사이트 · 통역사 웹 과제)
 * @SPEC docs/17-기업-웹사이트-수어영상-확장프로그램-설계.md §5
 * 색은 tokens.css 의 변수만 씁니다(색 글자를 직접 적지 않습니다 · spec/lint/design_tokens_spec.rb).
 */

/* 분석 결과 표: 메뉴 깊이만큼 들여 써서 사이트 구조가 보이게 합니다. */
.web-page-cell[data-depth="1"] { padding-left: calc(var(--space-3) + 16px); }
.web-page-cell[data-depth="2"] { padding-left: calc(var(--space-3) + 32px); }
.web-page-cell[data-depth="3"] { padding-left: calc(var(--space-3) + 48px); }
.web-page-cell[data-depth="4"] { padding-left: calc(var(--space-3) + 64px); }
.web-page-cell[data-depth="5"] { padding-left: calc(var(--space-3) + 80px); }
.web-page-cell[data-depth="6"] { padding-left: calc(var(--space-3) + 96px); }

.web-page-cell div,
.web-source__url {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  word-break: break-all;
}

/* 과제 등록 묶음(자동 승인 · 기한 · 작업 안내) */
.web-site-post {
  display: grid;
  gap: var(--space-3);
  max-width: 640px;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

/* 웹 과제 요약(가격 · 글자 수 · 예상 길이 · 기한) */
.web-task-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.web-task-summary dt {
  color: var(--color-text-muted);
}

.web-task-summary dd {
  margin: 0;
}

/* 원문(과제를 올릴 때 굳혀 둔 본문 글 · 화면 사진) */
.web-source {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-background);
}

.web-source__text {
  max-height: 480px;
  overflow: auto;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  white-space: pre-wrap;
}

.web-source__screenshot {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-line);
}

/* 공개 재생 안내 + 과제 신청 */
.web-task-apply {
  display: grid;
  gap: var(--space-3);
  max-width: 640px;
  padding: var(--space-3);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
}

/* 기업 화면: 등록 → 승인 → 분석 → 제작 → 서비스 순서 안내 */
.esg-sites {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-3);
}

.esg-sites__steps {
  margin: var(--space-3) 0;
  padding-left: 1.5em;
  color: var(--color-text-muted);
}

.esg-sites__form {
  display: grid;
  gap: var(--space-3);
  max-width: 480px;
}