/* =============================================
   VIEW - 페어 상세
   가운데에 두 캐릭터 전신이 겹쳐 서 있고,
   아래 줄에 [기본 정보][이름][SD] ─ [SD][이름][기본 정보],
   이름을 누르면 양옆에 소개 패널이 열립니다.
   ★ 표시가 있는 값은 취향에 맞게 조절하세요
   ============================================= */

/* 넓은 화면에선 페이지 스크롤 없음 (스크립트가 html 에 붙여줌) */
html.pv-noscroll,
html.pv-noscroll body { overflow: hidden !important; }

.pv-page {
  /* 전신 */
  --pv-spread: 185px;                         /* ★ 가운데에서 각 전신 중심까지 거리 (클수록 덜 겹침) */
  --pv-fig-top: 20px;                         /* ★ 화면 위에서 전신 시작 위치 */
  --pv-fig-h: 122%;                           /* ★ 전신 높이 (100% 넘으면 아래가 잘림)
                                                 두 캐릭터 모두 이 높이로 맞춰지고 너비는 이미지 비율대로 따라감
                                                 → 파일 크기(픽셀)가 달라도 같은 비율로 출력 */
  --pv-fig-edge: 38%;                         /* ★ 전신 바깥쪽이 투명해지는 폭 (이미지 너비 기준, 0% = 없음) */
  --pv-fig-edge-start: 0;                     /* ★ 바깥 끝의 진하기 (0 = 완전 투명, 0.3 = 살짝 남김) */
  --pv-fade-color: #f8f9fa;                   /* ★ 아래쪽 흐림 색 = 사이트 배경색과 맞추기 */
  --pv-fade-h: 32%;                           /* ★ 아래쪽 흐림 높이 (0 이면 없음) */

  /* 하단 정보 줄 */
  --pv-meta-bottom: 26px;                     /* ★ 화면 아래에서 정보 줄까지 */
  --pv-meta-center: 14px;                     /* ★ 가운데 선에서 양쪽 SD까지 */
  --pv-meta-gap: 22px;                        /* ★ SD·이름·기본 정보 사이 간격 */
  --pv-sd-w: 140px;                           /* ★ SD 칸 너비 */
  --pv-sd-h: 175px;                           /* ★ SD 칸 높이 — 이미지 비율과 상관없이 항상 이 크기 안에 맞춰 출력 */
  --pv-name-size: clamp(2.2rem, 3.7vw, 4.4rem); /* ★ 이름 최대 크기 (길면 자동으로 작아짐) */
  --pv-text-max: clamp(170px, 15vw, 300px);   /* ★ 이름+기본 정보 묶음 최대 너비 */
  --pv-info-size: 0.8rem;                     /* ★ 기본 정보 글자 크기 */
  /* 이름+기본 정보 묶음은 SD 높이를 넘지 않도록 스크립트가 글씨를 같은 비율로 줄입니다 */

  /* 소개 패널 */
  --pv-panel-w: clamp(330px, 21vw, 450px);    /* ★ 패널 너비 */
  --pv-panel-offset: clamp(170px, 12vw, 250px);   /* ★ 가운데 선에서 패널 안쪽 끝까지 */
  --pv-panel-top: 17%;                        /* ★ 패널 시작 높이 */
  --pv-meta-zone: 250px;                      /* 패널 아래 끝 (스크립트가 정보 줄 높이로 다시 맞춤) */

  position: relative;
  overflow: hidden;
  height: calc(100vh - 120px);
  min-height: 560px;

  /* 사이트 본문 폭(컨테이너)을 벗어나 화면 전체 폭 사용 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

/* 캐릭터 화면은 위·아래 여백 없이 */
.chara-skin.pv-skin { padding-top: 0; padding-bottom: 0; }

/* ── 관리 버튼: 오른쪽 아래 ── */
.pv-actions {
  position: absolute;
  right: 24px;                        /* ★ 오른쪽 끝에서 거리 */
  bottom: 22px;                       /* ★ 아래 끝에서 거리 */
  z-index: 20;
  margin: 0;
  gap: 6px;
}
/* 마우스를 올리면 나오는 이름표는 버튼 위쪽에 */
.pv-actions .pair-icon-btn::after {
  top: auto;
  bottom: calc(100% + 6px);
  left: auto;
  right: 0;
  transform: none;
}
.pv-actions .pv-edit-btn {          /* 수정 버튼은 각 캐릭터 포인트 컬러 */
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ── 상태 묶음 (현재 / 성장 프로필): 보이는 건 하나만 ── */
.pv-variant { display: block; }
.pv-variant:not(.is-active) { display: none; }
.pv-variant.is-active .pv-figure img,
.pv-variant.is-active .pv-meta { animation: pv-swap-in 0.35s ease; }
@keyframes pv-swap-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 전신 ── */
.pv-figure {
  position: absolute;
  top: var(--pv-fig-top);
  height: var(--pv-fig-h);
  width: max-content;                 /* 너비 = 이미지 비율대로 */
  transform: translateX(-50%);
  pointer-events: none;
}
.pv-char-l .pv-figure { left: calc(50% - var(--pv-spread)); }
.pv-char-r .pv-figure { left: calc(50% + var(--pv-spread)); }
.pv-page.is-solo .pv-figure { left: 50%; }
.pv-figure img {
  display: block;
  height: 100%;                       /* 높이 고정 */
  width: auto;                        /* 너비는 원본 비율 그대로 */
  max-width: none;
}
/* 전신 바깥쪽(가운데 반대편)으로 갈수록 투명해지는 그라데이션 */
.pv-char-l .pv-figure img {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 var(--pv-fig-edge));
          mask-image: linear-gradient(to right, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 var(--pv-fig-edge));
}
.pv-char-r .pv-figure img {
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 var(--pv-fig-edge));
          mask-image: linear-gradient(to left, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 var(--pv-fig-edge));
}
/* 한 명만 있을 때는 양쪽 모두 */
.pv-page.is-solo .pv-char-l .pv-figure img {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 calc(var(--pv-fig-edge) / 1.6), #000 calc(100% - var(--pv-fig-edge) / 1.6), rgba(0,0,0,var(--pv-fig-edge-start)) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,var(--pv-fig-edge-start)) 0%, #000 calc(var(--pv-fig-edge) / 1.6), #000 calc(100% - var(--pv-fig-edge) / 1.6), rgba(0,0,0,var(--pv-fig-edge-start)) 100%);
}

