/* project/project.css */
/* Pretendard */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root {
  --font-sans: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;

  /* Modal base (DARK THEME) */
  --pText: rgba(255, 255, 255, 0.92);
  --pSub: rgba(255, 255, 255, 0.68);
  --pLine: rgba(255, 255, 255, 0.14);
  --pGlass: rgba(20, 20, 20, 0.65);

  /* default fallback accent (if nothing set) */
  --accent: 200 200 200;
  --accent2: 220 220 220;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--pText);
  /* Ensure body uses light text */
}

/* =========================
   Page layout (list pages)
   ========================= */
.page--research,
.page--tech,
.page--choreo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 22px 120px;
  position: relative;
}

/* active nav */
.nav a.is-active {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
}

/* About 링크 버튼 느낌 */
.navBtnLink {
  text-decoration: none;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

/* =========================
   Accent theme (IMPORTANT)
   - JS에서 body[data-type]을 세팅하므로 모달까지 테마 적용됨
   ========================= */
body[data-type="research"] {
  --accent: 236 140 214;
  /* pink */
  --accent2: 160 170 255;
  /* lilac */
}

body[data-type="technology"] {
  --accent: 120 140 255;
  /* blue */
  --accent2: 180 190 255;
}

body[data-type="choreograph"] {
  --accent: 235 230 120;
  /* soft yellow */
  --accent2: 255 245 170;
}

/* 페이지 초기상태/혹시 data-type 안붙을 때 대비 */
.page--research {
  --accent: 236 140 214;
  --accent2: 160 170 255;
}

.page--tech {
  --accent: 120 140 255;
  --accent2: 180 190 255;
}

.page--choreo {
  --accent: 235 230 120;
  --accent2: 255 245 170;
}

/* Page header section */
.pageHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 16px;
}

.pageTitle {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.1;
}

.pageSub {
  font-size: 16px;
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
  max-width: 65ch;
}

.pill {
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .pageHead {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 12px;
  }
}

/* -------------------------------------------
   Slider Styles (New)
   ------------------------------------------- */
.r1-slider {
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.r1-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* ✅ 16:9 프레임 고정 */
  min-height: unset;
  /* 기존 200px 제거 */
  display: grid;
  grid-template-columns: 1fr;
}

.r1-slide {
  grid-area: 1 / 1 / 2 / 2;
  /* overlap all slides */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  width: 100%;
}

.r1-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
  z-index: 1;
}

.r1-slide img,
.r1-slide video {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* ✅ 16:9 유지 */
  height: auto;
  /* ✅ 고정 높이 제거 */
  object-fit: contain;
  /* ✅ 세로 이미지도 잘리지 않고 전체 표시 */
  display: block;
  background: rgba(0, 0, 0, 0.1);
  /* 여백 배경색 */
}

/* Slide Caption (Optional override) */
.r1-slideCap {
  margin-top: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--c-sub);
  line-height: 1.4;
}

/* Slider Nav Controls */
.r1-sliderNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.pSlideCount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-sub);
  min-width: 40px;
  text-align: center;
}

.pSlideBtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: 0.2s;
}

.pSlideBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}


/* -------------------------------------------
   Typography & Layout Refinements
   ------------------------------------------- */
.r1-hero {
  margin-bottom: 40px;
  /* More space after title */
}

.r1-title {
  font-size: 32px;
  /* Slightly larger */
  line-height: 1.2;
  margin-bottom: 8px;
}

.r1-sub {
  font-size: 16px;
  opacity: 0.7;
}

/* Make body text more readable */
.heading-4 {
  font-size: 15px;
  line-height: 1.2;
  /* Relaxed leading */
  color: rgba(255, 255, 255, 0.85);
  /* Slightly brighter for readibility */
  font-weight: 300;
}

/* Labels */
.labels {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-accent);
  /* Use accent color for labels */
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Separators */
.r1-hr {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 30px 0;
  /* More breathing room */
}

/* Section spacing */
.r1-section {
  margin-bottom: 40px;
}

.heading-3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #fff;
}

/* subtle background glow like circles */
.page--research::before,
.page--tech::before,
.page--choreo::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(520px 420px at 22% 18%,
      rgb(var(--accent) / 0.20),
      rgb(var(--accent) / 0) 62%),
    radial-gradient(520px 420px at 78% 34%,
      rgb(var(--accent2) / 0.16),
      rgb(var(--accent2) / 0) 62%);
}

/* =========================
   Gallery container
   ========================= */
.gallery {
  display: block;
  margin-top: 18px;
}

/* =========================
   List layout (Cargo-ish rows)
   ========================= */
