/* ============================================================
   돌봄 · CareHub — Mobile App Shell (이용자/파트너 앱)
   데스크탑에서는 폰 프레임, 모바일에서는 풀스크린
   ============================================================ */

.app-stage {
  min-height: 100vh; background: var(--bg);
  display: flex; align-items: stretch; justify-content: center; padding: 0;
}
.phone {
  width: 100%; max-width: 480px; height: 100vh; height: 100dvh;
  background: var(--bg); position: relative; overflow: hidden;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}

/* status bar — hidden (no phone chrome) */
.statusbar { display: none; }
.statusbar .sb-right { display: flex; align-items: center; gap: 6px; }

/* app header */
.appbar {
  flex: none; padding: 6px 18px 12px; background: var(--bg); z-index: 40;
}
.appbar.solid { background: #fff; border-bottom: 1px solid var(--line); }
.appbar-row { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.appbar-title { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: var(--ink-900); }
.iconbtn {
  width: 40px; height: 40px; border-radius: 12px; background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700);
}
.iconbtn:hover { background: var(--ink-100); }
.iconbtn.badge-dot { position: relative; }
.iconbtn.badge-dot::after { content:''; position:absolute; top:7px; right:8px; width:8px; height:8px;
  border-radius:50%; background: var(--danger); border:2px solid var(--bg); }
.back-btn { width: 40px; height: 40px; margin-left: -8px; }

/* scroll area */
.screen-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.screen-scroll::-webkit-scrollbar { width: 0; }
.pad { padding: 0 18px; }
.pad-b { padding-bottom: 24px; }

/* screens */
.screen { display: none; flex-direction: column; height: 100%; }
.screen.active { display: flex; }

/* bottom tab bar */
.tabbar {
  flex: none; display: flex; background: #fff; border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); z-index: 45;
  box-shadow: var(--sh-up);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: none; background: none; color: var(--ink-400); padding: 4px 0;
  font-size: 11px; font-weight: var(--fw-medium);
}
.tab svg { width: 24px; height: 24px; }
.tab.active { color: var(--brand); }
.tab.active svg { stroke: var(--brand); }

/* bottom fixed CTA bar (상세/요청 등) */
.bottombar {
  flex: none; background: #fff; border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px;
  box-shadow: var(--sh-up); z-index: 45;
}

/* sheet / modal */
.sheet-backdrop {
  position: absolute; inset: 0; background: rgba(16,21,30,.45); z-index: 70;
  display: none; align-items: flex-end; }
.sheet-backdrop.show { display: flex; }
.sheet {
  width: 100%; background: #fff; border-radius: 24px 24px 0 0; padding: 8px 0 16px;
  max-height: 86%; display: flex; flex-direction: column; animation: sheetUp .25s ease;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--ink-200); margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 12px; }
.sheet-body { overflow-y: auto; padding: 0 18px; }

/* segmented control */
.segment { display: flex; background: var(--ink-100); border-radius: var(--r-md); padding: 4px; gap: 4px; }
.segment button {
  flex: 1; border: none; background: none; height: 38px; border-radius: 9px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-500);
}
.segment button.active { background: #fff; color: var(--ink-900); box-shadow: var(--sh-xs); }

/* list row */
.lrow { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow .lr-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.lrow .lr-main { flex: 1; min-width: 0; }
.lrow .chev { color: var(--ink-300); }

/* mobile fullscreen (narrow viewport) */
@media (max-width: 480px) {
  .app-stage { padding: 0; background: var(--bg); align-items: stretch; }
  .phone {
    width: 100%; height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; box-shadow: none;
  }
  .phone::before { display: none; }
  .statusbar { display: none; }
}

/* segmented tab underline (탭형 상단) */
.tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 2px; }
.tabs-line button {
  border: none; background: none; padding: 12px 14px; font-size: var(--fs-body);
  font-weight: var(--fw-semibold); color: var(--ink-400); position: relative;
}
.tabs-line button.active { color: var(--ink-900); }
.tabs-line button.active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px;
  background: var(--brand); border-radius: 3px;
}