/* =========================================================
   Baritone. Dominic Lim — Single Source of Truth (SSOT) CSS
   - Black theme / Libre Bodoni
   - Header typography unified across ALL pages
   - Video thumbnails hard-fixed (no overlay masking)
========================================================= */

/* ----------------------------
   0) Design Tokens
---------------------------- */
:root{
  /* colors */
  --bg:#000;
  --panel: rgba(255,255,255,0.02);
  --text:#fff;
  --muted: rgba(255,255,255,0.66);
  --muted2: rgba(255,255,255,0.52);
  --line: rgba(255,255,255,0.16);
  --line2: rgba(255,255,255,0.28);
  --shadow: 0 18px 54px rgba(0,0,0,0.62);

  /* layout */
  --max: 1040px;

  /* radius */
  --radius: 14px;
  --radius-sm: 10px;

  /* typography */
  --font-serif: "Libre Bodoni", "Bodoni MT", "Didot", "Times New Roman", serif;

  --fw: 600;

  /* HEADER TYPO — SINGLE SOURCE OF TRUTH */
  --brand-size: 18px;
  --brand-track: 0.06em;

  --nav-size: 12px;
  --nav-track: 0.18em; /* matches your original nav vibe */

  --dropdown-size: 12px;
  --dropdown-track: 0.12em;

  /* page titles */
  --h1-size: 42px;
  --h1-track: 0.08em;

  /* section titles */
  --h2-size: 20px;
  --h2-track: 0.14em;

  /* meta */
  --meta-size: 11px;
  --meta-track: 0.16em;

  /* card title */
  --card-title-size: 18px;
  --card-title-track: 0.06em;
}

/* ----------------------------
   1) Reset / Base
---------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: var(--fw);
  letter-spacing: 0.02em;
  line-height: 1.75;

  /* IMPORTANT: avoid faux bold / inconsistent rendering */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.78; }

img{
  display:block;
  max-width:100%;
  height:auto;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

button{ font-family: inherit; }

/* ----------------------------
   2) Layout Utilities
---------------------------- */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

main{ padding: 64px 0 90px; }

/* Titles / text */
.page-title{
  margin: 28px 0 14px;
  font-size: var(--h1-size);
  font-weight: var(--fw);
  letter-spacing: var(--h1-track);
}

.kicker{
  margin: 0 0 18px;
  max-width: 72ch;
  color: var(--muted);
}

.section-title{
  margin: 34px 0 14px;
  font-size: var(--h2-size);
  font-weight: var(--fw);
  letter-spacing: var(--h2-track);
  text-transform: uppercase;
}

.prose{
  white-space: pre-wrap;
  max-width: 80ch;
  color: var(--muted);
}

/* ----------------------------
   3) Header / Nav  (UNIFIED)
   NOTE: no page-specific overrides anywhere.
---------------------------- */
header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(0,0,0,.78);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: none;
}

.navbar{
  min-height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

header .brand{
  font-size: var(--brand-size);
  letter-spacing: var(--brand-track);
  font-weight: var(--fw);
}

header .navlinks{
  display:flex;
  align-items:center;
  gap: 18px;

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);
}

header .navlinks a,
header .dropdown-trigger{
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}

/* Dropdown */
header .navlinks .dropdown{ position: relative; }
header .navlinks .dropdown > a{
  display:flex;
  align-items:center;
  gap: 6px;
}

header .navlinks .dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left: -10px;
  min-width: 180px;
  padding: 10px 0;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

header .navlinks .dropdown-menu a{
  display:block;
  padding: 9px 14px;

  font-size: var(--dropdown-size);
  letter-spacing: var(--dropdown-track);
  text-transform: uppercase;
  font-weight: var(--fw);
  color: #fff;
}

header .navlinks .dropdown:hover .dropdown-menu{ display:block; }

.hamburger{
  display:none;
  border: 1px solid var(--line);
  background: transparent;
  color:#fff;
  border-radius: 999px;
  padding: 9px 14px;

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);
  cursor:pointer;
}

/* Mobile drawer overlay */
.mobile-drawer{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.62);
  z-index: 120;
}
.mobile-drawer.open{ display:block; }

.mobile-drawer .panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width: min(360px, 86vw);
  background: #000;
  border-left: 1px solid var(--line);
  padding: 22px;
  overflow:auto;
}

.mobile-drawer a{
  display:block;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);
}

.mobile-drawer .sub{
  padding-left: 12px;
  font-size: var(--nav-size);
  color: var(--muted);
  border-bottom: none;
}

/* ----------------------------
   4) Common Blocks (Home/Pages)
---------------------------- */
.hero{ margin-top: 16px; }
.hero img{
  width:100%;
  border-radius: var(--radius-sm);
}

.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:start;
}

.cardgrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow:hidden;
  transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.card:hover{
  transform: translateY(-1px);
  border-color: var(--line2);
  opacity: .96;
}

.card img{
  width:100%;
  height: 240px;
  object-fit: cover;
}