.rList {
  display: block;
}

.rRow {
  border-radius: 18px;
  padding: 1.35rem 0;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  color: var(--pText);
}

.rRow:hover {
  background: rgba(255, 255, 255, 0.08);
  /* Dark mode hover */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgb(var(--accent) / 0.18) inset;
  transform: translateY(-1px);
}

.rRow:focus {
  outline: none;
}

.rRow:focus-visible {
  outline: 2px solid rgb(var(--accent) / 0.35);
  outline-offset: 6px;
}

/* separator */
.rHr {
  border: 0;
  border-top: 1px solid var(--pLine);
  margin: 1.05rem 0 1.15rem;
}

/* title highlight (yellow -> accent tint) */
.rHi {
  background: rgb(var(--accent) / 0.18);
  color: rgba(255, 255, 255, .95);
  /* White text on accent bg */
  padding: .12rem .42rem;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgb(var(--accent) / 0.16) inset;
}

/* right tags */
.rTag {
  opacity: .9;
  color: var(--pSub);
  margin-left: .35rem;
}

.rRow:hover .rTag {
  color: var(--pText);
}

.rArrow {
  margin-left: .6rem;
  opacity: .75;
}

.rRowBody {
  align-items: start;
}

.rThumb {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  /* Light border for dark bg */
  background: rgba(255, 255, 255, 0.05);
}

.rThumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================
   Base tags (if you still use .tag)
   ========================= */
.tag {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

/* =========================
   Modal (centered)
   ========================= */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;

  /* always center */
  place-items: center;
  padding: 4vh 4vw;
}

.modal.is-open {
  display: grid;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* Darker backdrop */
  backdrop-filter: blur(8px);
}

.modal__panel--project {
  position: relative;
  z-index: 1;

  width: min(1040px, 92vw);
  max-height: 88vh;
  overflow: auto;

  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);

  background: var(--pGlass);
  /* Now dark glass */
  backdrop-filter: blur(24px);
  /* Stronger blur */
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgb(var(--accent) / 0.12) inset;

  padding: 22px;
  color: var(--pText);
}

.modal__panel--project::-webkit-scrollbar {
  width: 10px;
}

.modal__panel--project::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

/* Language Toggle Button (Bio Modal) */
.bioLangBtn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bioLangBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

/* close button */
#projectModal .pClose,
#projectModal .pLangBtn {
  /* Position removed here to allow flex layout in HTML */
  /* If using flex container (as updated in JS), these buttons are static within the container */
  position: relative;
  top: auto;
  right: auto;

  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  /* Dark glass button */
  color: rgba(255, 255, 255, 0.72);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  font-size: 13px;
  /* for lang text */
  font-weight: 500;
}

#projectModal .pClose:hover,
#projectModal .pLangBtn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

@media (max-width: 620px) {
  .modal {
    padding: 14px;
  }

  .modal__panel--project {
    width: calc(100vw - 28px);
    max-height: 88vh;
    padding: 18px 16px 22px;
  }
}

/* =========================
   Cargo Modal Content
   ========================= */
#projectModal .r1-diatype {
  padding: 1.8rem;
}

/* highlight inside modal (yellow -> accent) */
#projectModal .r1-highlight {
  background: rgb(var(--accent) / 0.18);
  color: rgba(255, 255, 255, .95);
  /* White text */
  padding: .10rem .42rem;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgb(var(--accent) / 0.16) inset;
}

#projectModal .r1-hr {
  border: 0;
  border-top: 1px solid var(--pLine);
  margin: 1.1rem 0 1.25rem;
}

#projectModal .r1-title {
  font-size: clamp(2.2rem, 4vw, 4.0rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--pText);
}

#projectModal .r1-sub {
  margin-top: .8rem;
  opacity: .78;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--pSub);
}

/* Cargo-ish text styles */
#projectModal .labels {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .70;
  color: var(--pSub);
}

#projectModal .heading-3 {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--pText);
}

#projectModal .heading-4 {
  font-size: 14px;
  line-height: 1.45;
  opacity: .92;
  color: var(--pText);
}

#projectModal .caption {
  font-size: 12.5px;
  line-height: 1.65;
  opacity: .82;
  color: var(--pSub);
}

/* Media */
#projectModal .r1-heroMedia {
  margin-top: 10px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  /* Dark theme border */
  background: rgba(255, 255, 255, 0.04);
}

#projectModal .r1-heroMedia img {
  display: block;
  width: 100%;
  height: auto;
}

#projectModal .r1-mediaCap {
  margin-top: 10px;
  opacity: .72;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pSub);
}

