/* 프로그램 상세(pgd-*) — 프로그램 고유 섹션만. 섹션 골격은 detail-shared.css(dt-*)가,
   버튼·칩·배지·카드 어법은 partner-detail.css(pp-*)가 한 벌로 소유한다.
   여기서는 pp 토큰(--pp-border, --pp-card-radius, --accent-*)만 소비하고 새 팔레트를 만들지 않는다. */

/* ================================================
   히어로 — 배경 없는 센터 스테이지 (타이틀 → 칩 → 커버플로우 미디어 → 가격·문의 바)
   ================================================ */
.pgd-hero {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pgd-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 var(--container-px);
  text-align: center;
}

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

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

.pgd-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px; /* 머리글 리듬(gap 12) 위에 칩 줄만 한 뼘 더 — 총 20px */
}

.pgd-chip--like { cursor: pointer; }
.pgd-chip--like:disabled { cursor: default; }
.pgd-chip--like .pgd-chip__count { font-weight: 700; }

.pgd-chip--like.liked {
  --pp-chip-accent: var(--accent-red);
  --pp-chip-accent-soft: var(--accent-red-soft);
  color: var(--accent-red);
}

/* ── 커버플로우 미디어 — 원근 회전·측면 어둡기는 Swiper coverflow가 건다. 여기는 판 크기와 표면만 ── */
.pgd-hero-stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pgd-hero-slide {
  position: relative;
  width: min(1080px, calc(100vw - 48px));
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #10131A;
}

.pgd-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pgd-hero-stage__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pgd-hero-stage__count {
  /* Swiper가 fraction 페이저에 swiper-pagination-fraction(width:100%)을 붙인다 — 되돌리지 않으면
     카운트가 줄 전체를 차지해 양옆 버튼이 화면 끝으로 밀린다 */
  width: auto;
  font-size: 13px;
  color: var(--text-desc);
}

.pgd-hero-stage__count .swiper-pagination-current {
  color: var(--text-main);
  font-weight: 600;
}

/* ── 가격·문의 바 — 슬라이더 판과 같은 폭의 단일 카드, 공지는 하단 행 ── */
.pgd-hero-bar {
  /* 슬라이더 가운데 판(.pgd-hero-slide)과 같은 폭 — 한쪽만 바꾸면 어긋난다 */
  width: min(1080px, calc(100% - var(--container-px) * 2));
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: var(--pp-card-radius);
  box-shadow: var(--shadow-float);
}

.pgd-hero-bar__main {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
}

.pgd-hero-bar__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-blue-soft);
  color: var(--accent-blue);
  font-size: 17px;
}

.pgd-hero-bar__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

.pgd-hero-bar__label {
  font-size: 12px;
  color: var(--text-desc);
}

.pgd-hero-bar__amount {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent-red);
}

.pgd-hero-bar__amount small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-desc);
}

.pgd-hero-bar__config {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
}

.pgd-hero-bar__ask {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.pgd-hero-bar__ask-desc {
  font-size: 13px;
  color: var(--text-desc);
}

.pgd-hero-bar__options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--gray-50);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  transition: background var(--ease-default), color var(--ease-default);
}

.pgd-hero-bar__options:hover {
  background: var(--gray-100);
  color: var(--text-main);
}

.pgd-hero-bar__options i { font-size: 12px; }

.pgd-hero-bar__sep {
  width: 1px;
  height: 26px;
  background: var(--pp-border);
  flex-shrink: 0;
}

.pgd-hero-bar__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pgd-hero-bar .pp-page-notice {
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--pp-border);
  padding: 12px 28px;
}

/* ── 섹션 탭 띠 — 평소엔 히어로 아래 제자리, 헤더에 닿으면 고정되어 따라온다 ── */

/* 처음부터 풀블리드 흰 밴드 — 히어로와 본문 섹션을 가르는 구분선.
   붙는 순간엔 오버슈트 이징으로 높이가 한 번 눌렸다 돌아오며 쫀득하게 조여진다 */
.pgd-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-content) + 1);
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 var(--pp-border), inset 0 -1px 0 var(--pp-border);
  transition: box-shadow var(--ease-default);
}

.pgd-tabs__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 var(--container-px);
  overflow-x: auto;
}

.pgd-tabs__link {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 18px;
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease-default),
    height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    font-size 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pgd-tabs__link:hover { color: var(--text-main); }

.pgd-tabs__link.is-active {
  color: var(--text-main);
  font-weight: 700;
  border-bottom-color: var(--action-blue);
}

.pgd-tabs.is-stuck {
  box-shadow: inset 0 -1px 0 var(--pp-border), 0 12px 28px rgba(23, 30, 46, 0.07);
}

.pgd-tabs.is-stuck .pgd-tabs__link {
  height: 50px;
  font-size: 14px;
}

/* 헤더 몫은 html의 scroll-padding-top이 이미 비켜 준다 — 여기는 탭 띠 높이만 더한다.
   붙은 뒤의 50이 아니라 제자리 높이 64다 — 띠가 붙으며 14px 줄면 아래 문서가 그만큼 올라와, 50으로 잡으면 섹션 머리가 띠에 덮인다 */
.pp:has(.pgd-tabs) :is(.dt-section, .dt-group) { scroll-margin-top: 64px; }

@media (max-width: 860px) {
  .pgd-hero__name { font-size: 26px; }
  .pgd-hero-bar__main { flex-wrap: wrap; }
  .pgd-hero-bar__sep { display: none; }
}

/* ── 장르 크럼 칩 (pp-chip 확장) ── */
.pgd-chip--crumb {
  --pp-chip-accent: var(--accent-purple);
  --pp-chip-accent-soft: var(--accent-purple-soft);
  color: var(--accent-purple);
}

.pgd-chip--crumb a {
  color: inherit;
  text-decoration: none;
}

.pgd-chip--crumb a:hover { text-decoration: underline; }

.pgd-chip__sep {
  font-size: 10px;
  opacity: 0.5;
}

/* ================================================
   프로그램 소개 — 좌 본문(설명+태그) / 우 파트너·진행 이력 카드
   ================================================ */
.pgd-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 32px 48px;
  align-items: start;
}

.pgd-intro-grid__main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.pgd-intro-grid__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pgd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 48px;
}

.pgd-tags__group {
  --pgd-tag-accent: var(--accent-blue);
  --pgd-tag-accent-soft: var(--accent-blue-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pgd-tags__group--blue   { --pgd-tag-accent: var(--accent-blue);   --pgd-tag-accent-soft: var(--accent-blue-soft); }
.pgd-tags__group--purple { --pgd-tag-accent: var(--accent-purple); --pgd-tag-accent-soft: var(--accent-purple-soft); }
.pgd-tags__group--green  { --pgd-tag-accent: var(--accent-green);  --pgd-tag-accent-soft: var(--accent-green-soft); }
.pgd-tags__group--teal   { --pgd-tag-accent: var(--accent-teal);   --pgd-tag-accent-soft: var(--accent-teal-soft); }
.pgd-tags__group--orange { --pgd-tag-accent: var(--accent-orange); --pgd-tag-accent-soft: var(--accent-orange-soft); }
.pgd-tags__group--pink   { --pgd-tag-accent: var(--accent-pink);   --pgd-tag-accent-soft: var(--accent-pink-soft); }

.pgd-tags__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-desc);
}

