/* [2026-08-11] pass-forecast 히어로 여백 축소: 상태카드 컴팩트 + 히어로 수직정렬 center */
/* =====================================================================
   합격 예측 리포트 전용 UI — 2026.08.01
   전체 사이트의 Pretendard / violet / soft-card 시스템에 맞춘 단독 개편
   ===================================================================== */

:root {
  --pf-ink: #171a2b;
  --pf-text: #3f455a;
  --pf-muted: #7a8094;
  --pf-faint: #a3a8ba;
  --pf-line: #e7e9f1;
  --pf-line-strong: #daddea;
  --pf-card: #ffffff;
  --pf-page: #f6f7fb;
  --pf-violet: #5b3df0;
  --pf-violet-deep: #4529ce;
  --pf-violet-soft: #f3f0ff;
  --pf-violet-wash: #faf9ff;
  --pf-orange: #ef7a17;
  --pf-orange-soft: #fff8ef;
  --pf-green: #16a36f;
  --pf-green-soft: #effaf6;
  --pf-danger: #c94a4a;
  --pf-shadow: 0 12px 34px rgba(23, 26, 43, .055);
  --pf-shadow-hero: 0 18px 46px rgba(48, 38, 104, .08);
}

body:has(.pf-page) {
  background: var(--pf-page);
}

.main-content.pf-page {
  padding: 34px clamp(24px, 3vw, 46px) 56px;
  background:
    radial-gradient(circle at 16% 0%, rgba(91, 61, 240, .045), transparent 26%),
    linear-gradient(180deg, #f8f9fc 0%, #f4f5f9 100%);
}

.pf-page > * {
  width: 100%;
  /* [2026-08-11] 넓은 화면(1080p 이상)에서 좌우 여백이 과도하게 남던 문제 개선:
     리포트 폭을 넓혀 화면을 더 채운다. 초대형 모니터에서는 여전히 가운데 정렬된다. */
  max-width: 1520px;
  margin-inline: auto;
}

.pf-page-header {
  margin-bottom: 24px;
}

.pf-page-header .page-eyebrow {
  margin-bottom: 9px;
  color: var(--pf-violet);
  font-size: .94rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.pf-page-header h2 {
  color: var(--pf-ink);
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 900;
  letter-spacing: -0.06em;
}

.pf-page-header p {
  max-width: 760px;
  margin-top: 11px;
  color: var(--pf-muted);
  font-size: 1.1rem;
}

/* 목표 설정 요약 */
.pf-goal-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(200px, .95fr) minmax(420px, 2.6fr);
  align-items: stretch;
  margin-bottom: 22px;
  border: 1px solid var(--pf-line);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--pf-shadow);
  overflow: hidden;
}

.pf-goal-control,
.pf-goal-standard {
  position: relative;
  min-width: 0;
}

.pf-goal-control {
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 92px;
  padding: 18px 22px;
  cursor: pointer;
}

.pf-goal-control + .pf-goal-control::before,
.pf-goal-standards::before {
  content: "";
  position: absolute;
  left: 0;
  top: 23px;
  bottom: 23px;
  width: 1px;
  background: var(--pf-line);
}

.pf-goal-label,
.pf-goal-standard span {
  display: block;
  color: var(--pf-muted);
  font-size: .8rem;
  font-weight: 700;
}

/* [2026-08-27] 고르는 칸이 '고를 수 있게' 보이지 않던 것.
 *  글자만 덩그러니 놓여 있어 눌러도 되는 자리인 줄 몰랐고, 급수 칸은 브라우저가
 *  그려 주는 화살표를, 날짜 칸은 우리가 그린 달력 그림을 써서 둘이 따로 놀았다.
 *  둘 다 같은 모양의 테두리 상자로 만들고, 표시 그림도 우리 것으로 통일한다. */
.pf-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 46px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pf-goal-control:hover .pf-field { border-color: #c7bdf7; }

.pf-field:focus-within {
  border-color: var(--pf-violet);
  box-shadow: 0 0 0 3px rgba(91, 61, 240, .16);
}

.pf-goal-select,
.pf-goal-date {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--pf-ink);
  background: transparent;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  cursor: pointer;
}