/* Links row */
#projectModal .r1-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#projectModal .r1-links a.btn {
  color: var(--pText);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Sections */
#projectModal .r1-section {
  padding-top: .35rem;
}

#projectModal .r1-section .heading-3 {
  margin-bottom: .35rem;
}

#projectModal .r1-section .heading-4 {
  max-width: 74ch;
}

/* Keywords */
#projectModal .r1-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Pills inside modal blocks */
#projectModal .r1-diatype .rTag {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: .22rem .62rem;
  font-size: .85rem;
  opacity: .92;
  background: rgba(255, 255, 255, 0.06);
  /* Dark glass pill */
  color: rgba(255, 255, 255, 0.85);
}

/* Big statement (optional) */
#projectModal .r1-statement h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* responsive tweaks */
@media (max-width: 760px) {
  #projectModal .r1-diatype {
    padding: 1.2rem;
  }

  #projectModal .r1-section .heading-4 {
    max-width: 100%;
  }
}

/* =========================
   Cargo column-set emulation
   (because you use <column-set>, <column-unit>)
   ========================= */
column-set {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 12px;
  width: 100%;
}

column-set[gutter="2"] {
  column-gap: 14px;
}

column-set[gutter="4rem"] {
  column-gap: 4rem;
}

column-unit {
  display: block;
  min-width: 0;
}

/* span mapping */
column-unit[span="1"] {
  grid-column: span 1;
}

column-unit[span="2"] {
  grid-column: span 2;
}

column-unit[span="3"] {
  grid-column: span 3;
}

column-unit[span="4"] {
  grid-column: span 4;
}

column-unit[span="5"] {
  grid-column: span 5;
}

column-unit[span="6"] {
  grid-column: span 6;
}

column-unit[span="7"] {
  grid-column: span 7;
}

column-unit[span="8"] {
  grid-column: span 8;
}

column-unit[span="9"] {
  grid-column: span 9;
}

column-unit[span="10"] {
  grid-column: span 10;
}

column-unit[span="11"] {
  grid-column: span 11;
}

column-unit[span="12"] {
  grid-column: span 12;
}

/* =========================
   Choreograph Card Grid
   ========================= */
.page--choreo .gallery {
  margin-top: 22px;
}

/* grid */
.cGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

/* 3-up / 2-up / 1-up */
.cCard {
  grid-column: span 4;
}

@media (max-width: 980px) {
  .cCard {
    grid-column: span 6;
  }
}

@media (max-width: 620px) {
  .cCard {
    grid-column: span 12;
  }
}

/* card */
.cCard {
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cCard:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgb(var(--accent) / 0.18) inset;
}

.cCard:focus-visible {
  outline: 2px solid rgb(var(--accent) / 0.35);
  outline-offset: 6px;
}

/* thumb */
.cThumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.cThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.98) contrast(1.02);
}

.cThumbPh {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(420px 240px at 30% 30%,
      rgb(var(--accent) / 0.22),
      transparent 60%),
    radial-gradient(420px 240px at 70% 70%,
      rgb(var(--accent2) / 0.16),
      transparent 60%),
    rgba(255, 255, 255, 0.18);
}

.cThumbGlow {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  background:
    radial-gradient(340px 220px at 20% 30%,
      rgb(var(--accent) / 0.18),
      transparent 60%),
    radial-gradient(340px 220px at 80% 45%,
      rgb(var(--accent2) / 0.14),
      transparent 60%);
  mix-blend-mode: screen;
  opacity: .9;
}

/* body */
.cBody {
  padding: 14px 14px 16px;
}

.cMeta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  opacity: .78;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cType {
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.35);
}

.cYear {
  font-style: italic;
  opacity: .85;
}

.cTitle {
  margin: 10px 0 8px;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.cDesc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .80;
}

.cTags {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cTag {
  font-size: 12px;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.40);
  opacity: .9;
}