.pv-fade {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pv-fade-h);
  background: linear-gradient(to bottom, transparent, var(--pv-fade-color) 82%);
  pointer-events: none;
}

/* ── 하단 정보 줄 ── */
.pv-meta {
  position: absolute;
  z-index: 6;
  bottom: var(--pv-meta-bottom);
  display: flex;
  align-items: flex-end;              /* 이름 묶음 아래끝 = SD 아래끝 (스크립트가 머리색·눈색 줄만큼 띄움) */
  gap: var(--pv-meta-gap);
}
/* 왼쪽 캐릭터: 가운데부터 바깥으로 SD → 이름 → 정보 */
.pv-char-l .pv-meta { right: calc(50% + var(--pv-meta-center)); flex-direction: row-reverse; }
.pv-char-r .pv-meta { left:  calc(50% + var(--pv-meta-center)); }
.pv-page.is-solo .pv-char-l .pv-meta { right: auto; left: 50%; transform: translateX(-50%); }

/* SD + 머리색·눈색 */
.pv-sd-col {
  flex: none;
  width: var(--pv-sd-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pv-sd-wrap {
  position: relative;
  width: 100%;
  height: var(--pv-sd-h);             /* 프로필을 바꿔도 SD 칸 크기는 고정 */
}
/* 스크립트가 그림 크기·위치를 정하기 전까지는 칸 안에 비율대로 */
.pv-sd-wrap > img.pv-sd { left: 0; top: 0; }
.pv-sd {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                /* 칸 안에 비율 유지하며 맞춤 */
  object-position: center bottom;     /* 발끝을 칸 아래에 맞춤 */
  cursor: default;              /* SD는 눌러도 아무 동작 없음 */
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.25s ease;
}
.pv-sd-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--color-accent);
}
.pv-sd-wrap:hover .pv-sd { transform: translateY(-4px); }