/* 브라우저가 그려 주는 화살표를 끄고, 날짜 칸과 같은 그림을 쓴다. */
.pf-goal-select {
  appearance: none;
  -webkit-appearance: none;
}

.pf-goal-date {
  font-variant-numeric: tabular-nums;
}

/* 날짜 칸은 어디를 눌러도 달력이 열리게 한다. */
.pf-goal-date::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pf-control-icon {
  position: absolute;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--pf-muted);
  pointer-events: none;
}

.pf-control-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* [2026-08-27] 세 칸의 글 길이가 달라, 똑같이 나누면 '연설 330자 · 논설 300' 뒤에
 *  '자'만 다음 줄로 떨어졌다. 긴 칸에 자리를 더 주고, 한 줄로 붙여 둔다. */
.pf-goal-standards {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .8fr);
}

.pf-goal-standard {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 20px 24px;
  text-align: center;
}

.pf-goal-standard + .pf-goal-standard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--pf-line);
}

.pf-goal-standard strong {
  color: var(--pf-ink);
  /* 세 칸이 한 줄로 나란히 서야 줄이 어긋나 보이지 않는다. */
  white-space: nowrap;
  font-size: 1.1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.pf-hidden-actions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* 메인 판정 */
.pf-hero-card {
  position: relative;
  margin-bottom: 18px;
  padding: 22px 28px 20px;
  border: 1px solid #d7d0ff;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, #fdfcff 72%, #faf8ff 100%);
  box-shadow: var(--pf-shadow-hero);
  overflow: hidden;
}

.pf-hero-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--pf-violet);
}

.pf-hero-card.is-good::before { background: var(--pf-green); }
.pf-hero-card.is-bad::before { background: var(--pf-danger); }

.pf-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 28px;
  align-items: center;
}

.pf-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 4px 8px 6px 2px;
}

.pf-hero-eyebrow,
.pf-hero-loading > span {
  display: block;
  margin-bottom: 9px;
  color: var(--pf-violet);
  font-size: 1rem;
  font-weight: 800;
}

.pf-hero-copy h3,
.pf-hero-loading > strong {
  display: block;
  margin: 0;
  color: var(--pf-ink);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.06em;
}

.pf-hero-copy > p,
.pf-hero-loading > p {
  max-width: 660px;
  margin: 13px 0 0;
  color: #656b7e;
  font-size: 1.1rem;
  line-height: 1.7;
}

.pf-hero-stale {
  margin-top: 10px !important;
  color: #9a5d22 !important;
  font-size: .94rem !important;
  font-weight: 700;
}

.pf-hero-status-stack {
  display: grid;
  gap: 10px;
}

.pf-hero-status-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
  padding: 16px 20px;
  border: 1px solid #e4e5ee;
  border-radius: 17px;
  background: rgba(255,255,255,.88);
}

.pf-hero-status-card > span:first-child,
.pf-confidence-card > div > span {
  color: var(--pf-muted);
  font-size: .87rem;
  font-weight: 700;
}

.pf-hero-status-card > strong,
.pf-confidence-card > div > strong {
  display: block;
  margin-top: 8px;
  color: var(--pf-violet);
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.pf-hero-status-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #8b90a3;
  transform: translateY(-50%);
}

.pf-hero-status-icon svg { width: 25px; height: 25px; }

.pf-confidence-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pf-confidence-card > div > strong {
  color: var(--pf-violet-deep);
  font-size: 1.5rem;
}

.pf-confidence-ring {
  --confidence: 25%;
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--pf-violet) var(--confidence), #e8e9ef 0);
}

.pf-confidence-ring::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.pf-confidence-ring b {
  position: relative;
  z-index: 1;
  color: var(--pf-ink);
  font-size: .94rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pf-priority-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  min-height: 62px;
  padding: 13px 18px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(100deg, #211a42 0%, #2c225a 100%);
  box-shadow: 0 12px 24px rgba(33, 26, 66, .18);
}

.pf-priority-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #ffb15a;
}

.pf-priority-icon svg { width: 24px; height: 24px; }

