@charset "utf-8";

/* 작품상세 뷰인룸(스케일뷰) 모달
   원본: K-Auction.Design/viewInRoom/css/ka.viewinroom.css (진입 페이지 데모 블록은 옮기지 않음)
   짝: Views/Auction/Work.cshtml 의 #viewInRoom, js/auction/view-in-room.js
   색·버튼·타이포는 KADS(css/ds/ka.foundations.css · ka.components.css)를 따른다.
   장면 안 요소(배경·작품·인물·치수)의 위치/크기는 view-in-room.js 가 px 로 계산해 넣는다.

   브레이크포인트 — 운영 모바일 기준(max-width: 768px)을 따른다 (원본은 ~767 / 768~)
     ~768px      모바일        MO 레이아웃      @media (max-width: 768px)
     769~1279px  타블렛        PC 레이아웃을 비율대로 축소
     1280px~     데스크탑      PC 원본 크기
   PC 가 기본값(미디어쿼리 밖)이고 MO 는 (max-width: 768px) 안에서 덮어쓴다.
   PC 에만 있는 값(패널 폭·위치·애니메이션 등)은 6장에서 MO 값으로 되돌린다 (원본은 PC·MO 를 min/max 로 나눔)
   2~6장 규칙은 모두 루트 .view-in-room 아래로 스코프를 묶는다(운영 전역 CSS 와의 충돌 방지 — 원본은 단독 클래스).
   1장 기본값은 :where() 로 명시도 0 을 유지하고, 7장 진입점은 모달 밖(작품상세) 요소라 묶지 않는다

   구성
     1. 기본 (운영 전역 스타일과 섞이지 않게 모달 안으로 한정)
     2. 모달 공통 — 장면·태그·버튼
     3. 모달 PC (기본값)
     4. 설정 컨트롤
     5. LOT 목록
     6. 모달 MO (max-width: 768px)
     7. 작품상세 MO 진입점 (운영 전용 — 원본은 진입 페이지 데모의 .lot-swiper__vir · .lot-page__icon-btn) */


/* 1. 기본
   :where() 로 명시도를 0 으로 둬서 아래 컴포넌트 규칙(.vir-fab 배경 등)을 덮지 않는다 */
:where(.view-in-room),
:where(.view-in-room) *,
:where(.view-in-room) *::before,
:where(.view-in-room) *::after {
  box-sizing: border-box;
}

:where(.view-in-room) {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--ka-text-default);
}

/* 부트스트랩 p·label 아래 여백 되돌림 */
:where(.view-in-room) p,
:where(.view-in-room) label {
  margin: 0;
}

:where(.view-in-room) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(.view-in-room) img {
  display: block;
}

html.is-vir-open,
html.is-vir-open body {
  overflow: hidden;
}


/* 2. 모달 공통 */
.view-in-room {
  position: fixed;
  inset: 0;
  z-index: 1500;
}

.view-in-room[hidden] {
  display: none;
}

