/* PP web — 대문 (초기)
   extrapractice.space 의 비주얼 언어 참고: 점선 블록 / 납작한 타이포 / 오프화이트 / hover 색 */

*, *::before, *::after { box-sizing: border-box; }

/* 본문 폰트: MinGothic (fonts/MinGothic-Regular.otf). Regular 한 굵기뿐이라 볼드는 브라우저가 흉내냄.
   글자가 없는 경우 대비로 Pretendard(CDN)를 뒤에 둠 */
@font-face {
  font-family: "MinGothic";
  src: url("fonts/MinGothic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 색 규칙: 키 컬러 = 실버(임시 확정). 추가 색은 리소 잉크 두 가지(형광 핑크·오렌지)만. 나머지는 흑백·회색 */
  --silver: #C0C0C0;
  --riso-pink: #FF48B0;     /* Riso Fluorescent Pink */
  --riso-orange: #FF6C2F;   /* Riso Orange */
  --accent: var(--silver);  /* 키 컬러 — 헤더·푸터 등 */
  --bg-color: #F5F5F5;      /* 배경 (오프화이트) */
  --hover: var(--riso-pink);   /* 강조: 열린 탭·카드 호버 등 */
  --link-hover: var(--riso-orange);
  --line: #000;
  --maxwidth: 1600px;
  --radius: 10px;           /* 컨테이너 모서리 곡률 (extrapractice.space 식). 테두리는 전부 1px dashed */
}

body {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;   /* 가로 스크롤 방지 (배우미 슬라이드가 넘쳐도) */
  color: #000;
  background-color: var(--bg-color);
  font-family: "MinGothic", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.01em;
  font-weight: 400;
}

h1, h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  display: inline-block;
}
/* 좌측 상단 PP 워드마크. 두 크기를 따로 조절:
   #pp-name       → 랜덤으로 나오는 나머지 텍스트 크기
   #pp-name b     → 약자 P 두 글자 크기 (더 작게 하려면 이 숫자만 줄이면 됨) */
#pp-name {
  display: block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
}
#pp-name b {
  font-weight: 700;
  font-size: 20px;
}

p { margin: 0; }

a, a::after { color: inherit; }
a:hover { color: var(--link-hover); }

/* Layout */
main {
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  padding: 20px;
  max-width: var(--maxwidth);
  margin: auto;
  width: 100%;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(240px, auto);
  gap: 20px;
}

/* Blocks */
.block {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow: auto;
}
.block:hover { background-color: var(--hover); }

/* PP 소개 = 하이라이트 톤 고정 */
#pp-intro {
  background-color: var(--hover);
}

.event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin: 10px 0;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
}
.event:hover { background-color: var(--hover); }
.event-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px dashed var(--line);
}

/* Images */
figure.block-image {
  position: relative;
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 240px;
}
figure.block-image img,
figure.block-image video {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 사진 스트립 (기록 등 여러 장 나열용) */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  margin-top: 15px;
}
.photo-strip figure.block-image {
  min-height: 0;
}
.photo-strip img {
  aspect-ratio: 1 / 1;
}

/* Q&A */
.qa .answer {
  color: #888;
  margin-bottom: 4px;
}

/* 오시는 길 지도 */
.map {
  position: relative;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 240px;
}
.map iframe {
  position: absolute;
  inset: 0;
  filter: grayscale(1);   /* 지도 색도 팔레트(흑백) 안으로 */
}
.video-embed {
  position: relative;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-open {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: inherit;
  line-height: 1;
  color: #000;
  background-color: #fff;
  border: 1px dashed #000;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;                 /* 컨테이너 호버 시에만 표시 */
  transition: opacity 0.15s ease;
}
.block-image:hover .embed-open,
.video-embed:hover .embed-open {
  opacity: 1;
}
.embed-open:hover { background-color: var(--hover); }

/* 사진/영상 크게 보기 — 같은 탭 안 오버레이 */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox-overlay.hidden { display: none; }
.lightbox-media {
  max-width: 100%;
  max-height: 100%;
  display: flex;
}
.lightbox-media img,
.lightbox-media video {
  max-width: 100%;
  max-height: calc(100dvh - 80px);
  object-fit: contain;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 100003;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: none;
  border: 1px dashed #fff;
  cursor: pointer;
  padding: 0;
}
.lightbox-close:hover { background-color: rgba(255, 255, 255, 0.15); }

.map #address {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  padding: 3px 6px;
  font-size: 16px;
  color: #fff;
  background-color: var(--accent);
}