.pf-priority-copy {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.pf-priority-copy small {
  color: #c9c3df;
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
}

.pf-priority-copy strong {
  min-width: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pf-priority-arrow {
  color: #d7d2e8;
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1;
}

.pf-hero-loading { padding: 10px 4px; }

/* KPI */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.pf-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 126px;
  padding: 20px 20px;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  background: var(--pf-card);
  box-shadow: var(--pf-shadow);
}

.pf-kpi-card.is-loading {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--pf-muted);
}

.pf-kpi-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--pf-violet);
  background: var(--pf-violet-soft);
}

.pf-kpi-icon svg { width: 22px; height: 22px; }

.pf-kpi-copy { min-width: 0; }
.pf-kpi-copy > span {
  display: block;
  color: var(--pf-muted);
  font-size: .87rem;
  font-weight: 700;
}

.pf-kpi-copy strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  margin-top: 8px;
  color: var(--pf-ink);
  font-size: clamp(1.42rem, 2vw, 1.82rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.pf-kpi-copy strong small {
  color: var(--pf-muted);
  font-size: .87rem;
  font-weight: 700;
  white-space: nowrap;
}

.pf-kpi-copy p {
  margin: 7px 0 0;
  color: var(--pf-faint);
  font-size: .87rem;
  line-height: 1.45;
}

/* 공통 패널 */
.pf-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.pf-panel,
.pf-detail-card,
.pf-ai-detail-panel {
  border: 1px solid var(--pf-line);
  border-radius: 20px;
  background: var(--pf-card);
  box-shadow: var(--pf-shadow);
}

.pf-panel { padding: 22px; }

.pf-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pf-panel-head h3,
.pf-detail-card > h3,
.pf-ai-title-line h3 {
  margin: 0;
  color: var(--pf-ink);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.pf-panel-head p,
.pf-ai-report-head > div > p {
  margin: 7px 0 0;
  color: var(--pf-muted);
  font-size: .87rem;
  line-height: 1.5;
}

.pf-info-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid #cdd0dc;
  border-radius: 50%;
  color: var(--pf-muted);
  font-size: .8rem;
  font-weight: 800;
  cursor: help;
  position: relative;
}
/* [2026-08-10] 안내 툴팁: 네이티브 title 대신 hover와 탭(포커스) 모두에서 뜨는 커스텀 툴팁 */
.pf-info-mark::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: 240px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #1f2937;
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 30;
  pointer-events: none;
}
.pf-info-mark:hover,
.pf-info-mark:focus,
.pf-info-mark:focus-visible {
  color: #4b5563;
  border-color: #9aa2b8;
  outline: none;
}
.pf-info-mark:hover::after,
.pf-info-mark:focus::after,
.pf-info-mark:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pf-inline-loading {
  display: grid;
  place-items: center;
  min-height: 180px;
  color: var(--pf-muted);
  font-size: 1rem;
}

/* 영역별 진행도 */
.pf-part-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pf-progress-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 330px;
  padding: 18px;
  border: 1px solid #e4e1f4;
  border-radius: 17px;
  background: #fdfcff;
}

.pf-progress-card.is-speech {
  border-color: #f3d7b6;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
}

.pf-progress-card.is-empty {
  border-color: #e3e4eb;
  background: #fafafd;
}

.pf-progress-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.pf-progress-card-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-progress-card-head strong {
  color: var(--pf-ink);
  font-size: 1.1rem;
  font-weight: 800;
}

.pf-progress-card.is-speech .pf-progress-card-head strong { color: #d76409; }

.pf-progress-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--pf-violet);
  background: var(--pf-violet-soft);
}

.pf-progress-card.is-speech .pf-progress-icon {
  color: var(--pf-orange);
  background: #fff0df;
}

.pf-progress-icon svg { width: 18px; height: 18px; }

