/* 파트너 소개 상세 (AH-1195) */

/* 다색 칩/배지 팔레트(--accent-*)와 캔버스 톤(--canvas-bg)은 tokens.css 전역 토큰이다.
   모달은 .pp 바깥에 렌더되므로 페이지 변수도 .pp가 아니라 문서 루트에 둔다. */
:root {
  --pp-border: var(--gray-200);
  --pp-card-radius: 16px;
}

/* 섹션 사이 리듬은 .pp(페이지 블록)와 .pp-shell(본문 셸)의 gap이 소유한다 —
   자식에 간격용 padding/margin을 더하지 말 것. 의도된 큰 리듬만 delta margin + 총합 주석. */
.pp {
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--canvas-bg);
  padding-bottom: 120px;
  overflow-x: clip; /* 구성원 스와이퍼가 overflow: visible이라 투명 슬라이드가 페이지 밖으로 뻗는다 — 가로 스크롤 방지 */
}

/* ================================================
   히어로 — 커버 풀블리드, 하단은 페이지 배경으로 그라데이션 융합
   ================================================ */
/* 셸의 직계 자식은 `.dt-section`(또는 `.dt-group`) 하나뿐이다 — 섹션 사이 리듬을 셸의 gap 하나가
   소유하기 때문. 판을 여러 개 늘어놓는 묶음(이력)도 맨 div가 아니라 머리글 없는 섹션으로 감싼다. */
.pp-shell {
  position: relative;
  z-index: var(--z-content);
  width: 100%; /* 좌우 auto 마진이 flex 자식의 stretch를 끈다 — 이 줄이 없으면 1148 미만 화면에서 셸이 max-width에 고정된 채 잘린다 */
  /* 시안 본문 폭은 1100 — 좌우 패딩을 더해 상한을 잡아야 넓은 화면에서 본문이 정확히 1100이 된다 */
  max-width: calc(1100px + var(--container-px) * 2);
  margin: 56px auto 0; /* 히어로(프로그램은 탭 띠) 아래 첫 판까지 96 = .pp의 gap 40 + 56 — 섹션 padding-top이 사라졌으므로 이 값을 56 아래로 줄이면 본문 전체가 그만큼 위로 딸려 올라간다 */
  padding: 0 var(--container-px);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pp-hero + .pp-shell {
  margin-top: 20px; /* 파트너 상세만: 공지 띠가 히어로 밑선에 걸치므로 본문을 바짝 붙인다 — 프로그램 상세(탭 띠)는 위 56 유지 */
}

/* 본문 맨 위 공지 배너. 시안에서 뽑은 그라데이션 — 페이지 바탕(#F1F3F8)과 회색끼리 겹치면
   그대로 묻히므로, 왼쪽은 푸른기로 띄우고 오른쪽 끝색만 미세하게 따뜻하다.
   각도는 배너 가로세로비에 딸린 값이라 폭이 크게 바뀌면 기울기도 달라 보인다. */
.pp-page-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(172deg, #EAF0FE 0%, #FCFBF9 74%);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--gray-600);
}

.pp-hero__panel .pp-page-notice {
  margin-top: 20px; /* 위 미디어 그리드까지 48 = 판 gap 28 + 20 — 띠가 판 밑선(커버 사진 끝)에 걸치도록 내린다 */
}

.pp-page-notice > i {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #DFE6F5;
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--primary);
}

/* 롤링 창 — 줄 높이 하나만 보이고, 활성 줄이 위로 빠지며 다음 줄이 아래에서 올라온다.
   hidden이 아니라 clip: hidden 창은 스크롤 컨테이너라, 모달이 닫히며 창 밖 줄로 포커스를 돌려주면
   창이 한 줄만큼 스크롤된 채 남아 이후 모든 제목이 창 밖에 그려진다(QA 2026-09-27). */
.pp-page-notice__roll {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 20px;
  overflow: clip;
}

.pp-page-notice__item {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  line-height: 20px;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.45s ease, opacity 0.3s ease;
}

.pp-page-notice__item.is-active { transform: translateY(0); opacity: 1; }
.pp-page-notice__item.is-leaving { transform: translateY(-100%); opacity: 0; }
.pp-page-notice__item:hover { color: var(--text-main); }

.pp-page-notice__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--text-desc);
}

.pp-page-notice__step {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 11px;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pp-page-notice__step:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-main); }

.pp-page-notice__count strong { color: var(--text-main); font-weight: 600; }

/* 판 안쪽 머리글 — 섹션 머리글(.dt-section__head)의 카드 레벨 짝.
   제목이 auto 마진으로 왼쪽에 붙고 링크·페이저가 오른쪽 끝으로 밀린다. */
.pp-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-card__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-right: auto;
}

.pp-hero {
  position: relative;
  padding-top: 96px;
}

