:root{--ap-bg: var(--bg, #0b0f14);--ap-text: var(--text, #f2ead8);--ap-text-dim: var(--text-dim, #D5D8DF);--ap-gold: var(--gold, #d4b46d);--ap-gold-bright: var(--gold-bright, #e9d59b);--ap-card-bg: var(--card-bg, rgba(255,255,255,.03));--ap-card-border: var(--card-border, rgba(212,180,109,.18));--ap-status-available: var(--ap-gold-bright);--ap-status-collected: rgba(200,196,188,.72);--ap-status-reserved: #e0a458;--ap-status-notforsale: #d3897e;--ap-status-private: rgba(200,196,188,.42)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;min-width:0}@media(min-width:640px)and (max-width:899px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}}.card{background:var(--ap-card-bg);border:1px solid var(--ap-card-border);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .18s ease,border-color .18s ease}.card:hover{transform:translateY(-3px);border-color:var(--ap-gold)}.thumb-wrap{width:100%;aspect-ratio:4 / 5;background:#060a0e;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumb-wrap .thumb{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease}.thumb-wrap .thumb.is-loaded{opacity:1}.card .meta{padding:9px 11px 13px}.card .meta .t{font-size:15px;color:var(--ap-text)}.card .meta .s{font-size:13px;color:var(--ap-text-dim);margin-top:3px}.empty-state{width:100%;min-height:clamp(240px,36vh,480px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ap-text-dim);padding:40px 20px}.load-wrap{text-align:center;margin-top:26px}.load-wrap .btn{background:none;border:1px solid var(--ap-card-border);color:var(--ap-text-dim);border-radius:999px;padding:9px 22px;font:inherit;cursor:pointer}.load-wrap .btn:hover{color:var(--ap-gold-bright);border-color:var(--ap-gold)}.lightbox{position:fixed;inset:0;z-index:500;display:none;background:#060a0efc;overflow:hidden;isolation:isolate}.lightbox.open{display:block}.lightbox-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:20;min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(212,180,109,.38);background:#0006;color:rgba(212,180,109,.7);font-size:22px;line-height:1;cursor:pointer}@media(hover:hover){.lightbox-close:hover{color:rgba(212,180,109,.95);border-color:rgba(212,180,109,.65)}}.lightbox-close:focus-visible{color:rgba(212,180,109,.95);border-color:rgba(212,180,109,.65)}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:48px;height:68px;border-radius:999px;border:1px solid rgba(212,180,109,.28);background:#070a1480;color:var(--ap-gold);font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.82;transition:opacity .16s ease,border-color .16s ease,background .16s ease}.lightbox-nav:hover{opacity:1;border-color:#d4b46d80;background:#070a14b8}.lightbox-prev{left:max(16px,env(safe-area-inset-left))}.lightbox-next{right:max(16px,env(safe-area-inset-right))}.lightbox-inner{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.lightbox-stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));overflow:hidden;touch-action:none;user-select:none}.lightbox-stage.is-zoomed{cursor:grab}.lightbox-stage.is-zoomed.is-dragging{cursor:grabbing}#lightboxImage{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;background:#091018;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;opacity:0;transition:opacity .25s ease}#lightboxImage.is-ready{opacity:1}#lightboxImage.no-transition{transition:none!important}.lightbox-side{padding:16px 20px calc(20px + env(safe-area-inset-bottom));max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-top:1px solid rgba(255,255,255,.08)}.lb-id{font-size:15px;letter-spacing:.08em;color:var(--ap-gold);margin:0 0 5px}.lb-section{font-size:15px;color:var(--ap-text-dim);margin:0 0 18px}.lb-section[hidden]{display:none}.lb-title{margin:0 0 22px;display:flex;flex-direction:column;gap:clamp(8px,1.4vw,10px);min-width:0}.lb-title-kr,.lb-title-en{display:block;margin:0;font-size:clamp(20px,5.2vw,22px);font-weight:700;line-height:1.35;color:var(--ap-text);opacity:1;overflow-wrap:anywhere;word-break:keep-all;max-width:100%}.lb-title-en{letter-spacing:-.01em}.lb-title-kr[hidden],.lb-title-en[hidden]{display:none}.lb-meta{display:flex;flex-direction:column;gap:10px}.lb-row{display:grid;grid-template-columns:minmax(60px,.3fr) minmax(0,1fr);column-gap:14px;align-items:baseline;font-size:15px}.lb-key{white-space:nowrap;color:var(--ap-text-dim)}.lb-val{min-width:0;color:var(--ap-text);overflow-wrap:anywhere}.lb-val[data-status=available]{color:var(--ap-status-available)}.lb-val[data-status=collected]{color:var(--ap-status-collected)}.lb-val[data-status=reserved]{color:var(--ap-status-reserved)}.lb-val[data-status=not_for_sale]{color:var(--ap-status-notforsale)}.lb-val[data-status=private]{color:var(--ap-status-private)}.lb-actions{display:flex;gap:14px;margin-top:16px}.lb-link{font-size:15px;color:var(--ap-gold);text-decoration:none;border-bottom:1px solid rgba(212,180,109,.4)}.lb-link:hover{color:var(--ap-gold-bright)}@media(min-width:881px){.lightbox-inner{grid-template-rows:none;grid-template-columns:minmax(0,1fr) 380px}.lightbox-stage{height:100vh;padding:24px 64px}.lightbox-next{right:calc(400px + env(safe-area-inset-right,0px))}.lightbox-side{max-height:100vh;height:100vh;border-top:none;border-left:1px solid rgba(255,255,255,.08);padding:90px 28px 28px}}.artist-bio-viewer{position:fixed;inset:0;z-index:10050;background:#050914;color:#d1b274;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.artist-bio-viewer[hidden]{display:none}.artist-bio-header{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;min-height:72px;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 16px;background:#050914f5;border-bottom:1px solid rgba(202,169,99,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.artist-bio-header h2{margin:0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#d4b46d;outline:none}.artist-bio-language{display:flex;gap:6px}.artist-bio-lang-btn{min-width:44px;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid rgba(202,169,99,.3);background:transparent;color:rgba(209,178,116,.9);font-size:15px;letter-spacing:.05em;cursor:pointer}.artist-bio-lang-btn.active{color:#050914;background:#d1b274;border-color:#d1b274}.artist-bio-lang-btn:disabled{opacity:.3;cursor:default}.artist-bio-close{min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(202,169,99,.3);background:transparent;color:#d1b274;font-size:22px;line-height:1;cursor:pointer}.artist-bio-close:hover{background:#caa9631f}.artist-bio-content{width:min(100%,820px);margin:0 auto;padding:30px 24px calc(env(safe-area-inset-bottom,0px) + 80px);font-size:clamp(17px,4.4vw,20px);line-height:1.85;word-break:keep-all}.artist-bio-name{margin:0 0 18px;font-size:15px;font-weight:600;letter-spacing:.02em;color:#d4b46d;white-space:pre-line}.artist-bio-text{margin:0;color:#e7e7ea;white-space:pre-line}#artistBioTrigger.hero-home-link,body.archive-entered #artistBioTrigger.hero-home-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;height:auto!important;padding:0 19px!important;margin-left:8px!important;margin-right:6px!important;border:1px solid rgba(216,183,119,.95)!important;border-radius:28px!important;color:var(--gold, #d4b46d)!important;background:#d8b7770f!important;font-size:15px!important;font-weight:700!important;letter-spacing:.01em!important;cursor:pointer!important;white-space:nowrap!important;box-shadow:0 0 0 1px #d8b7770f!important;transition:background .15s ease,transform .15s ease!important;transform:none}#artistBioTrigger.hero-home-link:hover,body.archive-entered #artistBioTrigger.hero-home-link:hover{background:#d8b7771c!important;transform:translateY(-1px)!important;box-shadow:0 0 0 1px #d8b77714!important}#artistBioTrigger.hero-home-link:active,body.archive-entered #artistBioTrigger.hero-home-link:active{background:#d8b77724!important;transform:none!important}#artistBioTrigger.hero-home-link:focus-visible{background:#d8b7771c!important}.artist-external-link.hero-home-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;min-width:0!important;max-width:220px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important}.artist-external-link.hero-home-link:hover,.artist-external-link.hero-home-link:active{transform:none!important;box-shadow:none!important}@media(max-width:480px){.artist-external-link.hero-home-link{max-width:42vw!important}}@media(max-width:767px){.lang-inline{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 12px!important;padding-bottom:0!important}.lang-tabs{flex-basis:100%!important}.artist-external-link.hero-home-link{max-width:none!important;flex:0 1 44%!important;min-width:0!important;font-size:15px!important;font-weight:500!important;border-color:#d8b77773!important;color:#d8b777e0!important}#artistBioTrigger.hero-home-link,body.archive-entered #artistBioTrigger.hero-home-link{flex:0 1 54%!important;min-width:125px!important;margin-left:0!important;margin-right:0!important;min-height:52px!important;padding:0 22px!important;font-size:16px!important;font-weight:700!important;border-color:#d8b777f2!important;background:#d8b7770f!important}.hero-mode-line{flex-basis:100%!important;margin-top:-6px!important;margin-bottom:-4px!important}}@media(max-width:380px){.lang-inline .artist-external-link.hero-home-link,.lang-inline #artistBioTrigger.hero-home-link{flex-basis:100%!important;width:100%!important}}@media(max-width:880px){.lightbox-stage{padding-top:max(28px,calc(env(safe-area-inset-top,0px) + 20px))!important}}@media(max-width:480px){.lightbox-stage{padding-top:max(26px,calc(env(safe-area-inset-top,0px) + 18px))!important}}

/* ============================================================================
   ARCHIVE PRO APP — 2026-08-30 추가 (엘솔)
   스마트폰 + iPad 전체화면 뷰어: Metadata 가독성 강화 + 조건부 Scroll
   Gesture Hint. Golden Baseline(줌/스와이프/이미지 크기·비율/X 버튼/
   기존 스크롤 구조/언어 전환 데이터·로직/PC·노트북 UI)은 전혀 건드리지
   않는다 — 아래는 전부 타이포그래피·간격·신규 Gesture Hint 비주얼 추가뿐.

   PC/노트북과의 경계: 이 뷰어는 min-width:881px에서 데스크톱 2단
   레이아웃으로 전환되는데(위 참고), 태블릿을 가로로 눕히면 같은
   881px+ 폭을 그대로 쓴다. 그 구간만 pointer:coarse + hover:none으로
   한정해 마우스 기반 PC/노트북 창(같은 폭이어도 pointer:fine/hover:hover)
   에는 이 블록이 전혀 매치되지 않도록 한다. 881px 미만 구간(스마트폰
   전체 + 아이패드 세로 대부분)은 이미 실질적으로 터치 기기 전용이라
   폭 기준만으로 충분하다(기존 코드베이스 관례와 동일).
   ============================================================================ */

/* ---- 1) 스마트폰(max-width:767px) Metadata 가독성 ----
   현재 이 폭에서 실제로 이기고 있는 규칙은 style.css 쪽 @media
   (max-width:768px) 블록(font-size:12.5px !important 등, 라이트박스
   전용 "CLEAN RESET" 계열 마지막 패치)이다. viewer.css는 항상 style.css
   보다 나중에 로드되므로, 동일 특이도(.lightbox-side .lb-key 등)에
   !important로 맞대응하면 소스 순서상 이 블록이 최종 승자가 된다 —
   style.css 자체는 한 글자도 건드리지 않는다(최소 diff). */
@media (max-width: 767px) {
  .lightbox-side .lb-meta,
  .lightbox-side .lb-row,
  .lightbox-side .lb-key,
  .lightbox-side .lb-val {
    font-size: 17px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
  }
  .lightbox-side .lb-key {
    font-weight: 400 !important;
    /* 기존 --ap-text-dim(opacity .62)보다 소폭 밝게 — 색상 체계·bold 없음 */
    color: #D5D8DF !important;
  }
  .lightbox-side .lb-val {
    font-weight: 400 !important;
    min-width: 0; /* 긴 Material 자연 wrap 보정(§6) — clipping/가로스크롤 방지 */
  }
  /* §3 라벨/값 정렬 보정 — style.css의 @media(max-width:880px) .lb-row가
     라벨 칸을 72px !important로 고정해 두고 있어(이 규칙도 max-width:767px을
     포함), "재료 Material"/"상태 Status"처럼 긴 KR+EN 라벨이 17px로 커지면
     값 칸과 겹친다(실측: 최대 약 21px 겹침). 라벨 칸만 넓혀 겹침을 없앤다 —
     값 칸은 minmax(0,1fr)이라 자동으로 나머지 폭을 차지하므로 다른 레이아웃은
     그대로다. */
  .lightbox-side .lb-row {
    grid-template-columns: 106px minmax(0, 1fr) !important;
  }
  /* Status는 골드톤 색상(viewer.css :root --ap-status-*)은 그대로 두고,
     다른 값들과 같은 정보 계층으로 보이도록 두께만 값 상한(500) 안에서
     아주 살짝 더 준다 — badge/chip/box 없음, 텍스트 그대로(§4). */
  .lightbox-side .lb-val[data-status] {
    font-weight: 500 !important;
  }
  /* 행간 여백 — 기존보다 +3px만 추가, 새 스크롤을 만들 정도로는 넓히지 않는다(§5) */
  .lightbox-side .lb-meta {
    gap: 7px !important;
  }
}

/* ---- 2) 아이패드 세로 등, 881px 데스크톱 분기 이전 구간의 Metadata 가독성 ----
   이 구간엔 현재 어떤 !important 오버라이드도 없다 — viewer.css 상단의
   기본값(.lb-row 등 font-size:13px, 무조건 적용)만 적용되고 있었다.
   13px는 아이폰의 기존 12.5px보다는 낫지만 아이패드 화면에서 다소
   작아 보이므로, "스마트폰 값을 그대로 복사"하지 않고 최소한만 올린다. */
@media (min-width: 768px) and (max-width: 880px) {
  .lightbox-side .lb-meta,
  .lightbox-side .lb-row,
  .lightbox-side .lb-key,
  .lightbox-side .lb-val {
    font-size: 15px;
    line-height: 1.5;
  }
  .lightbox-side .lb-key {
    color: #D5D8DF;
  }
  .lightbox-side .lb-val {
    min-width: 0;
  }
  /* §3 — 같은 이유(위 스마트폰 블록 주석 참고)로 라벨 칸을 넓힌다.
     이 폭 구간도 style.css @media(max-width:880px) .lb-row의 72px
     !important 안에 포함돼 있어 !important로 맞대응한다. */
  .lightbox-side .lb-row {
    grid-template-columns: 100px minmax(0, 1fr) !important;
  }
}

/* ---- 3) 아이패드 가로(및 큰 아이패드 세로) — 데스크톱과 같은 881px+
   레이아웃을 공유하는 구간이므로 pointer:coarse + hover:none으로
   터치 기기만 정확히 선별한다. 값은 위 세로 구간과 동일하게 맞춰
   회전 시 급격한 크기 변화가 없도록 한다. */
@media (min-width: 881px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  .lightbox-side .lb-meta,
  .lightbox-side .lb-row,
  .lightbox-side .lb-key,
  .lightbox-side .lb-val {
    font-size: 15px;
    line-height: 1.5;
  }
  .lightbox-side .lb-key {
    color: #D5D8DF;
  }
  .lightbox-side .lb-val {
    min-width: 0;
  }
  /* §3 — 이 구간은 데스크톱 2단 레이아웃(viewer.css 기본값
     minmax(60px,.3fr))을 공유해 !important 경쟁 상대는 없지만, 그
     기본값 자체가 nowrap 라벨 폭만큼 자동으로 늘어나지 않아(실측
     확인) 마찬가지로 겹침이 생긴다 — 동일하게 라벨 칸만 넓힌다. */
  .lightbox-side .lb-row {
    grid-template-columns: 100px minmax(0, 1fr) !important;
  }
}

/* ---- 4) Scroll Gesture Hint — 시각 요소(js/viewer-scroll-hint.js가 생성해
   #lightbox 마지막 자식으로 삽입). 기본은 숨김(desktop/PC는 아래 두
   미디어쿼리 중 어디에도 안 걸려 display:none 그대로 유지 → PC/노트북
   완전 무영향). 실제 표시 여부(is-visible)는 JS가 overflow 여부를 보고
   토글한다 — 이 CSS는 "이 기기군에서 존재할 수 있는지"만 결정한다. */
.ap-scroll-gesture-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  transform: translateX(-50%);
  color: var(--ap-gold, #d4b46d);
  opacity: 0;
  z-index: 25; /* 닫기(20)·nav(15)보다 위, 다만 pointer-events:none이라 절대 방해 안 함 */
  pointer-events: none; /* §13 — 절대 버튼이 아니다 */
  transition: opacity .22s ease;
}
@media (max-width: 880px) {
  .ap-scroll-gesture-hint { display: block; }
}
@media (min-width: 881px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  .ap-scroll-gesture-hint { display: block; }
}
.ap-scroll-gesture-hint.is-visible {
  opacity: .55;
  animation: apScrollGestureFloat 2s ease-in-out infinite;
}
@keyframes apScrollGestureFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-scroll-gesture-hint.is-visible { animation: none; }
}

/* ---- 5) Gesture Hint 아래 Metadata 텍스트 가림 방지 ----
   .lightbox-side는 콘텐츠가 넘칠 때(=Gesture Hint가 보일 바로 그 조건)
   보이는 영역의 맨 아래 줄까지 실제 텍스트로 꽉 차 있다 — 하단 여백
   패딩은 "끝까지 스크롤해야" 닿는 영역이라 Hint가 뜨는 시점(스크롤 전)
   에는 아무 도움이 안 된다. 그래서 Hint가 보이는 동안에만(js/
   viewer-scroll-hint.js가 is-visible과 함께 이 클래스를 토글) 패널
   자신의 맨 아래를 부드럽게 페이드시켜 그 자리의 텍스트가 은은하게
   흐려지게 한다 — badge/chip/box/그림자/글로우가 아니라 콘텐츠 자체의
   자연스러운 가장자리 페이드(널리 쓰이는 스크롤 어포던스 기법)이며,
   추가 DOM 요소도 만들지 않는다(mask-image만 사용). Hint가 없을 때는
   이 클래스가 없으므로 평소 모습 그대로다. PC/노트북에는 이 규칙이
   걸리는 폭 구간이 없으므로(§1~§3과 동일한 미디어쿼리) 전혀 영향 없다. */
@media (max-width: 880px) {
  .lightbox-side.ap-gesture-fade-active {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 58px), transparent calc(100% - 8px));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 58px), transparent calc(100% - 8px));
  }
}
@media (min-width: 881px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  .lightbox-side.ap-gesture-fade-active {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 58px), transparent calc(100% - 8px));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 58px), transparent calc(100% - 8px));
  }
}