.pgd-tags__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 카드 속 미니 태그(9px)를 이 문맥만 읽기 크기 + 그룹별 파스텔로 */
.pgd-tags .pp-tag,
.pgd-tags-modal .pp-tag {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 13px;
  background: var(--pgd-tag-accent-soft);
  color: var(--pgd-tag-accent);
}

/* 펼침 한도를 넘으면 마지막 칩 뒤에 서는 알약 — 칩과 같은 32px 줄 */
.pgd-tags__more {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  transition: all var(--ease-default);
}

.pgd-tags__more i { font-size: 11px; }

.pgd-tags__more:hover {
  background: var(--action-blue-hover);
  transform: var(--cta-hover-lift);
}

.pgd-tags-modal {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
}

.pgd-tags-modal__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
}

.pgd-tags-modal__group + .pgd-tags-modal__group { border-top: 1px solid var(--pp-border); }

.pgd-tags-modal__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.pgd-tags-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 24px;
  border: 1.5px dashed var(--pp-border);
  border-radius: var(--pp-card-radius);
  text-align: center;
}

.pgd-tags-empty__icon {
  font-size: 22px;
  color: var(--text-desc);
  opacity: 0.6;
}

.pgd-tags-empty__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
}

.pgd-tags-empty__desc {
  font-size: 13px;
  color: var(--text-desc);
}

/* 소개 시트 안의 아이템 — 표면은 아이템 어휘(테두리, 무그림자)를 따른다. 그림자는 섹션(--sheet)만 */
/* 사이드 두 카드는 같은 화살표 칩을 달고 나란히 서므로 같은 행동(카드 전체 클릭 + 리프트)이어야 한다 */
.pgd-partner-card,
.pgd-history-card {
  background: #FFFFFF;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-xl);
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

.pgd-partner-card:hover,
.pgd-history-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.pgd-partner-card {
  background: var(--gray-50);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  text-decoration: none;
}

.pgd-side-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
}

.pgd-partner-card__avatar {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-blue-soft);
}

.pgd-partner-card__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-right: 30px;
}

.pgd-partner-card__name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  word-break: keep-all;
}

.pgd-partner-card__tagline {
  font-size: 14px;
  color: var(--text-sub);
  word-break: keep-all;
}

.pgd-partner-card__badges {
  margin-top: 6px;
}

.pgd-history-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
}

/* 링크가 카드 전체를 덮는다 — 행은 전부 span이라 안에 다른 링크가 없다 */
.pgd-history-card__link {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
}

.pgd-history-card__head {
  display: flex;
  align-items: center;
}

.pgd-history-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--action-blue);
}

.pgd-history-card__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pgd-history-card__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
}

.pgd-history-card__row + .pgd-history-card__row {
  border-top: 1px solid var(--pp-border);
}

.pgd-history-card__check {
  font-size: 13px;
  color: var(--action-blue);
}

.pgd-history-card__year {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.pgd-history-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-sub);
}

@media (max-width: 1000px) {
  .pgd-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================
   구성 및 예상 가격 — [기본 금액 + 출장비 판 묶음] + [선택 옵션 판] = 합계 카드(흰색·그림자), 아랫줄은 면책 띠 + 문의 버튼
   ================================================ */
.pgd-calc {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 0.85fr;
  gap: 20px;
  align-items: stretch;
  word-break: keep-all; /* 좁은 판에서 한글 라벨이 글자 단위로 꺾이지 않게 — 어절 단위로만 */
}

.pgd-calc__stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pgd-calc__stack .pgd-calc__group { flex: 1 1 auto; }

.pgd-calc__op {
  align-self: center;
  color: var(--gray-300);
  font-size: 30px;
  font-weight: 700;
}

/* rgba 기준색: 파랑 --accent-blue(#2563EB), 초록 --accent-green(#12B76A) */
/* 입력 판은 제목 밴드만 틴트, 본문은 흰색 — 판 전체 틴트는 합계 카드의 것 */
.pgd-calc__group {
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
  border: 1px solid var(--pgd-calc-line);
  border-radius: 16px;
  background: #FFFFFF;
}

.pgd-calc__group--base,
.pgd-calc__group--travel {
  --pgd-calc-accent: var(--accent-blue);
  --pgd-calc-line: rgba(37, 99, 235, 0.16);
  --pgd-calc-tint: rgba(37, 99, 235, 0.07);
}

.pgd-calc__group--option {
  --pgd-calc-accent: var(--accent-green);
  --pgd-calc-line: rgba(18, 183, 106, 0.22);
  --pgd-calc-tint: rgba(18, 183, 106, 0.08);
}

.pgd-calc__group--summary {
  --pgd-calc-accent: var(--accent-blue);
  --pgd-calc-line: rgba(37, 99, 235, 0.16);
  --pgd-calc-tint: rgba(37, 99, 235, 0.06);
  background: var(--pgd-calc-tint);
  box-shadow: var(--shadow-float);
}

/* 판 패딩을 음수 마진으로 뚫어 밴드가 가장자리까지 닿는다 — radius는 판 16 - 테두리 1 */
.pgd-calc__group-title {
  margin: 0 -24px;
  padding: 16px 24px 14px;
  border-radius: 15px 15px 0 0;
  border-bottom: 1px solid var(--pgd-calc-line);
  background: var(--pgd-calc-tint);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  color: var(--pgd-calc-accent);
}

.pgd-calc__group--summary .pgd-calc__group-title {
  padding: 22px 24px 8px;
  border-bottom: 0;
  background: transparent;
}

.pgd-calc__items {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.pgd-calc__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

/* 금액 행 — 입력 행들과 점선으로 가른다 */
.pgd-calc__item--sum {
  margin-top: 6px;
  padding: 20px 0 0;
  border-top: 1px dashed var(--pgd-calc-line);
}

/* 선택 옵션 판은 이웃 칸 높이만큼 늘어난다 — 남는 높이는 입력 행과 금액 행 사이로 가고 금액 행은 판 바닥에 붙는다 */
.pgd-calc__group--option .pgd-calc__items { flex: 1 1 auto; }

.pgd-calc__group--option .pgd-calc__item--sum { margin-top: auto; }

/* 가를 입력 행이 없는 판(기본 금액)의 금액 행 */
.pgd-calc__item--sole {
  margin-top: 0;
  padding-top: 14px;
  border-top: 0;
}

.pgd-calc__check {
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--pgd-calc-accent) 12%, #FFFFFF);
  font-size: 11px;
  color: var(--pgd-calc-accent);
}

.pgd-calc__item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pgd-calc__item-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.pgd-calc__item-sub {
  font-size: 12.5px;
  color: var(--text-desc);
}

.pgd-calc__item-amount {
  min-width: 110px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
  white-space: nowrap;
}

.pgd-calc__item-amount--price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 17px;
  color: var(--accent-red);
}

