/*
 * ------------------------------------
 * 여백및..아이콘 글씨 텍스트  (맨 앞 · 이 파일만)
 * ------------------------------------
 * ★★★ LOCKED 2026-10-25 22:11 — 사용자 확인·완료. 다시 손대지 말 것.
 * 사용자「여백/카드」명시 없이 수정 금지 · 연결/안정화/R 중 수정 금지.
 * index.html 인라인에 header/bnav/카드/여백 두지 말 것.
 *
 * 확정:
 *   카드 = 내용높이 (thumb aspect 158/145, max 158×--s) — grid/flex 화면채우기 금지
 *   #app height:100% · html.android-pre15 → safe inset 0 (env() 직접 금지)
 *   spacer none · 버전은 카드 바로 아래 · gap 16
 * 상세 → .cursor/rules/chrome-layout-freeze.mdc
 */

/*
 * Noto Sans KR — block: 얇은 글씨로 먼저 그리지 않음 (뒤로가기 연→찐 깜빡임 방지)
 * 가짜 bold 합성 금지. preload + fonts-pending 게이트와 함께 사용.
 */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/NotoSansKR-Bold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}

:root {
  --navy: #0b3a6e;
  --navy-deep: #12233b;
  --accent: #2f80ed;
  --bg: #eef2f6;
  --card: #ffffff;
  --text: #1a2332;
  --sub: #5a6b7d;
  --muted: #8a97a8;
  --line: #d7e0ea;
  --online: #2f7a52;
  /* MainActivity가 주입하는 --safe-area-inset-* 만 사용 (env() 직접 쓰면 S10에서 이중·들쭉날쭉) */
  --safe-t: var(--safe-area-inset-top, 0px);
  --safe-b: var(--safe-area-inset-bottom, 0px);
  --design-w: 456;
}

/* S10 등 Android 15 미만: WebView가 이미 상태바/내비 밖 → inset 0 고정 (ATO와 동일) */
html.android-pre15 {
  --safe-t: 0px;
  --safe-b: 0px;
  --safe-area-inset-top: 0px;
  --safe-area-inset-bottom: 0px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  /* WebView가 Regular로 가짜 bold 만들면 글씨가 번지거나 연해 보임 */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* Bold 로드 전 본문 숨김 — 연한 Regular이 잠깐 보이는 마법 방지 */
html.fonts-pending #app {
  opacity: 0;
}
html.fonts-ready #app,
html.fonts-timeout #app {
  opacity: 1;
}

/* height는 % 고정 (100dvh만 쓰면 일부 WebView에서 본문 flex가 붕괴 → 아래 공동) */
#app {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  /* --s = 본문(카드·timebar)만. header/bnav 에는 쓰지 않음. app.js syncScale */
  --s: 0.9;
}

/* —— 상단 크롬 — 고정 px (--s 금지) —— */
.app-header {
  flex-shrink: 0;
  padding: calc(12px + var(--safe-t)) 14px 12px 17.5px;
  background: #12233b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html.android-pre15 .app-header {
  padding: 12px 14px 12px 17.5px;
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.brand .logo-header {
  display: block;
  height: 44px;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  object-position: left center;
}

.btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-add .plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3454bd;
  color: #12233b;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

/* —— 하단 크롬 — 고정 px (--s 금지) —— */
.bnav {
  flex-shrink: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-top: 1px solid #e5eaf1;
  padding: 0 0 var(--safe-b);
  box-sizing: border-box;
  box-shadow: 0 -2px 10px rgba(15, 76, 129, 0.06);
}

html.android-pre15 .bnav {
  padding: 0;
}

.bnav .bt {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 2px 8px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bnav .bt.on {
  color: #1a6db3;
}

.bnav .bt .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin: 0;
}

.bnav .bt .ic svg,
.bnav .bt svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  display: block;
}

/* —— 홈 본문 (카드·timebar·설정) · --s 스케일 —— */
.page {
  display: none;
  flex: 1 1 0%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.page.on {
  display: flex;
}

/* 헤더~하단탭 사이 본문. 카드는 내용높이만 (세로 늘리기 금지) */
.page-body {
  flex: 1 1 0%;
  min-height: 0;
  padding: calc(12px * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--s));
  overflow: auto;
  box-sizing: border-box;
}

.timebar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--s));
  width: 100%;
  flex: 0 0 auto;
  min-height: calc(77px * var(--s));
  padding: calc(19px * var(--s)) calc(22px * var(--s));
  background: #fff;
  border-radius: calc(16px * var(--s));
  box-shadow: 0 2px 10px rgba(11, 58, 110, 0.08);
  box-sizing: border-box;
}