.pp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 커버 사진 위에 얹히는 화이트 시트 — 상단만 둥글고,
   하단은 본문 톤(--canvas-bg)으로 그라데이션되어 경계 없이 이어진다 */
.pp-hero__panel {
  position: relative;
  z-index: var(--z-content);
  width: calc(100% - 96px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 48px 0;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 82%, var(--canvas-bg) 100%);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pp-hero__chips {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 칩 변형은 accent(테두리·글자)와 accent-soft(배경) 두 변수만 바꾼다.
   평점 별 아이콘만 예외로 원색을 쓴다 — 아래 --rating i 규칙 참조. */
.pp-chip {
  --pp-chip-accent: var(--pp-border);
  --pp-chip-accent-soft: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid var(--pp-chip-accent);
  border-radius: var(--radius-lg);
  background: var(--pp-chip-accent-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  transition: color var(--ease-default), border-color var(--ease-default), background var(--ease-default);
}

.pp-chip i { font-size: 12px; }

.pp-chip--review { --pp-chip-accent: #116FBE; --pp-chip-accent-soft: #E9F2FA; color: #116FBE; }
/* 평점 글자·테두리에 별색(#FFC531)을 그대로 쓰면 밝은 배경에서 안 읽힌다 — 진한 앰버로 내리고 별만 원색 */
.pp-chip--rating { --pp-chip-accent: #C08A00; --pp-chip-accent-soft: #FFF6DC; color: #C08A00; }
.pp-chip--rating i { color: var(--accent-star); }

/* 페이지 규칙: 라벨 없는 아이콘 컨트롤은 크기와 색을 자기 규칙에서 직접 선언한다 — 글자 규칙에서
   물려받으면 라벨 크기를 손대는 순간 아이콘이 같이 줄고(10px에서 점처럼 보였다) 라벨 색이
   컨트롤 색을 덮는다. */
.pp-chip--icon {
  width: 30px;
  padding: 0;
  justify-content: center;
  color: var(--text-main);
}

.pp-chip--icon i { font-size: 13px; }

.pp-chip--share:hover { --pp-chip-accent: var(--gray-400); }
.pp-chip--report { --pp-chip-accent: var(--report-danger); color: var(--report-danger); }
.pp-chip--report:hover { background: var(--accent-red-soft); }

.pp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 40px;
}

/* 스와이퍼 슬라이드의 content 최소폭이 그리드 트랙으로 순환 전파되면
   트랙이 브라우저 최대폭까지 폭발한다 — 두 컬럼 모두에서 전파를 끊는다. */
.pp-hero__grid > * { min-width: 0; }

/* Swiper 기본 CSS의 margin-left/right:auto는 flex 부모 안에서 stretch를 무효화해
   컨테이너가 content 폭(슬라이드 합)으로 커진다 — 항상 부모 폭에 고정한다. */
/* dt-carousel은 스스로 폭을 넓혀 쓴다(100% + 거터*2) — 여기 100% 고정이 덮으면 판 전체가 거터만큼 왼쪽으로 민다 */
.pp .swiper:not(.dt-carousel) { width: 100%; }

/* ---- 미디어 갤러리 ---- */
.pp-media__main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.pp-media__main .swiper,
.pp-media__main .swiper-slide {
  height: 100%;
}

.pp-media__main .swiper-slide { position: relative; }

.pp-media__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-media__expand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-hero-ctrl);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ease-default), background var(--ease-default);
}

.pp-media__main:hover .pp-media__expand { opacity: 1; }
.pp-media__expand:hover { background: rgba(255, 255, 255, 0.55); }
.pp-media__expand[hidden] { display: none; }

.pp-media__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 19, 26, 0.55);
  color: #fff;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ease-default);
}

.swiper-slide-active .pp-media__play { display: flex; }
.pp-media__play:hover { background: rgba(16, 19, 26, 0.78); }
.pp-media__play i { margin-left: 3px; /* 재생 삼각형 광학 중심 */ }

.pp-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- 미디어 뷰어 모달 ---- */
.pp-media-modal-overlay .ui-modal {
  width: min(1100px, 100%);
  max-height: 92vh;
}

.pp-media-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.pp-media-modal img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-lg);
}

.pp-media-modal iframe {
  width: 100%;
  height: 80vh;
  border: 0;
  border-radius: var(--radius-lg);
}

.pp-media-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  transition: color var(--ease-default);
}

.pp-media-modal__download:hover { color: var(--text-main); }

/* ---- 히어로 우측 ---- */
.pp-hero__info {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.pp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 700;
  background: var(--pp-badge-accent-soft);
  color: var(--pp-badge-accent);
}