.pgd-calc__item-amount.is-muted { color: var(--text-desc); }

.pgd-calc__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 32px 0 8px;
  font-size: 15px;
  color: var(--text-desc);
}

.pgd-calc__empty i {
  font-size: 28px;
  color: var(--gray-300);
}

/* 시간·인원 select(Tom Select 스킨)와 지역 선택 버튼은 같은 상자 어법 — 왼쪽 판 색 아이콘, 오른쪽 값·캐럿 */
.pgd-calc__control,
.pgd-calc__region {
  flex: 0 0 min(180px, 56%);
  min-width: 0;
}

.pgd-calc__control { position: relative; }

/* z-index 2 — Tom Select 스킨의 .ts-control이 z-index 1이라 그 아래면 아이콘이 가려진다 */
.pgd-calc__control > i {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
}

.pgd-calc__control > i:first-child {
  left: 14px;
  font-size: 15px;
  color: var(--pgd-calc-accent);
}

.pgd-calc__control-caret {
  right: 12px;
  font-size: 11px;
  color: var(--gray-500);
}

/* 오른쪽 여백은 Tom Select가 !important 변수식(max(--ts-pr-min, --ts-pr-clear-button + --ts-pr-caret))으로 계산한다
   — padding-right를 직접 쓰면 무시되고, 변수 하나라도 단위 없는 0이면 식이 무효라 0으로 떨어진다 */
.pgd-calc .ts-control {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 28px;
  justify-content: flex-end;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 36px;
  border-color: var(--pp-border);
  font-weight: 700;
  color: var(--text-main);
}

/* 지역 선택 트리거 — 누르면 pgd-region 모달이 뜬다 */
.pgd-calc__region {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px; /* Tom Select 스킨(.ts-control)과 같은 모서리 */
  border: 1px solid var(--pp-border);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  transition: border-color var(--ease-default), color var(--ease-default);
}

.pgd-calc__region:hover {
  border-color: var(--gray-400);
  color: var(--text-main);
}

.pgd-calc__region > .fa-location-dot { font-size: 15px; color: var(--pgd-calc-accent); }

.pgd-calc__region > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.pgd-calc__region-caret { font-size: 11px; color: var(--gray-500); }

.pgd-calc__region.is-set { color: var(--text-main); }

.pgd-calc__group--option [data-pgd-equipment-picker] {
  --eqp-accent: var(--pgd-calc-accent);
  --eqp-line: var(--pgd-calc-line);
  --eqp-tint: var(--pgd-calc-tint);
  padding: 4px 0 2px;
}

.pgd-calc__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--accent-blue-soft);
  font-size: 13.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent-blue) 70%, var(--text-main));
}

.pgd-calc__note i { font-size: 16px; color: var(--accent-blue); }

.pgd-calc__total-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 20px;
  border-bottom: 1px solid var(--pgd-calc-line);
}

.pgd-calc__total {
  font-size: 32px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--accent-red);
  white-space: nowrap;
}

.pgd-calc__total--empty {
  font-size: 16px;
  color: var(--text-main);
}

.pgd-calc__total-vat {
  font-size: 13px;
  color: var(--text-desc);
}

.pgd-calc__sums {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}

.pgd-calc__sum-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.pgd-calc__sum-row dt { color: var(--text-sub); }

.pgd-calc__sum-row dd {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}

/* 아랫줄 — 면책 띠는 입력 판 두 개(+ 연산자) 폭, 문의 버튼은 합계 카드 폭.
   면책 문구는 협의 전 확정가로 오해하면 분쟁이 된다는 기획 요구로 반드시 노출 */
/* 좁은 폭에선 안내가 제목을 두 줄로 누르지 않고 제목 아래로 내려간다 */
.pgd-pricing-head { flex-wrap: wrap; }

.pgd-pricing-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--accent-orange-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold);
  word-break: keep-all;
}

/* 합계 칸 = 합계 카드 + 문의 버튼 두 줄 — 버튼이 계산기 아래 줄을 따로 먹지 않고 카드와 칸 높이를 나눈다 */
.pgd-calc__summary-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-calc__summary-col .pgd-calc__group--summary { flex: 1 1 auto; }

.pgd-calc__actions {
  display: grid;
  gap: 8px;
}

/* 전역 알약 pp-btn을 카드 로컬로만 사각 라운드 + 파랑 외곽 보조로 뒤집는다 */
.pgd-calc__actions .pp-btn {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
}

/* 잠금 상태는 버튼이 툴팁 래퍼(래퍼>트리거>버튼)에 싸인다 — 트리거가 20px 고정폭이라 래퍼 폭을 이어받게 편다 */
.pgd-calc__actions .ui-tooltip__trigger { flex: 1; }

.pgd-calc__actions .pp-btn--outline {
  border-color: var(--primary);
  color: var(--primary);
}

.pgd-calc__actions .pp-btn--outline:hover {
  border-color: var(--action-blue-hover);
  background: var(--accent-blue-soft);
}

@media (max-width: 1000px) {
  .pgd-calc { grid-template-columns: 1fr; }
  .pgd-calc__op { justify-self: center; }
}

/* 하단 고정 가격 바 — 화면 폭 전체를 가로지르고 내용물은 히어로 바와 같은 1080 컨테이너에 정렬.
   가격 섹션을 지나치면 올라오고 섹션이 보이면 내려간다 */
.pgd-pricebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  background: #FFFFFF;
  border-top: 1px solid var(--pp-border);
  /* 토큰 그림자는 전부 아래 방향 — 바닥에 붙은 바는 위로 번져야 떠 보인다 */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--ease-default), visibility 0s linear 0.3s;
}

.pgd-pricebar.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.pgd-pricebar__inner {
  width: min(1080px, calc(100% - var(--container-px) * 2));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
}

.pgd-pricebar__title {
  margin-right: auto;
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.pgd-pricebar__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.pgd-pricebar__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--action-blue);
}

.pgd-pricebar__amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-red);
}

.pgd-pricebar__amount--empty {
  font-size: 16px;
  color: var(--text-sub);
}

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

.pgd-pricebar__cta {
  display: flex;
  gap: 8px;
}

.pgd-pricebar__open {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-main);
  font-size: 16px;
  transition: background var(--ease-default);
}