/* Button */
#copy-btn {
  display: block;
  margin: 1em auto 0;
  padding: 15px;
  font-family: inherit;
  font-size: 18px;
  background: none;
  border: 1px dashed #000;
  border-radius: 0;
  cursor: pointer;
}
#copy-btn:hover { background-color: var(--hover); }
#copy-btn.copied { background-color: var(--accent); border-color: var(--accent); }

/* Footer */
footer { margin-top: auto; }
#footer-inner {
  padding: 20px;
  border-top: 1px dashed var(--line);
  background-color: var(--accent);
  color: #000;
  text-align: center;
}
#footer-inner a { color: #000; }
small { font-size: 14px; letter-spacing: 0.01em; }

/* Mobile */
@media only screen and (max-width: 800px) {
  .grid-3 {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .block { min-height: 120px; }
  figure.block-image, .map { min-height: 250px; }
  .block:hover, .event:hover { background-color: initial; color: inherit; }
  .photo-strip { grid-template-columns: 1fr 1fr; }
}

/* 모션 최소화 설정 시: 자동 드리프트는 JS에서 끔. 드래그·스크롤은 그대로 동작 */

/* 배우미 하위 페이지 (people/*.html) — 메인과 같은 .grid-3 사용 */
.person-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.person-head .back,
.person-head .person-name { margin: 0; }
.back a { color: inherit; }
.person-insta { font-size: 14px; }

/* 하위 페이지·PP 사진 컨테이너 — Pinterest식 쌓기(masonry). 열마다 독립적으로 쌓여서 간격이 항상 일정.
   grid 행을 1px 단위로 잘게 두고, js/main.js setupMasonry()가 칸마다 실제 높이(+간격)만큼 행을 차지하게(grid-row-end: span N) 함.
   컬럼(column-count) 대신 grid를 쓰는 이유: 가로 사진 일부를 2열 폭(.wide)으로 넓히려면 칸이 열을 넘어가야 해서.
   grid-auto-flow: dense — 넓은 칸 때문에 생긴 빈자리는 뒤의 칸이 채움 */
.person-grid,
.photo-grid {
  --cols: 3;
  --gap: 20px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
  column-gap: var(--gap);
  row-gap: 0;            /* 세로 간격은 setupMasonry가 span에 포함 */
}
.person-grid > *,
.photo-grid > * {
  align-self: start;     /* 칸 높이 = 내용 높이 (행 높이로 늘어나지 않게 — setupMasonry가 이 높이를 잼) */
  width: 100%;
  margin: 0;
}
/* 랜덤으로 고른 가로 사진 — 2열 폭(세로 사진 2장 나란히 + 사이 간격), 비율은 그대로라 높이도 같이 커짐 */
.person-grid > .wide,
.photo-grid > .wide { grid-column: span 2; }

/* 텍스트 칸·아이프레임(.video-embed도 class="block")은 정사각형 유지 */
.person-grid .block {
  aspect-ratio: 1 / 1;
}

/* 개인 페이지(people/*.html, .people-grid)·PP 사진 탭은 4열, 일정 페이지는 3열.
   사진은 원본 비율 그대로(아래 "사진 칸 예외" 규칙). 텍스트·임베드 칸(.block)은 정사각형 유지 */
.person-grid.people-grid { --cols: 4; }
.person-grid figure.block-image { cursor: zoom-in; }   /* 개인·일정 페이지 사진 — 누르면 크게 보기 */
/* 비율 스냅된 사진(js/main.js setupRatioSnap) — figure가 기준 비율(style aspect-ratio), 사진은 그 안을 가운데 기준으로 채움 */
.person-grid figure.block-image.ratio-snap img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* 사진 칸(figure.block-image)만 예외 — 가로는 칸 폭 그대로, 세로는 이미지 원본 비율대로.
   리사이징은 사진에만 적용(아이프레임은 위 .person-grid .block 규칙으로 정사각형 유지) */
.person-grid figure.block-image {
  min-height: 0;         /* 기존 240px 최소값 제거 — 이미지보다 칸이 더 커지는 원인이었음 */
}
.person-grid figure.block-image img,
.person-grid figure.block-image video {
  display: block;        /* 인라인 이미지/영상 기본 여백(＝칸이 콘텐츠보다 살짝 커 보이던 원인) 제거 */
  height: auto;           /* 정사각형 강제(aspect-ratio:1/1) 대신 원본 비율 그대로 */
  aspect-ratio: auto;
}

/* =====================================================================
   대문 탭 레이아웃 (index.html, body.tabs-page) — sonayong.com 참고
   .sheet = 탭 하나. 모든 시트가 같은 폭(화면 - 나머지 탭 띠들)으로 겹쳐 쌓이고, 각 시트의 오른쪽 끝
   세로 띠(.sheet-tab)만 보임. 위치(left)·쌓임(z-index)은 js/main.js setupSheets()가 계산.
   하위 페이지(people/, images/event/)는 이 규칙과 무관 — 기존 스타일 그대로.
   ===================================================================== */
body.tabs-page {
  --tab-w: 72px;              /* 탭 띠 하나의 폭 */
  --header-h: 48px;           /* 위 고정 헤더 높이 — 탭(시트)은 그 아래부터 */
  --header-bg: var(--accent); /* 헤더 색 = 포인트 색(--accent) */
  --header-fg: #000;
  --sheet-active: var(--bg-color);
  /* 탭 띠 색 (왼쪽부터 순서대로). 펼쳐진 탭은 --sheet-active 로 바뀜 */
  --tab-1: var(--silver);      /* 팔레트(실버·리소 핑크·오렌지)만 번갈아 */
  --tab-2: var(--riso-pink);
  --tab-3: var(--riso-orange);
  --tab-4: var(--silver);
  --tab-5: var(--riso-pink);
  --tab-6: var(--riso-orange);
  --tab-7: var(--silver);
  display: block;
  height: 100dvh;
  overflow: hidden;
}

/* 헤더 — 모든 탭 위에 항상 고정, 제목(랜덤 PP 이름)은 본문과 같은 20px */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: var(--header-fg);
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--line);   /* 헤더만 실선 — 점선인 나머지 테두리와 구분 */
}