/* 배지 색 룰링(2026-08-24): 본인인증 초록 / 사업자인증 보라 / 활동 n년차 주황 / 안전교육수료 핑크(데이터 생기면) / 세금증빙 발급 가능 파랑(불가 뱃지는 노출 안 함) */
.pp-badge--identity { --pp-badge-accent: var(--accent-green);  --pp-badge-accent-soft: var(--accent-green-soft); }
.pp-badge--business { --pp-badge-accent: var(--accent-purple); --pp-badge-accent-soft: var(--accent-purple-soft); }
.pp-badge--career   { --pp-badge-accent: var(--accent-orange); --pp-badge-accent-soft: var(--accent-orange-soft); }
.pp-badge--tax      { --pp-badge-accent: var(--accent-blue);   --pp-badge-accent-soft: var(--accent-blue-soft); }

.pp-hero__title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-hero__name {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text-main);
}

.pp-hero__tagline {
  font-size: 14px;
  color: var(--text-sub);
}

.pp-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-like-btn {
  /* CTA 버튼(.pp-btn)과 같은 높이 유지 — 한쪽만 키우면 액션 줄이 어긋난다 */
  width: 40px;
  height: 40px;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-full);
  color: var(--gray-500);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transition: color var(--ease-default), border-color var(--ease-default);
}

.pp-like-btn__count {
  font-size: 11px;
  font-weight: 600;
}

.pp-like-btn:hover,
/* 찜 상태 클래스는 공용 action-buttons.js가 붙이는 .liked 하나뿐이다 — 이름을 바꾸면 토글이 끊긴다 */
.pp-like-btn.liked { color: var(--accent-red); border-color: var(--accent-red); }
.pp-like-btn.liked i { font-weight: 900; }

/* 미리보기·본인·중복 신고로 막힌 버튼 — 이유는 툴팁이 말하므로 요소는 남는다 */
.pp-chip:disabled,
.pp-like-btn:disabled,
.pp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pp-like-btn:disabled:hover { color: inherit; border-color: var(--pp-border); }

.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 시안 실측은 32 높이였으나 잘 안 보인다는 2026-08-20 피드백으로 40으로 확대 — 시안 맞춤 복원 금지 */
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: all var(--ease-default);
}

.pp-btn--outline {
  border: 1px solid var(--pp-border);
  background: #FFFFFF;
  color: var(--text-main);
}

.pp-btn--outline:hover { border-color: var(--gray-400); background: var(--gray-50); }

.pp-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.pp-btn--primary:hover {
  background: var(--action-blue-hover);
  box-shadow: var(--cta-hover-shadow);
  transform: var(--cta-hover-lift);
}

/* ---- 썸네일 레일 ---- */
.pp-thumbs {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-thumbs .swiper-slide {
  position: relative;
  width: calc(50% - 6px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color var(--ease-default);
}

.pp-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-thumbs__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16, 19, 26, 0.55);
  color: #FFFFFF;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pp-thumbs__play i { margin-left: 2px; }

.pp-thumbs .swiper-slide-thumb-active { outline-color: var(--text-main); }

.pp-thumbs__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* 화살표는 페이지 전체에서 두 크기뿐이다 — 줄을 통째로 넘기는 캐러셀 네비는 --lg,
   안쪽·보조 컨트롤(페이저, 썸네일, 사진 넘김)은 --sm. 크기 모디파이어는 필수. */
.pp-nav-btn {
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease-default);
}

.pp-nav-btn--sm { width: 28px; height: 28px; font-size: 11px; }
.pp-nav-btn--lg { width: 40px; height: 40px; font-size: 14px; }

.pp-nav-btn:hover { border-color: var(--gray-400); }
.pp-nav-btn:disabled { opacity: 0.4; pointer-events: none; }

/* 캐러셀 줄 바깥 좌우에 떠 있는 네비 — 구성원·후기가 같은 배치를 쓴다.
   스와이퍼 기본 z-index: 1 위로 올린다(넘긴 뒤 투명 wrapper 박스가 prev 버튼을 덮어 클릭을 삼킨다). */
.pp-nav-btn--rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-hero-ctrl);
  box-shadow: var(--shadow-fab);
}

/* 64 = 버튼 40 + 본문과의 간격 24. 본문 1100 기준으로 화살표가 화면 가장자리에 닿지 않으려면
   뷰포트가 1100+128 = 1228을 넘어야 한다(아래 미디어쿼리의 근거). */
.pp-nav-btn--rail.is-prev { left: -64px; }
.pp-nav-btn--rail.is-next { right: -64px; }

/* 바깥 여백이 모자란 폭은 카드 위로 살짝 올라탄다 */
@media (max-width: 1360px) {
  .pp-nav-btn--rail.is-prev { left: 8px; }
  .pp-nav-btn--rail.is-next { right: 8px; }
}

.pp-nav-btn.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
/* 스와이퍼 기본 CSS보다 이 파일이 나중에 실려 .pp-nav-btn의 display가 lock 규칙을 이긴다 */
.pp-nav-btn.swiper-button-lock { display: none; }