.card .pad{ padding: 14px; }
.card .title{
  font-size: 16px;
  font-weight: var(--fw);
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.card .meta{
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  letter-spacing: .06em;
}

.listblock{ margin: 22px 0; }
.listblock h3{
  margin:0 0 10px;
  font-size: 16px;
  font-weight: var(--fw);
  letter-spacing: .10em;
}
.bullets{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
}
.bullets li{ margin: 6px 0; }

/* ----------------------------
   5) Photo Gallery + Lightbox
---------------------------- */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.gallery button{
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
}

.gallery img{
  width:100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  transition: transform 220ms ease, opacity 220ms ease;
}
.gallery img:hover{ transform: translateY(-1px); opacity: .95; }

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index: 220;
  background: rgba(0,0,0,.90);
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.lightbox.open{ display:flex; }

.lightbox img{
  max-width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: 12px;
}

.lightbox .close{
  position: fixed;
  top: 16px;
  right: 16px;
  background: transparent;
  color:#fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);
  cursor:pointer;
}

/* ----------------------------
   6) Video Page — stable, conflict-free
---------------------------- */
.vfilters{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 22px;
}

.vfilterbtn{
  border: 1px solid var(--line2);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);

  cursor: pointer;
  transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.vfilterbtn:hover{
  opacity: .82;
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-1px);
}
.vfilterbtn.active{
  border-color: #fff;
  opacity: 1;
}

/* sections */
.vsec{
  margin: 26px 0 32px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.vsec-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.vsec-title{
  margin:0;
  font-size: 18px;
  font-weight: var(--fw);
  letter-spacing: var(--h2-track);
  text-transform: uppercase;
}

.vsec-count{
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  color: var(--muted2);
}

/* grid */
.vgrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* card */
.vcard{
  width:100%;
  text-align:left;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px;
  cursor:pointer;
  transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.vcard:hover{
  transform: translateY(-2px);
  border-color: var(--line2);
  opacity: .96;
}

/* VIDEO THUMBNAIL — HARD FIX */
.vthumb{
  position: relative;
  width:100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius: 12px;
  background: #000;
  isolation: isolate;
}

/* never allow pseudo overlays to hide the image */
.vthumb::before,
.vthumb::after{
  content: none !important;
  display: none !important;
}

.vthumb > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  object-fit: cover;
  object-position: center;
  display:block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  z-index: 1 !important;
}

/* play icon */
.vplay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index: 2;
}
.vplay::before{
  content:"";
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(8px);
}
.vplay::after{
  content:"";
  width:0; height:0;
  border-left: 14px solid rgba(255,255,255,0.92);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
  position:absolute;
}

/* meta */
.vmeta{
  margin-top: 12px;
  line-height: 1.35;
}
.vlabel{
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: var(--fw);
}
.vtitle{
  margin-top: 6px;
  font-size: var(--card-title-size);
  font-weight: var(--fw);
  letter-spacing: var(--card-title-track);
}

/* ----------------------------
   7) Video Lightbox (modal) — .vlb
---------------------------- */
.vlb{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.86);
  z-index: 230;
  padding: 18px;
}
.vlb.open{ display:flex; }

.vlb-stage{ width: min(1040px, 92vw); }

.vlb-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.vlb-frame iframe{
  width:100%;
  height:100%;
  display:block;
}

.vlb-meta{ margin-top: 12px; }

.vlb-label{
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  text-transform: uppercase;
  color: var(--muted2);
  font-weight: var(--fw);
}
.vlb-title{
  margin-top: 6px;
  font-size: var(--card-title-size);
  font-weight: var(--fw);
  letter-spacing: var(--card-title-track);
}

.vlb-close{
  position: fixed;
  top: 16px;
  right: 16px;
  background: transparent;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;

  font-size: var(--nav-size);
  letter-spacing: var(--nav-track);
  text-transform: uppercase;
  font-weight: var(--fw);

  cursor: pointer;
}

.vlb-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.30);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.vlb-nav.prev{ left: 18px; }
.vlb-nav.next{ right: 18px; }

@media (max-width: 720px){
  .vlb-nav{ display:none; }
}

/* ----------------------------
   8) Footer
---------------------------- */
footer{
  border-top: 1px solid var(--line);
  padding: 18px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: var(--fw);
}

/* ----------------------------
   9) Reveal animation (optional)
---------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ----------------------------
   10) Responsive
---------------------------- */
@media (max-width: 980px){
  .vgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .cardgrid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .vgrid{ grid-template-columns: 1fr; }
  .gallery img{ height: 220px; }
}

@media (max-width: 720px){
  .navlinks{ display:none; }
  .hamburger{ display:inline-flex; }
  main{ padding-top: 54px; }
  .page-title{ font-size: 34px; }
}

/* ===== HEADER TYPO SIZE HARD LOCK (all pages) ===== */
header .brand{
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
}

header .navlinks{
  font-size: 12px !important;          /* nav 전체 사이즈 고정 */
  letter-spacing: 0.18em !important;
}

header .navlinks a,
header .dropdown-trigger{
  font-size: 12px !important;          /* 링크도 한 번 더 고정 */
  letter-spacing: 0.18em !important;
}

