/* ===== URSHOP 官網手機外框 patch v1029（給 WDAI LINE AND WEB 套用）=====
   放在 www.wdai.ai/urshop/ 頁面「最後一個 <style>」之後（</head> 前），用 <link> 或整段貼成 <style id="ur-phones-1029">。
   搭配新素材 /assets/urm2/*（狀態列＋home 條已經烤在畫面裡，比例＝實機螢幕）。
   ⛔ 舊素材 /assets/urm/* 不能配這支 CSS（沒有狀態列，比例也不同）。

   尺寸來源＝urshop/docs/phone-frames.html kit v1.0（官方規格換算）：
   iPhone Air  機身 74.7×156.2 mm、螢幕 69.57×151.07 mm、黑邊 2.565 mm、機身圓角 12.8 mm、螢幕圓角 10.27 mm
   Galaxy S26  機身 71.7×149.6 mm、螢幕 66.74×144.58 mm、黑邊 ~2.5 mm、機身圓角 9.8 mm、螢幕圓角 7.3 mm
   下面所有數字都是「機身寬的 %」(cqw)，手機怎麼縮放都等比，⛔ 不要改成 px。 */

/* ---------- 共用：機身＝容器，螢幕絕對定位在裡面 ---------- */
.dev.dev--air,.dev.dev--s26{
  padding:0!important;box-sizing:border-box;container-type:inline-size;overflow:visible;
}
.dev.dev--air{aspect-ratio:74.7/156.2;border-radius:17.135%/8.195%!important;
  background:linear-gradient(135deg,#f4f4f2 0%,#c9c9c6 18%,#efefed 40%,#b9b9b6 62%,#e8e8e6 82%,#c4c4c1 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 18px 40px rgba(0,0,0,.28)!important}
.dev.dev--s26{aspect-ratio:71.7/149.6;border-radius:13.668%/6.551%!important;
  /* 平面鋁框（淺色、亮面霧銀），四邊等寬 */
  background:linear-gradient(90deg,#a9adb3 0%,#e3e5e8 5%,#c9ccd0 22%,#d6d8db 50%,#c9ccd0 78%,#e3e5e8 95%,#a9adb3 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.3),inset 0 0 0 .7px rgba(255,255,255,.7),0 18px 40px rgba(0,0,0,.28)!important}

/* 螢幕（圖／影片／故事區的 .ur-screens）——四邊等寬黑邊用 box-shadow 畫 */
.dev.dev--air>img,.dev.dev--air>video,.dev.dev--air>.ur-screens{
  position:absolute;left:3.434cqw;top:3.434cqw;width:93.133cqw!important;height:202.236cqw!important;max-width:none;
  aspect-ratio:auto!important;object-fit:cover;object-position:top;margin:0;
  border-radius:13.748cqw!important;box-shadow:0 0 0 2.697cqw #050505;background:#000}
.dev.dev--s26>img,.dev.dev--s26>video,.dev.dev--s26>.ur-screens{
  position:absolute;left:3.459cqw;top:3.501cqw;width:93.082cqw!important;height:201.646cqw!important;max-width:none;
  aspect-ratio:auto!important;object-fit:cover;object-position:top;margin:0;
  border-radius:10.181cqw!important;box-shadow:0 0 0 2.622cqw #050505;background:#000}
.dev>.ur-screens{overflow:hidden}
.dev>.ur-screens>.ur-s-img{object-fit:cover;object-position:top}

/* 動態島（Air）：125×37 pt、距螢幕上緣 11 pt ⇒ 落在烤好的狀態列正中，⛔ 不蓋內容 */
.dev.dev--air::after{content:"";position:absolute;z-index:3;top:5.873cqw;left:50%;width:27.718cqw;height:8.204cqw;
  margin:0 0 0 -13.859cqw;border-radius:999px;background:#000}
/* 挖孔鏡頭（S26）：18 dp、置中、距螢幕上緣 12 dp */
.dev.dev--s26::after{content:"";position:absolute;z-index:3;top:6.604cqw;left:50%;width:4.654cqw;height:4.654cqw;
  margin:0 0 0 -2.327cqw;border-radius:50%;background:radial-gradient(circle at 40% 40%,#1b2230 0 30%,#000 32%);
  box-shadow:0 0 0 .4cqw #111}

/* 側鍵（一個 ::before 畫兩側）：Air＝左 動作鍵＋音量上下、右 電源＋相機控制；S26＝全部在右側 */
.dev.dev--air::before,.dev.dev--s26::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-.54cqw;right:-.54cqw;pointer-events:none;background-repeat:no-repeat}
.dev.dev--air::before{background-image:
  linear-gradient(#a3a3a0,#a3a3a0),linear-gradient(#a3a3a0,#a3a3a0),linear-gradient(#a3a3a0,#a3a3a0),
  linear-gradient(#a3a3a0,#a3a3a0),linear-gradient(#9c9c99,#9c9c99);
  background-size:1.4cqw 8.03cqw,1.4cqw 13.39cqw,1.4cqw 13.39cqw,1.4cqw 21.42cqw,1.2cqw 13.39cqw;
  background-position:0 36.14cqw,0 52.21cqw,0 69.61cqw,100% 58.9cqw,100% 112.45cqw}
.dev.dev--s26::before{background-image:linear-gradient(#b4b7bc,#b4b7bc),linear-gradient(#b4b7bc,#b4b7bc);
  background-size:1.3cqw 29.29cqw,1.3cqw 15.34cqw;background-position:100% 46.03cqw,100% 82.29cqw}

/* 舊規則的圓角（.dev--air img{border-radius:45px} 等）在上面已用 !important 蓋掉；
   小螢幕那段 @media(max-width:640px) 的 .dev--air{border-radius:38px}／::after 尺寸也一起蓋掉 */
@media(max-width:640px){
  .dev.dev--air{border-radius:17.135%/8.195%!important}
  .dev.dev--s26{border-radius:13.668%/6.551%!important}
  .dev.dev--air::after{width:27.718cqw;height:8.204cqw;margin-left:-13.859cqw;top:5.873cqw}
}

/* ---------- 故事區（往下滑換畫面）：舊的 .ur-screens 自帶 45px 圓角＋640/1385 比例，改成跟螢幕一樣 ---------- */
.ur-story__dev>.ur-screens{aspect-ratio:auto!important}

/* ---------- 標題區：藍色 UR logo ---------- */
.hero__name{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.hero__name .ur-logo{display:block;height:1.9em;width:auto;color:var(--ink,#1d1d1f);flex:none}
.hero__name .ur-logo .ur-b{fill:#0062CC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero__name .ur-logo .ur-b{fill:#5BADFF}}
:root[data-theme="dark"] .hero__name .ur-logo .ur-b{fill:#5BADFF}

/* ---------- 手機（≤640px）兩支並排那一排：下方大片空白 ----------
   空白來源（420 寬實測）：.ur-row 的 padding-bottom 24px ＋ 偶數手機 margin-top 22px（右支往下錯開，左支下面就空一塊）
   ＋ 該 section 的 padding-bottom var(--sec)=88px ＋ 下一個 section 的 padding-top 88px。
   修法：右支不錯開、row 底部收小、row 收尾的 section 底部 padding 減半。 */
@media(max-width:640px){
  .ur-row{padding-bottom:8px!important;align-items:start}
  .ur-row .dev:nth-child(even){margin-top:0!important}
  .sec:has(>.ur-row:last-child),.sec:has(>.wrap>.ur-row:last-child){padding-bottom:calc(var(--sec,88px)*.25)}
  .sec:has(>.ur-row:last-child)+.sec:not(.sec--alt){padding-top:calc(var(--sec,88px)*.4)}
}

/* urshop.ai：urm2 截圖本身就有狀態列＋Home 條，HTML 那層藏起來免得出現兩次 9:41 */
.urf-sb,.urf-home{display:none!important}