.pgd-pricebar__open:hover { background: var(--gray-100); }

.pgd-pricebar__open i { transition: transform var(--ease-default); }
.pgd-pricebar.is-open .pgd-pricebar__open i { transform: rotate(180deg); }

/* 펼침 상태 — 바가 그 자리에서 섹션 카드로 자란다(bottom 고정이라 높이가 늘면 위로 커진다).
   머리글 행은 제목 + 면책 문구 + ▼ 만 남기고 금액·문의 버튼은 본문 카드가 대신한다 */
.pgd-pricebar__desc {
  display: none;
  margin-right: auto;
  font-size: 14px;
  color: var(--text-sub);
}

.pgd-pricebar.is-open .pgd-pricebar__title { margin-right: 0; }
.pgd-pricebar.is-open .pgd-pricebar__desc { display: block; }
.pgd-pricebar.is-open .pgd-pricebar__price,
.pgd-pricebar.is-open .pgd-pricebar__cta { display: none; }

/* 높이 전환은 0fr↔1fr — 본문 높이를 재지 않아도 된다. 스크롤 상자는 화면 폭 전체(clip)여야
   스크롤바가 뷰포트 가장자리에 붙고, 스크롤바 폭이 1080 컨테이너(inner)를 깎지 않는다 */
.pgd-pricebar__sheet {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--ease-default), visibility 0s linear 0.2s;
}

.pgd-pricebar.is-open .pgd-pricebar__sheet {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.pgd-pricebar__sheet-clip {
  min-height: 0;
  max-height: 70vh;
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* 스크롤은 전환이 끝난 뒤에만 — 자라는 동안 내용이 상자보다 커서 스크롤바가 떴다 사라진다(detail.js is-settled) */
.pgd-pricebar.is-settled .pgd-pricebar__sheet-clip { overflow-y: auto; }

.pgd-pricebar__sheet-inner {
  width: min(1080px, calc(100% - var(--container-px) * 2));
  margin: 0 auto;
  padding: 0 0 28px;
}

/* 바가 떠 있는 동안 플로팅 스택(챗봇·상단이동)을 바 위로 — 바 높이 69 + 원래 여백 24 */
body.has-pgd-pricebar .floating-actions { bottom: 93px; }

@media (max-width: 720px) {
  .pgd-pricebar__inner { flex-wrap: wrap; gap: 8px 12px; padding: 10px 0 12px; }
  .pgd-pricebar__amount { font-size: 19px; }
  .pgd-pricebar__open { width: 32px; height: 32px; }
  .pgd-pricebar__cta { order: 1; flex-basis: 100%; }
  .pgd-pricebar__cta > * { flex: 1; }
  .pgd-pricebar__cta .ui-tooltip__trigger { flex: 1; }
  .pgd-pricebar__cta .pp-btn { width: 100%; }
  /* 두 줄 바 높이 102(10 + 32 + 8 + 40 + 12) + 16(플로팅 스택의 640 이하 여백 — 641~720도 같은 값을 쓴다) */
  body.has-pgd-pricebar .floating-actions { bottom: 118px; }
  .pgd-pricebar__title,
  .pgd-pricebar__vat,
  .pgd-pricebar.is-open .pgd-pricebar__desc { display: none; }
  .pgd-pricebar__price { margin-right: auto; }
  .pgd-pricebar.is-open .pgd-pricebar__title { display: block; margin-right: auto; }
}

/* ── 출장 경비 확인 모달 — 검색 카드(입력 + 최근검색) 아래 결과 목록.
   행 = 라디오(현재 선택 표시) · 이름 · 금액 · [포함 지역 확인] · 선택 ── */
/* 출장 경비 확인 모달 — 검색창은 고정, 결과 목록만 안에서 스크롤(.ui-modal-overlay--agreement와 같은 flex 셸 위임) */
.pgd-fee-modal .ui-modal__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pgd-fee {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pgd-fee__search {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-fee__search-row {
  display: flex;
  gap: 8px;
}

.pgd-fee__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--pp-border);
  border-radius: 10px;
  background: #FFFFFF;
  transition: border-color var(--ease-default), box-shadow var(--ease-default);
}

.pgd-fee__field:focus-within {
  border-color: var(--action-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

.pgd-fee__field > .fa-location-dot { font-size: 15px; color: var(--action-blue); }

.pgd-fee__field input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--text-main);
  border: 0;
  outline: 0;
  background: transparent;
}

.pgd-fee__field input::placeholder { color: var(--gray-400); }
.pgd-fee__field input::-webkit-search-cancel-button { display: none; }

.pgd-fee__clear {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 15px;
  color: var(--gray-500);
}

.pgd-fee__clear:hover { background: var(--gray-100); color: var(--text-main); }

.pgd-fee__submit {
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 15px;
}

.pgd-fee__recent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pgd-fee__recent-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

.pgd-fee__recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pgd-fee__recent-list .pp-chip {
  --pp-chip-accent-soft: var(--gray-50);
  height: 28px;
  font-weight: 600;
  color: var(--text-sub);
}

.pgd-fee__recent-list .pp-chip:hover { --pp-chip-accent: var(--gray-400); color: var(--text-main); }

.pgd-fee__results {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-fee__results-lead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px;
}

.pgd-fee__results-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.pgd-fee__count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.pgd-fee__results-desc {
  font-size: 13.5px;
  color: var(--text-sub);
}

.pgd-fee__list {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: #FFFFFF;
}

.pgd-fee__row + .pgd-fee__row { border-top: 1px solid var(--gray-100); }

/* 열 고정 그리드 — 지역 행은 펼침 버튼이 없어도(JS가 떼어 냄) 금액·선택 열이 권역 행과 같은 x에 선다 */
.pgd-fee__row-main {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto 118px auto;
  align-items: center;
  column-gap: 16px;
  min-height: 56px;
  padding: 8px 12px 8px 20px;
  cursor: pointer;
  transition: background-color var(--ease-default);
}

/* 예외지역 행은 바로 위 권역 행에 딸린다 — 들여쓰기가 소속을 드러낸다 */
.pgd-fee__row--override .pgd-fee__row-main { padding-left: 44px; }

.pgd-fee__row-main:hover { background: var(--gray-50); }
.pgd-fee__row.is-selected .pgd-fee__row-main { background: var(--accent-blue-soft); }

.pgd-fee__radio {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--gray-400);
  border-radius: var(--radius-full);
  background: #FFFFFF;
  transition: border-color var(--ease-default), background-color var(--ease-default);
}

.pgd-fee__row.is-selected .pgd-fee__radio {
  border-color: var(--action-blue);
  background: var(--action-blue);
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

.pgd-fee__name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 4px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-main);
}

.pgd-fee__name small { font-size: 12.5px; font-weight: 500; color: var(--text-desc); }
.pgd-fee__name small:empty { display: none; }