header .dropdown-menu a{
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

/* =========================================================
   HEADER TYPO LOCK (FINAL)
   - 헤더 폰트 크기/자간을 모든 페이지에서 동일하게 고정
   - Video 탭만 달라지는 현상 방지
   붙이는 위치: styles.css 맨 마지막
========================================================= */

:root{
  --brand-size: 18px;
  --brand-track: 0.06em;

  --nav-size: 14px;
  --nav-track: 0.10em;

  --dropdown-size: 13px;
  --dropdown-track: 0.10em;
}

/* 헤더 전체: 어떤 페이지든 동일한 기준 */
header{
  font-size: 16px; /* 기준점 고정 */
}

/* 좌측 Brand */
header .brand{
  font-size: var(--brand-size) !important;
  letter-spacing: var(--brand-track) !important;
}

/* 상단 네비 링크( BIO / REPERTOIRE / PHOTO / VIDEO / CONTACT ) */
header .navlinks a,
header .navlinks .dropdown-trigger{
  font-size: var(--nav-size) !important;
  letter-spacing: var(--nav-track) !important;
}

/* 드롭다운 메뉴 항목 */
header .dropdown-menu a{
  font-size: var(--dropdown-size) !important;
  letter-spacing: var(--dropdown-track) !important;
}

/* 혹시 남아있는 규칙이 navlinks 자체에 font-size를 걸어도 무력화 */
header .navlinks{
  font-size: initial !important;
}

/* DevTools 도킹/리사이즈로 “모바일 브레이크포인트”가 걸려도
   헤더 글자 크기가 작아지지 않도록 안전장치 */
@media (max-width: 720px){
  header .brand{ font-size: var(--brand-size) !important; }
  header .navlinks a,
  header .navlinks .dropdown-trigger{
    font-size: var(--nav-size) !important;
  }
}

/* =========================================
   PHOTO (PORTRAIT / STAGE) — 3-COLUMN GRID
   Requires: body.is-photo (added in site.js)
========================================= */
/* =========================================
   PHOTO (PORTRAIT / STAGE) — 3-COLUMN GRID
   Fix: DO NOT grid the whole .container (it contains the title).
   Instead, grid only the photo items inside the container.
   Requires: body.is-photo (added in site.js)
========================================= */

/* 1) Keep the container normal flow */
body.is-photo main .container{
  display: block !important;   /* ✅ grid 금지 */
}

/* 2) Create a “photo grid” effect by targeting the photo items group.
      Most setups: images are inside buttons/anchors/div wrappers.
      We grid the DIRECT children that contain images, but exclude headings/text. */
body.is-photo main .container{
  /* nothing else here */
}

/* 3) Apply grid to a dedicated wrapper if it exists */
body.is-photo main .container .gallery,
body.is-photo main .container .grid,
body.is-photo main .container .photo-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* 4) If you DON'T have a wrapper (.gallery/.grid etc),
      force grid on “the block that directly holds photo items”.
      This selector grabs a direct child div that contains multiple images/buttons. */
body.is-photo main .container > div:has(img),
body.is-photo main .container > div:has(button img),
body.is-photo main .container > div:has(a img){
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* 5) If your items are directly buttons/anchors under container */
body.is-photo main .container{
  /* no-op */
}
body.is-photo main .container > button:has(img),
body.is-photo main .container > a:has(img){
  /* make sure these participate cleanly if they’re direct children */
  width: 100%;
}

/* Images sizing */
body.is-photo main .container img{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

/* Remove oversized wrappers (optional but safe) */
body.is-photo main .container :where(button, a, figure, div){
  max-width: 100%;
}

/* Responsive */
@media (max-width: 980px){
  body.is-photo main .container .gallery,
  body.is-photo main .container .grid,
  body.is-photo main .container .photo-grid,
  body.is-photo main .container > div:has(img),
  body.is-photo main .container > div:has(button img),
  body.is-photo main .container > div:has(a img){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.is-photo main .container img{ height: 240px !important; }
}

@media (max-width: 620px){
  body.is-photo main .container .gallery,
  body.is-photo main .container .grid,
  body.is-photo main .container .photo-grid,
  body.is-photo main .container > div:has(img),
  body.is-photo main .container > div:has(button img),
  body.is-photo main .container > div:has(a img){
    grid-template-columns: 1fr !important;
  }
  body.is-photo main .container img{ height: 220px !important; }
}

/* =========================================================
   PHOTO (PORTRAIT / STAGE) — Polish Pack
   1) remove white borders
   2) soft edge gradient (feather) to blend into bg
   3) scroll reveal animation (repeatable like main page)
   4) hover affordance: “click to enlarge” 느낌
   Requires: body.is-photo
========================================================= */

/* 0) Normalize: remove borders/outlines that appear as white lines */
body.is-photo main .container img,
body.is-photo main .container button,
body.is-photo main .container a,
body.is-photo main .container figure,
body.is-photo main .container .photo-item,
body.is-photo main .container .gallery-item{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 1) Make each clickable tile a clean “card” */
body.is-photo main .container :where(button, a):has(img){
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: zoom-in; /* ✅ 직관적으로 확대 느낌 */
  display: block;
}

/* 2) Wrap-like styling using the parent (button/a) as the tile surface */
body.is-photo main .container :where(button, a):has(img){
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

/* 3) Image baseline (no border, nice sizing) */
body.is-photo main .container img{
  display: block !important;
  width: 100% !important;
  height: 260px !important;      /* 네 grid 높이에 맞춤 */
  object-fit: cover !important;
  border-radius: 12px !important;
  background: #000;
  transform: translateZ(0);
  transition: transform 260ms ease, filter 260ms ease, opacity 260ms ease;
}

/* 4) Soft edge gradient (feather)
   - pseudo overlay that gently fades edges into background
   - uses mask when available; falls back to subtle vignette */
body.is-photo main .container :where(button, a):has(img)::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  /* fallback vignette */
  background: radial-gradient(
    120% 120% at 50% 50%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.22) 78%,
    rgba(0,0,0,0.45) 100%
  );
  opacity: 0.95;
}

/* Prefer a true edge-fade using mask if supported */
@supports (-webkit-mask-image: radial-gradient(black, transparent)) or (mask-image: radial-gradient(black, transparent)){
  body.is-photo main .container :where(button, a):has(img)::after{
    background: rgba(0,0,0,0.55); /* feather 색 (배경과 섞이게) */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
    opacity: 0.85;
  }
}

/* 5) Hover affordance: “click to enlarge” 느낌 강화
   - subtle lift + sharpen + small zoom + hint ring */
body.is-photo main .container :where(button, a):has(img):hover{
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.03);
}