.pf-data-badge {
  padding: 6px 9px;
  border: 1px solid #dedbea;
  border-radius: 999px;
  color: var(--pf-muted);
  background: rgba(255,255,255,.78);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

.pf-progress-card.is-speech .pf-data-badge {
  border-color: #f3d8bb;
  color: #d76c13;
  background: #fff8ef;
}

.pf-progress-body {
  display: grid;
  gap: 20px;
}

.pf-progress-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.pf-progress-row-head span {
  color: var(--pf-text);
  font-size: .87rem;
  font-weight: 700;
}

.pf-progress-row-head strong {
  color: var(--pf-ink);
  font-size: .94rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pf-progress-row.is-empty .pf-progress-row-head strong { color: var(--pf-muted); }

.pf-progress-track {
  height: 7px;
  border-radius: 999px;
  background: #ececf2;
  overflow: hidden;
}

.pf-progress-track > span {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--pf-violet);
}

.pf-progress-card.is-speech .pf-progress-track > span { background: var(--pf-orange); }

.pf-progress-row.is-empty .pf-progress-track {
  background: repeating-linear-gradient(90deg, #e3e4ea 0 12px, transparent 12px 19px);
}

.pf-progress-row.is-empty .pf-progress-track > span { display: none; }

/* (2026-09-08 김보영 님 제보) '통과'가 무엇을 넘겨야 하는 것인지 화면에 없었다.
   기준과, 이번에 무엇이 모자랐는지를 통과 줄 바로 밑에 적는다. */
.pf-pass-why {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 8px 0 0; padding: 8px 10px;
  border-radius: 9px; background: #f4f5f8; color: #5b6379;
  font-size: 0.85rem; line-height: 1.55;
}
.pf-pass-why svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.pf-forecast-pass-why dd { color: #6b7280; line-height: 1.5; }

.pf-progress-note {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: auto;
  padding: 10px 11px;
  border-radius: 11px;
  color: #6758ca;
  background: #f2efff;
  font-size: .87rem;
  font-weight: 700;
  line-height: 1.4;
}

.pf-progress-card.is-speech .pf-progress-note {
  color: #b65e16;
  background: #fff3e5;
}

.pf-progress-note svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* 필요한 변화 */
/* [2026-08-27] 왼쪽 칸이 더 길어서, 이 칸 내용이 위에 붙고 아래가 텅 비어 보였다.
 *  칸을 세로로 세우고 목록을 가운데에 둔다(내용이 길면 그냥 위에서부터 찬다). */
/* [2026-08-27 · 2차] 목록만 가운데 두었더니, 제목이 맨 위에 그대로 남아
 *  여전히 "위에 붙어 있다"고 보였습니다(목록은 44px 밖에 안 내려갔습니다).
 *  제목과 목록을 한 덩어리로 묶어 통째로 가운데에 둡니다. */
.pf-needs-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 내용이 칸보다 길어지면 위에서부터 차야 잘리지 않는다. */
.pf-needs-panel > * { flex: 0 0 auto; }
.pf-needs-list { display: grid; gap: 12px; }

.pf-need-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-height: 104px;
  padding: 15px 14px;
  border: 1px solid #ddd7ff;
  border-radius: 14px;
  background: #fcfbff;
}

.pf-need-rank,
.pf-plan-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: var(--pf-violet);
  box-shadow: 0 8px 16px rgba(91,61,240,.18);
  font-size: .87rem;
  font-weight: 800;
}

.pf-need-item strong {
  display: block;
  color: var(--pf-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
}

.pf-need-item p,
.pf-needs-complete p {
  margin: 7px 0 0;
  color: var(--pf-muted);
  font-size: .87rem;
  line-height: 1.55;
}

.pf-needs-complete {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid #cce7db;
  border-radius: 14px;
  background: var(--pf-green-soft);
}

.pf-needs-complete > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--pf-green);
  background: #fff;
}

.pf-needs-complete svg { width: 18px; height: 18px; }
.pf-needs-complete strong { color: #176b4d; font-size: 1rem; }

/* 실행 계획 */
.pf-plan-panel {
  margin-bottom: 16px;
  padding: 22px;
}

.pf-plan-list {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 2px;
}

.pf-plan-list::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: #d9d2ff;
}

.pf-plan-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 9px 12px 9px 0;
}

.pf-plan-index {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.pf-plan-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--pf-violet);
  background: var(--pf-violet-soft);
}

