.scene.art-v2 .scene-bg,
.scene.art-v2 .scene-open-bg,
.scene.art-v2 .scene-guard-bg {
  display: block;
  object-position: center center; /* 상태별 우선 크롭은 아래에서 재정의 */
  filter: brightness(0.76) saturate(0.82) contrast(1.08);
}

.scene.art-v2::after {
  background:
    linear-gradient(90deg,
      rgba(7, 10, 16, 0.08) 0 28%,
      rgba(7, 10, 16, 0.48) 34%,
      rgba(7, 10, 16, 0.7) 48%,
      rgba(7, 10, 16, 0.54) 66%,
      rgba(7, 10, 16, 0.08) 78%,
      rgba(7, 10, 16, 0.12) 100%),
    linear-gradient(180deg, rgba(7, 10, 16, 0.04), transparent 42%, rgba(7, 10, 16, 0.42));
}

.scene.art-v2 .scene-chamber,
.scene.art-v2 .vault-rig,
.scene.art-v2 .guard-rig,
.scene.art-v2 .phantom-rig {
  display: none;
}

/* 인물 상반신 크롭(2026-08-26 소유자 지시: 인물을 더 크게, 경비는 손전등까지).
   2차 수리(같은 날): cover 맞춤 + 확대는 뷰포트 가로세로비에 따라 인물 크기와 위치가 달라져, 폴드처럼
   넓고 긴 화면과 장(chapter)마다 다른 플레이트에서 인물이 오른쪽으로 잘렸다(소유자 스크린샷, 얼굴 절반).
   지금은 플레이트를 씬 높이의 배수로만 키우고(K배, 폭은 3:1 비율로 따라옴), 이동은 이미지 자기 크기의
   비율(translate %)로 준다. 그래서 씬의 폭·비율과 무관하게 인물 지점이 늘 같은 자리에 온다.
     imgH = K·씬높이, imgW = 3·imgH   (가로 화면의 씬은 340px 좌측 열이라 K=2.0의 696px로도 덮인다.
                                      뷰포트폭/3 하한을 두면 그 열에서 인물이 두 배로 커져 상자와 겹쳤다, 게이트 실측)
     팬텀: 상자 우변을 씬 우변에 붙이고 translateX = ((1 - r) - qr)·imgW, translateY = (m/K - hy)·imgH
     경비: 상자 좌변을 씬 좌변에 붙이고 translateX = (ql - l)·imgW,      translateY = (m/K - hyg)·imgH
   r은 팬텀의 오른쪽 끝, l은 경비의 왼쪽 끝, hy·hyg는 모자 위(전부 이미지 비율, 1536x512 실측: 밝기·채도
   열 프로파일로 좌우 끝, 붉은 스카프 맨 윗행 - 0.10으로 모자 위). 장(chapter)마다 다르고 idle과 breach도
   자세가 달라 따로 둔다. qr·ql은 인물 끝이 씬 가장자리에서 떨어지는 여백(이미지 폭 비율), m은 모자 위
   여백(씬 높이 비율). 기본(씬 116px) K=2.0, 세로 760px 이상(씬 168px) K=2.4. 크롭 계약은
   tools/verify_scene_layout.js가 렌더된 이미지 사각형과 이 계수로 인물 사각형을 계산해 잰다. */
