/* 모니터링(monitoring) 화면: 정기 측정 일정(.tracking-schedule-*,
 * .monitoring-question-*, .monitoring-delivery-note, .prism-domain-*,
 * .prism-question-measure, .prism-performance-*, .prism-score-*),
 * 개선 항목(.product-enhancement-*, .product-inline-fields).
 * 리포트 전송 기록(.notification-*)은 css/dashboard.css 소속이다 -- 그 패널이
 * 리포트 화면으로 옮겨갔다. */

/* 이 화면의 카드는 대시보드와 같은 카드다 -- 테두리·모서리·그림자·안쪽 여백은
 * .panel(css/dashboard.css)이 정하고, 여기서는 그 안의 배치만 다룬다. 예전에는
 * 같은 값을 8px 모서리와 자기만의 그림자로 다시 적어 두 화면이 서로 다른 카드처럼
 * 보였다. 층위별 모서리도 그 카드 체계를 따른다: 패널 16 · 카드 14 · 줄 11. */
.product-enhancement-panel {
  display: grid;
  gap: 12px;
}

/* 격자 간격(12px)이 이미 제목과 본문을 떼어 놓는다. */
.product-enhancement-panel > .panel-head {
  margin-bottom: 0;
}

/* 패널 안쪽 폼의 소제목. 브라우저 기본 h3(약 18.7px)는 패널 제목(18px)과 같은
 * 크기로 서서 어느 쪽이 상위인지 말하지 못한다. */
.product-enhancement-form .section-head {
  margin-bottom: 2px;
}

.product-enhancement-form .section-head h3 {
  margin: 0;
  font-size: var(--fs-3);
  letter-spacing: -.01em;
}

.product-enhancement-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.product-enhancement-toolbar label {
  flex: 1 1 260px;
  min-width: 0;
}

/* 입력의 테두리·높이·모서리는 css/forms.css가 앱 전체에 하나로 정한다. 이 화면만
 * 40/42px 고정 높이에 한 단계 옅은 --line 테두리를 쓰던 동안, 같은 폼이 계정·멤버
 * 화면의 폼과 다른 물건처럼 보였다. */
.product-enhancement-toolbar select,
.product-enhancement-form input,
.product-enhancement-form select,
.product-enhancement-form textarea {
  min-width: 0;
}

.product-enhancement-toolbar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-muted);
  padding: 12px 14px;
  color: var(--muted-strong);
  font-size: var(--fs-2);
}

.product-enhancement-toolbar b {
  color: var(--brand-dark);
}

.product-enhancement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-enhancement-form,
.product-enhancement-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface-muted);
  padding: 14px 16px;
}

.product-enhancement-form label {
  min-width: 0;
}

.product-inline-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* 색·굵기·모서리는 css/forms.css의 `form > button`이 정한다 -- 여기서는 버튼이
 * 칸을 가득 채우지 않게만 잡는다. */
.product-enhancement-form button {
  width: fit-content;
  padding-inline: 16px;
}

.product-enhancement-wide {
  grid-column: 1 / -1;
}

.product-enhancement-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-enhancement-list > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.product-enhancement-list strong {
  font-size: var(--fs-3);
}

.product-enhancement-list article {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface);
  padding: 10px 12px;
}

.product-enhancement-list b,
.product-enhancement-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-enhancement-list span {
  color: var(--muted);
  font-size: var(--fs-1);
}

/* 목록 안의 버튼은 줄 높이에 맞춘 작은 .secondary다. 색·테두리는 css/forms.css. */
.tracking-schedule-actions button {
  padding: 7px 11px;
  font-size: var(--fs-2);
  white-space: nowrap;
}

/* 폼은 단순한 세로 쌓기다 -- 입력 칸 묶음(.tracking-schedule-fields)·측정할 질문·
 * 알림 문구·미리보기+저장 줄, 네 블록이 순서대로 쌓인다. 예전에는 이 넷이 전부
 * 한 그리드의 칸이라 전폭 블록(grid-column:1/-1)이 auto-fit 열 수 계산에 끼어들었다
 * -- "빈 열은 접는다"는 auto-fit의 전제가, 전폭 블록이 그 빈 열까지 걸치는 순간
 * 깨져서(칸이 비어 있지 않은 걸로 잡힘) 입력 칸이 필요 이상으로 좁아졌다. 입력
 * 칸만 자기 grid를 갖게 분리해 이 간섭을 없앤다. */