.pp-thumbs__count {
  font-size: 16px;
  color: var(--text-sub);
}

.pp-thumbs__count strong { color: var(--text-main); font-weight: 700; }

/* ================================================
   섹션 리듬 — 골격(dt-*)은 detail-shared.css가 소유하고, 여기서는 이 두 페이지의 판 간격만 정한다
   ================================================ */
/* 의도된 큰 리듬만 자기 마진으로 소유한다 — 값은 .pp-shell의 gap(40)에 더해진 총합으로 읽는다. */
.dt-section--members { margin-top: 50px; margin-bottom: 45px; } /* 위 gap 40 + 50 = 90, 아래 45 + gap 40 = 85 */

/* 섹션 머리글·카드 어디서나 쓰는 보조 링크 — 섹션 전용이 아니라 페이지 공용 어휘다 */
/* 쉬는 색은 변형이 --pp-link-color로 바꾸고 호버 색은 여기 한 곳뿐이다 —
   변형이 color를 직접 덮으면 명시도가 높아져 아래 :hover가 죽는다. */
.pp-link {
  --pp-link-color: var(--text-sub);
  font-size: 14px;
  color: var(--pp-link-color);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--ease-default);
}

.pp-link:hover { color: var(--text-main); }
.pp-link i { transition: transform var(--ease-default); }
.pp-link:hover i { transform: translateX(3px); }

/* ================================================
   파트너 소개 (스탯 + 소개글)
   ================================================ */
.pp-stats {
  display: flex;
  gap: 16px;
}

.pp-stat {
  background: #FFFFFF;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  padding: 24px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

.pp-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.pp-stat__icon {
  flex: none;
  width: 43px;
  height: 43px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--pp-stat-accent-soft);
  color: var(--pp-stat-accent);
}

.pp-stat__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-stat__label {
  font-size: 14px;
  color: var(--text-desc);
}

.pp-stat__value {
  font-size: 17px;
  font-weight: 800;
  color: var(--pp-stat-accent);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.pp-stat--field  { --pp-stat-accent: var(--accent-purple); --pp-stat-accent-soft: var(--accent-purple-soft); }
.pp-stat--region { --pp-stat-accent: var(--accent-green);  --pp-stat-accent-soft: var(--accent-green-soft); }
.pp-stat--size   { --pp-stat-accent: var(--accent-blue);   --pp-stat-accent-soft: var(--accent-blue-soft); }
.pp-stat--since  { --pp-stat-accent: var(--accent-red);    --pp-stat-accent-soft: var(--accent-red-soft); }

.pp-intro-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--gray-600);
  white-space: pre-line;
}

.pp-intro--aside {
  display: grid;
  grid-template-columns: 224px 1fr;
  align-items: start;
  gap: 36px;
}
.pp-intro--aside .pp-stats { flex-direction: column; }
.pp-intro--aside .pp-stat { flex: none; }

/* ================================================
   프로그램 소개
   ================================================ */
.pp-programs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-program {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

.pp-program:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.pp-program__thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
}

.pp-program__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-program__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-program__title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 48px; /* 우상단 화살표 버튼 자리 — 본문 폭은 끝까지 쓰고 타이틀만 피한다 */
}

.pp-program__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 평점·리뷰는 나란히 선 두 그룹 — 아이콘 크기가 어긋나면 세로 정렬이 깨져 보인다 */
.pp-program__rating,
.pp-program__review-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-blue);
  white-space: nowrap;
}

.pp-program__rating i,
.pp-program__review-count i { font-size: 10px; }
.pp-program__rating i { color: var(--accent-star); }

.pp-program__desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-desc);
}

.pp-program__foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.pp-program__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pp-tag {
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  font-size: 9px;
  font-weight: 600;
  color: var(--gray-600);
}

.pp-program__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.pp-program__price small {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}

/* 링크가 카드 전체를 덮는다 — 카드 안에 다른 링크·버튼이 없어야 성립(태그·평점은 span). 보이는 원은 아이콘이 그린다. */
.pp-program__go {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}

.pp-program__go i {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease-default);
}

.pp-program__go:hover i {
  background: var(--action-blue-hover);
  transform: var(--cta-hover-lift);
}

.pp-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 14px 20px;
  font-size: 13px;
  color: var(--text-sub);
}

.pp-notice i { color: var(--gray-400); font-size: 15px; }

/* ================================================
   이력 (주요/수상/방송)
   ================================================ */
/* 배치 전용 — 여백은 바깥 섹션이 잡고, 여기는 판 3개를 2단으로 타일링만 한다 */
.pp-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-section);
}