.scene.art-v2 {
  --plate-k: 2.0;
  --plate-qr: 0.012;
  --plate-ql: 0.02;
  --plate-m: 0.04;
  /* 기본값(v4 대체 플레이트) */
  --ph-r-idle: 0.860;
  --ph-r-breach: 0.896;
  --ph-hy-idle: 0.10;
  --ph-hy-breach: 0.175;
  --gd-l: 0.17;
  --gd-hy: 0.15;
}
.scene.art-v2[data-art-chapter="market"][data-art-source="v5"] {
  --ph-r-idle: 0.902; --ph-r-breach: 0.935; --ph-hy-idle: 0.298; --ph-hy-breach: 0.28; --gd-l: 0.19; --gd-hy: 0.13;
}
.scene.art-v2[data-art-chapter="pawn"][data-art-source="v5"] {
  --ph-r-idle: 0.947; --ph-r-breach: 0.972; --ph-hy-idle: 0.203; --ph-hy-breach: 0.22; --gd-l: 0.05; --gd-hy: 0.08;
}
.scene.art-v2[data-art-chapter="bank"][data-art-source="v5"] {
  --ph-r-idle: 0.923; --ph-r-breach: 0.953; --ph-hy-idle: 0.232; --ph-hy-breach: 0.234; --gd-l: 0.16; --gd-hy: 0.14;
}
.scene.art-v2[data-art-chapter="gallery"][data-art-source="v5"] {
  --ph-r-idle: 0.950; --ph-r-breach: 0.973; --ph-hy-idle: 0.12; --ph-hy-breach: 0.195; --gd-l: 0.21; --gd-hy: 0.17;
}
.scene.art-v2[data-art-chapter="casino"][data-art-source="v5"] {
  --ph-r-idle: 0.940; --ph-r-breach: 0.969; --ph-hy-idle: 0.207; --ph-hy-breach: 0.222; --gd-l: 0.10; --gd-hy: 0.12;
}
.scene.art-v2 .scene-bg,
.scene.art-v2 .scene-open-bg,
.scene.art-v2 .scene-guard-bg {
  inset: auto;
  top: 0;
  width: auto;
  height: calc(var(--plate-k) * 100%);
  max-width: none;
  object-fit: fill;
  object-position: 0 0;
  transform-origin: 0 0;
}
.scene.art-v2 .scene-bg,
.scene.art-v2 .scene-open-bg {
  right: 0;
  left: auto;
}
.scene.art-v2 .scene-bg {
  transform: translate(calc((1 - var(--ph-r-idle) - var(--plate-qr)) * 100%), calc((var(--plate-m) / var(--plate-k) - var(--ph-hy-idle)) * 100%));
}
.scene.art-v2 .scene-open-bg {
  transform: translate(calc((1 - var(--ph-r-breach) - var(--plate-qr)) * 100%), calc((var(--plate-m) / var(--plate-k) - var(--ph-hy-breach)) * 100%));
}
.scene.art-v2 .scene-guard-bg {
  left: 0;
  right: auto;
  transform: translate(calc((var(--plate-ql) - var(--gd-l)) * 100%), calc((var(--plate-m) / var(--plate-k) - var(--gd-hy)) * 100%));
}
@media (orientation: portrait) and (min-height: 760px) {
  .scene.art-v2 {
    --plate-k: 2.4;
  }
}
/* 어둡힘 필터 완화(2026-08-25). 씬 높이 계약은 그대로다(tools/verify_scene_layout.js). */
.scene.art-v2 .scene-bg,
.scene.art-v2 .scene-open-bg,
.scene.art-v2 .scene-guard-bg {
  filter: brightness(0.94) saturate(0.9) contrast(1.06);
}

/* 메시지는 화면 한가운데가 아니라 인물 반대편 하단에 둔다(2026-08-26 소유자 지시: 가운데 상자가
   인물을 가렸다). 대기·개방 상태는 팬텀(우측)을 비켜 왼쪽 아래, 경비 상태는 경비(좌측)를 비켜
   오른쪽 아래. 적응형 SAFE/BREACH 카드는 넓고 높아 가운데를 유지한다(비트 상전이 계약). */
.scene.art-v2 .scene-msg {
  /* 우변 30%: 116px 씬에서 가장 넓은 팬텀(market, 지팡이 포함 이미지 폭 15%)이 우변에서 약 108px까지
     서 있어 상자가 덮지 않는 선(2차 수리 시뮬레이션). */
  left: 28%;
  right: 30%;
  padding: 7px 10px;
  border: 1px solid rgba(244, 231, 202, 0.15);
  background: linear-gradient(180deg, rgba(23, 35, 49, 0.92), rgba(8, 12, 18, 0.88));
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4);
  color: var(--warm-ivory);
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