.sheet {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  width: calc(100vw - (var(--sheet-count, 6) - 1) * var(--tab-w));
  transition: left 0.4s ease, background-color 0.2s ease;
}
.sheet:nth-of-type(1) { background-color: var(--tab-1); }
.sheet:nth-of-type(2) { background-color: var(--tab-2); }
.sheet:nth-of-type(3) { background-color: var(--tab-3); }
.sheet:nth-of-type(4) { background-color: var(--tab-4); }
.sheet:nth-of-type(5) { background-color: var(--tab-5); }
.sheet:nth-of-type(6) { background-color: var(--tab-6); }
.sheet:nth-of-type(7) { background-color: var(--tab-7); }
.sheet.active { background-color: var(--sheet-active); }
/* 탭 경계 점선 (extrapractice.space 식 1px dashed). 시트 오른쪽 끝 = 띠와 띠 사이 경계.
   맨 오른쪽 시트는 화면 끝이라 생략 */
.sheet::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  border-right: 1px dashed var(--line);
  pointer-events: none;
}
.sheet:last-of-type::after { display: none; }

/* 시트 본문 — 띠를 뺀 나머지 영역, 펼쳐진 탭만 보이고 세로 스크롤 */
.sheet-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: var(--tab-w);
  overflow-y: auto;
  padding: 20px;
  visibility: hidden;
}
.sheet.active .sheet-body { visibility: visible; }

/* 세로 띠 = 탭 이름. 글자를 한 자씩 세워서 위에서 아래로 */
.sheet-tab {
  position: absolute;
  z-index: 3;                    /* 배우미 탭처럼 본문이 띠 밑까지 올 때도 제목이 위에 */
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--tab-w);
  padding: 14px 4px 14px 0;      /* 오른쪽 4px — 제목을 띠 오른쪽 끝에 바짝 */
  display: flex;
  justify-content: flex-start;   /* 세로쓰기라 flex 주축이 세로 → 위쪽 정렬 */
  align-items: flex-start;       /* 세로쓰기(vertical-rl)는 교차축 시작이 오른쪽 → 오른쪽 정렬 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.05em;
  font-family: inherit;
  font-size: 18px;
  color: #000;
  background: none;
  border: 0;
  cursor: pointer;
}
.sheet.active .sheet-tab { cursor: default; }
.sheet:not(.active) .sheet-tab:hover { background-color: rgba(255, 255, 255, 0.35); }

.sheet-empty { color: #888; }

/* ---------------------------------------------------------------------
   가로 띠 버전 (body.tabs-horizontal) — 위 세로 띠 레이아웃을 90° 돌린 것.
   탭마다 위쪽 끝에 가로 띠(폴더 탭처럼 제목 아래로 내용이 펼쳐짐). 펼친 탭과 그 앞 탭들은 위에 띠로 쌓이고,
   뒤 탭들은 화면 아래에 띠로 모임.
   위치(top)는 js/main.js setupSheets()가 계산. 세로로 되돌리려면 index.html <body>에서 클래스만 빼면 됨
   --------------------------------------------------------------------- */