.view-in-room .vir-dimmed {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.view-in-room .vir-dialog {
  position: absolute;
  overflow: hidden;
  background: var(--ka-surface-white);
}

/* 열릴 때 대화상자 자체에 주는 포커스 — 테두리 표시 안 함 */
.view-in-room .vir-dialog:focus {
  outline: none;
}

.view-in-room .vir-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

.view-in-room .vir-world {
  position: absolute;
  inset: 0;
  transition: transform 0.25s ease;
}

.view-in-room .vir-world > * {
  position: absolute;
  max-width: none;
}

.view-in-room .vir-bg,
.view-in-room .vir-art,
.view-in-room .vir-person,
.view-in-room .vir-shadow {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 키 표시: PC 호버 / MO 탭 */
.view-in-room .vir-person {
  pointer-events: auto;
}

/* 작품 — 드래그로 이동(사방 화살표 커서) */
.view-in-room .vir-art {
  object-fit: cover;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}

.view-in-room.is-art-dragging .vir-art {
  cursor: move;
}

/* 그림자가 합성된 전시용 이미지(ImgSeq 6)를 쓰는 작품은 그림자를 더하지 않는다 (운영 전용) */
.view-in-room.is-art-flat .vir-art {
  box-shadow: none;
}

/* SACK 작가 작품 — 작품을 흐리게(blur 5px) 하고 저작권 문구를 LOT 이동 줄 바로 아래 가운데에 둔다 (운영 전용).
   문구는 작품이 아니라 모달 기준 고정 위치 — 작품 드래그·확대와 상관없이 같은 자리. MO 위치는 6장에서 덮어쓴다 */
.view-in-room.is-art-sack .vir-art {
  filter: blur(5px);
}

/* top 80px = .vir-top 높이(위아래 padding 20 + 버튼 40) — 그 줄 바로 아래 */
.view-in-room .vir-copyright {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  margin: 0;
  padding: 0 20px;
  color: #808080;
  font-size: 10px;
  text-align: center;
  word-break: keep-all;
  pointer-events: none;
}

/* LOT 전환 페이드 — 작품·저작권 문구·치수선만. 흐려짐 0.12s(ease-in) → 나타남 0.18s(ease-out). JS goLot()이 .is-lot-out 을 붙였다 뗀다 */
.view-in-room .vir-art,
.view-in-room .vir-copyright,
.view-in-room .vir-dim {
  transition: opacity 0.18s ease-out;
}

.view-in-room.is-lot-out .vir-art,
.view-in-room.is-lot-out .vir-copyright,
.view-in-room.is-lot-out .vir-dim {
  opacity: 0;
  transition: opacity 0.12s ease-in;
}

.view-in-room.is-art-dragging .vir-world {
  transition: none;
}

/* 그리드 — 켜고 끌 때 페이드 */
.view-in-room .vir-grid {
  left: 0;
  right: 0;
  top: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-in-room .vir-grid.is-on {
  opacity: 1;
}

/* 그리드 높이 눈금 — 왼쪽 가장자리, 50cm 굵은 선마다 "— 50 cm" (바닥 기준), 그리드와 같이 페이드 */
.view-in-room .vir-grid-labels {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-in-room .vir-grid-labels.is-on {
  opacity: 1;
}

.view-in-room .vir-grid-label {
  position: absolute;
  left: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.096px;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* display:flex 가 hidden 속성을 덮지 않게 */
.view-in-room .vir-grid-label[hidden] {
  display: none;
}

.view-in-room .vir-grid-label::before {
  content: "";
  width: 8px;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}

.view-in-room .vir-grid-label span {
  padding: 0 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.view-in-room.is-dims-off .vir-dim {
  display: none;
}

/* 치수 태그 */
.view-in-room .vir-tag {
  display: inline-flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* 작품 치수 태그 — 그리드가 켜지면 격자선 위에서도 읽히도록 흰 50% 배경(테두리 없음), 그리드와 같이 페이드 */
.view-in-room .vir-dim .vir-tag {
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.view-in-room.is-grid-on .vir-dim .vir-tag {
  background: rgba(255, 255, 255, 0.5);
  padding: 2px 4px;
}

/* 인물 키 표시 — 머리 위 테두리 박스. 평소 숨김.
   PC: 인물 호버 시 표시(태그로 마우스를 옮길 수 있게 숨김에 0.25s 지연), 누르면 그 자리에서 수정(.is-person-edit)
   MO: 인물 탭(.is-person-tag) 시 표시, 누르면 설정 시트의 관람자 항목으로 */
.view-in-room .vir-tag--person {
  padding: 4px 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease 0.25s, visibility 0s linear 0.4s;
}

.view-in-room.is-person-tag .vir-tag--person,
.view-in-room.is-person-edit .vir-tag--person,
.view-in-room .vir-tag--person:hover,
.view-in-room .vir-tag--person:focus-within {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* PC 는 인물에 마우스를 올리면 표시 (MO 는 6장에서 끔 — 탭으로만) */
.view-in-room .vir-person:hover ~ .vir-tag--person {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.view-in-room .vir-tag__value {
  color: inherit;
  cursor: pointer;
}

.view-in-room .vir-tag__edit {
  display: none;
  align-items: center;
  gap: 4px;
  color: var(--ka-text-default);
}

.view-in-room.is-person-edit .vir-tag__value {
  display: none;
}

.view-in-room.is-person-edit .vir-tag__edit {
  display: inline-flex;
}

.view-in-room.is-person-edit .vir-tag--person {
  border-color: var(--ka-border-selected);
  background: var(--ka-surface-white);
}

/* 폭은 JS(fitTagInput)가 숫자 글자 폭에 맞춤 */
.view-in-room .vir-tag__edit input {
  width: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: inherit;
  -moz-appearance: textfield;
}

.view-in-room .vir-tag__edit input::-webkit-outer-spin-button,
.view-in-room .vir-tag__edit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 치수선 — 50% 검정 1px, 양끝 12px 캡 */
.view-in-room .vir-dim {
  display: flex;
  align-items: center;
}

.view-in-room .vir-dim--v {
  gap: 6px;
}

/* 세로 치수 태그 감싸기 — MO 에서 회전한 태그의 자리(폭)를 잡는다 */
.view-in-room .vir-dim__label {
  display: flex;
}

.view-in-room .vir-dim--h {
  flex-direction: column;
  gap: 6px;
}

.view-in-room .vir-dim__line {
  position: relative;
  flex: none;
  opacity: 0.5;
}

.view-in-room .vir-dim--v .vir-dim__line {
  width: 12px;
  align-self: stretch;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.view-in-room .vir-dim--v .vir-dim__line::before {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #000;
}

.view-in-room .vir-dim--h .vir-dim__line {
  height: 12px;
  align-self: stretch;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.view-in-room .vir-dim--h .vir-dim__line::before {
  content: "";
  position: absolute;
  top: 5.5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #000;
}

/* 원형 아이콘 버튼 */
.view-in-room .vir-fab {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 500px;
  background: var(--ka-surface-white);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

/* PC 새로고침 — 되돌릴 게 없을 때 버튼은 흰색 그대로, 아이콘만 투명도 0.3 */
.view-in-room .vir-fab:disabled {
  cursor: default;
}

.view-in-room .vir-fab:disabled img {
  opacity: 0.3;
}

/* 치수 표시 — 아이콘은 dimensions_20.svg 모양 inline svg(currentColor), 누르지 않은(OFF) 상태는 secondary */
.view-in-room .vir-fab[data-vir-dims] {
  color: var(--ka-text-default);
}

.view-in-room .vir-fab[data-vir-dims][aria-pressed="false"] {
  color: var(--ka-text-secondary);
}

/* 호버 — 그림자만 진하게(0 2px 3px 12% → 0 2px 4px 24%). 원형 버튼 · LOT 이동 pill · 확대/축소, 마우스 기기만. 비활성(새로고침)은 제외 */
.view-in-room .vir-fab,
.view-in-room .vir-lotnav,
.view-in-room .vir-zoom {
  transition: filter 0.2s;
}

@media (hover: hover) {
  .view-in-room .vir-fab:not(:disabled):hover,
  .view-in-room .vir-lotnav:hover,
  .view-in-room .vir-zoom:hover {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.24));
  }
}

.view-in-room .vir-side {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-in-room .vir-lotnav__title,
.view-in-room .vir-sheet-head__lot span {
  font-family: Montserrat, Pretendard, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.128px;
}

/* 토스트 — KADS ka-toast 그대로, 위치만 지정. 컨테이너는 좌우 20px 안쪽 전체 폭 → ka-toast(width 100%, max 560)가
   넓으면 560px, 좁으면(MO) 좌우 20px 여백을 뺀 폭.
   PC: 모달 하단 40px 위 / MO: 바텀시트 위 20px(JS 가 --vir-toast-bottom 지정 — 시트 높이가 바뀌므로) */
.view-in-room .vir-toast {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: var(--vir-toast-bottom, 40px);
  z-index: 5;
  pointer-events: none;
}

/* 평소 숨김 — .ka-toast--enter/--leave 애니메이션으로만 보임 */
.view-in-room .vir-toast .ka-toast {
  opacity: 0;
}


/* 3. 모달 PC (기본값 — MO 는 6장에서 덮어쓴다) */
/* 타블렛에서도 1200:800 비율 유지, 화면이 낮으면 위아래 40px 여백 */
.view-in-room .vir-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, calc(100vw - 40px));
  height: min(800px, calc(100vh - 80px), calc((100vw - 40px) * 2 / 3));
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.view-in-room .vir-mobar,
.view-in-room .vir-fab--mo,
.view-in-room .vir-sheet-head,
.view-in-room .vir-settings__foot {
  display: none;
}

/* 모달 폭 전체를 덮는 줄이라 빈 곳은 클릭을 통과시킴(그 아래 키 표시·작품을 누를 수 있게) */
.view-in-room .vir-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 0;
  pointer-events: none;
}

.view-in-room .vir-top > * {
  pointer-events: auto;
}

.view-in-room .vir-lotnav {
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 500px;
  background: var(--ka-surface-white);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

.view-in-room .vir-lotnav__arrow {
  display: flex;
  padding: 4px;
  margin: -4px;
}

/* 우상단 전체 보기 · 닫기 — 24px 아이콘, 간격 24px */
.view-in-room .vir-window {
  position: absolute;
  right: 28px;
  top: 28px;
  display: flex;
  gap: 24px;
}

.view-in-room .vir-window__btn {
  display: flex;
}

/* 전체 보기 — 모달이 브라우저 창을 꽉 채움(1200×800 상한·라운드·그림자 없음) */
.view-in-room.is-expanded .vir-dialog {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border-radius: 0;
  box-shadow: none;
}

.view-in-room .vir-side {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* 확대/축소 */
.view-in-room .vir-zoom {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 32px;
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  background: var(--ka-surface-white);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

.view-in-room .vir-zoom__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-in-room .vir-zoom__range {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 5px 0;
  cursor: pointer;
  touch-action: none;
}

.view-in-room .vir-zoom__range:focus-visible {
  outline: 2px solid var(--ka-border-primary);
  border-radius: 4px;
}

.view-in-room .vir-zoom__ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5px 0;
}

/* 눈금 한쪽 9개 — 진한 눈금(1·5·9번째 = S·M·L 위치) 사이에 옅은 눈금 3개씩 */
.view-in-room .vir-zoom__ticks i {
  width: 4px;
  height: 1px;
  background: var(--ka-border-gray-light);
}

.view-in-room .vir-zoom__ticks i:nth-child(4n + 1) {
  background: var(--ka-border-gray-darker);
}

.view-in-room .vir-zoom__track {
  position: relative;
  width: 4px;
  height: 80px;
  border-radius: 500px;
  background: var(--ka-surface-gray-light);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1);
}

.view-in-room .vir-zoom__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 500px;
  background: var(--ka-surface-primary);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.12);
}

.view-in-room .vir-zoom__thumb {
  position: absolute;
  left: -4px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1px solid var(--ka-border-gray-darker);
  border-radius: 8px;
  background: var(--ka-surface-white);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.24));
}

/* 설정 패널 */
.view-in-room .vir-settings {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% - 24.5px));
  display: none;
  align-items: center;
  filter: drop-shadow(-2px 0 5px rgba(0, 0, 0, 0.12));
}

/* 오른쪽 가장자리에서 왼쪽으로 열림 */
.view-in-room.is-settings-open .vir-settings {
  display: flex;
  animation: vir-open-left 0.3s ease-out;
}

/* 오른쪽 가장자리로 들어가며 닫힘 */
.view-in-room.is-settings-closing .vir-settings {
  animation: vir-close-right 0.25s ease-in forwards;
}

/* 화살표(arrow-R_12 모양 inline svg, currentColor) 색 */
.view-in-room .vir-settings__tab {
  width: 20px;
  padding: 14px 0 14px 2px;
  display: flex;
  justify-content: center;
  border: 1px solid var(--ka-border-gray-light);
  border-radius: 8px 0 0 8px;
  background: var(--ka-surface-gray-lightest);
  color: var(--ka-text-gray-darker);
}

.view-in-room .vir-settings__panel {
  width: 320px;
  padding: 16px 20px 20px;
  border-radius: 8px 0 0 8px;
  background: var(--ka-surface-white);
}

.view-in-room .vir-choice,
.view-in-room .vir-input--height {
  width: 88px;
}

.view-in-room .vir-swatch span {
  width: 40px;
  height: 40px;
}

/* LOT 목록 — 좌측 패널 */
.view-in-room .vir-lots__dimmed {
  display: none;
}

/* 왼쪽 가장자리로 들어가며 닫힘 */
.view-in-room .vir-lots.is-closing .vir-lots__panel {
  animation: vir-close-left 0.25s ease-in forwards;
}

/* 왼쪽 가장자리에서 오른쪽으로 열림 */
.view-in-room .vir-lots__panel {
  animation: vir-open-right 0.3s ease-out;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 240px;
  display: flex;
  flex-direction: column;
  background: var(--ka-surface-white);
  filter: drop-shadow(2px 0 5px rgba(0, 0, 0, 0.12));
}

.view-in-room .vir-lots__head {
  padding: 28px 20px 20px;
}

.view-in-room .vir-lots__search {
  margin: 0 20px 16px;
  height: 36px;
}

.view-in-room .vir-lots__search input {
  font-size: 14px;
  letter-spacing: -0.112px;
}

.view-in-room .vir-lots__list {
  padding: 0 10px 16px;
}

.view-in-room .vir-lot {
  padding: 4px 10px;
  gap: 12px;
  border-radius: 6px;
}

.view-in-room .vir-lot:hover {
  background: var(--ka-surface-gray-lightest);
}

.view-in-room .vir-lot__thumb {
  width: 32px;
  height: 32px;
}

.view-in-room .vir-lot__text {
  flex-direction: row;
  gap: 6px;
}

.view-in-room .vir-lot__no {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.112px;
}


/* 패널 열림 모션 — 개별 translate 속성이라 기존 transform(세로 가운데 정렬)과 겹치지 않는다 */
@keyframes vir-open-right {
  from {
    translate: -100% 0;
  }

  to {
    translate: 0 0;
  }
}

@keyframes vir-open-left {
  from {
    translate: 100% 0;
  }

  to {
    translate: 0 0;
  }
}

@keyframes vir-close-left {
  from {
    translate: 0 0;
  }

  to {
    translate: -100% 0;
  }
}

@keyframes vir-close-right {
  from {
    translate: 0 0;
  }

  to {
    translate: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-in-room .vir-lots__panel,
  .view-in-room .vir-settings {
    animation: none !important;
  }

  .view-in-room .vir-grid,
  .view-in-room .vir-toggle,
  .view-in-room .vir-toggle__knob,
  .view-in-room .vir-art,
  .view-in-room .vir-copyright,
  .view-in-room .vir-dim {
    transition: none !important;
  }
}


/* 4. 설정 컨트롤 */
/* MO: 머리 위 키 표시를 눌러 들어왔을 때 관람자 항목 하이라이트 — 항목 영역이 주황(100)으로 칠해졌다가 서서히 사라짐 */
.view-in-room .vir-field.is-highlight {
  position: relative;
  isolation: isolate;
}

/* 시트 좌우 끝까지(본문 좌우 패딩 20px 만큼 밖으로) — 흰 여백 없이 */
.view-in-room .vir-field.is-highlight::before {
  content: "";
  position: absolute;
  inset: -8px -20px;
  z-index: -1;
  background: var(--ka-surface-primary-lightest);
  animation: vir-highlight 1.4s ease-out forwards;
}

@keyframes vir-highlight {
  0%,
  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.view-in-room .vir-settings__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.view-in-room .vir-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ka-divider-gray-light);
}

.view-in-room .vir-field:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.view-in-room .vir-field__label {
  color: var(--ka-text-secondary);
}

.view-in-room .vir-field__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.view-in-room .vir-field__row--tight {
  gap: 8px;
}

.view-in-room .vir-field__group {
  display: flex;
  gap: 8px;
}

/* 치수 | 그리드 한 줄 — 왼쪽 치수(cm·in), 오른쪽 그리드 칸은 남는 폭에서 오른쪽 정렬(라벨은 토글 왼쪽 끝에 맞춤) */
.view-in-room .vir-field--split {
  flex-direction: row;
  gap: 8px;
}

.view-in-room .vir-field__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.view-in-room .vir-field__col--grid {
  flex: 1;
  min-width: 0;
  align-items: flex-end;
}

/* 토글을 cm·in 버튼 높이(40) 가운데에 */
.view-in-room .vir-field__toggle {
  height: 40px;
  display: flex;
  align-items: center;
}

.view-in-room .vir-swatches {
  display: flex;
  gap: 8px;
}

.view-in-room .vir-swatch {
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ka-surface-white);
}

.view-in-room .vir-swatch[aria-pressed="true"] {
  border-color: var(--ka-border-selected);
}

.view-in-room .vir-swatch span {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.view-in-room .vir-swatch span img {
  position: absolute;
  left: -110.94%;
  width: 321.88%;
  bottom: -5px;
  height: auto;
}

/* 미니멀은 바닥선이 이미지 아래쪽에 더 가까워(1154/1360) 갤러리(862/1062)와 바닥선 높이를 맞추도록 내린 만큼 올림
   — 스와치 크기(PC 40 / MO 48)와 무관하게 맞도록 % + px 로 계산 */
.view-in-room .vir-swatch[data-vir-scene="minimal"] span img {
  bottom: calc(7.87% - 5px);
}

/* 세그먼트 선택 버튼 — 선택 시 2px 검정 테두리 */
.view-in-room .vir-choice {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ka-border-gray-light);
  border-radius: 6px;
  background: var(--ka-surface-white);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.12px;
}

.view-in-room .vir-choice[aria-pressed="true"] {
  border: 2px solid var(--ka-border-selected);
}

/* 토글 56×26 — 손잡이가 좌우로 미끄러지고 배경색이 바뀐다 */
.view-in-room .vir-toggle {
  position: relative;
  flex: none;
  width: 56px;
  height: 26px;
  border-radius: 500px;
  background: var(--ka-surface-disabled);
  color: var(--ka-text-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: -0.104px;
  transition: background-color 0.2s ease;
}

.view-in-room .vir-toggle[aria-checked="true"] {
  background: var(--ka-surface-primary);
}

.view-in-room .vir-toggle__knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ka-surface-white);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}

.view-in-room .vir-toggle[aria-checked="true"] .vir-toggle__knob {
  transform: translateX(30px);
}

.view-in-room .vir-toggle__text {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.view-in-room .vir-toggle[aria-checked="true"] .vir-toggle__text {
  right: auto;
  left: 8px;
}

/* 숫자 입력 */
.view-in-room .vir-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
  border: 1px solid var(--ka-border-gray-light);
  border-radius: 6px;
  background: var(--ka-surface-white);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.128px;
}

.view-in-room .vir-input--height {
  flex: none;
}

.view-in-room .vir-input:focus-within {
  border-color: var(--ka-border-selected);
}

/* 그리드(cm·in)·관람자(남성·여성·키) 호버 — 선택·포커스 상태는 그대로 두고, 터치 기기에선 호버가 남지 않게 hover 가능한 기기만 */
@media (hover: hover) {
  .view-in-room .vir-choice:not([aria-pressed="true"]):hover,
  .view-in-room .vir-input:not(:focus-within):hover {
    border-color: var(--ka-border-gray-dark);
  }
}

.view-in-room .vir-input input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--ka-text-default);
  -moz-appearance: textfield;
}

.view-in-room .vir-input input::-webkit-outer-spin-button,
.view-in-room .vir-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* 5. LOT 목록 */
.view-in-room .vir-lots {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.view-in-room .vir-lots[hidden] {
  display: none;
}

.view-in-room .vir-lots__dimmed {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.view-in-room .vir-lots__head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-in-room .vir-lots__head p {
  flex: 1;
  line-height: 20px;
}

.view-in-room .vir-lots__head button {
  display: flex;
}

/* 포커스 때 색만 바뀌도록 평소에도 1px 자리 확보 */
.view-in-room .vir-lots__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--ka-surface-gray-lighter);
}

/* 돋보기 아이콘 20px(PC·MO 공통) */
.view-in-room .vir-lots__search img {
  flex: none;
  width: 16px;
}

.view-in-room .vir-lots__search:focus-within {
  border-color: var(--ka-border-selected);
}

/* 호버 시 배경 한 단계 진하게(마우스 기기만) */
@media (hover: hover) {
  .view-in-room .vir-lots__search:hover {
    background: var(--ka-surface-gray-light);
  }
}

.view-in-room .vir-lots__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  line-height: 20px;
  color: var(--ka-text-default);
}