.timebar .left {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--s));
  min-width: 0;
  flex: 1;
}

.timebar .cal {
  width: calc(28px * var(--s));
  height: calc(28px * var(--s));
  color: #0a0a0a;
  flex-shrink: 0;
}

.timebar .date {
  font-size: calc(15px * var(--s));
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.timebar .gap {
  width: 1px;
  align-self: stretch;
  min-height: 1.1em;
  background: #d0d7e0;
  flex-shrink: 0;
  margin: 0.15em 0;
}

.timebar .divider {
  display: none;
}

.timebar .right {
  flex-shrink: 0;
  font-size: calc(15px * var(--s));
  font-weight: 800;
  color: #0a0a0a;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*
 * ★★★ 카드 크기 LOCKED (이 블록 · 추측 수정·화면채우기 절대 금지)
 * 내용높이 = thumb 158/145 + 패딩. gap 16. 버전은 리스트 바로 아래.
 */
.device-list {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--s));
  flex: 0 0 auto;
  min-height: 0;
}

.device {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  flex: 0 0 auto;
  height: auto;
  gap: calc(31px * var(--s));
  padding: calc(16px * var(--s)) calc(16px * var(--s)) calc(14px * var(--s))
    calc(18px * var(--s));
  background: #fff;
  border-radius: calc(16px * var(--s));
  box-shadow: 0 3px 12px rgba(15, 40, 80, 0.07);
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  /* 길게 누르기 = 앱 메뉴만 · 시스템 복사/선택 툴바 금지 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  /*
   * 카드 전체에 opacity/filter 쓰지 말 것.
   * WebView가 형제(날짜·다른 카드)까지 연하게 다시 그리는 경우가 있음.
   * 오프라인 = 글자색 + 썸네일만 흐리게.
   */
  opacity: 1;
  filter: none;
  transition: box-shadow 0.18s ease;
}

.device,
.device * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 온라인: 찐하게 */
.device.online {
  opacity: 1;
  filter: none;
  box-shadow: 0 4px 16px rgba(15, 40, 80, 0.12);
}

.device:not(.online) .thumb img {
  opacity: 0.42;
}

.page-body,
.timebar {
  opacity: 1;
  filter: none;
  -webkit-filter: none;
}

.device:active {
  transform: scale(0.99);
}

.device .thumb {
  width: 34%;
  max-width: calc(158px * var(--s));
  min-width: calc(100px * var(--s));
  aspect-ratio: 158 / 145;
  flex-shrink: 0;
  align-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.device .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.device .meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(4px * var(--s)) 0 calc(2px * var(--s));
  box-sizing: border-box;
}

.device .name {
  margin: 0;
  font-size: calc(18px * var(--s));
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0a0a0a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device .desc {
  margin: calc(5px * var(--s)) 0 0;
  font-size: calc(13px * var(--s));
  font-weight: 600;
  color: #5a6570;
  line-height: 1.3;
}

.device .status {
  margin: calc(5px * var(--s)) 0 0;
  font-size: calc(11px * var(--s));
  font-weight: 500;
  color: #9aa3af;
  line-height: 1.3;
}

.device.online .name {
  color: #000;
  font-weight: 800;
}

.device.online .status {
  color: var(--online);
  font-weight: 800;
}

.device.online .desc {
  color: #3d4a57;
  font-weight: 700;
}

.device:not(.online) .name {
  color: #6b7280;
  font-weight: 700;
}

.device:not(.online) .desc,
.device:not(.online) .installed {
  color: #a8b0ba;
}

.device .installed {
  margin: calc(10px * var(--s)) 0 0;
  align-self: flex-end;
  max-width: 100%;
  font-size: calc(10px * var(--s));
  font-weight: 500;
  color: #a8b0ba;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-hint {
  margin-top: calc(28px * var(--s));
  text-align: center;
  color: var(--muted);
  font-size: calc(14px * var(--s));
  line-height: 1.5;
}

.empty-hint strong {
  color: var(--navy);
}

/* spacer = 홈에서 사용 안 함 (공동 유발 금지). 설정 페이지용으로만 최소 유지 */
.spacer {
  display: none;
}

.ver {
  flex: 0 0 auto;
  text-align: center;
  font-size: calc(11px * var(--s));
  color: #9aa8b8;
  padding: calc(2px * var(--s)) 0 0;
  margin: 0;
  line-height: 1.3;
}

#pageSettings .page-body {
  overflow: auto;
}