/* 이력 종류별 액센트 — 아이콘 / 연도 칩 / 페이저 채움 버튼 / 모달 활성 탭이 한 색을 공유한다.
   카드·모달 패널·모달 탭이 각각 다른 조상이라 세 선택자가 한 묶음으로 간다. */
.pp-history-card--major,
.pp-history-modal-panel--major,
.pp-history-modal-tab--major {
  --pp-history-accent: var(--accent-blue);
}

.pp-history-card--award,
.pp-history-modal-panel--award,
.pp-history-modal-tab--award {
  --pp-history-accent: var(--accent-purple);
}

.pp-history-card--broadcast,
.pp-history-modal-panel--broadcast,
.pp-history-modal-tab--broadcast {
  --pp-history-accent: var(--accent-green);
}

/* 머리글을 가진 판 — 이력 타일과 리뷰 좌/우 판이 같은 내부 규격을 쓴다 */
.pp-history-card,
.pp-reviews__main,
.pp-metrics {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pp-history-card--wide { grid-column: 1 / -1; }

.pp-history-card__icon {
  font-size: 20px;
  color: var(--pp-history-accent);
}

.pp-pager {
  display: flex;
  align-items: center;
  gap: 10px;
}


.pp-pager__count {
  font-size: 13px;
  color: var(--text-sub);
}

.pp-pager__count strong { color: var(--text-main); font-weight: 700; }

/* 행은 낱개 카드가 아니라 한 덩어리 리스트 — 보더는 컨테이너가 갖고 행 사이는 구분선 */
.pp-history-list {
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.pp-history-row {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 페이지 밖 행은 hidden이라 구분선은 '보이는 행끼리'만 그어져야 한다 */
.pp-history-row:not([hidden]) + .pp-history-row:not([hidden]) { border-top: 1px solid var(--pp-border); }

.pp-history-row__year {
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.pp-history-row__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-event-chip {
  flex-shrink: 0;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  background: var(--pp-event-chip-accent-soft);
  color: var(--pp-event-chip-accent);
}

.pp-event-chip--blue   { --pp-event-chip-accent: var(--accent-blue);   --pp-event-chip-accent-soft: var(--accent-blue-soft); }
.pp-event-chip--green  { --pp-event-chip-accent: var(--accent-green);  --pp-event-chip-accent-soft: var(--accent-green-soft); }
.pp-event-chip--purple { --pp-event-chip-accent: var(--accent-purple); --pp-event-chip-accent-soft: var(--accent-purple-soft); }
.pp-event-chip--orange { --pp-event-chip-accent: var(--accent-orange); --pp-event-chip-accent-soft: var(--accent-orange-soft); }
.pp-event-chip--pink   { --pp-event-chip-accent: var(--accent-pink);   --pp-event-chip-accent-soft: var(--accent-pink-soft); }
.pp-event-chip--gold   { --pp-event-chip-accent: var(--accent-gold);   --pp-event-chip-accent-soft: var(--accent-gold-soft); }
.pp-event-chip--teal   { --pp-event-chip-accent: var(--accent-teal);   --pp-event-chip-accent-soft: var(--accent-teal-soft); }

/* ---- 전체 이력 모달 ---- */
/* 탭과 리스트가 한 덩어리 — 탭 줄이 블록의 머리, 리스트가 몸통이다 */
.pp-history-modal-tabs {
  display: flex;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
}

.pp-history-modal-tab {
  flex: 1;
  height: 48px;
  background: var(--gray-50);
  border-right: 1px solid var(--pp-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  transition: color var(--ease-default), background var(--ease-default);
}

.pp-history-modal-tab:last-child { border-right: none; }
.pp-history-modal-tab:hover { color: var(--text-main); background: var(--gray-100); }

.pp-history-modal-tab.is-active {
  background: #FFFFFF;
  color: var(--pp-history-accent);
}

.pp-history-modal-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pp-history-modal-panel .pp-pager { align-self: center; }

.pp-history-modal-panel .pp-history-list {
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* 카드는 한 줄 말줄임으로 행 높이를 지키고, 전문은 전체보기 모달에서만 줄바꿈으로 읽힌다 */
.pp-history-modal-panel .pp-history-row { align-items: baseline; }
.pp-history-modal-panel .pp-history-row__text {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* ================================================
   구성원 소개
   ================================================ */
.pp-members-wrap {
  position: relative;
  padding-top: 24px; /* 위로 커지는 호버 확대(~7%)가 머리글에 붙지 않는 여유 */
}

/* 3명 시안: 줄을 꽉 채우면 카드가 너무 커서 살짝 줄인다 — 폭 수치 미지급, 여기 한 값이 눈대중.
   width 100%는 필수 — 부모(dt-section__content)가 flex column이라 auto 마진만 있으면 내용 폭(스와이퍼 순환 계산)으로 쪼그라든다 */
.pp-members-wrap--trio {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}

.pp-member-card {
  position: relative;
  height: auto;
  padding: 5px 5px 6px;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  /* 아래를 축으로 커진다 — 위로 솟고 줄 아래 라인은 그대로 */
  transform-origin: center bottom;
  transition: transform var(--ease-default), outline-color var(--ease-default), box-shadow var(--ease-default);
  display: flex;
  flex-direction: column;
}

.pp-member-card:hover {
  transform: scale(1.07);
  outline-color: var(--accent-purple);
  box-shadow: var(--shadow-float-hover);
}

/* 위 라운드는 카드 라운드에서 패딩(5px)을 뺀 동심원 값 — 카드 패딩을 바꾸면 여기도 같이 바꿔야 한다.
   하단 라운드는 없음: 아래는 페이드로 카드 바탕에 녹으므로 모서리 곡선이 보이면 경계가 되살아난다. */
.pp-member-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--pp-card-radius) - 5px) calc(var(--pp-card-radius) - 5px) 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #FDF0F3 0%, #F7E9EE 100%);
}

/* 사진 하단을 카드 흰 바탕으로 흘려보내 경계선을 지운다 — 끝 색은 카드 배경(#FFFFFF)과 같아야 한다 */
.pp-member-card__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.pp-member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-member-card__body {
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-role-chip {
  align-self: flex-start;
  height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  background: var(--accent-pink-soft);
  color: var(--accent-pink);
}

.pp-role-chip--leader { background: var(--accent-purple-soft); color: var(--accent-purple); }

.pp-member-card__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pp-member-card__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}

.pp-member-card__go {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent-purple);
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ease-default);
}

.pp-member-card:hover .pp-member-card__go { opacity: 1; }

/* 1~2명 변형: 가로 와이드 카드 */
.pp-members-flat {
  display: grid;
  gap: var(--gap-card);
}

.pp-members-flat--pair { grid-template-columns: 1fr 1fr; }

/* 가로 카드는 카드가 높이를 정하고 사진이 그 높이를 채운다(시안 실측 258, 1·2명 공통) —
   이미지에 높이를 맡기면 업로드 사진 비율에 따라 카드가 들쭉날쭉해진다. */
.pp-members-flat .pp-member-card { flex-direction: row; outline-offset: -2px; height: 258px; }

/* 가로 와이드 카드는 확대가 과하다 — 리프트로 대신한다 */
.pp-members-flat .pp-member-card:hover { transform: translateY(-3px); }

.pp-members-flat .pp-member-card__photo {
  aspect-ratio: auto;
  width: 220px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
}

/* 1명 시안: 사진은 카드 폭의 1/4 (디자인 QA 2026-09-23, 50%에서 축소) */
.pp-members-flat--single .pp-member-card__photo { width: 25%; }

/* 가로 카드는 사진이 오른쪽 텍스트로 이어진다 — 하단 페이드를 오른쪽 페이드로 돌린다(끝 색은 카드 배경) */
.pp-members-flat .pp-member-card__photo::after {
  inset: 0 0 0 auto;
  width: 38%;
  height: auto;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.pp-members-flat .pp-member-card__body {
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
}

.pp-members-flat .pp-member-card__tagline {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
}

/* ---- 구성원 상세 모달 ---- */
.pp-member-modal__top {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.pp-member-modal__photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #FDF0F3 0%, #F7E9EE 100%);
  box-shadow: var(--shadow-float);
}

.pp-member-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-member-modal__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.pp-member-modal__info .pp-role-chip {
  height: 26px;
  padding: 0 13px;
  font-size: 13px;
}

.pp-member-modal__name {
  font-size: 29px;
  font-weight: 800;
  color: var(--text-main);
}

.pp-member-modal__divider {
  width: 44px;
  height: 1px;
  background: var(--gray-300);
  margin: 6px 0; /* info gap 12px과 합쳐 이름·설명 양쪽 18px 간격 */
}

.pp-member-modal__tagline {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-sub);
}

.pp-member-modal__career-head {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.pp-member-modal__career-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--pp-border);
}

/* 자유 서술 textarea 값 — 개행만 보존해 그대로 보여준다(목록 구조 가정 금지) */
.pp-member-modal__career {
  margin-top: 16px;
  max-height: 300px;
  overflow-y: auto;
  padding: 18px 20px;
  background: var(--gray-50);
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.9;
  color: var(--gray-600);
}

/* ================================================
   프로젝트 진행 후기
   ================================================ */
.pp-projects-wrap {
  position: relative;
}

/* 카드 사이 간격 24 — 기본 거터(10)보다 넓다 */
.pp-projects-wrap > .swiper { --dt-carousel-gutter: 12px; }

.pp-project-card {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

.pp-project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.pp-project-card__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

/* 두 장이 한 덩어리로 읽혀야 한다 — 라운드는 슬라이드가 아니라 바깥 틀만 가지고,
   가운데 실금은 슬라이드 간격으로 낸다. 어느 슬라이드가 보이든 좌우 끝만 둥글어진다. */
.pp-project-card__media .swiper-slide {
  width: calc(50% - 2px);
  aspect-ratio: 5 / 4;
}

.pp-project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 한 장 = 두 장(5:4 × 2)과 같은 높이의 가로 띠 */
.pp-project-card__media--single { aspect-ratio: 5 / 2; }

/* 사진 없는 글 — 본문이 남은 높이를 가운데서 인용문처럼 채운다(같은 높이 틀 안에서 빈 흰 바닥이 남지 않게) */
.pp-project-card--text .pp-project-card__text {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  text-align: center;
  font-size: 17px;
  line-height: 1.9;
  color: var(--text-main);
}

.pp-project-card--text .pp-project-card__text::before {
  content: '\201C';
  position: absolute;
  top: 0;
  left: 8px;
  font-size: 80px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--gray-200);
}

/* 사진 위에 얹히는 네비 — 보더 대신 그림자로 사진에서 떠 있게 한다 */
.pp-project-card__media .pp-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-hero-ctrl);
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: var(--gray-600);
  box-shadow: var(--shadow-fab);
}