.view-in-room .vir-lots__search input::placeholder {
  color: var(--ka-text-secondary);
}

.view-in-room .vir-lots__search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.view-in-room .vir-lots__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  list-style: none;
  overflow-y: auto;
}

.view-in-room .vir-lot {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
}

.view-in-room .vir-lot__thumb {
  flex: none;
  display: block;
  padding: 4px;
  border-radius: 8px;
  box-sizing: content-box;
}

.view-in-room .vir-lot__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid var(--ka-surface-gray-lighter);
  border-radius: 4px;
  background: var(--ka-surface-gray-lighter);
}

.view-in-room .vir-lot[aria-current="true"] .vir-lot__thumb {
  padding: 2px;
  border: 2px solid var(--ka-surface-default);
}

.view-in-room .vir-lot__text {
  flex: 1;
  min-width: 0;
  display: flex;
  white-space: nowrap;
}

.view-in-room .vir-lot__no {
  flex: none;
  font-weight: 700;
}

/* 긴 작가명은 말줄임 */
.view-in-room .vir-lot__artist {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-in-room .vir-lot__empty {
  padding: 24px 0;
  color: var(--ka-text-secondary);
  text-align: center;
}


/* 6. 모달 MO — 3장 PC 기본값을 덮어쓴다 */
@media (max-width: 768px) {
  /* 전체 화면 */
  .view-in-room .vir-dialog {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }

  .view-in-room .vir-dimmed,
  .view-in-room .vir-top,
  .view-in-room .vir-window,
  .view-in-room .vir-zoom,
  .view-in-room .vir-fab--pc,
  .view-in-room .vir-settings__tab {
    display: none;
  }

  .view-in-room .vir-mobar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 20px 0;
  }

  /* SACK 저작권 문구 — LOT 이동 줄이 없으니 상단 바(.vir-mobar) 바로 아래 */
  .view-in-room .vir-copyright {
    top: calc(56px + env(safe-area-inset-top));
  }

  .view-in-room .vir-mobar__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.128px;
    white-space: nowrap;
  }

  .view-in-room .vir-mobar__title strong {
    font-weight: 600;
  }

  .view-in-room .vir-mobar__title i {
    flex: none;
    width: 1px;
    height: 12px;
    background: #000;
    opacity: 0.3;
  }

  .view-in-room .vir-mobar__title span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .view-in-room .vir-mobar__close {
    display: flex;
  }

  /* MO 크기 버튼(S/M/L) — PC 에서 숨긴 것을 다시 표시 */
  .view-in-room .vir-fab--mo {
    display: flex;
  }

  .view-in-room .vir-side {
    right: 12px;
    top: calc(64px + env(safe-area-inset-top));
    transform: none;
  }

  /* 인물 키 표시는 탭(.is-person-tag)으로만 — PC 호버 표시를 끈다 */
  .view-in-room:not(.is-person-tag):not(.is-person-edit) .vir-person:hover ~ .vir-tag--person {
    opacity: 0;
    visibility: hidden;
    transition-delay: 0.25s, 0.4s;
  }

  /* 바텀시트: collapsed(LOT 이동만) / half / full(하단 버튼) */
  .view-in-room .vir-settings {
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    display: block;
    transform: none;
    height: calc(72px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    background: var(--ka-surface-white);
    filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, 0.16));
    transition: height 0.25s ease;
  }

  /* JS LAYOUT.mo.sheetHalf 와 같은 값 */
  .view-in-room .vir-settings[data-sheet="half"] {
    height: 260px;
  }

  /* full = 476px(시안 Bottom Sheet), 화면이 낮으면 위 100px 은 남기고 본문 스크롤 */
  .view-in-room .vir-settings[data-sheet="full"] {
    height: min(476px, calc(100% - 100px));
  }

  .view-in-room .vir-settings.is-dragging {
    transition: none;
  }

  /* PC 패널 여닫힘 상태·모션은 MO 바텀시트에 쓰지 않는다 */
  .view-in-room.is-settings-open .vir-settings,
  .view-in-room.is-settings-closing .vir-settings {
    display: block;
    animation: none;
  }

  .view-in-room .vir-settings__panel {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 0;
    background: none;
  }

  .view-in-room .vir-sheet-head {
    display: block;
    flex: none;
    touch-action: none;
  }

  .view-in-room .vir-sheet-head__handle {
    display: block;
    width: 100%;
    height: 24px;
    position: relative;
  }

  .view-in-room .vir-sheet-head__handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--ka-border-gray);
  }

  .view-in-room .vir-sheet-head__nav {
    height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .view-in-room .vir-sheet-head__nav > button {
    display: flex;
  }

  .view-in-room .vir-sheet-head__lot {
    display: flex;
    padding-right: 16px;
    gap: 16px;
    align-items: center;
  }

  .view-in-room .vir-settings__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 24px;
  }

  .view-in-room .vir-settings[data-sheet="collapsed"] .vir-settings__body {
    visibility: hidden;
  }

  .view-in-room .vir-settings__foot {
    display: none;
    gap: 8px;
    padding: 10px 20px;
  }

  .view-in-room .vir-settings[data-sheet="full"] .vir-settings__foot {
    display: flex;
  }

  .view-in-room .vir-settings__foot .ka-btn--solid-black {
    flex: 1;
  }

  /* 관람자(남성·여성·키)는 한 줄 3등분, 그리드 cm·in 도 같은 폭(3등분 2칸 + 간격 8px) */
  .view-in-room .vir-field__row--tight .vir-choice,
  .view-in-room .vir-input--height {
    flex: none;
    width: calc((100% - 16px) / 3);
  }

  /* 관람자 줄 3등분의 2칸 + 간격 */
  .view-in-room .vir-field__col--dims {
    flex: none;
    width: calc((100% - 16px) * 2 / 3 + 8px);
  }

  .view-in-room .vir-field__group .vir-choice {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .view-in-room .vir-swatch span {
    width: 48px;
    height: 48px;
  }

  .view-in-room .vir-dim--v {
    gap: 2px;
  }

  /* 세로 치수 태그 — 가로 글자를 -90° 회전(아래→위로 읽힘). writing-mode: vertical-rl 은 iOS Safari 에서 글자가 줄 박스 안에서
     한쪽으로 치우쳐 치수선에 붙어 보여서 쓰지 않는다. 회전은 레이아웃 폭에 반영되지 않으므로 감싸는 칸 폭 = 태그 높이(줄 높이 20px)로 잡는다 */
  .view-in-room .vir-dim--v .vir-dim__label {
    position: relative;
    align-self: stretch;
    width: 20px;
  }

  /* 그리드 ON — 태그 패딩(2px 4px)이 회전해 폭이 4px 늘어남 */
  .view-in-room.is-grid-on .vir-dim--v .vir-dim__label {
    width: 24px;
  }

  .view-in-room .vir-dim--v .vir-tag {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .view-in-room .vir-dim--h {
    gap: 2px;
  }

  /* LOT 목록 — 가운데 모달, 2열. 뒤에 딤을 깔고, PC 패널 모션은 쓰지 않는다 */
  .view-in-room .vir-lots__dimmed {
    display: block;
  }

  .view-in-room .vir-lots__panel,
  .view-in-room .vir-lots.is-closing .vir-lots__panel {
    animation: none;
  }

  .view-in-room .vir-lots__panel {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    bottom: auto;
    width: auto;
    transform: translateY(-50%);
    height: min(560px, calc(100% - 80px));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ka-border-gray-lightest);
    border-radius: 8px;
    background: var(--ka-surface-white);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));
  }

  .view-in-room .vir-lots__head {
    height: 56px;
    padding: 0 20px;
  }

  .view-in-room .vir-lots__head p {
    text-align: center;
    padding-left: 28px;
  }

  .view-in-room .vir-lots__search {
    margin: 0 20px 16px;
    height: 40px;
  }

  .view-in-room .vir-lots__search input {
    font-size: 16px;
    letter-spacing: -0.128px;
  }

  /* 최대 2열, 자리가 모자라면 1열 — 칸 최소 폭은 "목록 폭의 절반"과 112px 중 큰 값.
     112px = 썸네일 48(40 + 안쪽 여백 4×2) + 간격 12 + 세 자리 LOT 번호 52. 작가명은 말줄임이라 셈하지 않는다.
     절반이 112px 보다 작아지면(화면 폭 약 314px 미만) 두 칸이 안 들어가 1열로 꽉 찬다.
     1fr 만 쓰면 최소 폭이 내용 길이라 긴 작가명이 칸을 밀어낸다 */
  .view-in-room .vir-lots__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(112px, calc((100% - 8px) / 2)), 1fr));
    column-gap: 8px;
    align-content: start;
    padding: 0 20px 16px;
  }

  .view-in-room .vir-lot {
    padding: 8px 0;
    gap: 12px;
    border-radius: 0;
  }

  .view-in-room .vir-lot:hover {
    background: none;
  }

  .view-in-room .vir-lot__thumb {
    width: 40px;
    height: 40px;
  }

  .view-in-room .vir-lot__text {
    flex-direction: column;
    gap: 0;
  }

  .view-in-room .vir-lot__no {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: -0.104px;
  }

  .view-in-room .vir-lot__empty {
    grid-column: 1 / -1;
  }

  .view-in-room .vir-lots__search img {
    width: 20px;
  }

}