.tracking-schedule-form {
  display: grid;
  gap: 16px;
}

/* auto-fit: 칸 수를 고정 폭 구간마다 손으로 정하지 않는다 -- 창을 줄이면 칸 하나가
 * 자기 최소폭(190px) 아래로 눌릴 차례에 다음 줄로 접힐 뿐이라, 5개가 들어갈 만큼
 * 넓으면 다섯 다 한 줄에 서고, 좁아지면 마지막 것부터 자연스럽게 줄바꿈된다.
 * 예전의 4열 고정(repeat(4, ...))은 폭이 아무리 넓어도 5번째 칸(질문 세트 버전)이
 * 항상 혼자 다음 줄에 남았다. */
.tracking-schedule-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
}

.tracking-schedule-fields label {
  min-width: 0;
}

/* datetime-local도 다른 입력과 같은 한 개의 격자 칸을 차지한다. 브라우저 내부의
 * 날짜·시각 하위 필드가 만드는 min-content 폭이 격자 열을 밀어내지 않게 한다. */
#monitoring-start-at {
  min-width: 0;
  font: inherit;
  padding-block: 9px;
}

.tracking-schedule-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 저장 버튼이 var(--text)(먹빛)이던 동안, 같은 화면의 "개선 항목 저장"은 브랜드
 * 청록이었다 -- 한 화면에 으뜸 버튼이 두 색이었던 셈이다. 색은 .primary/.secondary
 * (css/forms.css) 하나로만 나온다. */
.tracking-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.tracking-form-actions button {
  padding-inline: 20px;
}

/* 미리보기와 저장 버튼은 폼의 마지막 한 줄을 나눠 쓴다 -- 읽을 것은 왼쪽, 누를
   것은 오른쪽. */
.tracking-schedule-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.tracking-schedule-preview span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  padding: 5px 9px;
  font-size: var(--fs-1);
}

.tracking-schedule-preview b {
  color: var(--brand-dark);
}

.tracking-schedule-preview em {
  color: var(--muted-strong);
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.tracking-schedule-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.tracking-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface-muted);
  padding: 10px 12px;
}

.tracking-schedule-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tracking-schedule-row strong,
.tracking-schedule-row small,
.tracking-schedule-row code,
.tracking-schedule-row .schedule-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-question-preview legend {
  padding: 0;
  color: var(--muted-strong);
  font-size: var(--fs-3);
  font-weight: 700;
}

/* 안내 한 줄은 제목 바로 아래, 목록 위에 붙는다 -- 목록 뒤로 밀면 다 읽고 나서야
   "이건 왜 안 바뀌나"의 답이 나온다. */
.monitoring-question-preview .form-hint {
  margin: 2px 0 8px;
}

/* 전폭이다: 4열 격자 한가운데에 2열짜리 묶음이 끼면 그 줄의 남은 칸이 비고,
   뒤따르는 입력 하나가 줄 오른쪽 끝에 홀로 선다. */
.monitoring-question-preview {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.monitoring-question-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  /* 220px는 다섯 영역을 한 상자에 다 쌓던 시절 값이다 -- 탭으로 한 번에 한
   * 영역만 보이니 그만큼 더 줄 수 있다(영역당 최대 24문항, 2열이라 12줄쯤). */
  max-height: 360px;
  overflow: auto;
  color: var(--muted);
  font-size: var(--fs-1);
}

/* 세트 규모를 먼저 읽고 문장으로 내려간다 -- 목록만 있으면 "회차당 몇 개인가"를
   스크롤해서 세어야 한다. */
.monitoring-question-summary {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 2px;
}

.monitoring-question-summary span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  padding: 4px 9px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
}

/* 다섯 영역을 위에서부터 쌓아 두면 71문항이 한 번에 늘어서 거의 안 읽힌다 --
 * 탭 하나가 한 영역이라 누른 영역만 보인다(js가 나머지에 hidden을 건다). */
.monitoring-question-tabs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.monitoring-question-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 12px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
  font-weight: 700;
  cursor: pointer;
}

.monitoring-question-tab span {
  color: var(--muted);
  font-weight: 400;
}