@media (orientation: landscape) and (min-width: 568px) {
  /* 좌측 ~60px는 금고문·전리품 가방(◇ n/n)이 상시 점유한다(568px 플레이트 217px 실측,
     가방 우변 = 27.6%). 12%는 가방과 물리 충돌해 LOCK 앞 글자를 가렸다(R32 육안).
     가방 우측부터 우변 끝까지 전폭을 쓴다. 겹침 금지는 tools/verify_scene_layout.js가 잰다. */
  .scene.art-v2 .scene-msg {
    /* 우변 34%: 가로 화면의 씬은 약 340px 좌측 열이고 K=2.0 팬텀(폭 최대 102px)이 우측 30%를 차지한다.
       좌변 30%는 전리품 가방(27.6%) 때문에 그대로다. 상자 폭 약 122px, 최장 문구 3줄이 116px 씬에 든다. */
    left: 30%;
    right: 34%;
  }
}

/* 하단 배치는 씬이 168px인 세로 긴 화면에서만 쓴다. 116px 씬(320x568, 360x600, 가로)은 하단 상자가
   긴 문구에서 위로 자라 좌상단 전리품 카운터(#bag)를 덮는다(320x568 실측 15px). 그 화면들은 종전
   가운데 배치(28/18, 가로 30/4)를 유지한다. */
@media (orientation: portrait) and (min-height: 760px) {
  .scene.art-v2 .scene-msg {
    top: auto;
    bottom: 8px;
    left: 4%;
    right: 48%; /* 2.4배 팬텀(market)은 354px 씬에서 좌측 46%부터 서 있다(실측). 상자는 52%에서 끝난다. */
    transform: none;
  }
  /* 경비 상태(경비가 좌측): 오른쪽 아래. */
  .scene.art-v2[data-motion="guard-warn"] .scene-msg,
  .scene.art-v2[data-motion="guard-watch"] .scene-msg,
  .scene.art-v2[data-motion="adaptive-guard"] .scene-msg,
  .scene.art-v2[data-motion="guard-caught"] .scene-msg,
  .scene.art-v2[data-motion="caught"] .scene-msg,
  .scene.art-v2[data-motion="escape-fail"] .scene-msg {
    left: 40%;
    right: 4%;
  }
}

/* 경비 경보는 명판이 아니라 외침이다. 경비 쪽(좌측)을 향한 꼬리가 달린 말풍선. */
.scene.art-v2[data-motion="guard-warn"] .scene-msg,
.scene.art-v2[data-motion="guard-watch"] .scene-msg {
  border-color: rgba(255, 90, 104, 0.4);
  background: linear-gradient(180deg, rgba(46, 20, 22, 0.94), rgba(20, 9, 12, 0.9));
}

.scene.art-v2[data-motion="guard-warn"] .scene-msg::before,
.scene.art-v2[data-motion="guard-watch"] .scene-msg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 10px;
  height: 12px;
  transform: translateY(-50%);
  background: rgba(38, 17, 19, 0.94);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.scene.art-v2[data-motion="fail"] .scene-bg {
  opacity: 0;
}

.scene.art-v2[data-motion="fail"] .scene-guard-bg {
  opacity: 1;
}

.blackout-live .scene.art-v2 .scene-bg,
.blackout-live .scene.art-v2 .scene-open-bg,
.blackout-live .scene.art-v2 .scene-guard-bg {
  filter: brightness(0.16) saturate(0.25) contrast(1.25);
}