/* image zoom on hover (very subtle) */
body.is-photo main .container :where(button, a):has(img):hover img{
  transform: scale(1.04);
  filter: contrast(1.03) saturate(1.03);
}

/* hover ring / cue */
body.is-photo main .container :where(button, a):has(img)::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 12px;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,0.00);
  transition: border-color 220ms ease, opacity 220ms ease;
  opacity: 1;
}
body.is-photo main .container :where(button, a):has(img):hover::before{
  border-color: rgba(255,255,255,0.18);
}

/* optional: small “zoom” icon cue at top-right */
body.is-photo main .container :where(button, a):has(img) .zoom-cue{
  display:none; /* (HTML에 없으면 영향 없음) */
}

/* 6) Scroll reveal animation (repeatable like your main page)
   - We’ll reuse your existing .reveal / .is-visible system.
   - Make photo tiles default to reveal animation. */
body.is-photo main .container :where(button, a):has(img){
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
body.is-photo main .container :where(button, a):has(img).is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  body.is-photo main .container :where(button, a):has(img){
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.is-photo main .container img{
    transition: none !important;
  }
}

/* Responsive heights consistent */
@media (max-width: 980px){
  body.is-photo main .container img{ height: 240px !important; }
}
@media (max-width: 620px){
  body.is-photo main .container img{ height: 220px !important; }
}


/* =========================================
   PHOTO (PORTRAIT / STAGE) — GRID
   Requires: body.is-photo (added in site.js)
========================================= */

body.is-photo main .container{
  display: block !important; /* 제목/텍스트 레이아웃 유지 */
}

/* JS가 만든 그리드 */
body.is-photo .photo-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  margin-top: 18px;
}

