/*
 * 시안 뷰어의 껍데기.
 *
 * ── 왜 Tailwind 로 안 쓰나 ──────────────────────────────────────
 * Tailwind 는 파일을 훑어 쓰인 클래스만 남기고 나머지를 지운다. 그래서 화면에 새 클래스를
 * 쓰면 site.css 를 다시 빌드해야 보인다(./gradlew tailwindCss). 그 빌드는 Node 를 내려받아야
 * 해서 빌드 서버에서 자동으로 돌지 않고, 사람이 로컬에서 한 번 돌려 결과를 커밋하는 방식이다.
 *
 * 이 화면은 시안을 파는 자리다. 누군가 CSS 재빌드를 잊었다는 이유로 뼈대만 남은 화면이
 * 손님에게 보이면 안 된다. 그래서 여기만 손으로 쓴 CSS 한 장을 쓴다. 이 파일은 훑기 대상이
 * 아니므로 지워질 일이 없다.
 *
 * 안에 뜨는 데모는 iframe 이라 이 파일의 영향을 받지 않는다 — 문서가 다르다.
 * 그래서 껍데기를 어떻게 칠하든 시안 색이 오염되지 않는다.
 */

/*
 * 이 화면은 site.css(Tailwind)를 싣지 않는다 — 안에 뜨는 데모만 그것을 쓴다.
 * 그래서 Tailwind 가 깔아 주던 기본값이 여기에는 없다. box-sizing 을 손으로 세운다.
 * 이게 없으면 기기 테두리의 안쪽 여백이 화면 크기에 더해져, 390px 로 잡은 휴대폰이
 * 실제로는 412px 짜리가 된다 — 확인하려던 그 폭이 아니게 된다.
 */
.dv, .dv *, .dv *::before, .dv *::after { box-sizing: border-box; }