body.tabs-page.tabs-horizontal { --tab-w: 40px; }   /* 가로 띠에선 이 값이 띠 높이 */
.tabs-horizontal .sheet {
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: calc(100dvh - var(--header-h) - (var(--sheet-count, 6) - 1) * var(--tab-w));
  transition: top 0.4s ease, background-color 0.2s ease;
}
/* 띠 사이 점선 = 각 시트 위쪽 끝. 첫 시트는 헤더 점선과 겹치므로 생략 */
.tabs-horizontal .sheet::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  border-right: 0;
  border-top: 1px dashed var(--line);
}
.tabs-horizontal .sheet:last-of-type::after { display: block; }
.tabs-horizontal .sheet:first-of-type::after { display: none; }
.tabs-horizontal .sheet-body { right: 0; top: var(--tab-w); bottom: 0; }
.tabs-horizontal .sheet-tab {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: var(--tab-w);
  padding: 0 20px;
  writing-mode: horizontal-tb;
  justify-content: flex-start;
  align-items: center;
  letter-spacing: 0.01em;
}
.tabs-horizontal #people .sheet-body { top: 0; }   /* 배우미 평면은 띠 밑까지 */

/* ---------------------------------------------------------------------
   패널 버전 (body.tabs-overlay) — 띠를 쌓지 않음. 첫 탭(PP 평면)이 헤더 아래 화면 전체에 늘 깔리고,
   다른 탭은 오른쪽에서 패널로 미끄러져 들어와 평면을 덮음(왼쪽으로 평면이 살짝 보임).
   탭 이름은 헤더 오른쪽 알약 버튼(.site-nav). 열고 닫기는 js/main.js setupSheets()가 .active만 토글
   --------------------------------------------------------------------- */
body.tabs-page.tabs-overlay { --panel-w: min(78vw, 1200px); }
.tabs-overlay .site-header {
  justify-content: space-between;
  align-items: stretch;          /* 탭 칸이 헤더 높이를 꽉 채우도록 */
  gap: 20px;
  padding-right: 0;
}
.tabs-overlay #pp-name { flex-shrink: 0; align-self: center; }
/* 탭 = 헤더 오른쪽을 세로선으로 나눈 칸. 헤더와 같은 배경·검정 글씨, 열린 탭만 강조색(--hover) */
.site-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.tabs-overlay .site-nav .sheet-tab {
  position: static;
  width: auto;
  height: auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--header-fg);
  background-color: var(--header-bg);   /* 헤더와 같은 색 — 세로선으로만 구분 */
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
}
.tabs-overlay .site-nav .sheet-tab[hidden] { display: none; }
.tabs-overlay .site-nav .sheet-tab:hover,
.tabs-overlay .site-nav .sheet-tab[aria-expanded="true"] { background-color: var(--hover); }