body.is-photo .photo-tile{
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 버튼/링크가 타일 안에서 제대로 크기 잡게 */
body.is-photo .photo-tile > button,
body.is-photo .photo-tile > a{
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 이미지 */
body.is-photo .photo-tile img{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  border: 0 !important;          /* ✅ 흰 테두리 제거의 기반 */
  border-radius: 12px !important;
}

/* Tablet */
@media (max-width: 980px){
  body.is-photo .photo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.is-photo .photo-tile img{ height: 240px !important; }
}

/* Mobile */
@media (max-width: 620px){
  body.is-photo .photo-grid{
    grid-template-columns: 1fr !important;
  }
  body.is-photo .photo-tile img{ height: 220px !important; }
}

/* =========================================
   PHOTO GRID — fix "everything spans full width"
   Put this at VERY END of styles.css
========================================= */

/* 1) Keep container as grid (you already have it, but force-safe) */
body.is-photo main > .container{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

/* 2) Title should span full width */
body.is-photo main > .container > h1,
body.is-photo main > .container > .page-title{
  grid-column: 1 / -1 !important;
}

/* 3) ✅ 핵심: 사진 아이템들이 "한 줄 전체 먹기"를 하고 있어서 1열처럼 보임
      -> 모든 아이템의 grid-column을 auto로 강제해서 칸을 나눠 먹게 함 */
body.is-photo main > .container > :not(h1):not(.page-title){
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* 4) 사진을 감싸는 요소(버튼/링크/figure/div)가 100%로 박혀 있으면 다시 1열처럼 보임
      -> 래퍼도 grid 아이템으로 정상 동작하도록 교정 */
body.is-photo main > .container > :is(a, button, figure, div){
  display: block !important;
  width: 100% !important;         /* 각 칸 안에서는 100%가 맞음 */
  margin: 0 !important;
}

/* 5) 이미지 자체 */
body.is-photo main > .container img{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

/* Responsive */
@media (max-width: 980px){
  body.is-photo main > .container{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.is-photo main > .container img{
    height: 240px !important;
  }
}
@media (max-width: 620px){
  body.is-photo main > .container{
    grid-template-columns: 1fr !important;
  }
  body.is-photo main > .container img{
    height: 220px !important;
  }
}

/* =========================================
   PHOTO PAGES — FORCE 3-COLUMN LAYOUT
   Paste at VERY END of styles.css
========================================= */

/* 0) 공통: photo 페이지에만 적용 */
body.is-photo main .container{
  /* container 자체는 레이아웃 컨테이너로 두고, 내부 래퍼를 grid로 만든다 */
  display: block !important;
}

/* 1) 제목은 그대로 (혹시 기존 CSS가 깨는 것을 방지) */
body.is-photo .page-title,
body.is-photo main h1{
  margin-bottom: 18px !important;
}

/* 2) ✅ 사진들을 실제로 감싸고 있는 래퍼를 "grid 래퍼"로 강제
      - 대부분의 포토 페이지는: main > .container > (어떤 div/section) > (button/img...) 구조 */
body.is-photo main .container > :not(h1):not(.page-title){
  /* 이 래퍼가 사진 목록을 들고 있는 경우가 거의 100%라서 여기서 grid를 건다 */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;

  /* flex column으로 1열이 되는 케이스를 원천 차단 */
  flex-direction: initial !important;
  flex-wrap: initial !important;
}

/* 3) 혹시 사진 래퍼가 2중(래퍼 안에 또 래퍼)인 경우까지 커버 */
body.is-photo main .container > :not(h1):not(.page-title) > :is(div, section, ul, ol){
  /* 내부가 실제 grid 대상이면 여기도 grid로 */
  display: contents; /* ✅ 중첩 wrapper가 칸을 망치면 contents로 풀어버림 */
}

/* 4) 사진 아이템(버튼/링크/figure/div)이 "한 줄 전체 먹기" 하는 것 방지 */
body.is-photo main .container :is(a, button, figure, li, div){
  grid-column: auto !important;
  justify-self: stretch !important;
  max-width: none !important;
}

/* 5) 이미지 규격 */
body.is-photo main .container img{
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;

  /* 흰 테두리/프레임이 남아있으면 제거 */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  border-radius: 10px !important;
  background: transparent !important;
}

/* 6) 반응형 */
@media (max-width: 980px){
  body.is-photo main .container > :not(h1):not(.page-title){
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.is-photo main .container img{
    height: 240px !important;
  }
}
@media (max-width: 620px){
  body.is-photo main .container > :not(h1):not(.page-title){
    grid-template-columns: 1fr !important;
  }
  body.is-photo main .container img{
    height: 220px !important;
  }
}

/* Home — Video Preview (2 cards) */
.home-video{ margin-top: 34px; }
.home-video-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 14px;
}
.home-video-more{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .72;
}
.home-video-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.home-video-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow:hidden;
  transition: transform 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.home-video-card:hover{
  transform: translateY(-2px);
  border-color: var(--line2);
  opacity: .96;
}

.home-video-thumb{
  position:relative;
  aspect-ratio: 16 / 9;
  background:#000;
}
.home-video-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.home-video-play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.home-video-play::before{
  content:"";
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(8px);
}
.home-video-play::after{
  content:"";
  width:0; height:0;
  border-left: 14px solid rgba(255,255,255,0.92);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
  position:absolute;
}

.home-video-meta{ padding: 14px; }
.home-video-label{
  font-size: 11px;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--muted2);
}
.home-video-title{
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: var(--ls-title);
}

@media (max-width: 820px){
  .home-video-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   HOME — SECTION SPACING (AIRY LAYOUT)
   Applies to main page only
========================================= */

/* 기본: 데스크탑 */
body[data-page="home"] main .container > section {
  margin-top: 140px;   /* 기존 대비 약 5배 */
}

/* 첫 섹션은 header 바로 아래라 과도한 여백 방지 */
body[data-page="home"] main .container > section:first-child {
  margin-top: 80px;
}

/* 섹션 내부 요소 간 간격은 유지 */
body[data-page="home"] main .container > section > * + * {
  margin-top: 18px;
}

/* 태블릿 */
@media (max-width: 980px){
  body[data-page="home"] main .container > section {
    margin-top: 110px;
  }

  body[data-page="home"] main .container > section:first-child {
    margin-top: 64px;
  }
}

/* 모바일 */
@media (max-width: 620px){
  body[data-page="home"] main .container > section {
    margin-top: 88px;
  }

  body[data-page="home"] main .container > section:first-child {
    margin-top: 52px;
  }
}

/* =========================================
   RESUME MODAL (PDF VIEW)
========================================= */
.resume-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.86);
  z-index: 240;
  padding: 18px;
}

.resume-modal.open{ display:flex; }

.resume-frame{
  width: min(980px, 94vw);
  height: min(86vh, 820px);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 18px 54px rgba(0,0,0,0.62);
}

.resume-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.resume-close{
  position: fixed;
  top: 16px;
  right: 16px;
  background: transparent;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 720px){
  .resume-frame{
    width: 96vw;
    height: 84vh;
  }
}

/* =========================================
   CONTACT — final unified style (FIXED)
========================================= */

/* Contact 리스트 전체 */
main .container ul.bullets {
  list-style: none;     /* ● 제거 */
  padding: 0;
  margin: 24px 0 0;     /* 제목과 간격 */
}

/* 각 항목 간 간격 통일 */
main .container ul.bullets li {
  margin: 0 0 20px;
  line-height: 1.8;
}

/* 마지막 줄 여백 제거 */
main .container ul.bullets li:last-child {
  margin-bottom: 0;
}

/* 텍스트 색 & 크기 통일 */
main .container ul.bullets li,
main .container ul.bullets a {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* Resume / Email / Instagram 라벨 */
main .container ul.bullets strong {
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  margin-right: 6px;
}

/* 링크 스타일 */
main .container ul.bullets a {
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 2px;
  transition: border-color .2s ease, opacity .2s ease;
}

main .container ul.bullets a:hover {
  border-color: rgba(255,255,255,0.6);
  opacity: 1;
}

/* =========================================
   CONTACT — unified links (white, same spacing)
========================================= */
body[data-page="contact"] .contact-links{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body[data-page="contact"] .contact-link{
  color: #ffffff !important;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  display: inline-block;
  opacity: 0.95;
}

body[data-page="contact"] .contact-link:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Resume modal */
.resume-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

.resume-modal.open{ display: flex; }

.resume-frame{
  width: min(920px, 96vw);
  height: min(86vh, 900px);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10,10,10,0.92);
  box-shadow: 0 20px 80px rgba(0,0,0,0.55);
}

.resume-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  background: #111;
}

.resume-close{
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

/* CONTACT — force vertical links */
body[data-page="contact"] .contact-links{
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body[data-page="contact"] .contact-link{
  display: block;              /* ✅ 줄바꿈 핵심 */
  color: #ffffff !important;
  text-decoration: none;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

body[data-page="contact"] .contact-link:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* CONTACT — force each link on its own line (override everything) */
main .container .contact-links{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 22px !important;
  margin-top: 22px !important;
}

main .container .contact-links > a{
  display: block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.06em !important;
  opacity: 0.95 !important;
}

main .container .contact-links > a:hover{
  opacity: 1 !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 1px !important;
}

/* ===============================
   VIDEO TAB — FORCE TITLE VISIBILITY
   (restores previously working state)
   =============================== */

/* 비디오 카드 구조 보정 */
.video-card{
  display: flex;
  flex-direction: column;
}

/* 제목 강제 표시 */
.video-card .video-title,
.video-card h3,
.video-card .title{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #ffffff !important;
  margin-top: 14px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
}

/* reveal 애니메이션에 의해 숨겨지지 않도록 차단 */
.video-card .video-title.reveal,
.video-card h3.reveal,
.video-card .title.reveal{
  opacity: 1 !important;
  transform: none !important;
}

/* 필터 전환 시에도 유지 */
[data-cat] .video-title,
[data-cat] h3{
  opacity: 1 !important;
  display: block !important;
}

/* hover 시에도 사라지지 않게 */
.video-card:hover .video-title,
.video-card:hover h3{
  opacity: 1 !important;
}

/* ===============================
   VIDEO TITLE — FORCE WHITE COLOR
   =============================== */

/* 비디오 탭 제목 전용 */
.video-card .video-title,
.video-card h3,
.video-card .title,
[data-videos] .video-title,
[data-videos] h3 {
  color: #ffffff !important;
}

/* reveal / hover / filter 상태에서도 유지 */
.video-card:hover .video-title,
.video-card:hover h3,
.video-card .reveal,
.video-card .reveal.is-visible {
  color: #ffffff !important;
}

/* 혹시 링크(a)로 감싸진 경우 대비 */
.video-card a,
.video-card a:visited,
.video-card a:hover,
.video-card a:active {
  color: #ffffff !important;
  text-decoration: none;
}

/* ===============================
   VIDEO PAGE ONLY — FORCE TITLES WHITE
   scope: body[data-page="video"]
   =============================== */

body[data-page="video"] .vcard .vmeta,
body[data-page="video"] .vcard .vlabel,
body[data-page="video"] .vcard .vtitle{
  color: #fff !important;
}

/* 라이트박스 제목도 같이 */
body[data-page="video"] .vlb .vlb-label,
body[data-page="video"] .vlb .vlb-title{
  color: #fff !important;
}

/* PHOTO (portrait/stage) grid fix — SAFE VERSION */

/* grid */
.pg{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* ✅ 기본 상태: 무조건 보이게 */
.ptile{
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;

  /* ✅ 핵심: 기본은 보이게 */
  opacity: 1;
  transform: none;
}

/* image fill */
.ptile img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  border: 0;
}

/* ✅ 애니메이션은 "원할 때만": reveal을 붙인 섹션에서만 */
.reveal .ptile{
  opacity: 0;
  transform: translateY(12px);
  transition: transform .6s ease, opacity .6s ease;
}
.reveal.is-visible .ptile{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   PHOTO hover interaction
   ========================= */

/* 기본 상태 */
.ptile{
  position: relative;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

/* 이미지 자체 */
.ptile img{
  transition: transform .5s ease, filter .35s ease;
}

/* Hover / Focus (마우스, 키보드 접근성 포함) */
.ptile:hover,
.ptile:focus-visible{
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* 이미지에 살짝 강조 */
.ptile:hover img,
.ptile:focus-visible img{
  transform: scale(1.05);
  filter: brightness(1.05) contrast(1.02);
}

/* 클릭 가능하다는 시각적 힌트 (커서) */
.ptile{
  cursor: zoom-in;
}

/* 터치 디바이스에서는 과한 hover 제거 */
@media (hover: none){
  .ptile:hover,
  .ptile:focus-visible{
    transform: none;
    box-shadow: none;
  }

  .ptile:hover img,
  .ptile:focus-visible img{
    transform: none;
    filter: none;
  }
}

/* =========================
   VIDEO LIGHTBOX (HOME)
========================= */

.vlb{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(8px);
}

.vlb.open{ display:flex; }

.vlb-stage{
  width: min(92vw, 1100px);
  height: min(80vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vlb-yt{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #000;
}

.vlb-close{
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  letter-spacing: .12em;
}

/* =========================
   VIDEO LIGHTBOX (Home)
========================= */
.vlb{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 18px;
}
.vlb.open{ display:flex; }

.vlb-stage{
  width: min(92vw, 1100px);
  height: min(80vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vlb-yt{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #000;
}

.vlb-close{
  position: absolute;
  top: 16px;
  right: 16px;
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
}
.vlb-close:hover{ background: rgba(255,255,255,.18); }

/* =========================================================
   VIDEO TAB – Hide side text panel
   (keep video player only)
========================================================= */

/* 비디오 페이지에서만 적용 */
body[data-page="video"] .video-side,
body[data-page="video"] .video-meta,
body[data-page="video"] .video-text,
body[data-page="video"] .video-info {
  display: none !important;
}

/* 혹시 grid / flex로 공간을 차지하고 있다면 */
body[data-page="video"] .video-layout {
  grid-template-columns: 1fr !important;
  display: block !important;
}

/* 플레이어가 전체 폭을 차지하도록 */
body[data-page="video"] .video-player,
body[data-page="video"] iframe,
body[data-page="video"] .video-frame {
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   VIDEO LIGHTBOX: 오른쪽 텍스트(라벨/제목) 패널 숨기기
   - site.js에서 쓰는 data-vlb / data-vlb-yt 기준으로만 적용
========================================================= */

/* 1) 오버레이 내부에서 "텍스트 패널"로 보이는 요소들을 최대한 폭넓게 숨김 */
[data-vlb] [class*="side"],
[data-vlb] [class*="meta"],
[data-vlb] [class*="info"],
[data-vlb] [class*="text"],
[data-vlb] [class*="label"],
[data-vlb] [class*="title"] {
  display: none !important;
}

/* 2) 대신 iframe 플레이어는 반드시 보이게(위 규칙에 말려들 수 있어서 강제) */
[data-vlb] [data-vlb-yt],
[data-vlb] iframe {
  display: block !important;
}

/* 3) 혹시 2컬럼 grid/flex로 잡혀 있던 레이아웃을 1컬럼으로 강제 */
[data-vlb] [class*="grid"],
[data-vlb] [class*="layout"],
[data-vlb] [class*="wrap"],
[data-vlb] [class*="inner"] {
  grid-template-columns: 1fr !important;
}

/* 4) 플레이어가 전체 폭을 안정적으로 차지하게 */
[data-vlb] [data-vlb-yt],
[data-vlb] iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   VIDEO LIGHTBOX: 오른쪽 텍스트 완전 제거
   (vlb = video lightbox)
========================================================= */

.vlb-meta {
  display: none !important;
}

/* 레이아웃이 2컬럼으로 잡혀 있었다면 1컬럼으로 정리 */
.vlb-stage {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* 영상 영역을 전체 폭으로 */
.vlb-frame {
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   GLOBAL TEXT COLOR — force white
========================================================= */

html, body{
  color: #ffffff;
}

/* 일반 텍스트 */
p, span, li, strong, em, small, blockquote,
h1, h2, h3, h4, h5, h6{
  color: #ffffff;
}

/* 링크 */
a{
  color: #ffffff;
}
a:visited{
  color: #ffffff;
}
a:hover,
a:focus{
  color: #ffffff;
}

/* 버튼/폼 텍스트 */
button,
input,
textarea,
select{
  color: #ffffff;
}

/* placeholder (브라우저별) */
::placeholder{
  color: rgba(255,255,255,0.6);
}

/* =========================================================
   OPERA & SONG CYCLE — Composer spacing
   (ONLY these two pages)
========================================================= */

/* 작곡가 블록 간 간격 */
body[data-page="opera"] .listblock,
body[data-page="songcycle"] .listblock{
  margin-bottom: 60px;
}

/* 작곡가 이름(h3)과 곡 리스트 사이 */
body[data-page="opera"] .listblock h3,
body[data-page="songcycle"] .listblock h3{
  margin: 0 0 16px;
}

/* 곡 항목 간 간격 */
body[data-page="opera"] .bullets li,
body[data-page="songcycle"] .bullets li{
  margin-bottom: 8px;
}

/* 마지막 곡은 여백 제거 */
body[data-page="opera"] .bullets li:last-child,
body[data-page="songcycle"] .bullets li:last-child{
  margin-bottom: 0;
}

/* =========================================================
   MOBILE HEADER FIX
   1) 'MENU' 버튼/드로어 제거
   2) 모바일에서도 상단 메뉴(BIO~CONTACT) 전부 보이게 (줄바꿈 허용, 가로스크롤 금지)
   3) 브랜드(Baritone. Dominic Lim) 줄바꿈 방지
========================================================= */
@media (max-width: 768px){

  /* 1) 'MENU' 버튼과 모바일 드로어 완전 제거 */
  .hamburger{ display:none !important; }
  .mobile-drawer{ display:none !important; }

  /* 2) 모바일에서도 기본 navlinks를 그대로 보여주기 */
  header .navlinks{
    display:flex !important;
    flex-wrap:wrap;                 /* 가로가 부족하면 2줄로 내려가게 */
    gap: 10px 14px;                 /* (세로, 가로) 간격 */
    justify-content:flex-end;       /* 오른쪽 정렬 유지 */
    overflow:visible !important;    /* 가로 스크롤 막기 */
    white-space:normal !important;  /* 링크는 필요하면 줄바꿈 */
  }

  /* 메뉴 링크 사이즈 조금 줄여서 1~2줄 안에 담기 */
  header .navlinks a{
    font-size: 12px;
    letter-spacing: .14em;
    padding: 6px 0;
  }

  /* 3) 브랜드 줄바꿈 방지 + 크기 줄이기 */
  header .brand{
    white-space: nowrap;           /* 'Baritone. Dominic Lim'이 두 줄로 안 내려가게 */
    font-size: 16px;               /* 모바일에서 살짝 축소 */
    letter-spacing: .04em;
    line-height: 1;
    margin-right: 10px;
  }

  /* navbar가 꽉 차는 문제 대비: 줄바꿈 허용하되, 브랜드는 한 줄 유지 */
  header .navbar{
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }

  /* brand와 nav가 너무 붙으면: brand는 좌측, nav는 다음 줄로 내려갈 수 있게 */
  header .brand{ flex: 0 0 auto; }
  header .navlinks{ flex: 1 1 auto; min-width: 0; }
}

/* =========================================================
   MOBILE HEADER — 3 LINE LAYOUT
   Baritone. Dominic Lim
   BIO REPERTOIRE
   PHOTO VIDEO CONTACT
========================================================= */
@media (max-width: 768px){

  /* 전체 헤더 기본 정리 */
  header .navbar{
    display: flex;
    flex-direction: column;     /* 세로 스택 */
    align-items: flex-start;    /* 왼쪽 정렬 */
    gap: 6px;
  }

  /* 1️⃣ 브랜드 (맨 윗줄) */
  header .brand{
    font-size: 18px;
    letter-spacing: .04em;
    white-space: nowrap;
    margin-bottom: 6px;
  }

  /* nav 전체를 세로 그룹으로 */
  header .navlinks{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  /* 2️⃣ 두 번째 줄: BIO / REPERTOIRE */
  header .navlinks a:nth-child(1),
  header .navlinks a:nth-child(2){
    display: inline-block;
    font-size: 13px;
    letter-spacing: .16em;
    margin-right: 14px;
  }

  /* 이 둘을 한 줄로 묶기 */
  header .navlinks a:nth-child(1),
  header .navlinks a:nth-child(2){
    line-height: 1.4;
  }

  /* 3️⃣ 세 번째 줄: PHOTO / VIDEO / CONTACT */
  header .navlinks a:nth-child(3),
  header .navlinks a:nth-child(4),
  header .navlinks a:nth-child(5){
    display: inline-block;
    font-size: 13px;
    letter-spacing: .16em;
    margin-right: 14px;
  }

  /* 줄 분리를 위해 가상 줄바꿈 */
  header .navlinks a:nth-child(3){
    margin-top: 6px;
  }

  /* 햄버거 / 모바일 드로어 제거 */
  .hamburger,
  .mobile-drawer{
    display: none !important;
  }
}

/* =========================================================
   MOBILE HEADER — EXACT 3 LINES
   1) Baritone. Dominic Lim
   2) BIO  REPERTOIRE
   3) PHOTO  VIDEO  CONTACT
========================================================= */
@media (max-width: 768px){

  /* MENU/드로어는 안 씀 */
  .hamburger,
  .mobile-drawer{
    display: none !important;
  }

  /* 헤더 전체: 왼쪽 정렬 */
  header .navbar{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* 1줄: 브랜드 */
  header .brand{
    white-space: nowrap !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  /* 2~3줄: nav를 "2행 그리드"로 강제 */
  header .navlinks{
    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important; /* 3칸 */
    grid-auto-rows: auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    justify-content: start !important;  /* 왼쪽 정렬 */
    align-items: center !important;
  }

  /* 링크 공통 스타일 */
  header .navlinks > a,
  header .navlinks .dropdown-trigger{
    font-size: 13px !important;
    letter-spacing: .16em !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  /* ✅ 2번째 줄(1행): BIO, REPERTOIRE만 왼쪽에 두고 나머지 칸 비우기 */
  header .navlinks > a:nth-of-type(1){ grid-column: 1; grid-row: 1; } /* BIO */
  header .navlinks > a:nth-of-type(2){ grid-column: 2; grid-row: 1; } /* REPERTOIRE */

  /* ✅ 3번째 줄(2행): PHOTO, VIDEO, CONTACT */
  header .navlinks .dropdown{ grid-column: 1; grid-row: 2; }          /* PHOTO */
  header .navlinks > a:nth-of-type(3){ grid-column: 2; grid-row: 2; } /* VIDEO */
  header .navlinks > a:nth-of-type(4){ grid-column: 3; grid-row: 2; } /* CONTACT */

}

/* =========================================================
   MOBILE HEADER — SPACING & 2-LINE NAV (FINAL)
========================================================= */
@media (max-width: 768px){

  /* 모바일 메뉴 버튼/드로어 완전 제거 */
  .hamburger,
  .mobile-drawer{
    display: none !important;
  }

  /* 헤더 전체 여백 + 왼쪽 정렬 */
  header{
    padding-top: 18px !important; /* 🔹 화면 맨 위 여백 */
  }

  header .navbar{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important; /* 🔹 브랜드 ↔ 메뉴 간격 */
  }

  /* 1줄: Baritone. Dominic Lim */
  header .brand{
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin-bottom: 6px !important; /* 🔹 브랜드 아래 여백 */
  }

  /* 2~3줄: 네비게이션 (2행 고정) */
  header .navlinks{
    display: grid !important;
    grid-template-columns: repeat(3, max-content) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important; /* 가로 간격 */
    row-gap: 12px !important;    /* 🔹 줄 간격 (가독성 핵심) */
    justify-content: start !important;
  }

  /* 링크 공통 */
  header .navlinks > a,
  header .navlinks .dropdown-trigger{
    font-size: 13px !important;
    letter-spacing: .18em !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }

  /* ===== 2번째 줄 ===== */
  header .navlinks > a:nth-of-type(1){
    grid-column: 1; grid-row: 1; /* BIO */
  }

  header .navlinks > a:nth-of-type(2){
    grid-column: 2; grid-row: 1; /* REPERTOIRE */
  }

  header .navlinks .dropdown{
    grid-column: 3; grid-row: 1; /* PHOTO */
  }

  /* ===== 3번째 줄 ===== */
  header .navlinks > a:nth-of-type(3){
    grid-column: 1; grid-row: 2; /* VIDEO */
  }

  header .navlinks > a:nth-of-type(4){
    grid-column: 2; grid-row: 2; /* CONTACT */
  }
}

/* ===============================
   MOBILE PHOTO DROPDOWN FIX
   =============================== */
@media (max-width: 768px){

  /* dropdown 부모 기준점 */
  header .dropdown{
    position: relative;
  }

  /* 기본적으로 숨김 */
  header .dropdown-menu{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #000;
    padding: 12px 16px;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }

  /* 모바일에서 탭하면 보이게 (hover + focus) */
  header .dropdown:hover .dropdown-menu,
  header .dropdown:focus-within .dropdown-menu{
    display: flex;
  }
}