.pv-colors {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.pv-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.pv-swatch {
  display: inline-block;
  width: 11px;                 /* ★ 컬러 네모 크기 */
  height: 11px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 한마디 말풍선 — SD 위로 뜸 */
.pv-bubble {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 4px);
  width: max-content;
  max-width: 340px;            /* ★ 말풍선 최대 너비 */
  padding: 14px 22px;          /* ★ 말풍선 안쪽 여백 */
  background: #000;            /* ★ 말풍선 색 */
  color: #fff;
  font-family: 'AndeulScienceWeak', var(--font-body, sans-serif);  /* ★ 한마디 폰트 */
  font-size: 1.3rem;           /* ★ 말풍선 글자 크기 */
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.pv-bubble::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -11px;
  border: 11px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
}
.pv-sd-wrap.has-quote:hover .pv-bubble,
.pv-sd-wrap.has-quote:focus-within .pv-bubble,
.pv-sd-wrap.is-tapped .pv-bubble {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 성장 프로필 버튼: 이름 묶음 바로 위 */
.pv-growth-tabs {
  position: absolute;
  bottom: calc(100% + 12px);          /* ★ 이름 묶음 위로 띄우는 거리 */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;                 /* 이름이 짧아도 버튼이 불필요하게 줄바꿈되지 않도록 */
  max-width: calc(var(--pv-text-max) + 80px);
}
.pv-char-l .pv-growth-tabs { right: calc(var(--pv-sd-w) + var(--pv-meta-gap)); justify-content: flex-end; }
.pv-char-r .pv-growth-tabs { left:  calc(var(--pv-sd-w) + var(--pv-meta-gap)); }
.pv-page.is-solo .pv-char-l .pv-growth-tabs { right: auto; left: 0; }
.pv-growth-tab {
  padding: 4px 12px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.74rem;                 /* ★ 성장 프로필 버튼 글자 크기 */
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.pv-growth-tab:hover { background: #fff; }
.pv-growth-tab.is-active {
  background: var(--color-accent);
  color: #fff;
  cursor: default;
}

/* 이름 + 기본 정보 묶음 (SD 높이 안) */
.pv-text {
  --fit: 1;
  --fit-name: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  max-width: var(--pv-text-max);
  overflow: hidden;
  text-shadow: 0 0 12px var(--pv-fade-color), 0 0 2px var(--pv-fade-color);
}
.pv-char-l .pv-text { align-items: flex-end;   text-align: right; }
.pv-char-r .pv-text { align-items: flex-start; text-align: left; }

/* 이름 (누르면 소개) */
.pv-name {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  max-width: 100%;
  color: var(--color-accent);
  cursor: pointer;
  outline: none;
  transition: transform var(--transition);
}
.pv-name:hover,
.pv-name:focus-visible { transform: translateY(-3px); }
.pv-name-orig {
  font-size: max(10px, calc(0.82rem * var(--fit)));   /* ★ 이름 원문 표기 크기 */
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.pv-name-main {
  display: block;
  max-width: 100%;
  font-family: var(--font-title);
  font-size: calc(var(--pv-name-size) * var(--fit-name));   /* 두 캐릭터 공통 크기 */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pv-name-en {
  font-size: max(10px, calc(0.82rem * var(--fit)));   /* ★ 영문 이름 크기 */
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-top: 2px;
}
.pv-char.is-open .pv-name-main {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 기본 정보: 이름 아래, 카드 없이 투명, 한 줄에 한 항목 */
.pv-info {
  max-width: 100%;
  margin-top: calc(10px * var(--fit));
}
.pv-info-category {
  font-size: max(10px, calc(0.75rem * var(--fit)));
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 2px;
}
.pv-info-list {
  list-style: none;
  display: grid;
  column-gap: 18px;
  font-size: max(10.5px, calc(var(--pv-info-size) * var(--fit)));
  line-height: 1.65;
}
.pv-char-l .pv-info-list { justify-items: end; justify-content: end; }
.pv-info-list.is-2col {        /* 6개 이상이면 2열 */
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows), auto);
}
.pv-info-list li { white-space: nowrap; }
.pv-info-label { color: var(--color-text-sub); margin-right: 0.7em; }
.pv-info-value { color: var(--color-text); font-weight: 500; }

/* ── 소개 본문 패널 (이름을 누르면 전신 위 양옆에 열림) ── */
.pv-intro {
  position: absolute;
  z-index: 10;
  top: var(--pv-panel-top);
  bottom: var(--pv-meta-zone);
  width: var(--pv-panel-w);
  display: none;                      /* 이름을 누르면 열림 (아래 .is-open) */
  flex-direction: column;
  background: rgba(244, 244, 245, 0.86);           /* ★ 패널 색 · 투명도 */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  animation: pv-intro-in 0.25s ease;
}
.pv-char-l .pv-intro { right: calc(50% + var(--pv-panel-offset)); }
.pv-char-r .pv-intro { left:  calc(50% + var(--pv-panel-offset)); }
.pv-page.is-solo .pv-char-l .pv-intro { right: calc(50% + var(--pv-panel-offset)); }
.pv-char.is-open .pv-variant.is-active .pv-intro { display: flex; }

@keyframes pv-intro-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.pv-intro-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 44px 34px 36px;
  /* 스크롤은 되지만 스크롤바는 숨김 */
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* 구형 Edge */
}
.pv-intro-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }  /* Chrome · Safari · Edge */
.pv-intro-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-sub);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
}
.pv-intro-close:hover { background: rgba(0, 0, 0, 0.06); }

.pv-intro-catch {                 /* 캐치프레이즈: 패널 맨 위 */
  margin-bottom: 26px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
  text-align: center;
  word-break: keep-all;
}
.pv-intro-section + .pv-intro-section { margin-top: 36px; }
.pv-intro .cv-box-title-wrap { margin-bottom: 18px; }
.pv-intro .cv-box-title-kr { font-size: 1.7rem; }   /* ★ 소개 섹션 제목 크기 ([외관] 등) */
.pv-intro .cv-box-title-en { font-size: 0.85rem; }  /* ★ 섹션 영문 부제 크기 ([성격:PERSONALITY] 의 뒷부분) */
.pv-intro .cv-box-content img { max-width: 100%; height: auto; }
.pv-intro-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--color-text-sub);
  font-size: 0.88rem;
}