.pf-plan-icon svg { width: 20px; height: 20px; }

.pf-plan-copy { min-width: 0; }
.pf-plan-copy strong {
  display: block;
  color: var(--pf-ink);
  font-size: 1rem;
  font-weight: 800;
}

.pf-plan-copy p {
  margin: 5px 0 0;
  color: var(--pf-muted);
  font-size: .87rem;
  line-height: 1.45;
}

.pf-plan-tag {
  min-width: 62px;
  padding: 7px 11px;
  border: 1px solid #dcd5ff;
  border-radius: 999px;
  color: var(--pf-violet);
  background: #f8f6ff;
  font-size: .87rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

/* 하단 세부 분석 */
.pf-detail-shell {
  margin-bottom: 8px;
  border: 1px solid #ded9f8;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--pf-shadow);
  overflow: hidden;
}

.pf-detail-shell > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 20px 24px;
  list-style: none;
  cursor: pointer;
}

.pf-detail-shell > summary::-webkit-details-marker { display: none; }

.pf-detail-summary-copy {
  display: flex;
  align-items: baseline;
  gap: 20px;
  min-width: 0;
}

.pf-detail-summary-copy strong {
  color: var(--pf-ink);
  font-size: 1.1rem;
  font-weight: 900;
  white-space: nowrap;
}

.pf-detail-summary-copy small {
  color: var(--pf-muted);
  font-size: .87rem;
  line-height: 1.5;
}

.pf-detail-chevron {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--pf-text);
  transition: transform .18s ease;
}

.pf-detail-chevron svg { width: 20px; height: 20px; }
.pf-detail-shell[open] .pf-detail-chevron { transform: rotate(180deg); }

.pf-detail-content {
  display: grid;
  gap: 16px;
  padding: 0 20px 20px;
  border-top: 1px solid var(--pf-line);
}

.pf-ai-detail-panel {
  margin-top: 18px;
  padding: 20px;
  box-shadow: none;
}

.pf-ai-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.pf-ai-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
}

.pf-ai-spark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #fff;
  background: var(--pf-violet);
}

.pf-ai-beta-badge {
  padding: 4px 7px;
  border-radius: 999px;
  color: #d46613;
  background: #fff0df;
  font-size: .8rem;
  font-weight: 800;
}

.pf-ai-action-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex: 0 0 auto;
}

.pf-ai-limit-label { color: var(--pf-faint); font-size: .8rem; }

.pf-ai-generate-btn {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--pf-violet);
  box-shadow: 0 8px 18px rgba(91,61,240,.2);
  font-weight: 800;
  font-size: .87rem;
}

.pf-ai-generate-btn:hover:not(:disabled) { background: var(--pf-violet-deep); }
.pf-ai-generate-btn:disabled { color: #9a94ac; background: #eceaf2; box-shadow: none; }

.pf-ai-status {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #e4e1f1;
  border-radius: 12px;
  color: var(--pf-muted);
  background: #faf9fd;
  flex-wrap: wrap;
}

.pf-ai-status strong { color: var(--pf-text); font-size: .87rem; }
.pf-ai-status span { font-size: .87rem; }
.pf-ai-status.is-done { border-color: #cde6da; background: #f3faf7; }
.pf-ai-status.is-error { border-color: #efd0d0; background: #fff7f7; }

.pf-ai-report-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--pf-line);
}

.pf-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.pf-detail-card {
  padding: 20px;
  box-shadow: none;
}

.pf-detail-card > .gf-sub {
  margin: 7px 0 14px;
  color: var(--pf-muted);
  font-size: .87rem;
}

.pf-summary-note {
  margin: 0 !important;
  border-color: #d9d4f5;
  color: #51496f;
  background: #faf9ff;
}

.pf-evidence {
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.pf-evidence > summary {
  padding: 15px 17px;
  color: var(--pf-text);
  font-size: .94rem;
  font-weight: 800;
  cursor: pointer;
}

.pf-evidence[open] > summary { border-bottom: 1px solid var(--pf-line); }
.pf-evidence-grid { padding: 14px; }

/* 상세 영역 안의 기존 AI 결과 스타일 정리 */
.pf-detail-shell .pf-forecast-verdict,
.pf-detail-shell .pf-ai-headline {
  border-radius: 16px;
}

.pf-detail-shell .pf-forecast-keyfacts,
.pf-detail-shell .pf-forecast-part-grid,
.pf-detail-shell .pf-ai-overview {
  gap: 10px;
}

.pf-detail-shell .pf-ai-section {
  border-radius: 13px;
}

/* 반응형 */
@media (max-width: 1180px) {
  .pf-goal-strip {
    grid-template-columns: minmax(130px, .7fr) minmax(190px, 1fr) minmax(390px, 2.5fr);
  }
  .pf-goal-control,
  .pf-goal-standard { padding-inline: 18px; }
  .pf-report-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr); }
  .pf-kpi-card { padding-inline: 16px; }
}