/* ============================================================================
   ARCHIVE PRO APP — 2026-08-30 추가 (엘솔) — PC/노트북 전체화면 우측 패널
   Typography 핀셋 조정 (작품 코드 / 섹션명 / Metadata 라벨·값).
   Golden Baseline(이미지 크기·비율·중앙정렬, 좌우 이동/X/Zoom 버튼, 패널 폭,
   레이아웃 구조, 작품 제목, 모바일·iPad에서 완료된 typography, 언어 전환
   데이터/로직)은 전혀 건드리지 않는다 — 아래는 순수 타이포그래피(글자 크기·
   굵기·줄간격·라벨 칸 폭·행 간격)만의 최소 diff다.

   가드 조건: (min-width:881px)은 위 "Desktop wide layout" 블록과 동일하게
   2단 레이아웃 시작점을 그대로 재사용한다(새 breakpoint 없음, §9). 단
   그 폭 구간은 아이패드를 가로로 눕힌 경우와 공유되므로, 이미 위에서
   아이패드 가로를 (pointer:coarse) and (hover:none)으로 선별해 둔 것과
   정확히 대칭으로 (hover:hover) and (pointer:fine) — 즉 마우스 기반
   PC/노트북에만 매치되도록 한정한다. 상한(max-width)을 두지 않아 1366px
   노트북부터 1920px, 그 이상의 큰 데스크톱 모니터까지 동일한 고정값이
   적용된다(§10 — vw 기반 확대 금지, 화면이 커져도 글자가 계속 커지지
   않는다). */