.pgd-fee__amount {
  grid-column: 3;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--accent-red);
  white-space: nowrap;
}

.pgd-fee__amount.is-zero { font-size: 13.5px; font-weight: 500; color: var(--text-desc); }

/* 권역 행에만 있는 펼침 — 지역 행은 JS가 버튼을 떼어 낸다 */
.pgd-fee__regions-toggle {
  grid-column: 4;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-sub);
  white-space: nowrap;
}

.pgd-fee__regions-toggle:hover { color: var(--text-main); }
.pgd-fee__regions-toggle > i { font-size: 11px; transition: transform var(--ease-default); }
.pgd-fee__regions-toggle[aria-expanded="true"] { color: var(--action-blue); }
.pgd-fee__regions-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }

.pgd-fee__pick {
  grid-column: 5;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 14px;
}

.pgd-fee__regions {
  padding: 12px 20px 14px 52px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-sub);
  word-break: keep-all;
}

.pgd-fee__empty {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-desc);
}

.pgd-fee__reset { font-size: 13.5px; }

@media (max-width: 720px) {
  .pgd-fee__submit { display: none; } /* 입력 중 즉시 추려지고 키보드 검색 키(enterkeyhint)가 제출을 대신한다 */
  .pgd-fee__row-main { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 8px; padding: 12px 14px; }
  .pgd-fee__name { grid-column: 2; }
  .pgd-fee__amount { grid-column: 2; justify-self: start; }
  .pgd-fee__regions-toggle { grid-column: 3; }
  .pgd-fee__pick { grid-column: 3; grid-row: 1; }
  .pgd-fee__regions { padding-left: 14px; }
}

/* ================================================
   악기 및 장비 구성 — 원형 포토 캐러셀 (머리글 우측에 안내문+페이저)
   ================================================ */
.pgd-instruments__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px; /* 페이저 버튼 쌍과 문장 사이만 한 뼘 더 — 총 16px */
  font-size: 12.5px;
  color: var(--text-desc);
}

.pgd-instruments__note i { font-size: 14px; color: var(--gray-400); }

.pgd-instrument {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.pgd-instrument__photo {
  width: min(100%, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-100);
}

.pgd-instrument__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pgd-instrument__body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pgd-instrument__name-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.pgd-instrument__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
}

.pgd-instrument__badge {
  flex: none;
  min-width: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: var(--accent-green-soft);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-green);
}

.pgd-instrument__tagline {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--text-desc);
}

.pgd-instrument[data-ui-modal-open] { cursor: pointer; }
.pgd-instrument__photo { transition: transform var(--ease-default), box-shadow var(--ease-default); }
.pgd-instrument[data-ui-modal-open]:hover .pgd-instrument__photo { transform: translateY(-3px); box-shadow: var(--shadow-float); }

/* ================================================
   악기 상세 모달 — 카탈로그 악기는 분위기·테마·아티스트 열이 열리고, 파트너 입력 악기는 사진·이름·설명만 남는다
   ================================================ */
.pgd-instrument-modal .ui-modal {
  position: relative;
  width: min(880px, 100%);
}

/* 제목 없는 셸 — 닫기만 우상단에 띄우고 h2는 스크린리더용으로 남긴다(JS가 악기명을 채운다) */
.pgd-instrument-modal .ui-modal__header {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
}

.pgd-instrument-modal .ui-modal__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pgd-instrument-modal .ui-modal__close {
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: var(--gray-400);
}

.pgd-instrument-modal .ui-modal__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 48px 48px;
}

.pgd-instrument-modal__top {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.pgd-instrument-modal__figure {
  width: 320px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pgd-instrument-modal__photo {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gray-100);
  box-shadow: var(--shadow-float);
}

.pgd-instrument-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pgd-instrument-modal__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pgd-instrument-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  background: var(--accent-pink-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-pink);
}

.pgd-instrument-modal__chip i { font-size: 12px; }

.pgd-instrument-modal__name {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
}

.pgd-instrument-modal__divider {
  width: 60px;
  height: 1px;
  margin: 6px 0; /* info gap 14px과 합쳐 이름·한 줄 소개 양쪽 20px */
  background: var(--gray-300);
}

.pgd-instrument-modal__tagline {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-sub);
}

.pgd-instrument-modal__facts {
  display: flex;
  padding: 22px 8px;
  border: 1px solid var(--pp-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.pgd-instrument-modal__fact {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 20px;
  text-align: center;
}

/* 보이는 열끼리만 세로선 — 앞에 보이는 열이 하나라도 있으면 왼쪽에 긋는다([hidden] 열은 건너뛴다) */
.pgd-instrument-modal__fact:not([hidden]) ~ .pgd-instrument-modal__fact:not([hidden]) { border-left: 1px solid var(--pp-border); }

.pgd-instrument-modal__fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
}

.pgd-instrument-modal__fact-chip i { font-size: 11px; }
.pgd-instrument-modal__fact-chip.is-mood { background: var(--accent-blue-soft); border-color: color-mix(in srgb, var(--accent-blue) 25%, transparent); color: var(--accent-blue); }
.pgd-instrument-modal__fact-chip.is-theme { background: var(--accent-pink-soft); border-color: color-mix(in srgb, var(--accent-pink) 25%, transparent); color: var(--accent-pink); }
.pgd-instrument-modal__fact-chip.is-artist { background: var(--accent-purple-soft); border-color: color-mix(in srgb, var(--accent-purple) 25%, transparent); color: var(--accent-purple); }

.pgd-instrument-modal__fact-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-sub);
  word-break: keep-all;
}

.pgd-instrument-modal__desc {
  padding: 24px 28px;
  border: 1px solid color-mix(in srgb, var(--accent-purple) 18%, transparent);
  border-radius: 16px;
  background: var(--accent-purple-soft);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-sub);
  white-space: pre-line;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .pgd-instrument-modal .ui-modal__body { gap: 20px; padding: 28px 20px 28px; }
  .pgd-instrument-modal__top { grid-template-columns: 1fr; gap: 12px; justify-items: center; }
  .pgd-instrument-modal__figure { width: 240px; }
  .pgd-instrument-modal__figure::before { width: 196px; height: 196px; }
  .pgd-instrument-modal__photo { width: 196px; height: 196px; margin: 0 0 18px 30px; }
  .pgd-instrument-modal__info { align-items: center; text-align: center; }
  .pgd-instrument-modal__name { font-size: 26px; }
  .pgd-instrument-modal__facts { flex-direction: column; padding: 8px 16px; }
  .pgd-instrument-modal__fact { padding: 16px 0; }
  .pgd-instrument-modal__fact:not([hidden]) ~ .pgd-instrument-modal__fact:not([hidden]) { border-left: 0; border-top: 1px solid var(--pp-border); }
  .pgd-instrument-modal__desc { padding: 18px 20px; font-size: 14.5px; }
}