@media (max-width: 1020px) {
  .pf-goal-strip {
    grid-template-columns: 1fr 1.35fr;
  }
  .pf-goal-standards {
    grid-column: 1 / -1;
    border-top: 1px solid var(--pf-line);
  }
  .pf-goal-standards::before { display: none; }
  .pf-goal-standard { min-height: 76px; }
  .pf-hero-main { grid-template-columns: minmax(0, 1fr) 220px; }
  .pf-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-report-grid { grid-template-columns: 1fr; }
  .pf-needs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .main-content.pf-page { padding: 74px 16px 36px; }
  .pf-page-header h2 { font-size: 31px; }
  .pf-page-header p { font-size: 1rem; }
  .pf-goal-strip { grid-template-columns: 1fr; }
  .pf-goal-control + .pf-goal-control::before { top: 0; bottom: auto; right: 0; width: auto; height: 1px; }
  .pf-goal-control { min-height: 82px; }
  .pf-goal-standards { grid-column: auto; }
  .pf-goal-standard { min-height: 74px; padding-inline: 10px; }
  .pf-goal-standard strong { font-size: 1.1rem; }
  .pf-hero-card { padding: 22px 18px 18px; }
  .pf-hero-main { grid-template-columns: 1fr; gap: 16px; }
  .pf-hero-copy { padding: 8px 2px; }
  .pf-hero-copy h3 { font-size: 36px; }
  .pf-hero-status-stack { grid-template-columns: 1fr 1fr; }
  .pf-hero-status-card { min-height: 100px; padding: 16px; }
  .pf-hero-status-card > strong { font-size: 1.62rem; }
  .pf-confidence-ring { width: 56px; height: 56px; }
  .pf-priority-copy { display: block; }
  .pf-priority-copy small { display: block; margin-bottom: 4px; }
  .pf-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pf-kpi-card { min-height: 112px; padding: 15px; }
  .pf-kpi-icon { width: 38px; height: 38px; }
  .pf-part-grid { grid-template-columns: 1fr; }
  .pf-needs-list { grid-template-columns: 1fr; }
  .pf-plan-item { grid-template-columns: 34px 38px minmax(0, 1fr); padding-right: 0; }
  .pf-plan-tag { grid-column: 3; justify-self: start; margin-top: -4px; }
  .pf-detail-summary-copy { display: block; }
  .pf-detail-summary-copy small { display: block; margin-top: 5px; }
  .pf-ai-report-head { display: grid; }
  .pf-ai-action-box { align-items: stretch; }
  .pf-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .pf-goal-standards { grid-template-columns: 1fr; }
  .pf-goal-standard + .pf-goal-standard::before { top: 0; bottom: auto; right: 0; width: auto; height: 1px; }
  .pf-goal-standard { text-align: left; padding: 14px 20px; }
  .pf-kpi-grid { grid-template-columns: 1fr; }
  .pf-hero-status-stack { grid-template-columns: 1fr; }
  .pf-priority-banner { grid-template-columns: auto minmax(0, 1fr); }
  .pf-priority-arrow { display: none; }
  .pf-panel,
  .pf-plan-panel { padding: 18px; }
  .pf-plan-copy strong { font-size: .94rem; }
}