/* Language toggle (project pages only) */
.langToggle {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.langToggle:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* -------------------------------------------
   New Metadata Panel & Video Frame Styles
   ------------------------------------------- */

/* Tight line spacing for content */
.pTight {
  line-height: 1.25;
}

/* Side panel stack */
.pSideStack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Metadata block styling */
.pMetaBlock {
  padding: 12px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

/* Metadata row (for TYPE/YEAR) */
.pMetaRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pMetaRow:last-child {
  border-bottom: 0;
}

/* Metadata key label */
.pMetaK {
  opacity: 0.7;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* Video frame (16:9) */
.pVideoFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

.pVideoFrame video .pVideoFrame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 영상은 보통 cover가 보기 좋음 */
  display: block;
}

/* =========================================================
   ✅ MOBILE OPTIMIZATION (append at very bottom)
   - Remove existing scattered @media blocks and use this only.
   - Goals: readable type, stable modal, better tap targets,
            slider/video correctness, grid/list comfort.
   ========================================================= */

/* ---------- Tablet & below ---------- */
@media (max-width: 980px) {

  /* page padding */
  .page--research,
  .page--tech,
  .page--choreo {
    padding: 82px 18px 110px;
  }

  .pageHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }

  .pageTitle {
    font-size: 34px;
  }

  .pageSub {
    font-size: 15px;
    line-height: 1.65;
    max-width: 70ch;
  }

  .pill {
    font-size: 11.5px;
    padding: 7px 12px;
  }

  /* list rows */
  .rRow {
    padding: 1.15rem 0;
    border-radius: 16px;
  }

  /* modal */
  .modal {
    padding: 14px;
  }

  .modal__panel--project {
    width: calc(100vw - 28px);
    max-height: 90vh;
    padding: 18px;
    border-radius: 22px;
    -webkit-overflow-scrolling: touch;
  }

  #projectModal .r1-diatype {
    padding: 1.2rem;
  }

  #projectModal .r1-title {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {

  /* page */
  .page--research,
  .page--tech,
  .page--choreo {
    padding: 74px 16px 96px;
  }

  .pageTitle {
    font-size: 28px;
    line-height: 1.15;
  }

  .pageSub {
    font-size: 14px;
    line-height: 1.7;
    opacity: 0.78;
  }

  .pill {
    font-size: 11px;
    padding: 6px 10px;
  }

  /* list layout: prevent weird flex assumptions */
  .rRowBody {
    align-items: start;
    gap: 10px;
  }

  .rThumb {
    border-radius: 12px;
  }

  /* choreo grid: ensure single column is comfy */
  .cGrid {
    gap: 12px;
  }

  .cCard {
    border-radius: 18px;
  }

  .cBody {
    padding: 12px 12px 14px;
  }

  .cTitle {
    font-size: 16px;
  }

  .cDesc {
    font-size: 12px;
    line-height: 1.55;
  }

  .cMeta {
    font-size: 11px;
  }

  .cTag {
    font-size: 11px;
    padding: 0.18rem 0.52rem;
  }

  /* modal */
  .modal {
    padding: 12px;
  }

  .modal__panel--project {
    width: calc(100vw - 24px);
    max-height: 92vh;
    padding: 16px;
    border-radius: 18px;
  }

  /* top buttons (lang/close) tap target */
  #projectModal .pClose,
  #projectModal .pLangBtn {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }

  /* modal typography */
  #projectModal .r1-diatype {
    padding: 1rem;
  }

  #projectModal .r1-title {
    font-size: clamp(1.55rem, 6vw, 2.6rem);
    line-height: 1.08;
  }

  #projectModal .r1-sub {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  #projectModal .labels {
    font-size: 11px;
    letter-spacing: 0.07em;
  }

  #projectModal .heading-3 {
    font-size: 15px;
    line-height: 1.55;
  }

  #projectModal .heading-4 {
    font-size: 13px;
    line-height: 1.65;
  }

  #projectModal .caption {
    font-size: 12.5px;
    line-height: 1.7;
  }

  #projectModal .r1-heroMedia {
    border-radius: 14px;
  }

  /* slider buttons */
  .pSlideBtn {
    width: 30px;
    height: 30px;
  }

  .pSlideCount {
    font-size: 11px;
    min-width: 36px;
  }

  /* ✅ video frame selector bug fix
     (your current CSS: ".pVideoFrame video .pVideoFrame iframe" is wrong)
     This overrides it safely. */
  .pVideoFrame video,
  .pVideoFrame iframe {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* slider media: keep 16:9 and avoid cropping */
  .r1-slide img,
  .r1-slide video {
    object-fit: contain;
  }

  /* meta block */
  .pMetaBlock {
    padding: 10px;
    border-radius: 12px;
  }

  .pMetaK {
    font-size: 11px;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {

  .page--research,
  .page--tech,
  .page--choreo {
    padding: 68px 12px 86px;
  }

  .pageTitle {
    font-size: 24px;
  }

  .pageSub {
    font-size: 13px;
  }

  /* modal sizing */
  .modal__panel--project {
    width: calc(100vw - 16px);
    max-height: 94vh;
    padding: 14px;
    border-radius: 16px;
  }

  #projectModal .r1-diatype {
    padding: 0.9rem;
  }

  #projectModal .r1-title {
    font-size: clamp(1.35rem, 7vw, 2.15rem);
  }

  #projectModal .r1-sub {
    font-size: 0.88rem;
  }

  #projectModal .r1-hr {
    margin: 0.95rem 0 1.05rem;
  }

  /* slider nav tighter */
  .r1-sliderNav {
    gap: 8px;
    margin-top: 10px;
  }

  .pSlideBtn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* card details */
  .cBody {
    padding: 10px 10px 12px;
  }

  .cTitle {
    font-size: 15px;
  }

  .cDesc {
    font-size: 11.5px;
  }

  /* make thumb a touch taller on tiny screens */
  .cThumb {
    aspect-ratio: 16 / 11;
  }
}

