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

/* { } 라벨 전용 폰트 */

@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

/* 한마디 전용 폰트 */

@font-face {
  font-family: 'GounBatang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GounBatang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

/* 넓은 화면에선 페이지 스크롤 없음 (스크립트가 html 에 붙여줌) */

html.pv-noscroll,
html.pv-noscroll body { overflow: hidden !important; }

.pv-page {
  /* 전신 */
  --pv-spread: 205px;                         /* ★ 가운데에서 각 전신 중심까지 거리 (클수록 덜 겹침) */
  --pv-fig-top: 20px;                         /* ★ 화면 위에서 전신 시작 위치 */
  --pv-fig-h: 122%;                           /* ★ 전신 높이 (100% 넘으면 아래가 잘림)
                                                 두 캐릭터 모두 이 높이로 맞춰지고 너비는 이미지 비율대로 따라감
                                                 → 파일 크기(픽셀)가 달라도 같은 비율로 출력 */
  --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;                      /* 패널 아래 끝 (스크립트가 정보 줄 높이로 다시 맞춤) */

  /* 한마디 (전신 뒤 연한 글씨) */
  --pv-quote-top: 9%;                         /* 전신을 읽을 수 없을 때만 쓰는 기본 높이 (보통은 전신 머리끝에 맞춤) */
  --pv-quote-drop: 0px;                       /* ★ 전신 머리끝에서 한마디까지 (클수록 아래로) */
  --pv-quote-gap: 18px;                       /* ★ 전신 바깥 끝과 한마디 사이 간격 (0 = 딱 붙음) */
  --pv-quote-center: 260px;                   /* 그림을 읽을 수 없을 때만 쓰는 기본 위치: 가운데 선에서 한마디 안쪽 끝까지 */
  --pv-quote-size: clamp(1rem, 1.4vw, 1.7rem); /* ★ 한마디 글자 크기 */
  /* 한 줄 글자 수(10자)는 pair.lib.php 의 CHARA_QUOTE_LINE */
  --pv-quote-color: #55585f;                  /* ★ 한마디 기본 글자색 (글 작성 시 '한마디 색'을 넣으면 그 색) */

  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-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-quote {
  position: absolute;
  z-index: 5;                         /* 전신(1·2)보다 앞, 정보 줄·패널보다 뒤 */
  top: var(--pv-quote-top);
  width: max-content;
  margin: 0;
  font-family: 'GounBatang', serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--pv-quote-size);
  line-height: 1.45;
  color: var(--pv-quote-color);
  white-space: nowrap;                /* 줄바꿈은 10자마다만 */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 글씨 정렬: 바깥쪽 (왼쪽 캐릭터는 왼쪽 정렬, 오른쪽 캐릭터는 오른쪽 정렬) */

.pv-char-l .pv-quote { right: calc(50% + var(--pv-quote-center)); text-align: left; }

.pv-char-r .pv-quote { left:  calc(50% + var(--pv-quote-center)); text-align: right; }

.pv-page.is-solo .pv-char-l .pv-quote { right: auto; left: 50%; transform: translateX(-50%); text-align: center; }

/* ── 전신 ── */

.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 {
  -webkit-user-drag: none;            /* 전신 이미지 끌기 막기 */
  -webkit-touch-callout: none;        /* 휴대폰에서 길게 눌러 저장 메뉴 막기 */
  user-select: none;
  -webkit-user-select: none;
  display: block;
  height: 100%;                       /* 높이 고정 */
  width: auto;                        /* 너비는 원본 비율 그대로 */
  max-width: none;
}

.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,
.pv-sd-wrap:focus-visible .pv-sd { transform: translateY(-4px); }

.pv-sd-wrap { outline: none; }

.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);
}

/* 성장 프로필 버튼: 이름 묶음 바로 위 */

.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; color: var(--pv-title-color, var(--color-accent)); }

/* ★ 소개 섹션 제목 크기 ([외관] 등) — 색은 포인트 컬러 (너무 밝으면 자동으로 진하게) */

.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: relative;               /* 한마디보다 앞 */
    left: auto;
    transform: none;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
  }

.pv-figure img { width: 100%; height: auto; }

.pv-fade { display: none; }

.pv-variant { position: relative; }

.pv-quote,
.pv-char-l .pv-quote,
.pv-char-r .pv-quote,
.pv-page.is-solo .pv-char-l .pv-quote {
    position: static;                 /* 좁은 화면: 전신 바로 위에 (겹치지 않게) */
    margin: 0 auto 12px;
    transform: none;
    text-align: center;
    font-size: clamp(1rem, 3.8vw, 1.45rem);
  }

.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-intro-scroll { padding: 40px 22px 28px; }
}

/* ── 성장 프로필 추가: 캐릭터 고르는 메뉴 (관리 버튼 ＋) ── */

.pv-growth-add { position: relative; display: inline-flex; }