.tabs-overlay .sheet {
  left: auto;
  right: 0;
  width: var(--panel-w);
  background-color: var(--bg-color);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 2;
}
.tabs-overlay .sheet.active { transform: none; z-index: 3; }
/* 바닥 평면 */
.tabs-overlay #people {
  left: 0;
  width: auto;
  transform: none;
  z-index: 1;
}
/* 패널 왼쪽 경계 점선. 평면에는 없음 */
.tabs-overlay .sheet::after { left: 0; right: auto; border-right: 0; border-left: 1px dashed var(--line); }
.tabs-overlay #people::after { display: none; }
/* 패널 본문은 닫히는 슬라이드가 끝난 뒤에 숨김 */
.tabs-overlay .sheet-body {
  right: 0;
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
.tabs-overlay .sheet.active .sheet-body,
.tabs-overlay #people .sheet-body { visibility: visible; transition-delay: 0s; }
/* 패널이 열리면 드러난 평면을 살짝 어둡게 — 누르면 닫힘 */
.tabs-overlay #people .quad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background-color 0.45s ease;
}
.tabs-overlay.panel-open #people .quad::after { background-color: rgba(0, 0, 0, 0.12); }
.tabs-overlay.panel-open #people { cursor: pointer; }
.tabs-overlay.panel-open .quad-photo { opacity: 0; }   /* 패널 열린 동안 평면 호버 배경 사진은 안 띄움 */
.tabs-overlay #member-view { right: 0; top: 0; }
@media only screen and (max-width: 800px) {
  /* 헤더 두 줄: 윗줄 제목, 아랫줄 탭 칸(폭 균등 분할) */
  body.tabs-page.tabs-overlay { --panel-w: 100vw; --header-h: 84px; }
  .tabs-overlay .site-header { flex-direction: column; gap: 0; padding: 0; }
  .tabs-overlay #pp-name { align-self: stretch; height: 40px; display: flex; align-items: center; padding: 0 16px; }
  .tabs-overlay .site-nav { height: 44px; border-top: 1px solid var(--line); }
  .tabs-overlay .site-nav .sheet-tab { flex: 1; justify-content: center; font-size: 14px; padding: 0 6px; }
  .tabs-overlay .site-nav .sheet-tab[hidden] + .sheet-tab { border-left: 0; }   /* 첫 칸(소개)은 왼쪽 선 없이 */
}

/* --- 소개 탭: sonayong.com 첫 탭처럼 왼쪽 위부터 본문 크기(20px) 그대로. 제목(#pp-name)은 위 헤더에 --- */
.tabs-page #pp-name {
  display: block;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 400;
}
.tabs-page #pp-name b {
  font-size: inherit;
  font-weight: 700;
  /* MinGothic은 Regular뿐이라 볼드가 안 살아서, 강조 P만 Pretendard 볼드 */
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
}

.tabs-page #pp-intro { background-color: transparent; }   /* 예전 대문의 노란 하이라이트 해제 */
.home-intro {
  font-size: 20px;
  line-height: 1.2;
}
/* 소개 탭: 글 아래 남는 공간을 밀어서 PP 그림을 왼쪽 아래에 붙임 (글이 길어도 겹치지 않음) */
#about .sheet-body { display: flex; flex-direction: column; }
.about-pp-photo {
  margin: auto 0 0;
  padding-top: 20px;
  align-self: flex-start;
  cursor: pointer;
}
.about-pp-photo img {
  display: block;
  max-width: min(360px, 60vw);
  max-height: 40vh;
  width: auto;
  height: auto;
}

/* --- 2. PP 사진: 개인 페이지처럼 4열 masonry(레이아웃은 위 .person-grid와 공통), 원본 비율 + 비슷한 비율끼리 스냅(js setupRatioSnap).
   가로 사진 일부는 랜덤으로 2열 폭. 칸을 누르면 탭을 가득 채움 --- */
.photo-grid { --cols: 4; }
.photo-grid figure.block-image {
  min-height: 0;
  cursor: zoom-in;
}
.photo-grid figure.block-image img {
  display: block;
  height: auto;
  aspect-ratio: auto;
}
.photo-grid figure.block-image.ratio-snap img {
  height: 100%;
  object-fit: cover;
}

/* --- PP 탭(대문): 배우미 4분면 지도 (supergijs.com 참고) --- */
/* 배우미 탭은 오른쪽 띠까지 탭 공간으로 — 평면을 띠 밑까지 넓혀 탭 전체 기준으로 가운데 정렬
   (띠 색 = 배경색이라 띠를 빼고 정렬하면 왼쪽으로 치우쳐 보였음). 띠 제목은 그 위에 그대로 */