@media (max-height: 680px) {
  .scene.art-v2 .scene-msg {
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene.art-v2 .scene-bg,
  .scene.art-v2 .scene-open-bg,
  .scene.art-v2 .scene-guard-bg {
    display: block;
    transition: none;
  }
}

.lv-label .lock-title {
  /* 말줄임 금지: 명판은 접힌다(R32 — ellipsis가 지역명·위치 정보를 잘랐고,
     배율 130/200에서만 a11y 시트가 풀어 줘 100%에서만 증상이 남았다). */
  min-width: 0;
}

.chapter-dossier {
  position: relative;
  min-height: 76px;
  margin: -2px 0 9px;
  overflow: hidden;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: var(--surface-0);
}

.chapter-dossier::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 10, 16, 0.94), rgba(7, 10, 16, 0.5) 58%, rgba(7, 10, 16, 0.12));
}

.chapter-dossier > img,
.next-target-dossier > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.chapter-dossier-copy {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 12px;
}

.chapter-dossier-copy > span,
.chapter-dossier-copy > small,
.next-target-dossier small,
.next-target-dossier em {
  color: var(--ivory-48);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.chapter-dossier .p-title {
  margin: 1px 0;
  font-size: 23px;
  line-height: 1.08;
}

#panelBox[data-panel-kind="level-select"] > .p-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

#panelBox[data-panel-kind="level-select"] .lv-grid {
  gap: 6px;
  margin-top: 8px;
}

#panelBox[data-panel-kind="level-select"] .lvbtn {
  min-height: 58px;
  gap: 1px;
  padding: 5px 4px 4px;
}

.lvbtn .lock-name {
  display: block;
  width: 100%;
  overflow: hidden;
  color: var(--ivory-72);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lvbtn.locked .lock-name,
.lvbtn.paused .lock-name { color: var(--ivory-48); }

.lvbtn.paused {
  border-color: var(--ivory-09);
  background: var(--surface-1);
  opacity: 0.58;
}

.next-target-dossier {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  height: 46px;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-1);
}

.next-target-dossier > img {
  filter: brightness(0.58) saturate(0.7);
}

.next-target-dossier > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 1px 8px;
  min-width: 0;
  padding: 5px 9px;
}

.next-target-dossier small { grid-column: 1 / -1; color: var(--brushed-brass); }
.next-target-dossier b { overflow: hidden; color: var(--warm-ivory); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.next-target-dossier em { align-self: center; letter-spacing: 0.04em; }

#playBtn:disabled,
#trainingReplayBtn:disabled,
#dailyBtn:disabled,
#adaptiveBtn:disabled {
  cursor: default;
  filter: saturate(0.25);
  opacity: 0.48;
}

.chip.daily-identity {
  min-height: 28px;
  color: var(--brushed-brass);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

#weeklyCaseCard {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--warm-ivory);
}

#weeklyCaseCard.hidden { display: none; }

#weeklyCaseCard .weekly-case-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head meta"
    "stamps reward";
  gap: 5px 10px;
  align-items: center;
  min-width: 0;
}

/* 가로 568~613px에서 홈 우열이 341px대로 좁아져 한 줄 구성(meta 열 122px+아이브로
   93px+진입 라벨)이 제목을 23px로 짓눌렀다(실측). 이 구간만 단열 스택으로 전환한다. */
@media (orientation: landscape) and (min-width: 568px) and (max-width: 613px) {
  #weeklyCaseCard .weekly-case-copy {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "meta"
      "stamps"
      "reward";
  }

  #weeklyCaseMeta,
  #weeklyCaseReward {
    justify-self: start;
  }
}

#weeklyCaseCard .weekly-case-head {
  display: flex;
  grid-area: head;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

#weeklyCaseCard .weekly-case-eyebrow {
  flex: 0 0 auto;
  color: var(--brushed-brass);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

#weeklyCaseTitle {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#weeklyCaseMeta,
#weeklyCaseReward {
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

#weeklyCaseMeta { grid-area: meta; }