.dv {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* 화면 자체는 안 구른다. 구르는 것은 시안 안쪽이다. */
  background: #14120F;
  color: #E7E5E4;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;

  /*
   * 한글 줄바꿈. site.css 의 body 규칙이 여기엔 닿지 않는다(이 화면은 그 파일을 안 싣는다).
   * 없으면 브라우저 기본값대로 한글이 아무 글자에서나 끊긴다 —
   *   "이 짜임새는 예약을 먼저 받는 가게에 어울립니
   *    다."
   * keep-all 은 어절 단위로만 끊고, break-word 는 끊을 곳이 없는 긴 덩어리만 예외로 끊는다.
   */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.dv button { font: inherit; color: inherit; cursor: pointer; }
.dv a { color: inherit; }
.dv :focus-visible { outline: 2px solid #4FB2F5; outline-offset: 2px; border-radius: 6px; }

/* ── 맨 윗줄 ─────────────────────────────────────────────────── */

.dv-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #2A2622;
  flex: none;
}

.dv-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid #3A3430; background: transparent;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.dv-back:hover { background: #221E1A; border-color: #524A44; }

.dv-title { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; }
.dv-title strong { font-size: 15px; font-weight: 700; color: #FAFAF9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-title span { font-size: 12px; color: #8A817B; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dv-arrows { display: flex; gap: 6px; flex: none; }
.dv-arrow {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid #3A3430; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, border-color .15s ease;
}
.dv-arrow:hover { background: #221E1A; border-color: #524A44; }
.dv-arrow svg { width: 16px; height: 16px; }

/* ── 시안 열 개 고르는 줄 ─────────────────────────────────────
 *
 * 드롭다운으로 접지 않는다. 열 개가 눈에 다 보여야 "이만큼 중에 고르는구나" 가 읽히고,
 * 접어 두면 옆 시안이 있다는 것 자체를 모른 채 하나만 보고 나간다.
 */

.dv-rail {
  display: flex; gap: 6px; flex: none;
  padding: 9px 14px;
  overflow-x: auto;
  border-bottom: 1px solid #2A2622;
  scrollbar-width: none;
}
.dv-rail::-webkit-scrollbar { display: none; }

.dv-chip {
  flex: none; padding: 6px 13px; border-radius: 999px;
  border: 1px solid #332E2A; background: transparent;
  font-size: 12.5px; font-weight: 600; color: #ADA49D; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dv-chip:hover { color: #FAFAF9; border-color: #5C534C; }

/*
 * 손가락 과녁만 넓힌다 — 보이는 크기는 그대로.
 *
 * 칩은 29px, 색 견본은 26px 라 손끝(44px 관례)보다 작다. 그렇다고 키울 수가 없다 —
 * 이 화면은 아래 '좁은 화면' 주석대로 도구줄을 <b>일부러 줄여</b> 시안에 자리를 넘긴 화면이다.
 * 375×620 에서 껍데기가 이미 260px 를 먹는데 도구를 키우면 정작 보여줄 것이 손바닥만 해진다.
 *
 * 그래서 크기는 두고 ::after 로 투명한 판을 덮어 <b>누를 수 있는 넓이만</b> 키운다.
 * 이 판은 자리를 차지하지 않으므로(absolute) 도구줄 높이가 1px 도 늘지 않는다.
 *
 * 좌우로는 거의 안 늘린다 — 칩과 견본이 6~7px 간격으로 붙어 있어서, 좌우까지 넓히면
 * 옆 항목의 과녁과 겹쳐 엉뚱한 시안이 열린다. 위아래는 도구줄 여백이라 겹칠 것이 없다.
 */
.dv-chip, .dv-sw { position: relative; }
.dv-chip::after,
.dv-sw::after {
  content: '';
  position: absolute;
  inset: -9px -2px;
}
.dv-chip[aria-current="true"] { background: #FAFAF9; border-color: #FAFAF9; color: #1C1917; }

/* ── 도구줄 ──────────────────────────────────────────────────── */

.dv-tools {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #2A2622;
  flex: none;
}

.dv-tool { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dv-tool-end { margin-left: auto; gap: 6px; }
.dv-label { font-size: 11.5px; font-weight: 600; color: #8A817B; white-space: nowrap; }

/* 셋 중 하나 고르는 단추 묶음 */
.dv-seg { display: flex; padding: 3px; border-radius: 999px; background: #221E1A; border: 1px solid #332E2A; }
.dv-seg button {
  padding: 5px 13px; border: 0; border-radius: 999px; background: transparent;
  font-size: 12.5px; font-weight: 600; color: #ADA49D; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.dv-seg button:hover { color: #FAFAF9; }
.dv-seg button[aria-pressed="true"] { background: #FAFAF9; color: #1C1917; }

/* 색 견본 */
.dv-swatches { display: flex; gap: 7px; }
.dv-sw {
  width: 26px; height: 26px; border-radius: 999px; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  transition: transform .15s ease, border-color .15s ease;
}
.dv-sw:hover { transform: scale(1.12); }
.dv-sw[aria-pressed="true"] { border-color: #FAFAF9; }

.dv-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid #3A3430; background: transparent;
  font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.dv-ghost:hover { background: #221E1A; border-color: #524A44; }
.dv-ghost svg { width: 13px; height: 13px; opacity: .7; }

/*
 * 언어 단추.
 *
 * i18n.js 가 만들어 붙이면서 Tailwind 클래스를 걸어 두는데, 이 화면은 site.css 를 싣지 않아
 * 그 클래스들이 아무 일도 하지 않는다. 게다가 그 색(text-stone-600)은 밝은 바탕용이라
 * 여기서는 보이지도 않는다. 여기서 다시 칠한다.
 */
.dv-lang button {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid #3A3430; background: transparent;
  font-size: 11px; font-weight: 700; color: #ADA49D;
  transition: background-color .15s ease, color .15s ease;
}
.dv-lang button:hover { background: #221E1A; color: #FAFAF9; }

/* ── 시안이 뜨는 자리 ────────────────────────────────────────── */

/*
 * overflow:hidden 이 필요하다.
 *
 * 설명 서랍(.dv-panel)은 닫혀 있을 때 translateX(100%) 로 오른쪽 바깥에 세워 둔다.
 * 그 자리가 문서 폭에 그대로 더해져서, 닫아 둔 서랍 하나 때문에 화면이 380px 넓어졌다.
 * 몸통에도 overflow:hidden 이 걸려 있어 눈에 띄지는 않지만, 가로로 넘치는 화면이라는
 * 사실은 그대로 남는다. 서랍을 담고 있는 여기서 잘라 두는 것이 맞다.
 */
.dv-stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, #211D19 0%, #14120F 62%);
}

/*
 * 기기 크기는 고정하고 화면에 맞게 줄여서 보여준다.
 *
 * 폭을 늘였다 줄였다 하는 대신 진짜 390px 짜리 화면을 만들어 축소한다. 그래야 안에서
 * 도는 미디어 쿼리가 실제 휴대폰과 똑같이 걸린다. 폭을 CSS 로만 좁히면 글자만 작아진 채
 * 데스크톱 배치가 그대로 남아, 정작 확인하려던 "휴대폰에서 어떻게 접히는가" 를 못 본다.
 *
 * 줄이는 비율은 자리 크기를 재서 스크립트가 정한다(--dv-scale).
 */
/*
 * --dv-w / --dv-h 가 '안쪽 화면' 의 크기다. 테두리 두께는 거기에 더한다.
 * 이렇게 나눠 두어야 iframe 이 정확히 390 × 844 를 갖는다 — 그 숫자가 이 기능의 전부다.
 */
.dv-device {
  position: relative;
  flex: none;
  width: calc(var(--dv-w) + var(--dv-bez) * 2);
  height: calc(var(--dv-h) + var(--dv-bez) + var(--dv-bez-top));
  padding: var(--dv-bez-top) var(--dv-bez) var(--dv-bez);
  transform: scale(var(--dv-scale, 1));
  transform-origin: center center;
  box-shadow: 0 0 0 1.5px #3D3833, 0 26px 60px rgba(0,0,0,.55);
}

.dv-device .dv-screen {
  overflow: hidden;
  background: #fff;
  width: var(--dv-w); height: var(--dv-h);
}
.dv-device iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 휴대폰 — 테두리를 그려 둔다. 이게 진짜 휴대폰 폭이라는 것을 한눈에 알린다. */
.dv-device[data-device="mobile"] {
  --dv-w: 390px; --dv-h: 844px; --dv-bez: 11px; --dv-bez-top: 11px;
  border-radius: 44px; background: #050505;
}
.dv-device[data-device="mobile"] .dv-screen { border-radius: 33px; }
.dv-device[data-device="mobile"]::before {          /* 위쪽 스피커 자리 */
  content: ''; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 26px; border-radius: 999px; background: #050505; z-index: 2;
}

.dv-device[data-device="tablet"] {
  --dv-w: 834px; --dv-h: 1050px; --dv-bez: 14px; --dv-bez-top: 14px;
  border-radius: 26px; background: #050505;
}
.dv-device[data-device="tablet"] .dv-screen { border-radius: 12px; }

/* PC — 주소창을 흉내 낸 머리띠를 붙인다. */
.dv-device[data-device="desktop"] {
  --dv-w: 1280px; --dv-h: 820px; --dv-bez: 0px; --dv-bez-top: 34px;
  border-radius: 12px; background: #2A2622;
}
.dv-device[data-device="desktop"] .dv-screen { border-radius: 0 0 12px 12px; }
.dv-device[data-device="desktop"]::before {
  content: ''; position: absolute; top: 13px; left: 16px;
  width: 8px; height: 8px; border-radius: 999px; background: #5C534C;
  box-shadow: 14px 0 0 #5C534C, 28px 0 0 #5C534C;
}

/*
 * 크기를 재기 전에는 감춘다. 재기 전에는 축소 비율이 1 이라, PC 크기(1280)가 잠깐
 * 원본 그대로 그려졌다가 줄어든다 — 화면이 한 번 크게 번쩍인다.
 *
 * ── 넓은 화면에서만 감춘다 ──────────────────────────────────
 * 이 규칙이 실패하는 방향이 거꾸로였다. 재는 일이 한 번이라도 어긋나면
 * (배치가 늦게 잡히거나, 화면이 그려지지 않는 상태라 requestAnimationFrame 이 멈춰 있거나)
 * data-ready 가 영영 안 붙고, 그러면 시안이 통째로 감춰진 채로 남는다.
 * 화면은 멀쩡히 열렸는데 정작 보여주려던 것만 안 보이는 상태다 — 실제로 그렇게 났다.
 *
 * 좁은 화면에서는 애초에 축소를 쓰지 않는다(아래 좁은 화면 규칙에서 transform:none).
 * 번쩍일 것이 없으니 감출 이유도 없다. 그래서 넓은 화면에만 건다 —
 * 무언가 잘못돼도 시안은 보이는 쪽으로 남는다.
 */
@media (min-width: 641px) {
  .dv-stage:not([data-ready]) .dv-device { visibility: hidden; }
}

/* ── 딸린 화면 바로가기 ──────────────────────────────────────── */

.dv-subs {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px);
  padding: 6px 10px; border-radius: 999px;
  background: rgba(20,18,15,.82); backdrop-filter: blur(6px);
  border: 1px solid #332E2A;
}
.dv-subs .dv-label { font-size: 11px; }
.dv-sub {
  padding: 4px 10px; border-radius: 999px; border: 1px solid #3A3430;
  background: transparent; font-size: 11.5px; font-weight: 600; color: #C7BFB8;
  text-decoration: none; white-space: nowrap;
}
.dv-sub:hover { background: #2A2622; color: #FAFAF9; }
.dv-subs:empty { display: none; }

/*
 * 감춘 것은 감춰야 한다.
 *
 * 딸린 화면 줄은 짜임새마다 하나씩, 열 개가 모두 그려져 있고 지금 보는 것만 남긴다.
 * 나머지는 hidden 속성으로 접는데 — 그것만으로는 접히지 않는다.
 *
 * 브라우저 기본 규칙 [hidden]{display:none} 은 UA 스타일이라 작성자 스타일에 무조건 진다.
 * 바로 위 .dv-subs 가 display:flex 를 세우고 있으므로 hidden 이 붙어도 그대로 보인다.
 * 이 화면은 Tailwind preflight 를 싣지 않아 그것이 막아 주지도 않는다.
 *
 * 그래서 실제로 열 줄이 한꺼번에 떠 있었다. 넓은 화면에서는 모두 absolute 라 같은 자리에
 * 겹쳐 한 줄처럼 보였고, 좁은 화면에서는 흐름 안으로 내려 세로로 쌓이면서 화면을 다 먹었다 —
 * 시안에 남는 자리가 한 줄뿐이었다.
 *
 * 클래스가 아니라 속성으로 거는 이유: 서버(th:hidden)와 스크립트(el.hidden = …)가 둘 다
 * 속성으로 접는다. 한쪽만 클래스로 바꾸면 다른 쪽이 조용히 어긋난다.
 */
.dv-subs[hidden] { display: none; }

/* ── 짜임새 설명 서랍 ────────────────────────────────────────── */

.dv-panel {
  position: absolute; inset: 0 0 0 auto; width: min(380px, 88vw); z-index: 5;
  padding: 22px; overflow-y: auto;
  background: #1B1815; border-left: 1px solid #332E2A;
  box-shadow: -20px 0 50px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .25s ease;
}
.dv-panel[data-open="true"] { transform: translateX(0); }
.dv-panel h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: #FAFAF9; }
.dv-panel .dv-sum { margin: 0 0 18px; font-size: 13px; line-height: 1.75; color: #ADA49D; }
.dv-panel dt { font-size: 11.5px; font-weight: 700; color: #8A817B; margin-top: 16px; }
.dv-panel dd { margin: 5px 0 0; font-size: 13px; line-height: 1.85; color: #D6D3D1; }
.dv-panel .dv-warn { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #241F1A; border: 1px solid #3A3430; }
.dv-panel .dv-warn dt { margin-top: 0; color: #E0B76B; }
.dv-panel-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 999px; border: 1px solid #3A3430; background: transparent; }

/* ── 맨 아랫줄 — 고르고 나서 할 일 ────────────────────────────
 *
 * 여기가 이 화면을 만든 이유다. 지금까지 데모 37장 어디에도 시작하는 길이 없었다.
 * 시안당 200명 넘게 보고 나갔는데 마음에 들어도 누를 것이 없었다.
 */

.dv-cta {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid #2A2622;
  background: #1B1815;
  flex: none;
}
.dv-cta-text { flex: 1; min-width: 180px; font-size: 12px; line-height: 1.65; color: #8A817B; }
.dv-cta-text b { color: #E7E5E4; font-weight: 600; }

/*
 * 아래 두 단추는 도구줄이 아니라 맨 아래 띠에 있다 — 자리를 아낄 이유가 없는 자리라
 * 히트영역 꼼수 대신 실제로 44px 로 키운다. 이 화면을 보고 나서 <b>할 일</b>이 이 둘이다.
 */
.dv-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  padding: 11px 22px; border-radius: 999px; border: 0;
  background: #4FB2F5; color: #08243A;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.dv-start:hover { background: #74C6FF; }

.dv-ask {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid #3A3430; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.dv-ask:hover { background: #221E1A; border-color: #524A44; }

/* ── 좁은 화면 ───────────────────────────────────────────────
 *
 * 사장님 대부분이 휴대폰으로 본다. 그 화면에서는 기기 전환이 쓸모가 적으므로
 * (이미 진짜 휴대폰이다) 도구를 접고 시안을 넘기는 것과 색 바꾸는 것만 남긴다.
 */
@media (max-width: 640px) {
  /*
    ── 크롬을 줄여 시안에 자리를 넘긴다 ──────────────────────────
    375×620 짜리 화면에서 위아래 껍데기가 260px 를 먹고 시안에 294px 만 남았다.
    화면의 42% 가 우리 도구인 셈이라, 정작 보여주려던 것이 손바닥만 해진다.

    도구줄이 두 줄로 접히는 것이 가장 컸다(86px). 폭이 353px 인데
    '색' 글자 + 견본 여섯 + '짜임새 설명' + '새 창' + 언어 단추를 한 줄에 못 담는다.

    그래서 좁은 화면에서 값이 적은 것부터 뺀다.
      · '색' 글자 — 견본 여섯 개가 곧 무슨 뜻인지 말한다. 낭독기에는 aria-label 로 남는다.
      · '새 창'  — 이 화면이 이미 전체 화면이다. 액자 없이 보는 길은 넓은 화면에서만 값이 있다.
    기기 전환은 원래부터 감춰 뒀다 — 이미 휴대폰이라 고를 것이 없다.
  */
  .dv-top { padding: 7px 11px; gap: 9px; }
  .dv-title strong { font-size: 14px; }
  .dv-rail { padding: 7px 11px; }
  /*
    줄을 접지 않고 옆으로 민다.

    뺄 것을 다 뺐는데도 360px 짜리 화면에서는 한 줄에 안 들어간다(견본 여섯 + 설명 + 언어).
    접히면 도구줄이 두 배가 되고 그만큼 시안이 줄어든다 — 360×560 에서 시안이 250px 까지 내려갔다.

    폭이 모자랄 때 접는 대신 미는 쪽을 고른다. 도구줄 높이가 화면 폭과 무관하게 한 줄로 고정되고,
    자리가 모자라면 손가락으로 밀어 닿을 수 있다. 바로 위 시안 칩 줄이 이미 같은 방식이라
    처음 보는 동작도 아니다. 색 견본이 맨 앞이라 가장 많이 쓰는 것은 늘 보인다.
  */
  .dv-tools {
    padding: 7px 11px; gap: 8px 12px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .dv-tools::-webkit-scrollbar { display: none; }
  /* 미는 줄에서는 오른쪽 끝으로 밀어 두는 것이 뜻이 없다 — 줄 자체가 화면보다 길다. */
  .dv-tools .dv-tool-end { margin-left: 0; }
  .dv-tools .dv-tool, .dv-tools .dv-ghost, .dv-tools .dv-swatches { flex: none; }
  .dv-tools .dv-device-tool { display: none; }
  .dv-tools .dv-label { display: none; }
  .dv-tools [data-open-raw] { display: none; }
  .dv-cta { padding: 8px 11px calc(8px + env(safe-area-inset-bottom)); }
  .dv-cta-text { display: none; }
  .dv-start { flex: 1; }

  /*
    액자를 걷고 자리를 꽉 채운다.

    휴대폰 안에 휴대폰 그림을 그리면 390px 짜리가 0.66배로 줄어 글씨가 안 읽힌다.
    이미 휴대폰이라 액자가 알려 줄 것도 없다. 테두리 한 줄만 남겨 어디까지가 시안인지 알린다.

    크기를 스크립트가 재서 넣지 않고 여기서 채운다. 재서 넣으면 그 값이 자리 크기와 끊겨,
    처음 잴 때 자리가 덜 잡혀 있으면 잘못된 크기가 그대로 굳는다.

    딸린 화면 줄도 떠 있던 것을 흐름 안으로 내린다. 좁은 화면에서는 그 줄이 두 줄로 접혀
    시안 아래쪽을 그만큼 덮는데, 덮이는 자리가 대개 시안의 문의 버튼이다.
  */
  .dv-stage { padding: 10px; flex-direction: column; align-items: stretch; gap: 8px; }

  .dv-device[data-device="mobile"] {
    --dv-bez: 0px; --dv-bez-top: 0px;
    flex: 1 1 auto; width: auto; height: auto;
    border-radius: 16px; background: transparent;
    box-shadow: 0 0 0 1.5px #3D3833;
    transform: none;
  }
  .dv-device[data-device="mobile"] .dv-screen { width: 100%; height: 100%; border-radius: 16px; }
  .dv-device[data-device="mobile"]::before { display: none; }

  .dv-subs { position: static; transform: none; max-width: none; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-device, .dv-panel, .dv-sw { transition: none; }
}