#people .sheet-body { padding: 0; right: 0; }
.quad {
  --quad-bg: var(--bg-color);   /* 다른 탭 기본 배경과 통일 */
  --quad-line: var(--line);     /* 배경이 밝아져서 축·라벨은 검정 */
  --quad-inset: 9%;           /* 카드가 가장자리·라벨에 붙지 않도록 좌표 ±1 을 안쪽으로 */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640px;
  overflow: hidden;
  background-color: var(--quad-bg);
}
.quad-hair { position: absolute; }
/* 축도 사이트 테두리와 같은 1px 점선 */
.quad-hair-h { left: max(4%, 88px); right: max(4%, 88px); top: 50%; height: 0; border-top: 1px dashed var(--quad-line); }   /* 좌우 라벨(premise·process) 폭만큼은 항상 비움 */
.quad-hair-v { top: 5%; bottom: 5%; left: 50%; width: 0; border-left: 1px dashed var(--quad-line); }
.quad-label {
  position: absolute;
  color: var(--quad-line);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
/* 라벨 앞글자 p 강조 — 헤더 PP와 같은 방식(MinGothic은 볼드가 없어 Pretendard 볼드) */
.quad-label b {
  font-weight: 700;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
}
/* 라벨에 마우스를 올리면 영문 키워드 → 한글 뜻 */
.quad-label .quad-ko { display: none; }
.quad-label:hover .quad-en { display: none; }
.quad-label:hover .quad-ko { display: inline; }
/* 왼쪽·오른쪽 한글 뜻은 길어서 가로 점선과 겹침 → 그 라벨에 마우스가 있는 동안만 점선을 그쪽에서 라벨 길이만큼 짧게 */
.quad-hair-h { transition: left 0.15s, right 0.15s; }
.quad:has(.quad-label-left:hover) .quad-hair-h  { left: 170px; }
.quad:has(.quad-label-right:hover) .quad-hair-h { right: 170px; }
.quad-label-top    { top: 12px; left: 50%; transform: translateX(-50%); }
.quad-label-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.quad-label-left   { left: 12px; top: 50%; transform: translateY(-50%); }
.quad-label-right  { right: 12px; top: 50%; transform: translateY(-50%); }

/* 배우미 카드 — --x/--y(-1~1) 를 평면 안쪽(inset 제외) 좌표로 변환해 카드 중심을 놓음 */
.member {
  position: absolute;
  left: calc(var(--quad-inset) + (var(--x) + 1) / 2 * (100% - 2 * var(--quad-inset)));
  top: calc(var(--quad-inset) + (1 - var(--y)) / 2 * (100% - 2 * var(--quad-inset)));
  /* 위치 보정+드래그(translate)·호버 확대(scale)·둥실 모션(transform)을 각각 다른 속성으로 둬서 서로 안 덮어씀.
     --dx/--dy = 드래그로 딸려온 거리 (js/main.js setupMemberCards) */
  translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px));
  touch-action: none;              /* 터치로도 끌 수 있게 (카드 위에서 시작한 스크롤은 막힘) */
  user-select: none;
  /* 이름 글자 수와 상관없이 같은 크기의 원 */
  width: var(--member-size, 110px);
  height: var(--member-size, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: var(--bg-color);
  border: 1px dashed var(--line);
  border-radius: 50%;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 1;
  /* 놓으면 제자리로 "팅" — 목표를 살짝 지나쳤다 돌아오는 곡선 */
  transition: scale 0.2s ease, translate 0.5s cubic-bezier(0.34, 1.8, 0.5, 1);
  /* 둥실 모션 (supergijs.com 참고) — 방향·거리(--fx/--fy)·속도·시작 시점은 카드마다 js/main.js setupMemberCards()가 랜덤으로 */
  animation: member-float var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite;
}
@keyframes member-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--fx, 0px), var(--fy, -6px)); }
}
/* .spotlight = 모바일 자동 순환 중 배경 사진의 주인 카드 (js/main.js setupMemberCards) */
.member.spotlight { background-color: var(--hover); z-index: 2; }
.member:hover {
  background-color: var(--hover);
  z-index: 2;
  scale: 1.08;                     /* 호버 시 살짝 커짐 */
  animation-play-state: paused;    /* 누르기 쉽게 호버 중엔 멈춤 */
}
/* 끄는 중: 즉시 따라오고(복귀 transition 끔), 둥실 모션 멈춤, 맨 위로 */
.member.dragging {
  transition: scale 0.2s ease;
  animation-play-state: paused;
  cursor: grabbing;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
  .member { animation: none; }
}
/* 개인 페이지에 사진이 있는 배우미 — 호버 시 그 사람 사진이 탭 배경 전체에 옅게(30%) 깔림 (js/main.js setupMemberCards) */
.quad-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.quad-photo.show { opacity: 0.3; }