/* 7. 작품상세 MO 진입점
   PC 썸네일(.viewInRoom)은 ka.work.css 규칙을 쓴다. 노출 여부는 Work.cshtml 이 작품 크기를 보고 정한다
   (PC 썸네일 .on / MO 버튼 hidden — ka.fe.css 전역 .on 이 display:block !important 라 MO 버튼엔 .on 을 쓰지 않는다) */

/* 관심·공유 아래 치수 버튼 — 위치·크기는 ka.work.css 의 .right .top-tit .share(35px, top 125px)에 맞춰 한 칸 아래 */
.right .top-tit .vir-entry-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 165px;
  right: 8%;
  z-index: 200;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--ka-border-gray-light);
  border-radius: 500px;
  background: var(--ka-surface-white);
  cursor: pointer;
}

/* 스와이퍼 마지막 장 — 첫 장 이미지 위 가운데에 반투명 크기 비교 버튼 */
.vir-entry-slide {
  position: relative;
}

.vir-entry-slide__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  padding: 2px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  background: rgba(37, 37, 37, 0.7);
  color: var(--ka-text-white);
  cursor: pointer;
}

/* 아이콘은 dimensions_32.svg 모양 inline svg — currentColor 로 흰색 */
.vir-entry-slide__btn svg {
  display: block;
}

/* 스와이퍼가 보이는 MO 구간에서만 */
@media (max-width: 768px) {
  .right .top-tit .vir-entry-btn:not([hidden]) {
    display: flex;
  }
}