.pp-project-card__media .pp-nav-btn:hover { background: #FFFFFF; color: var(--text-main); }
.pp-project-card__media .pp-nav-btn.is-prev { left: 10px; }
.pp-project-card__media .pp-nav-btn.is-next { right: 10px; }

/* 제목과 날짜가 한 줄 — 제목이 두 줄로 접혀도 날짜는 첫 줄 오른쪽에 남는다 */
.pp-project-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pp-project-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
}

.pp-project-card__program {
  font-size: 13px;
  color: var(--text-desc);
}

.pp-project-card__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-sub);
}

.pp-project-card__date {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-desc);
}

/* ================================================
   리뷰 + 만족도 지표
   ================================================ */
/* 배치 전용 — 이력 그리드와 같은 규칙: 여백은 바깥 섹션이, 판은 각자 뜬다 */
.pp-reviews-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 3.5fr);
  gap: var(--gap-section);
}

/* 리뷰 0건 — 지표 카드가 빠지고 빈 상태 카드 하나가 전폭을 쓴다 */
.pp-reviews-grid--empty { grid-template-columns: 1fr; }

.pp-reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 20px 52px;
  text-align: center;
}

.pp-reviews-empty__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--gray-400);
  font-size: 26px;
}

.pp-reviews-empty__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.pp-reviews-empty__desc {
  margin-top: -6px; /* 제목-설명 간격 6px = 부모 gap 12 − 6 */
  font-size: 13px;
  color: var(--text-desc);
}

