/* 裝置外框——全站共用元件（手機＝iPhone Air；並排／寬版 DUO＝iPad mini 橫向）
   ── 1. iPhone Air（David 10-13「全都是用 iPhone Air」「螢幕大小與比例都一定要符合」）
   ⛔ 每頁不要再自己畫外框；只准在頁面裡設 .phone 的 width（大小），比例、圓角、邊框、動態島、側鍵都在這裡。
   ⛔ 不用官方產品圖、不寫品牌名（純 CSS）。
   尺寸依據：螢幕 CSS 420×912（iPhone Air 實機回報，比例 2.171）；外框＝螢幕＋超薄黑邊＋鈦金屬邊。
   用法：<div class="phone"><span class="hw"></span><div class="screen">…</div></div>
   這支要放在頁面 <style> 之後載入，才蓋得過舊的內嵌規則。 */

.phone {
  position: relative; box-sizing: border-box;
  /* 單位：機身寬＝443 份。螢幕 420×912 份、黑邊 6.5 份、鈦金屬邊 5 份 ⇒ 機身 443×935 */
  aspect-ratio: 443 / 935;
  container-type: inline-size;            /* 子元素用 cqw＝機身寬的 1%，大小怎麼縮都等比 */
  padding: 0;                             /* ⛔ 不用 %（% padding 是照「父層」寬度算，各頁會不一樣） */
  border-radius: 15.5% / 7.34%;           /* 寬高各自的 %，算出來是正圓角 */
  background: linear-gradient(145deg, #9a9b9f 0%, #3c3d40 16%, #74757a 44%, #2b2c2f 70%, #85868a 100%);
  box-shadow: var(--shadow, 0 20px 50px rgba(0,0,0,.25)), inset 0 0 0 .6px rgba(255,255,255,.4);
}
.phone .screen {
  box-sizing: border-box; overflow: hidden;
  margin: 1.129cqw;                       /* 鈦金屬邊 5 份 */
  height: calc(100% - 2.258cqw);
  border: 1.467cqw solid #000;            /* 超薄黑邊 6.5 份 ⇒ 裡面剛好 420×912 */
  border-radius: 14.37cqw;
}
/* 動態島：螢幕寬 30%、上緣留 2.6% 寬 */
.phone::before {
  content: ""; position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  top: 2.35%; width: 28%; aspect-ratio: 3.35 / 1; border-radius: 999px; background: #000;
}
/* 右側：側邊按鈕（上）＋相機控制鍵（下） */
.phone::after {
  content: ""; position: absolute; right: -1.5px; top: 25%; width: 2.5px; height: 32%; border-radius: 0 2px 2px 0;
  background: linear-gradient(to bottom, #6f7074 0, #6f7074 33%, transparent 33%, transparent 78%, #6f7074 78%, #6f7074 100%);
}
/* 左側：動作按鈕＋音量上／下 */
.phone .hw {
  position: absolute; left: -1.5px; top: 0; bottom: 0; width: 2.5px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 30.5%, #6f7074 30.5%, #6f7074 36.5%, transparent 36.5%);  /* 音量下 */
}
.phone .hw::before, .phone .hw::after { content: ""; position: absolute; left: 0; width: 2.5px; border-radius: 2px 0 0 2px; background: #6f7074; }
.phone .hw::before { top: 17%; height: 4%; }   /* 動作按鈕 */
.phone .hw::after  { top: 23%; height: 6%; }   /* 音量上 */

/* ── 2. iPad mini 橫向（David 10-13「用 DUO 要有 mini iPad 的感覺與尺寸橫向的」）
   螢幕 CSS 1133×744（iPad mini 橫放）。機身依實機 mm 換算：1 mm ≈ 6.43 份；
   四邊邊框約 9.6 mm＝62 份（含 1.5 mm 鋁邊＝9.6 份）、機身圓角約 10.8 mm＝69 份 ⇒ 機身 1257×868。
   用法：<div class="tablet"><div class="screen">…</div></div>；頁面只設 .tablet 的 width。 */
.tablet {
  position: relative; box-sizing: border-box;
  aspect-ratio: 1257 / 868;
  container-type: inline-size;
  padding: 0;
  border-radius: 5.49% / 7.95%;
  background: linear-gradient(145deg, #a7a9ad 0%, #5d5f63 20%, #8d8f93 50%, #4a4c50 78%, #9a9ca0 100%);
  box-shadow: var(--shadow, 0 20px 50px rgba(0,0,0,.25)), inset 0 0 0 .6px rgba(255,255,255,.4);
}
.tablet .screen {
  box-sizing: border-box; overflow: hidden;
  margin: .764cqw;                        /* 鋁邊 9.6 份 */
  height: calc(100% - 1.528cqw);
  border: 4.17cqw solid #000;             /* 黑邊 52.4 份 ⇒ 裡面剛好 1133×744 */
  border-radius: 5.4cqw;                 /* 裡面螢幕還留一點圓角，像實機 */
}
/* 前鏡頭：橫放時在左邊黑框正中 */
.tablet::before {
  content: ""; position: absolute; z-index: 4; left: 2.6%; top: 50%; transform: translate(-50%, -50%);
  width: .9%; aspect-ratio: 1; border-radius: 50%; background: #1d2230; box-shadow: inset 0 0 0 1px #333a4a;
}
/* 音量鍵：上緣靠右 */
.tablet::after {
  content: ""; position: absolute; top: -1.5px; right: 14%; width: 14%; height: 2.5px; border-radius: 2px 2px 0 0;
  background: linear-gradient(to right, #7a7c80 0, #7a7c80 44%, transparent 44%, transparent 56%, #7a7c80 56%, #7a7c80 100%);
}