.pv-growth-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.pv-growth-menu[hidden] { display: none; }

.pv-growth-menu-title {
  padding: 4px 8px 6px;
  font-size: 0.7rem;
  color: var(--color-text-sub);
  white-space: nowrap;
}

.pv-growth-menu a {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.pv-growth-menu a:hover { background: var(--color-hover); }

.pv-growth-add button[aria-expanded="true"]::after { opacity: 0; }

/* 메뉴가 열리면 이름표 숨김 */

@media (max-width: 1100px) {
.pv-growth-menu { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: calc(100% + 8px); }
}

/* ── 소개 본문의 {내용} 라벨 (알약 모양) ──
   배경 = 캐릭터 포인트 컬러, 글자 = 배경 밝기에 따라 흰색/검은색 자동 */

.pv-pill {
  display: inline-flex;              /* 글자 수와 상관없이 가로·세로 정가운데 */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;                   /* ★ 라벨 글자 크기 — 본문(0.88rem)보다 크고 [ ] 제목(1.7rem)보다 작게 */
  height: 1.75em;                    /* ★ 라벨 높이 (글자 크기 기준) */
  min-width: 2.6em;                  /* 한 글자여도 둥근 모양 유지 */
  padding: 0 0.8em;                  /* ★ 라벨 좌우 여백 */
  margin: 0.15em 0.15em;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--pv-pill-fg, #fff);
  font-family: 'Paperozi', var(--font-body);   /* ★ 라벨 폰트 */
  font-weight: 600;                  /* Paperozi 는 SemiBold(600) 한 가지만 등록되어 있어 그 굵기 그대로 */
  line-height: 1;
  letter-spacing: 0;                 /* 자간이 있으면 마지막 글자 뒤에 여백이 생겨 한쪽으로 치우침 */
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* 라벨만 있는 줄: 본문 안에서 가운데 정렬 */

.pv-intro .pv-pill-row { text-align: center; }

span.pv-pill-row { display: block; }

/* =============================================
   아이템 목록 (SD에 마우스를 올리면 SD 위에 말풍선 모양으로 열림)
   ============================================= */

.pv-items {
  --pv-glass: rgba(var(--pv-accent-rgb, 102,102,102), 0.2);   /* ★ 유리 색: 포인트 컬러 (0.2 = 진하기, 작을수록 투명) */
  position: absolute;
  z-index: 18;
  width: max-content;
  max-width: min(calc(5 * 32px + 4 * 8px + 2 * 12px), calc(100vw - 24px));   /* ★ 한 줄에 아이템 5개 (아이템 5 + 간격 4 + 좌우 여백) */
  padding: 7px 12px 17px;            /* ★ 위아래 7px · 좌우 12px (+ 아래 10px 는 말풍선 꼬리 자리) */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.06) 60%),   /* 유리 반사광 */
    var(--pv-glass);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border-radius: 14px;               /* 스크립트가 꼬리 달린 말풍선 모양으로 자르기 전까지 */
  animation: pv-items-in 0.18s ease;
}

.pv-items.is-below { padding: 17px 12px 7px; }   /* SD 아래에 열릴 땐 꼬리가 위로 */

/* 말풍선 테두리선 (스크립트가 모양을 그림) */

.pv-items-line {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.pv-items-line path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);  /* ★ 테두리 색 */
  stroke-width: 2;                   /* 바깥 절반은 잘려서 실제로는 1px */
}

.pv-items[hidden] { display: none; }

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

.pv-items-grid {
  position: relative;                /* 테두리선보다 위 */
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;           /* 아이템들도 판넬 가운데로 */
  gap: 8px;
}

.pv-item {
  display: flex;
  align-items: center;               /* 이미지 정가운데 */
  justify-content: center;
  width: 32px;                       /* ★ 아이템 크기 (모든 아이템 같은 크기) — 바꾸면 위 판넬 폭 계산의 32px 도 같이 */
  height: 32px;
  padding: 0;
  box-sizing: border-box;
  background: transparent;           /* 박스 없이 투명 */
  outline: none;
}

.pv-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;               /* 비율 유지하며 칸 안에 맞춤 */
  object-position: center;
  user-select: none;
}

/* 마우스를 올리면 그림 윤곽(투명하지 않은 부분)을 따라 1px 하얀 테두리 */

.pv-item:hover img,
.pv-item:focus-visible img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
          drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);   /* ★ 테두리 색 #fff · 두께 1px */
}

/* 아이템 설명 툴팁 */

.pv-item-tip {
  --tip-arrow: 50%;
  position: absolute;
  z-index: 40;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  font-size: 0.82rem;                /* ★ 설명 글자 크기 */
  line-height: 1.5;
  word-break: keep-all;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.pv-item-tip[hidden] { display: none; }

.pv-item-tip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow);
  top: 100%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: #000;
  border-bottom: 0;
}

.pv-item-tip.below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 7px solid #000; }