.pp-reviews__summary {
  padding: 20px 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pp-reviews__score-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pp-reviews__score-row .pp-stars { font-size: 26px; gap: 6px; }

.pp-reviews__score {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
}

.pp-stars {
  display: flex;
  gap: 3px;
  color: var(--accent-star);
  font-size: 18px;
}

.pp-stars--sm { font-size: 12px; gap: 2px; }
.pp-stars .is-off { color: var(--gray-200); }

.pp-reviews__satisfied {
  font-size: 18px;
  color: var(--text-desc);
}

.pp-review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pp-review-card {
  background: var(--gray-50);
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* 작성자·프로젝트명은 한 덩어리로 남은 폭을 쓰고, 별·날짜는 첫 줄 높이에 고정된다 */
.pp-review-card__who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-review-card__author {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
}

.pp-review-card__event {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-desc);
  overflow-wrap: anywhere;
}

.pp-review-card__head .pp-stars {
  flex-shrink: 0;
  line-height: 21px;
}

.pp-review-card__date {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-desc);
  white-space: nowrap;
}

.pp-review-card--hidden {
  background: #FFFFFF;
  border-style: dashed;
}

.pp-review-card--hidden .pp-review-card__author,
.pp-review-card--hidden .pp-stars { opacity: 0.45; }

.pp-review-card__hidden {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-desc);
}

.pp-review-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
  overflow-wrap: anywhere;
}

.pp-review-card__reply {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-review-card__reply-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.pp-review-card__reply-head i {
  font-size: 11px;
  color: var(--gray-400);
}

.pp-review-card__reply-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-sub);
  overflow-wrap: anywhere;
}

/* ---- 만족도 지표 ---- */
.pp-metrics { gap: 33px; }

/* 지표명·질문은 판 위에 그대로 서고, 박스는 수치(퍼센트·평균·바)만 감싼다 */
.pp-metric {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-metric__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-metric__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-main);
}

.pp-metric__question {
  font-size: 12px;
  color: var(--text-desc);
}