/* 색은 PRISM_AREA_COLOR(js, --prism-* 토큰)를 인라인으로 받는다 -- 성과 패널의
 * 막대·추이 색과 같은 원천이라 탭을 눌러 넘어가도 "이 영역" 색이 화면 전체에서
 * 하나로 읽힌다. */
.monitoring-question-tab.active {
  border-color: var(--prism-tab-accent, var(--brand));
  background: var(--prism-tab-accent, var(--brand));
  color: #fff;
}

.monitoring-question-tab.active span {
  color: rgba(255, 255, 255, .82);
}

/* 고르는 줄이 아니라 읽는 줄이다 -- 체크박스가 있던 자리는 비우고 글만 남긴다. */
.monitoring-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 7px;
  color: var(--text);
  line-height: 1.45;
}

.monitoring-question-badge {
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  padding: 1px 7px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
  font-style: normal;
  white-space: nowrap;
}

/* 리포트 전송은 고를 것이 없는 한 줄 사실이므로 입력 칸이 아니라 글줄로 선다. */
.monitoring-delivery-note {
  grid-column: 1 / -1;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: var(--fs-1);
  line-height: 1.55;
}

.monitoring-delivery-note b {
  color: var(--muted-strong);
}

/* PRISM 영역별 질문 그룹 */
.monitoring-question-list .prism-domain-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
}

.prism-domain-heading {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 목록 맨 위에는 규모 요약이 서므로 "첫 그룹"은 그 다음 형제다 -- :first-child로
   두면 첫 영역 제목만 위 여백이 남아 한 칸 내려앉은 것처럼 보인다. */
.prism-domain-group:first-child .prism-domain-heading,
.monitoring-question-summary + .prism-domain-group .prism-domain-heading {
  margin-top: 0;
}

/* 재는 기준은 질문 문장에 딸린 꼬리표다 -- 글줄 아래 같은 칸에 선다. */
.prism-question-measure {
  grid-column: 1;
  color: var(--muted);
  font-size: var(--fs-1);
  font-style: normal;
}

/* PRISM 영역별 성과 점수 패널. 카드 자체는 .panel이 그린다 -- 일정 카드 안에
 * 겹쳐 있던 동안에는 테두리가 두 겹으로 서서 층위가 아니라 깊이로 읽혔다. */
.prism-performance-body {
  color: var(--text);
  font-size: var(--fs-2);
}

.prism-score-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  color: var(--muted-strong);
  font-size: var(--fs-1);
}

.prism-score-rows {
  display: grid;
  gap: 10px;
}

.prism-score-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(120px, 1fr) 56px 128px;
  grid-template-areas:
    'label meter value trend'
    'label stats stats trend';
  align-items: center;
  gap: 2px 12px;
}

/* 회차별 미니 추이(sparkline). 크기는 dashboard.css의 .sparkline-svg(120×32)가 정하고,
   선 색은 인라인 --brand-dark 재정의로 영역 색을 따른다. */
.prism-score-trend {
  grid-area: trend;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
}

.prism-score-label {
  grid-area: label;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--fs-2);
}

.prism-score-label b {
  font-size: var(--fs-3);
}

.prism-score-meter {
  grid-area: meter;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  contain: layout;
}