/* ================================================
   레퍼토리 — 아코디언 세트 카드 (2단 __body--split)
   ================================================ */
.pgd-setlist-split {
  position: relative; /* 장식 이미지의 좌하단 앵커 */
}

.pgd-setlist-split .dt-section__sub {
  line-height: 1.7;
  word-break: keep-all;
}

/* 리드 레일 장식 이미지 — 정보 없음, 판 padding 무시하고 시트 좌하단 모서리에 밀착. 좁은 화면에선 사라진다.
   원본은 투명 배경이 아니라 모서리 밀착 전제의 사각 그래픽 — 판 밖으로 넘치면 잘린 단면이 드러나므로
   판이 낮으면(그룹 1개 등) 리드 텍스트 높이만큼 남기고 축소된다 */
.pgd-setlist-split__art {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  max-width: 280px;
  max-height: calc(100% - 120px);
  border-bottom-left-radius: var(--pp-card-radius);
  pointer-events: none;
}

.pgd-setlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-setlist__group {
  --pgd-set-accent: var(--accent-blue);
  --pgd-set-accent-soft: var(--accent-blue-soft);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-card-radius);
  background: #FFFFFF;
  overflow: hidden;
}

.pgd-setlist__group--blue   { --pgd-set-accent: var(--accent-blue);   --pgd-set-accent-soft: var(--accent-blue-soft); }
.pgd-setlist__group--purple { --pgd-set-accent: var(--accent-purple); --pgd-set-accent-soft: var(--accent-purple-soft); }
.pgd-setlist__group--green  { --pgd-set-accent: var(--accent-green);  --pgd-set-accent-soft: var(--accent-green-soft); }
.pgd-setlist__group--teal   { --pgd-set-accent: var(--accent-teal);   --pgd-set-accent-soft: var(--accent-teal-soft); }
.pgd-setlist__group--orange { --pgd-set-accent: var(--accent-orange); --pgd-set-accent-soft: var(--accent-orange-soft); }
.pgd-setlist__group--pink   { --pgd-set-accent: var(--accent-pink);   --pgd-set-accent-soft: var(--accent-pink-soft); }

.pgd-setlist__group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-default);
}

/* 펼친 판만 머리가 틴트 밴드 + 본문과 구분선 */
[data-pgd-accordion-status="open"] .pgd-setlist__group-head {
  background: var(--pgd-set-accent-soft);
  box-shadow: inset 0 -1px 0 var(--pp-border);
}

.pgd-setlist__group-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--pgd-set-accent);
  color: #FFFFFF;
  font-size: 14px;
}

.pgd-setlist__group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pgd-set-accent);
  margin-right: auto;
}

.pgd-setlist__chevron {
  color: var(--gray-400);
  font-size: 13px;
  transition: transform var(--ease-default);
}

[data-pgd-accordion-status="open"] .pgd-setlist__chevron { transform: rotate(180deg); }

/* grid-rows 트랜지션 — JS는 상태 속성만 바꾼다 */
.pgd-setlist__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ease-default);
}

[data-pgd-accordion-status="open"] .pgd-setlist__content { grid-template-rows: 1fr; }

.pgd-setlist__songs {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.pgd-setlist__song {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: 14.5px;
  color: var(--text-main);
  border-bottom: 1px dashed var(--gray-300);
}

.pgd-setlist__song:last-child { border-bottom: 0; }

.pgd-setlist__song-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--pp-border);
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(23, 30, 46, 0.08);
  color: var(--pgd-set-accent);
  font-size: 9px;
}

.pgd-setlist__song-icon i { margin-left: 1px; /* 재생 삼각형 광학 중심 */ }

@media (max-width: 900px) {
  .pgd-setlist-split__art { display: none; }
}

/* ================================================
   주요 무대 레퍼런스 및 포트폴리오 — 세트 1개: 좌 레일 + 평평한 행 / 여러 개: 그룹 카드 그리드
   ================================================ */
.pgd-stageref-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  word-break: keep-all;
}

.pgd-stageref-title__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: -3px; /* 32px 아이콘을 타이틀 첫 줄(20px×1.3=26px, detail-shared .dt-section__title) 중앙에 — 제목이 꺾여도 첫 줄 기준 */
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 15px;
}

.pgd-stageref-flat {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pgd-stageref-flat__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--gray-50);
  font-size: 15px;
  color: var(--text-main);
  word-break: keep-all;
}

.pgd-stageref-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.pgd-stageref-card {
  --pgd-ref-accent: var(--accent-blue);
  --pgd-ref-accent-soft: var(--accent-blue-soft);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-card-radius);
  background: #FFFFFF;
  overflow: hidden;
}

.pgd-stageref-card--blue   { --pgd-ref-accent: var(--accent-blue);   --pgd-ref-accent-soft: var(--accent-blue-soft); }
.pgd-stageref-card--purple { --pgd-ref-accent: var(--accent-purple); --pgd-ref-accent-soft: var(--accent-purple-soft); }
.pgd-stageref-card--green  { --pgd-ref-accent: var(--accent-green);  --pgd-ref-accent-soft: var(--accent-green-soft); }
.pgd-stageref-card--teal   { --pgd-ref-accent: var(--accent-teal);   --pgd-ref-accent-soft: var(--accent-teal-soft); }
.pgd-stageref-card--orange { --pgd-ref-accent: var(--accent-orange); --pgd-ref-accent-soft: var(--accent-orange-soft); }
.pgd-stageref-card--pink   { --pgd-ref-accent: var(--accent-pink);   --pgd-ref-accent-soft: var(--accent-pink-soft); }

.pgd-stageref-card--wide { grid-column: 1 / -1; }

.pgd-stageref-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 14px 20px;
  background: var(--pgd-ref-accent-soft);
  box-shadow: inset 0 -1px 0 var(--pp-border);
}

.pgd-stageref-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--pgd-ref-accent);
}

.pgd-stageref-card__list {
  padding: 10px 20px;
}

.pgd-stageref-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  font-size: 14.5px;
  color: var(--text-main);
  word-break: keep-all;
}

/* 페이지네이션이 행을 hidden으로 접으므로 구분선은 '보이는 행 사이'에만 — border-bottom이 아니라 이 형제 규칙 */
.pgd-stageref-card__row:not([hidden]) ~ .pgd-stageref-card__row:not([hidden]) {
  border-top: 1px dashed var(--pp-border);
}

.pgd-stageref-flat__year,
.pgd-stageref-card__year {
  flex-shrink: 0;
  min-width: 58px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.pgd-stageref-card__year {
  background: var(--pgd-ref-accent);
}

.pgd-stageref-card--wide .pgd-stageref-card__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}