.pp-metric__gauge {
  background: var(--gray-50);
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-metric__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pp-metric__percent {
  font-size: 16px;
  font-weight: 500;
  color: var(--pp-metric-accent);
}

.pp-metric__avg {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
}

.pp-metric__avg strong { font-weight: inherit; color: var(--pp-metric-accent); }

.pp-metric__bar {
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  overflow: hidden;
}

.pp-metric__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--pp-metric-accent);
}

/* 색은 응답자 평균 등급이 정한다 — 키는 PartnerDetailPage::METRIC_AVG_GRADES의 tone과 쌍이다 */
.pp-metric--bad   { --pp-metric-accent: var(--accent-red); }
.pp-metric--sad   { --pp-metric-accent: var(--accent-orange); }
.pp-metric--soso  { --pp-metric-accent: var(--accent-purple); }
.pp-metric--good  { --pp-metric-accent: var(--accent-green); }
.pp-metric--great { --pp-metric-accent: var(--accent-blue); }

/* ---- 전체 리뷰 모달 ---- */
.pp-review-modal__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  margin-bottom: 20px;
}

.pp-review-modal__score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pp-histogram {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-histogram__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-histogram__label {
  flex-shrink: 0;
  width: 26px;
  font-size: 13px;
  color: var(--text-sub);
}

.pp-histogram__bar {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  overflow: hidden;
}

.pp-histogram__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent-blue);
}

.pp-histogram__count {
  flex-shrink: 0;
  width: 44px;
  text-align: right;
  font-size: 13px;
  color: var(--text-sub);
}

/* 별점 필터 줄 — 요약과 목록 사이에 고정으로 남는다(스크롤 주인은 목록 하나뿐) */
.pp-filter-chips {
  padding: 4px 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-full);
  background: #FFFFFF;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--ease-default);
}

.pp-filter-chip span { font-weight: 500; color: var(--text-desc); }
.pp-filter-chip:hover { border-color: var(--gray-400); color: var(--text-main); }

.pp-filter-chip.is-active {
  background: var(--text-main);
  border-color: var(--text-main);
  color: var(--on-primary);
}

.pp-filter-chip.is-active span { color: rgba(255, 255, 255, 0.7); }

.pp-review-modal__empty {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-desc);
}

/* 리뷰 목록이 주인공인 모달 — 공용 상한(80vh)보다 세로를 더 쓴다 */
[data-ui-modal="pp-reviews"] .ui-modal { max-height: 92vh; }

/* 평점 요약은 제자리에 남고 목록만 스크롤한다 — 스크롤 주인은 목록 하나뿐이고,
   높이는 셸이 정한 가용 공간을 flex로 받는다(고정 px 없음: 화면이 크면 더 많이 보인다). */
[data-ui-modal="pp-reviews"] .ui-modal__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pp-review-modal__list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ================================================
   반응형
   ================================================ */
@media (max-width: 1024px) {
  .pp-hero__grid { grid-template-columns: 1fr; }
  .pp-reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pp-history-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-history-card--wide { grid-column: auto; }
}

@media (max-width: 768px) {
  .pp-hero { padding-top: 48px; }
  .pp-hero__panel {
    width: calc(100% - 24px);
    padding: 24px 20px 28px;
    border-radius: 24px 24px 0 0;
    gap: 20px;
  }
  .pp-hero__name { font-size: 26px; }
  /* 1fr은 minmax(auto, 1fr)라 줄바꿈 없는 자식의 최소 폭이 트랙을 카드 밖으로 민다 — 0 하한을 명시한다 */
  .pp-program { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .pp-program__title-row { flex-wrap: wrap; gap: 6px 12px; padding-right: 0; }
  .pp-program__title { flex-basis: 100%; font-size: 18px; }
  .pp-stats { gap: 10px; }
  .pp-stat { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .pp-stat__icon { width: 36px; height: 36px; font-size: 14px; }
  .pp-stat__label { font-size: 12px; }
  .pp-stat__value { font-size: 15px; }
  .pp-history-card,
  .pp-reviews__main,
  .pp-metrics { padding: 20px; gap: 16px; }
  .pp-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 10px; padding: 14px 16px; }
  .pp-history-row__text { white-space: normal; line-height: 26px; }
  .pp-history-row__year { grid-area: 1 / 2; width: auto; line-height: 26px; }
  .pp-event-chip { grid-column: 1; justify-self: start; padding: 4px 8px; font-size: 12px; }
  .pp-review-card__head { flex-wrap: wrap; }
  .pp-review-card__who { flex-basis: 100%; }
  .pp-intro--aside { grid-template-columns: 1fr; gap: 20px; }
  .pp-members-flat--pair { grid-template-columns: 1fr; }
  .pp-member-modal__top { grid-template-columns: 1fr; }
  .pp-review-modal__summary { grid-template-columns: 1fr; }
}