/* ── 좁은 화면: 캐릭터별로 위아래 (전신 → SD·이름·정보 → 소개) ── */
@media (max-width: 1100px) {
  .pv-page {
    height: auto !important;
    min-height: 0;
    overflow: visible;
    padding: 0 16px;
  }
  .pv-actions { position: static; justify-content: center; margin-bottom: 12px; }
  .pv-text, .pv-char-l .pv-text, .pv-char-r .pv-text { align-items: center; text-align: center; max-width: 100%; max-height: none !important; }
  .pv-char { display: block; margin-bottom: 64px; }
  .pv-figure,
  .pv-char-l .pv-figure,
  .pv-char-r .pv-figure {
    position: static;
    transform: none;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
  }
  .pv-figure img { width: 100%; height: auto; }
  .pv-fade { display: none; }
  .pv-meta,
  .pv-char-l .pv-meta,
  .pv-char-r .pv-meta,
  .pv-page.is-solo .pv-char-l .pv-meta {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
  }
  .pv-info-list { max-width: 100%; }
  .pv-growth-tabs,
  .pv-char-l .pv-growth-tabs,
  .pv-char-r .pv-growth-tabs,
  .pv-page.is-solo .pv-char-l .pv-growth-tabs {
    position: static;
    order: -1;
    justify-content: center;
    max-width: 100%;
  }
  .pv-name-main { white-space: normal; word-break: keep-all; font-size: clamp(2.4rem, 9vw, 4rem); }
  .pv-char-l .pv-info, .pv-info { text-align: center; }
  .pv-info-list, .pv-char-l .pv-info-list { justify-items: center; justify-content: center; }
  .pv-intro,
  .pv-char-l .pv-intro,
  .pv-char-r .pv-intro,
  .pv-page.is-solo .pv-char-l .pv-intro {
    position: relative;
    inset: auto;
    width: auto;
    max-width: 560px;
    margin: 24px auto 0;
    background: var(--color-surface);
  }
  .pv-intro-scroll { overflow: visible; }
}

@media (max-width: 680px) {
  .pv-bubble { max-width: 260px; font-size: 1.1rem; }
  .pv-intro-scroll { padding: 40px 22px 28px; }
}