@media (min-width: 881px) and (hover: hover) and (pointer: fine) {
  /* [1] 작품 코드 — 기존 12px/필기색·letter-spacing(style.css)은 그대로 두고
     크기·굵기만 아주 살짝 올려 "희미해서 놓치는" 느낌을 없앤다. 제목(22px/700)
     보다는 항상 약해야 하므로 13px/500에서 멈춘다. */
  .lightbox-side .lb-id {
    font-size: 15px;
    font-weight: 500;
  }

  /* [2] 섹션명 — 코드보다 강하고 제목보다는 약한 중간 단계로 끌어올린다. */
  .lightbox-side .lb-section {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

  /* [3][4] Metadata 라벨(재료/크기/연도/상태 공통, .lb-row 상속)과 실제 값을
     동일 기준으로 함께 키우되, 값이 라벨보다 한 단계 더 강하게 보이도록
     구분한다 — 라벨: 14px/기존 굵기 유지, 값: 15px/500. 라벨 색상은 기존
     --ap-text-dim(.62)이 다소 흐려 소폭만 올린다(.72) — 색상 체계 자체는
     그대로. Status 값도 .lb-val 공통 규칙을 그대로 상속하므로 다른 값들과
     동일한 크기·굵기가 되고, 골드 색상(:root --ap-status-*)은 색상 오버라이드
     선택자만 그대로 유지되어 톤은 변하지 않는다(badge/chip 없음, §5). */
  .lightbox-side .lb-row {
    font-size: 15px;
    line-height: 1.45;
    /* 라벨 칸 폭 — 기존 minmax(60px,.3fr)는 320px 안팎의 고정 패널 폭에서
       .3fr이 약 69px로 계산돼, 14px로 커진 "재료 Material"/"상태 Status"
       같은 KR+EN 라벨(nowrap)이 실측 최대 14px까지 칸 밖으로 삐져나가
       값 칸과 맞닿는다(실측 확인). 모바일/태블릿에서 쓴 것과 같은 방식으로
       라벨 칸만 고정폭으로 넓혀 겹침을 없앤다 — 값 칸은 minmax(0,1fr)라
       나머지 폭을 자동으로 차지해 레이아웃 구조는 그대로다. 이 폭 구간엔
       .lb-row를 건드리는 다른 !important 규칙이 없어(확인됨) !important
       없이도 안전하게 이긴다(특이도 .lightbox-side .lb-row > 기존 .lb-row). */
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .lightbox-side .lb-key {
    color: #D5D8DF;
  }
  .lightbox-side .lb-val {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    min-width: 0; /* §7 — 긴 Material도 패널 폭 변경 없이 자연 wrap */
  }

  /* [6] 행 간격 — 기존 10px에서 +3px만. Zoom(줌 열기) 링크가 아래로
     밀려나긴 하지만(글자 자체가 커진 데 따른 자연스러운 높이 증가 포함),
     100vh 패널에 넉넉히 들어가 스크롤이 새로 생기지 않는다(실측 확인). */
  .lightbox-side .lb-meta {
    gap: 13px;
  }
}

/* ============================================================================
   ARCHIVE PRO APP — 2026-08-30 추가 (엘솔) — Artist Edition "작가의 생각이나
   짧은 시" 자유 텍스트 캡션.
   .lb-note는 .lb-val 클래스를 그대로 물려받아(HTML에 class="lb-val lb-note")
   위에서 이미 디바이스별로 확정된 Size/Year VALUE 타이포그래피(글꼴 크기·
   굵기·색상)를 새 CSS 없이 그대로 상속한다. .lb-meta(display:flex;
   flex-direction:column; gap)의 마지막 자식으로 두기만 해도 간격까지
   자동으로 맞는다. 이 블록에서 새로 정의하는 건 줄바꿈 보존 한 줄뿐이다.
   hidden 속성일 땐 애초에 렌더되지 않으므로 내용이 없을 때 빈 공간이나
   플레이스홀더가 생기지 않는다(기존 .lb-row-status의 hidden 패턴과 동일).
   line-height는 일부러 건드리지 않는다 — 디바이스별 .lightbox-side .lb-val
   블록이 이미 !important로 line-height를 확정해 둔 경우가 있어(모바일 등),
   여기서 별도 지정하면 특이도/우선순위 경쟁이 생기고 "Size/Year 타이포그래피
   자체는 바꾸지 않는다" 원칙과도 어긋난다. 각 디바이스에 이미 맞춰진
   line-height를 그대로 상속해 자연스러운 줄바꿈만 보장한다. */
.lb-note {
  white-space: pre-line; /* 원본 줄바꿈 보존 */
}