@media (max-width: 900px) {
  .pgd-stageref-grid { grid-template-columns: 1fr; }
  .pgd-stageref-card--wide .pgd-stageref-card__list { grid-template-columns: 1fr; }
}

/* ================================================
   공연 현장 갤러리 (사진 캐러셀) — 동영상과 한 흰 띠(dt-group--band) 안, 화살표는 제목과 사진 사이 줄 우측(메인 롤링 섹션 툴바와 같은 자리)
   ================================================ */
#pgd-gallery { gap: 80px; } /* 그룹 기본 40에서 의도적 확장 — 사진 캐러셀과 동영상 제목이 더 띄어져야 한다는 지시 */

.pgd-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-photos__nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 테두리는 메인 롤링 화살표(main.css --mp-line)와 같은 값 — 흰 띠 위에서 원이 보이게 */
.pgd-photos__nav .pp-nav-btn {
  border-color: rgba(0, 0, 0, .2);
  box-shadow: var(--shadow-fab);
}

.pgd-photos__nav .pp-nav-btn:hover { border-color: var(--gray-400); }

.pgd-gallery__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: zoom-in;
}

.pgd-gallery__frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gray-100);
  transition: box-shadow var(--ease-default);
}

.pgd-gallery__item:hover .pgd-gallery__frame { box-shadow: 0 0 0 4px var(--accent-blue), var(--shadow-card-hover); }

.pgd-gallery__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-default);
}

.pgd-gallery__item:hover .pgd-gallery__frame img { transform: scale(1.04); }

.pgd-gallery__zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 34px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
  opacity: 0;
  transition: opacity var(--ease-default);
}

.pgd-gallery__item:hover .pgd-gallery__zoom { opacity: 1; }

.pgd-gallery__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pgd-gallery__caption-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
  transition: color var(--ease-default);
}

.pgd-gallery__caption-date {
  font-size: 14px;
  color: var(--text-desc);
  transition: color var(--ease-default);
}

.pgd-gallery__item:hover .pgd-gallery__caption-title,
.pgd-gallery__item:hover .pgd-gallery__caption-date {
  color: var(--accent-blue);
}

/* ================================================
   공연 라이브 동영상 (흰 밴드)
   ================================================ */
.pgd-videos {
  padding: 24px;
}

.pgd-videos__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: stretch;
}

/* 리스트 높이는 플레이어(16:9)가 결정한다 — list는 abs-fill로 행 높이 계산에서 빠지고, 세로 스와이퍼가 그 높이를 3분할한다 */
.pgd-videos__list { position: relative; }

.pgd-videos__list-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 간격은 세로 그리드라 JS spaceBetween이 만든다 — 거터는 끈다 */
.pgd-videos__list .swiper {
  --dt-carousel-gutter: 0px;
  flex: 1;
  min-height: 0;
}

.pgd-videos__list .swiper-slide { display: flex; }

.pgd-videos__list-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pgd-videos__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 16px;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ease-default), box-shadow var(--ease-default);
}

.pgd-videos__item:hover { border-color: var(--gray-400); }

.pgd-videos__item.is-active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px var(--accent-blue), var(--shadow-card-hover);
}

.pgd-videos__item img {
  flex-shrink: 0;
  width: 36%;
  object-fit: cover;
  background: var(--gray-100);
}

.pgd-videos__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-right: 16px;
}

.pgd-videos__item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--ease-default);
}

.pgd-videos__item.is-active .pgd-videos__item-title { color: var(--accent-blue); }

.pgd-videos__item-sub {
  font-size: 13px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pgd-videos__item-sub:empty { display: none; }

.pgd-videos__player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gray-900);
}

.pgd-videos__player img,
.pgd-videos__player iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.pgd-videos__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-size: 20px;
  transition: background var(--ease-default), transform var(--ease-default);
}

.pgd-videos__play:hover {
  background: var(--primary);
  transform: scale(1.06);
}

@media (max-width: 900px) {
  /* minmax(0, …) — 1fr의 최소값은 내용 폭이라, 영상 3개부터 슬라이드 합(개수 × 폭/2.2)이 트랙을 넓히고 스와이퍼가 다시 슬라이드를 키워 폭이 끝없이 커진다 */
  .pgd-videos__grid { grid-template-columns: minmax(0, 1fr); }
  .pgd-videos__list-body { position: static; } /* 단일 컬럼에선 리스트가 제 높이를 가진다 — 1행 가로 스와이퍼 */
  .pgd-videos__list-nav { display: none; }
  .pgd-videos__item { flex-direction: column; gap: 0; }
  .pgd-videos__item img { width: 100%; aspect-ratio: 16 / 9; }
  .pgd-videos__item-info { padding: 10px 12px; }
}

/* ================================================
   공연 필수 조건 + 테크라이더
   ================================================ */
/* 무대 조명 배경 — 이미지 URL은 블레이드가 주입한다(media_url), 트러스가 우상단에 오도록 앵커 */
#pgd-requirements > .dt-section__body {
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
}

.pgd-req {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 32px;
}

/* 테크라이더가 빠지면 남은 필수 조건이 두 칼럼을 모두 쓴다 */
.pgd-req > :only-child { grid-column: 1 / -1; }

.pgd-req__cats {
  display: flex;
  align-items: stretch;
}

/* 칼럼 사이 구분선은 좌우 padding이 벌린다 — gap이면 border가 칸 가장자리에 붙어버린다 */
.pgd-req__cat {
  --pgd-req-accent: var(--accent-blue);
  --pgd-req-accent-soft: var(--accent-blue-soft);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 0;
}

.pgd-req__cat:first-child { padding-left: 0; }
.pgd-req__cat:last-child { padding-right: 0; }
.pgd-req__cat + .pgd-req__cat { border-left: 1px solid var(--pp-border); }

.pgd-req__cat--blue   { --pgd-req-accent: var(--accent-blue);   --pgd-req-accent-soft: var(--accent-blue-soft); }
.pgd-req__cat--purple { --pgd-req-accent: var(--accent-purple); --pgd-req-accent-soft: var(--accent-purple-soft); }
.pgd-req__cat--green  { --pgd-req-accent: var(--accent-green);  --pgd-req-accent-soft: var(--accent-green-soft); }
.pgd-req__cat--teal   { --pgd-req-accent: var(--accent-teal);   --pgd-req-accent-soft: var(--accent-teal-soft); }
.pgd-req__cat--orange { --pgd-req-accent: var(--accent-orange); --pgd-req-accent-soft: var(--accent-orange-soft); }
.pgd-req__cat--pink   { --pgd-req-accent: var(--accent-pink);   --pgd-req-accent-soft: var(--accent-pink-soft); }

.pgd-req__cat-icon {
  width: 70px; /* 원본 139px, Figma 2x 캔버스 절반 규칙 */
  height: 70px;
}