.set-title {
  font-size: calc(18px * var(--s));
  font-weight: 800;
  color: var(--navy);
}

.set-card {
  background: #fff;
  border-radius: calc(16px * var(--s));
  box-shadow: 0 2px 10px rgba(11, 58, 110, 0.08);
  overflow: hidden;
}

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--s));
  padding: calc(14px * var(--s)) calc(16px * var(--s));
  border-bottom: 1px solid var(--line);
  font-size: calc(15px * var(--s));
  font-weight: 600;
}

.set-row:last-child {
  border-bottom: 0;
}

.set-row .v {
  color: var(--muted);
  font-weight: 500;
  font-size: calc(14px * var(--s));
}

.set-row.tap {
  cursor: pointer;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.set-row.danger .k {
  color: #b42318;
}

.set-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.card-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 40;
  display: none;
}

.card-menu-backdrop.on {
  display: block;
  /* 흔들림 중 카드 드래그 가능하게 — 메뉴만 클릭 수신 */
  pointer-events: none;
}

.card-menu {
  position: absolute;
  width: min(200px, 58%);
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(15, 40, 80, 0.22);
  box-sizing: border-box;
  pointer-events: auto;
}

/* 길게누름 직후(손가락 유지) — backdrop 없이 메뉴만 */
.card-menu.card-menu-floating {
  z-index: 55;
  pointer-events: none;
}

.card-menu .sheet-title {
  text-align: left;
  font-size: calc(17px * var(--s));
  color: var(--navy);
  font-weight: 800;
  padding: 8px 10px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 11px 12px;
  margin: 0;
  font: inherit;
  font-size: calc(14px * var(--s));
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}

.card-menu button:active {
  background: #f1f5f9;
}

.card-menu button.danger {
  color: #b42318;
}

.card-menu button.cancel {
  color: var(--muted);
  font-weight: 600;
}

@keyframes card-jiggle {
  0% {
    transform: rotate(-1.2deg);
  }
  50% {
    transform: rotate(1.2deg);
  }
  100% {
    transform: rotate(-1.2deg);
  }
}

.device.jiggle {
  animation: card-jiggle 0.22s ease-in-out infinite;
  transform-origin: center center;
  touch-action: none;
}

.device.jiggle:nth-child(even) {
  animation-delay: 0.06s;
}

.device.jiggle.dragging {
  animation: none;
  opacity: 0.98;
  z-index: 60;
  box-shadow: 0 16px 36px rgba(15, 40, 80, 0.32);
  margin: 0 !important;
  pointer-events: none;
  will-change: top, left;
}

.device-drop-slot {
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: calc(16px * var(--s));
  background: rgba(18, 35, 59, 0.06);
  border: 1.5px dashed rgba(18, 35, 59, 0.22);
}

.device-list.reorder-mode {
  user-select: none;
  -webkit-user-select: none;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 40;
  display: none;
}

.sheet-backdrop.on {
  display: block;
}

.sheet {
  position: absolute;
  width: min(200px, 58%);
  background: #fff;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(15, 40, 80, 0.22);
  box-sizing: border-box;
}

.sheet .sheet-title {
  text-align: left;
  font-size: calc(12px * var(--s));
  color: var(--muted);
  font-weight: 600;
  padding: 6px 10px 4px;
}

.sheet button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 11px 12px;
  margin: 0;
  font: inherit;
  font-size: calc(14px * var(--s));
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
}

.sheet button:active {
  background: #f1f5f9;
}

.sheet button.danger {
  color: #b42318;
}

.sheet button.cancel {
  color: var(--muted);
  font-weight: 600;
}

.sheet.guide-sheet {
  width: min(280px, 78%);
  padding: 12px 12px 10px;
}

.sheet.guide-sheet .sheet-title {
  font-size: calc(14px * var(--s));
  font-weight: 800;
  color: var(--navy);
  padding: 4px 8px 8px;
  text-align: center;
}

.sheet.guide-sheet .guide-msg {
  font-size: calc(13px * var(--s));
  color: #475569;
  line-height: 1.45;
  padding: 0 8px 12px;
  text-align: center;
  margin: 0;
}

.sheet.guide-sheet button.primary {
  background: #1565c0;
  color: #fff;
  text-align: center;
  font-weight: 800;
  margin-top: 2px;
}

.sheet.guide-sheet button.primary:active {
  background: #0d47a1;
}

.sheet.guide-sheet button.cancel {
  text-align: center;
}