.prism-score-meter-fill {
  height: 100%;
  border-radius: 999px;
  /* --prism-fill은 행마다 인라인으로 실리는 그 영역의 PRISM 색이다(tokens.css의
     --prism-*). 없는 값(예전 데이터)만 예전 파란색으로 물러난다. */
  background: var(--prism-fill, var(--accent, #4f7cff));
  transition: width 0.3s ease;
}

.prism-score-value {
  grid-area: value;
  font-weight: 700;
  font-size: var(--fs-2);
  text-align: right;
}

/* 질문을 실행하지 않고 답변 본문에서 읽어낸 축. 같은 굵기로 그리면 직접 물어서
   잰 값과 구분되지 않는다 -- 막대를 줄무늬로 비우고 배지를 붙인다. */
.prism-score-inferred .prism-score-meter-fill {
  background: color-mix(in srgb, var(--prism-fill, var(--accent, #4f7cff)) 48%, var(--surface));
}

.prism-score-inferred .prism-score-value {
  font-weight: 600;
  color: var(--muted);
}

.prism-score-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
  font-size: var(--fs-1);
  line-height: 16px;
  color: var(--muted);
  white-space: nowrap;
}

.prism-score-stats {
  grid-area: stats;
  color: var(--muted);
  font-size: var(--fs-1);
}

/* 각주는 .panel-note와 같은 규칙을 따른다 -- 읽기 폭을 문장 길이로 묶고, 12px
   한 줄이 패널 가로를 통째로 가로지르지 않게 한다. */
.prism-score-footnote {
  max-width: 78ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--fs-1);
  line-height: 1.7;
  word-break: keep-all;
}

/* U-10: was 720px (docs/plans/ROADMAP.md §2.1) -- snapped to the console's
 * ≤760px tier. See further down this file for the other three breakpoints
 * (900/850/560px) merged into the same tier.
 * 2026-08-11: 뷰포트 대신 main 컬럼 폭(@container content-col, css/layout.css)
 * 기준으로 이관 -- 레일이 선 채 창만 좁아지는 구간에서도 접힌다. */
@container content-col (width < 720px) {
  .prism-score-row {
    grid-template-columns: 1fr 56px;
    grid-template-areas:
      'label label'
      'meter value'
      'trend trend'
      'stats stats';
  }

  .prism-score-trend {
    justify-content: flex-start;
  }
}

.tracking-schedule-row small {
  color: var(--muted);
  font-size: var(--fs-2);
}

.tracking-schedule-row code,
.tracking-schedule-row .schedule-detail {
  color: var(--muted-strong);
  font-size: var(--fs-1);
}

.tracking-schedule-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tracking-schedule-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 4px 9px;
  font-size: var(--fs-1);
  font-weight: 800;
}

.tracking-schedule-row[data-status="paused"] .tracking-schedule-actions span,
.tracking-schedule-row[data-status="unscheduled"] .tracking-schedule-actions span {
  background: var(--surface);
  color: var(--muted-strong);
}

.tracking-schedule-row[data-status="completed"] .tracking-schedule-actions span {
  background: var(--warning-soft);
  color: var(--warning);
}

/* 다음 회차에 질문이 바뀐다는 예약은 줄에서 바로 보여야 한다 -- 요약 글줄에만
   적으면 여러 일정 중 어느 것에 걸어 뒀는지 훑어서 찾아야 한다. */
.tracking-schedule-row[data-question-refresh="pending"] {
  border-color: var(--brand);
}

.tracking-schedule-row[data-question-refresh="pending"] [data-monitoring-question-refresh] {
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* 직전 세트를 어떻게 할지 고르는 갈래. 줄의 두 칸 아래에 전폭으로 펼쳐진다 --
   버튼 옆에 끼우면 "예약"과 "예약의 방식"이 같은 층위로 읽힌다. */
.schedule-refresh-choice {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.schedule-refresh-choice > p {
  margin: 0;
  color: var(--muted-strong);
  font-size: var(--fs-1);
  font-weight: 700;
}

.schedule-refresh-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* 두 갈래는 나란한 카드다 -- 무엇을 잃고 무엇을 얻는지가 한눈에 대조돼야 고를 수
   있고, 한 줄짜리 버튼으로는 그 대조가 라벨 두 개로만 남는다. */
.schedule-refresh-options button {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
  white-space: normal;
  padding: 9px 11px;
}

.schedule-refresh-options b {
  color: var(--text);
  font-size: var(--fs-2);
}

.schedule-refresh-options small {
  color: var(--muted);
  font-size: var(--fs-1);
  line-height: 1.45;
}

.schedule-refresh-choice > .cancel {
  justify-self: start;
}

/* U-10: three more breakpoints (900/850/560px) merged into the console's
 * ≤760px tier. .tracking-schedule-fields is auto-fit, so it folds on its own
 * without a rule here; modals.css still pins it to a single column at this
 * tier for a guaranteed one-per-row phone layout. */
@container content-col (width < 720px) {
  .tracking-form-actions {
    justify-content: flex-start;
  }

  .monitoring-question-list,
  .monitoring-question-list .prism-domain-group,
  .schedule-refresh-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-enhancement-grid,
  .product-enhancement-list {
    grid-template-columns: 1fr;
  }

  .product-enhancement-wide {
    grid-column: auto;
  }

  .product-inline-fields {
    grid-template-columns: 1fr;
  }
}