/* ---------- Extra small devices ---------- */
@media (max-width: 360px) {

  .page--research,
  .page--tech,
  .page--choreo {
    padding: 64px 10px 78px;
  }

  .pageTitle {
    font-size: 22px;
  }

  .pageSub {
    font-size: 12px;
  }

  .modal__panel--project {
    padding: 12px;
  }

  #projectModal .r1-title {
    font-size: clamp(1.25rem, 8vw, 2rem);
  }

  #projectModal .pClose,
  #projectModal .pLangBtn {
    width: 38px;
    height: 38px;
  }
}

/* ---------- Reduced motion (nice on mobile) ---------- */
@media (prefers-reduced-motion: reduce) {

  .rRow,
  .cCard,
  #projectModal .pClose,
  #projectModal .pLangBtn,
  .pSlideBtn {
    transition: none !important;
  }
}

/* =========================================================
   Project Modal — Mobile FIX PACK
   (append at VERY END of project/project.css)
   - 1) modal 흔들림/바운스 최소화
   - 2) 상단 버튼(닫기/언어) 겹침 방지 + 클릭 쉬움
   - 3) 키워드(pills) 더 작게 + 공간 덜 먹게
   ========================================================= */

@media (max-width: 768px) {

  /* ✅ 모달 스크롤 바운스/체인 방지 */
  #projectModal .modal__panel--project {
    max-height: calc(100dvh - 24px) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  /* ✅ 상단 컨트롤 영역을 '고정 느낌'으로 + 배경 깔기 */
  /* (JS/HTML에서 컨트롤 래퍼가 있다면 그걸 target하는게 베스트인데,
     없을 수도 있어서 버튼 자체로 처리) */
  #projectModal .pClose,
  #projectModal .pLangBtn {
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
    z-index: 50;
  }

  /* ✅ 상단 버튼이 내용 위로 겹쳐도 클릭되게 */
  #projectModal .pClose,
  #projectModal .pLangBtn {
    position: sticky !important;
    top: 10px !important;
  }

  /* ✅ 내용이 버튼 아래로 들어가서 겹치는 문제 방지 (핵심) */
  #projectModal .r1-diatype {
    padding-top: 56px !important;
    /* 버튼 영역만큼 안전 여백 */
  }

  /* ✅ 타이틀/서브 타이틀이 너무 위로 붙는 것 방지 */
  #projectModal .r1-title {
    margin-top: 2px !important;
  }

  /* =========================
     ✅ 키워드(태그) 컴팩트
     ========================= */

  #projectModal .r1-keywords {
    gap: 6px !important;
    margin-top: 8px !important;
    align-items: center;

    /* 너무 많아 레이아웃 점프/스크롤 길이 늘어나는 거 방지 */
    max-height: 72px;
    /* 약 3줄 */
    overflow: hidden;
  }

  #projectModal .r1-diatype .rTag {
    font-size: 11.5px !important;
    padding: 4px 8px !important;
    line-height: 1.2 !important;
    border-radius: 999px !important;

    white-space: nowrap;
    /* pill 내부 2줄 금지 */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 긴 태그 말줄임 */
  }

  /* =========================
     ✅ 모달 내부에서 이미지/슬라이더로 인해 흔들리는 느낌 완화
     ========================= */
  #projectModal img,
  #projectModal video,
  #projectModal iframe {
    max-width: 100%;
    height: auto;
  }

  /* ✅ 네 기존 selector 버그(.pVideoFrame video .pVideoFrame iframe) 확실히 덮기 */
  .pVideoFrame video,
  .pVideoFrame iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}

/* 더 작은 폰에서는 더 컴팩트 */
@media (max-width: 480px) {

  #projectModal .r1-diatype {
    padding-top: 52px !important;
  }

  #projectModal .pClose,
  #projectModal .pLangBtn {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
    top: 8px !important;
  }

  #projectModal .r1-keywords {
    max-height: 64px;
  }

  #projectModal .r1-diatype .rTag {
    font-size: 11px !important;
    padding: 3px 7px !important;
  }
}