/* --- 오시는 길: 지도가 탭(띠 제외 영역)을 가득 채움 --- */
.sheet-map { padding: 0; }
.sheet-map .map {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
}
.sheet-map .map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.sheet-map #address { text-decoration: none; }

/* --- 3. 일정 --- */
/* 일정 목록 — 박스 없이 가로 점선으로만 구분, 탭 끝까지 */
#events .sheet-body { padding: 0; }
#events .event {
  /* 한 줄에 썸네일 / 일정 이름 / 위치 / 날짜(오른쪽 끝) — 패널 폭을 다 씀 */
  display: grid;
  grid-template-columns: 48px 2fr 1fr 1fr;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
}
#events .event-date { text-align: right; }
@media only screen and (max-width: 800px) {
  /* 좁은 화면: 썸네일 옆에 일정 이름·위치·날짜를 세로로 */
  #events .event { grid-template-columns: 48px 1fr; gap: 2px 12px; }
  #events .event-thumb { grid-row: span 3; }
  #events .event-date { text-align: left; }
}
/* 페이지가 아직 없는 임시 항목 — 눌리지 않음 */
#events .event-pending { cursor: default; }
#events .event-pending:hover { background-color: transparent; color: inherit; }
#events .event-pending .event-thumb { background-color: #e4e4e4; }
/* 일정 항목·배우미 카드를 누르면 탭 안에 그 페이지(iframe) 표시 — ←로 복귀 (js/main.js setupInTabView) */
.in-tab-view {
  position: absolute;
  inset: 0;
  z-index: 2;                      /* 배우미 탭에선 4분면 카드들 위를 덮음 */
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
}
/* 배우미 탭 본문은 띠 밑까지 넓혀놨으므로, 페이지 표시는 띠를 뺀 영역만 */
#member-view { right: var(--tab-w); }
.tabs-horizontal #member-view { right: 0; top: var(--tab-w); }
/* 배우미 페이지가 떠 있는 동안 4분면은 숨김 (띠 영역으로 라벨·카드가 비쳐 보이지 않게) */
#people .sheet-body:has(#member-view:not(.hidden)) .quad { visibility: hidden; }
.in-tab-view.hidden, #event-list.hidden { display: none; }
.in-tab-view .back { margin: 20px 20px 0; }
.in-tab-back {
  padding: 0;
  font-family: inherit;
  font-size: 18px;
  background: none;
  border: 0;
  cursor: pointer;
}
.in-tab-back:hover { color: var(--link-hover); }
.in-tab-view iframe {
  flex: 1;
  width: 100%;
  border: 0;
}
/* 일정·배우미 탭 iframe 안에 들어간 페이지 — 자체 ←·푸터는 숨김(탭 쪽 ← 사용) */
body.embedded .person-head .back,
body.embedded footer { display: none; }

/* 모바일: 띠 폭을 줄이고, 4분면은 화면보다 크게(스크롤) */
@media only screen and (max-width: 800px) {
  body.tabs-page { --tab-w: 30px; }   /* 탭 6개 → 띠 5개가 화면을 너무 먹지 않게 */
  /* 모바일 사진은 가로 2개까지: PP 사진 탭 · 일정 페이지 · 개인 페이지 */
  .photo-grid,
  .person-grid,
  .person-grid.people-grid { --cols: 2; --gap: 10px; }   /* 넓은 가로 사진(.wide)은 한 줄 전체 */
  .sheet-tab { font-size: 14px; padding: 10px 2px 10px 0; }
  .sheet-body:not(.sheet-map) { padding: 16px; }   /* 지도는 탭을 가득 채우므로 제외 */
  /* PP 평면은 화면 한 장에 다 들어오게 — 평면을 화면 크기 그대로, 카드 원을 작게 */
  #people .sheet-body { overflow: hidden; }
  .quad { min-height: 0; --quad-inset: 10%; }
  .quad-label { font-size: 12px; }
  /* 좁은 화면에선 4%가 너무 짧아 가로축이 좌우 라벨(주제 4·2)과 겹침 → 라벨 폭만큼 비워둠 (주제 이름이 길어지면 이 값도 늘릴 것) */
  .quad-hair-h { left: 70px; right: 70px; }
  .quad:has(.quad-label-left:hover) .quad-hair-h  { left: 125px; }
  .quad:has(.quad-label-right:hover) .quad-hair-h { right: 125px; }
  .member { --member-size: 56px; font-size: 13px; padding: 4px; }
}