/* /websys/mock/css/mock_device_shell.css
   Device Shell (B案)
   - body.device-sp / body.device-tab + <div data-device-stage> を前提
   - mock_device_shell.js が中身を端末枠で包みます
*/

:root{
  --ds-bg: #eef3fa;
  --ds-shell-top: #222c3a;
  --ds-shell-btm: #111827;
  --ds-ink: #eaf1ff;
  --ds-ink-dim: rgba(234,241,255,.82);
  --ds-shadow: 0 20px 60px rgba(10,20,40,.22);
  --ds-radius: 38px;
  --ds-screen-radius: 28px;
}

html, body{
  height: 100%;
}

body.device-sp,
body.device-tab{
  background: var(--ds-bg);
}

/* 端末ステージ（中央寄せ＋余白） */
[data-device-stage]{
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 12px 22px;
}

/* 端末本体 */
.device-shell{
  box-sizing: border-box;
  background: linear-gradient(180deg, var(--ds-shell-top), var(--ds-shell-btm));
  border-radius: var(--ds-radius);
  padding: 14px 14px 16px;
  box-shadow: var(--ds-shadow);
  position: relative;
}

/* SP / TAB 幅 */
body.device-sp .device-shell{ width: 420px; }
body.device-tab .device-shell{ width: 920px; }

/* 端末上部（ステータスバー） */
.device-top{
  height: 56px;
  color: var(--ds-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 18px;
  box-sizing: border-box;
  user-select: none;
}

/* 左側：ドット＋Wi-Fi */
.device-top-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ds-ink-dim);
}

.device-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(234,241,255,.70);
  display: inline-block;
}

.device-top-left .fa{
  font-size: 16px;
  transform: translateY(1px);
}

/* 中央：時刻 */
.device-top-time{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(234,241,255,.92);
}

/* 右側：バッテリー */
.device-top-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.device-battery{
  width: 26px;
  height: 14px;
  border: 2px solid rgba(234,241,255,.82);
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;
  display: inline-block;
}

.device-battery::after{
  content: "";
  position: absolute;
  right: -5px;
  top: 3px;
  width: 3px;
  height: 8px;
  border-radius: 1px;
  background: rgba(234,241,255,.82);
}

.device-battery-level{
  position: absolute;
  left: 1px;
  top: 1px;
  height: 10px;
  width: 70%;
  border-radius: 2px;
  background: rgba(234,241,255,.82);
}

/* 画面（白い領域） */
.device-screen{
  background: #f9fbff;
  border-radius: var(--ds-screen-radius);
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px;
}

/* mock-wrap が横に広がらないように */
.device-screen .mock-wrap{
  width: 100%;
  max-width: 100%;
}

/* TABは余白多め */
body.device-tab .device-top{ height: 60px; }
body.device-tab .device-top-time{ font-size: 30px; }
body.device-tab .device-screen{ padding: 14px; }

/* iframe内でも見栄えを保つ（余白縮小） */
@media screen and (max-width: 520px){
  body.device-sp .device-shell{ width: 390px; }
  [data-device-stage]{ padding: 12px 10px 18px; }
  .device-top{ padding: 0 14px; }
  .device-top-time{ font-size: 26px; }
}

/* mock_base.css とぶつかりやすい箇所の軽いガード */
.device-screen .top .t,
.device-screen .top .s{
  color: inherit;
}