.pgd-req__cat-icon img {
  width: 100%;
  height: 100%;
}

/* 설정에서 사라진 분류의 FA 폴백 — 전용 아이콘 이미지가 없는 키만 탄다 */
.pgd-req__cat-icon i {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pgd-req-accent-soft);
  color: var(--pgd-req-accent);
  font-size: 24px;
}

.pgd-req__cat-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
}

.pgd-req__cat-tagline {
  margin-top: -8px; /* 제목-부제 간격 6px = 부모 gap 14 − 8 */
  font-size: 13px;
  color: var(--text-desc);
  text-align: center;
}

.pgd-req__cat-rule {
  align-self: stretch;
  height: 2px;
  background: var(--pgd-req-accent);
}

.pgd-req__items {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pgd-req__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-main);
}

.pgd-req__item i {
  flex-shrink: 0;
  color: var(--pgd-req-accent);
  font-size: 20px;
}

.pgd-req__item span {
  flex: 1;
  text-align: center;
}

/* 행 높이는 왼쪽 필수 조건이 정한다: 카드는 400px까지만 행 높이에 기여하고(max-height), 왼쪽이 더 길면
   min-height: 100%가 max-height를 이겨 행 끝까지 늘어난다(CSS: min > max면 min 승리). 본문이 남는 높이를 스크롤로 받는다. */
.pgd-req__rider {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  max-height: 400px;
  min-height: 100%;
}

.pgd-req__rider-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pp-border);
}

.pgd-req__rider-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 18px;
}

.pgd-req__rider-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--accent-blue);
}

.pgd-req__rider-sub {
  font-size: 12px;
  color: var(--text-desc);
}

.pgd-req__rider-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
  white-space: pre-line;
}

.pgd-req__rider-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
}

.pgd-req__rider-body::-webkit-scrollbar { width: 6px; }
.pgd-req__rider-body::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 3px; }
.pgd-req__rider-body::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

.pgd-req__rider-files {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pgd-req__file {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--pp-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}

.pgd-req__file-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.pgd-req__file-main:disabled { cursor: default; }

.pgd-req__file-icon {
  flex-shrink: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 26px;
}

.pgd-req__file-icon--pdf { color: var(--accent-red); }
.pgd-req__file-icon--image { color: var(--accent-green); }
.pgd-req__file-icon--document { color: var(--accent-purple); }

.pgd-req__file-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pgd-req__file-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pgd-req__file-meta {
  font-size: 12px;
  color: var(--text-desc);
}

.pgd-req__file-download {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue);
}

.pgd-req__file-download:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .pgd-req { grid-template-columns: 1fr; }
  .pgd-req__cats { flex-direction: column; }
  .pgd-req__cat { padding: 20px 0; }
  .pgd-req__cat:first-child { padding-top: 0; }
  .pgd-req__cat:last-child { padding-bottom: 0; }
  .pgd-req__cat + .pgd-req__cat { border-left: 0; border-top: 1px solid var(--pp-border); }
}

@media (max-width: 720px) {
  .pgd-req__cats { grid-template-columns: 1fr; }
}

/* ================================================
   추천 프로그램 — 세로 카드 캐러셀 + AI 추천 배너
   ================================================ */
.pgd-recs .swiper-slide { display: flex; }

/* flex:1이 없으면 카드 폭이 내용 폭을 따라가 사진 없는 카드만 좁아진다 */
.pgd-rec {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-card-radius);
  overflow: hidden;
  transition: transform var(--ease-default), box-shadow var(--ease-default);
}

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

.pgd-rec__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  /* overflow가 visible이면 flex 아이템의 min-height:auto가 이미지 원본 높이로 풀려 세로 사진이 비율을 뚫고 카드를 늘린다 */
  overflow: hidden;
}

.pgd-rec__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 사진 위에 얹히는 출처 라벨 — 카드 종류(파트너의 다른 프로그램 / 비슷한 프로그램)를 색으로도 가른다 */
.pgd-rec__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  background: var(--pgd-rec-accent-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--pgd-rec-accent);
}

.pgd-rec--partner {
  --pgd-rec-accent: var(--accent-purple);
  --pgd-rec-accent-soft: var(--accent-purple-soft);
}

.pgd-rec--similar {
  --pgd-rec-accent: var(--accent-orange);
  --pgd-rec-accent-soft: var(--accent-orange-soft);
}

.pgd-rec__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 16px;
}

.pgd-rec__lead {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pgd-rec__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.pgd-rec__tagline {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-desc);
}

/* 카드마다 제목·설명 줄 수가 달라도 가격줄부터는 바닥에 맞춰 선다 */
.pgd-rec__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.pgd-rec__price {
  font-size: 19px;
  font-weight: 800;
  color: var(--primary);
}

.pgd-rec__price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}

.pgd-rec__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pgd-rec__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--text-main);
}

.pgd-rec__rating i { color: var(--accent-star); }
.pgd-rec__rating strong { font-weight: 700; }
.pgd-rec__count { font-size: 13px; color: var(--text-desc); }

.pgd-rec__go {
  flex-shrink: 0;
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.pgd-recs-ai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 24px;
  border: 1px solid var(--accent-blue-soft);
  border-radius: var(--radius-xl);
  background: var(--accent-blue-soft);
  transition: border-color var(--ease-default), box-shadow var(--ease-default);
}

.pgd-recs-ai:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-card);
}

.pgd-recs-ai__question {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-blue);
}

.pgd-recs-ai__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
}

.pgd-recs-ai__icon img { width: 100%; height: 100%; }

.pgd-recs-ai__label {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
}

@media (max-width: 720px) {
  .pgd-recs-ai {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .pgd-hero-bar__main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 20px; }
  .pgd-hero-bar__icon { width: 36px; height: 36px; font-size: 14px; }
  .pgd-hero-bar__amount small { display: block; line-height: 1.6; }
  .pgd-hero-bar__options { grid-column: 2; justify-self: start; padding: 8px 12px; font-size: 13px; }
  .pgd-hero-bar__cta { grid-column: 1 / -1; }
  .pgd-hero-bar__cta > *,
  .pgd-hero-bar__cta .ui-tooltip__trigger { flex: 1; }
  .pgd-hero-bar__cta .pp-btn { width: 100%; height: 44px; }
  .pgd-hero-bar .pp-page-notice { padding: 12px 20px; }
  .pgd-partner-card { gap: 12px; padding: 18px; }
  .pgd-partner-card__avatar { width: 52px; height: 52px; }
  .pgd-partner-card__name { font-size: 18px; }
  /* 폰은 머리글 도구 줄이 제목 아래로 내려간다 — 안내문이 남는 폭을 먹어 페이저 쌍을 오른쪽 끝으로 민다(데스크톱의 8px 델타를 대체) */
  .pgd-instruments__note { margin-right: auto; word-break: keep-all; }
}