#weeklyCaseStamps {
  display: flex;
  grid-area: stamps;
  gap: 5px;
  align-items: center;
}

#weeklyCaseStamps .weekly-stamp {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 8px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-0);
}

#weeklyCaseStamps .weekly-stamp.done {
  border-color: var(--brass-42);
  background: var(--brushed-brass);
}

/* 카드는 네이티브 버튼이다(사건 파일 dossier 진입). UA 버튼 스타일을 걷어내고
   탭 가능함을 시각적으로 선언한다 */
#weeklyCaseCard {
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

#weeklyCaseCard:hover,
#weeklyCaseCard:focus-visible {
  border-color: var(--ivory-48);
  background: var(--surface-2, var(--surface-1));
}

#weeklyCaseCard:focus-visible {
  outline: 3px solid var(--warm-ivory);
  outline-offset: 2px;
}

#weeklyCaseCard:active { transform: translateY(1px); }

.weekly-case-go {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--brushed-brass);
  /* 의미 텍스트 — 12px 하한과 접근성 배율을 rem으로 따른다 */
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 사건 파일 dossier 패널 */
.p-eyebrow {
  color: var(--brushed-brass);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.ds-premise {
  margin: 6px 0 10px;
  color: var(--ivory-72);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.5;
}

.ds-meta,
.ds-reward {
  color: var(--warm-ivory);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.ds-reward { margin-top: 3px; color: var(--brass-42, var(--warm-ivory)); }

.ds-rule {
  margin: 4px 0 10px;
  color: var(--ivory-48);
  font-size: 0.72rem;
  line-height: 1.45;
}

.ds-stamps {
  display: flex;
  gap: 6px;
  margin: 2px 0 10px;
}

.ds-stamps .weekly-stamp {
  display: block;
  width: 18px;
  height: 10px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-0);
}

.ds-stamps .weekly-stamp.done {
  border-color: var(--brass-42);
  background: var(--brushed-brass);
}

.ds-stamps .weekly-stamp.today {
  border-color: var(--brass-42);
}

.ds-state {
  color: var(--warm-ivory);
  font-size: 0.82rem;
  font-weight: 850;
}

.ds-state.claimed { color: var(--warm-ivory); }

.ds-archived,
.ds-today {
  margin-top: 4px;
  color: var(--ivory-48);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* 닫기는 보조 동작이다. 데일리 CTA와 같은 황동 주버튼 두 개가 겹치면 위계가 죽는다 */
#dossierClose {
  border-color: var(--ivory-16);
  background: transparent;
  color: var(--ivory-72);
}

#dossierClose:hover,
#dossierClose:focus-visible {
  border-color: var(--ivory-48);
  color: var(--warm-ivory);
}

#weeklyCaseStamps .weekly-stamp.today { box-shadow: 0 0 0 1px var(--brushed-brass); }
#weeklyCaseReward { grid-area: reward; color: var(--brushed-brass); }
#weeklyCaseCard[data-week-claimed="true"] { border-color: var(--brass-42); }

@media (max-height: 620px) {
  .chapter-dossier { min-height: 62px; margin-bottom: 6px; }
  .chapter-dossier .p-title { font-size: 20px; }
  #panelBox[data-panel-kind="level-select"] .lv-grid { gap: 5px; margin-top: 6px; }
  #panelBox[data-panel-kind="level-select"] .lvbtn { min-height: 51px; padding-block: 3px; }
  .lvbtn .lock-name { font-size: 8px; }
  .next-target-dossier { height: 42px; margin-top: 6px; }
  #panelBox[data-panel-kind="level-select"] .p-btns { margin-top: 8px; }
  .chip.daily-identity { font-size: 12px; }
  #weeklyCaseCard { gap: 4px 8px; padding: 8px 10px; }
  #weeklyCaseStamps { gap: 4px; }
  #weeklyCaseStamps .weekly-stamp { width: 11px; }
}