/* 모바일 앱 화면 재현.
 *
 * ★색은 전부 **실제 앱 소스에서 그대로 옮긴 값**이다. 사이트 토큰을 쓰지 않는다 —
 *   여기서 토큰을 쓰면 사이트 테마를 바꿀 때 «앱 화면»이 앱과 달라진다.
 *   출처: mobile/android/.../ui/ScaleWayTheme.kt, DriverHomeScreen.kt,
 *         mobile/owner/android/.../MainActivity.kt
 */

.mock { margin: 0; }
.mock--phone, .mock--receipt { display: grid; justify-items: center; }

/* ── 기기 ── */
.phone {
  position: relative;
  width: min(330px, 100%);
  border-radius: 40px;
  padding: 11px;
  background: linear-gradient(160deg, #1B2C33, #050C10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.62), 0 0 60px rgba(34, 211, 238, 0.09);
}
.phone__notch {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 20px; border-radius: 999px; background: #04090D; z-index: 2;
}
.phone__screen {
  border-radius: 31px;
  padding: 46px 14px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 560px;
  font-size: 13px;
  line-height: 1.5;
}

/* ══════════ 기사 앱 (background 0xFF071014) ══════════ */
.app-driver { background: #071014; color: #E8F0F2; }
.app-driver__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700;
}
.app-driver__refresh { color: #A8B8BC; font-size: 16px; }

/* 실시간 중량 판넬 — Surface(color = 0xFF10201C) */
.dpanel { background: #10201C; border-radius: 8px; padding: 16px; display: grid; gap: 8px; }
.dpanel__link { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; }
.ck {
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  background: #62D7B5; color: #10201C; font-size: 10px; font-weight: 900; flex: none;
}

/* 7-세그먼트 — 앱은 Canvas 로 직접 그린다. 여기서는 유령 자릿수로 흉내 낸다. */
.seg {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 2px;
}
.seg__ghost, .seg__value {
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 0.04em;
}
.seg__ghost { position: absolute; left: 2px; top: 6px; color: #62D7B5; opacity: 0.12; }
.seg__value { color: #62D7B5; position: relative; text-shadow: 0 0 22px rgba(98, 215, 181, 0.45); }
.seg__unit { font-size: 13px; color: #A8B8BC; }

.dpanel__stability { color: #62D7B5; font-weight: 700; font-size: 13px; }
.dpanel__rule { border: none; border-top: 1px solid #40534D; margin: 2px 0; }
.dpanel__stages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dpanel__stages > div { display: grid; gap: 2px; }
.dpanel__label { color: #C5D1CD; font-size: 11px; }
.dpanel__stages strong { font-size: 14px; font-weight: 700; color: #fff; }
.dpanel__meta { color: #C5D1CD; font-size: 10.5px; }
.dpanel__net { color: #62D7B5; font-weight: 700; font-size: 13px; }
.dpanel__stage { font-weight: 600; color: #fff; font-size: 13px; }
.dpanel__guide { color: #C5D1CD; font-size: 11.5px; }

/* Button — primary 0xFF62D7E8 / onPrimary 0xFF071014 */
.app-driver__cta {
  padding: 13px; border: none; border-radius: 999px;
  background: #62D7E8; color: #071014; font-weight: 700; font-size: 14px; cursor: default;
}
.app-driver__title { font-weight: 700; font-size: 15px; }

/* ScaleRow — surface 0xFF0F1B1F / 선택 시 primaryContainer 0xFF173C44 */
.app-driver__scales { display: grid; gap: 8px; }
.app-driver__scales li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  background: #0F1B1F; border: 1px solid rgba(97, 117, 122, 0.3);
}
.app-driver__scales .is-selected { background: #173C44; border-color: #62D7E8; }
.radio {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid #61757A;
}
.radio.is-on { border-color: #62D7E8; box-shadow: inset 0 0 0 3px #62D7E8; }
.app-driver__scale { flex: 1; display: grid; }
.app-driver__scale strong { font-weight: 700; font-size: 13px; }
.app-driver__scale em { font-style: normal; color: #A8B8BC; font-size: 11px; }
.app-driver__scales b { font-weight: 600; font-size: 12.5px; }

/* ══════════ 업주 앱 (background 0xFF071014) ══════════ */
.phone--owner { background: linear-gradient(160deg, #1A2A31, #060E13); }
.app-owner { background: #071014; color: #fff; padding-inline: 0; }
.app-owner > * { margin-inline: 14px; }

.app-owner__bar {
  display: flex; align-items: center; justify-content: space-between;
  background: #0C1A1F; margin: 0 -14px; padding: 12px 16px;
}
.app-owner__bar strong { display: block; font-size: 15px; font-weight: 700; }
.app-owner__bar span { font-size: 9.5px; color: #23C7D9; letter-spacing: 0.08em; }
.app-owner__bell { font-size: 13px; }

.app-owner__msg {
  background: #173039; color: #F5B942; border-radius: 12px;
  padding: 11px 13px; font-size: 12px;
}

.app-owner__stats {
  background: #10252B; border-radius: 12px; padding: 14px;
  display: flex; justify-content: space-between; gap: 10px;
}
.app-owner__k { display: block; color: #9FB4BA; font-size: 10.5px; }
.app-owner__stats strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.app-owner__right { text-align: right; }
.app-owner__right b { display: block; color: #66D9A6; font-size: 16px; font-weight: 700; }

.app-owner__title { font-weight: 700; font-size: 14px; }

.app-owner__card { background: #10252B; border-radius: 12px; padding: 14px; display: grid; gap: 5px; }
.app-owner__row { display: flex; justify-content: space-between; align-items: baseline; }
.app-owner__row strong { font-size: 14px; font-weight: 700; }
.app-owner__dir { color: #23C7D9; font-size: 12px; }
.app-owner__house { color: #F5B942; font-size: 11.5px; }
.app-owner__net { font-size: 20px; font-weight: 700; }
.app-owner__stage { color: #B5C6CA; font-size: 11.5px; }
.app-owner__ok { color: #66D9A6; font-size: 11.5px; }

/* 전표 다이얼로그 — Surface(color = 0xFFFFFEFA) */
.receipt {
  background: #FFFEFA; color: #172126; border-radius: 6px;
  padding: 14px 18px; display: grid; gap: 6px; text-align: center;
}
.receipt__brand { font-weight: 700; font-size: 13px; }
.receipt__kind { font-size: 9.5px; color: #5E6668; letter-spacing: 0.24em; }
.receipt__rule { color: #9A9A94; font-size: 8px; line-height: 1; overflow: hidden; }
.receipt__rows { display: grid; gap: 3px; text-align: left; }
.receipt__rows > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.receipt__rows dt { color: #5E6668; }
.receipt__rows dd { margin: 0; font-weight: 600; }
.receipt__net {
  display: flex; justify-content: space-between; align-items: baseline;
  color: #0B6975; padding-top: 2px;
}
.receipt__net span { font-size: 12.5px; font-weight: 700; }
.receipt__net strong { font-size: 19px; }
.receipt__ok { font-size: 10.5px; color: #26734D; }
.receipt__meta { font-size: 9.5px; color: #6E7472; line-height: 1.5; }
.receipt__foot { font-size: 9px; color: #9A9A94; }