/* =========================================================================
   JNC Holdings — Mobile-specific components
   Requires colors_and_type.css + semantic-roles.css + jnc-overlay.css(.jscrim).
   근거(검증): Apple HIG — sheet는 detent(medium≈절반/large=전체, iOS16+ custom)에서
   '자연스럽게 멈춤', grabber는 리사이즈 가능 단서, scrim은 선택(비차단 가능),
   점진 공개 [developer.apple.com/.../presentation/sheets].
   인지/UX: '데스크톱 vs 모바일'의 본질은 화면크기가 아니라 포인터 정밀도(Fitts 법칙).
   터치 타깃 ≥44(Apple)/48(Material), 하단 액션은 home-indicator 안전영역 회피.
   ========================================================================= */

/* =========================================================================
   BOTTOM SHEET  —  .jsheet  (detents + grabber + optional scrim)
   <div class="jscrim sheet-scrim"><div class="jsheet detent-medium">…</div></div>
   detent: peek(작게) / medium(≈50vh) / full(≈92vh). grabber로 리사이즈 암시.
   ========================================================================= */
.jsheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; background: var(--surface-overlay-panel);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--elevation-modal);
  padding-bottom: var(--safe-bottom); max-height: 92vh;
  animation: jsheet-up var(--dur-slow) var(--ease-out);
}
@keyframes jsheet-up { from { transform: translateY(100%); } to { transform: none; } }
.jsheet.detent-peek   { height: 220px; }
.jsheet.detent-medium { height: 50vh; }
.jsheet.detent-full   { height: 92vh; }
/* grabber — visual resize cue (Apple HIG). centered pill at top. */
.jsheet .grabber { width: 36px; height: 5px; border-radius: var(--r-pill); background: var(--border-strong);
  margin: var(--sp-2) auto var(--sp-1); flex: none; cursor: grab; }
.jsheet-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-2); }
.jsheet-head .jsheet-title { font: var(--w-bold) var(--fs-h4)/1.3 var(--font-sans); color: var(--fg1); flex: 1; }
.jsheet-body { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-5) var(--sp-5); -webkit-overflow-scrolling: touch; }
.jsheet-foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + var(--safe-bottom)); border-top: 1px solid var(--outline); }
/* non-modal sheet (no scrim — background remains interactive, Apple largestUndimmed) */
.jsheet.nonmodal { box-shadow: var(--sh-lg); }

/* =========================================================================
   ACTION SHEET  —  .jaction-sheet  (iOS: list of choices + cancel)
   파괴적 액션은 빨강, 취소는 분리된 강조 버튼. 선택지 절제(규칙 1.2).
   ========================================================================= */
.jaction-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + var(--safe-bottom));
  display: flex; flex-direction: column; gap: var(--sp-2); animation: jsheet-up var(--dur-slow) var(--ease-out); }
.jaction-group { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.jaction-group .jaction-title { padding: var(--sp-3) var(--sp-4); text-align: center; font-size: var(--fs-caption); color: var(--fg2); border-bottom: 1px solid var(--outline); }
.jaction {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%;
  min-height: 56px; border: 0; border-bottom: 1px solid var(--outline); background: var(--surface);
  font: var(--w-medium) var(--fs-body-lg)/1.2 var(--font-sans); color: var(--brand-stronger); cursor: pointer;
  transition: background var(--transition-base);
}
.jaction:last-child { border-bottom: 0; }
.jaction:hover, .jaction:active { background: var(--state-hover-surface); }
.jaction.destructive { color: var(--error); }
.jaction.cancel { font-weight: 700; color: var(--fg1); }
/* the separate cancel group (iOS pattern) */
.jaction-cancel { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.jaction-cancel .jaction { font-weight: 700; color: var(--fg1); }

/* =========================================================================
   BOTTOM NAVIGATION BAR  —  .jbottom-nav  (mobile primary destinations)
   Material navigation bar / iOS tab bar. 3–5 destinations(규칙 1.3 작업기억).
   ========================================================================= */
.jbottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-rail);
  display: flex; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(10px); border-top: 1px solid var(--outline);
  padding-bottom: var(--safe-bottom);
}
.jbottom-nav .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--touch-comfortable); padding: 8px 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--fg3); text-decoration: none; transition: color var(--transition-base);
}
.jbottom-nav .tab .ico { display: inline-flex; } .jbottom-nav .tab .ico svg { width: 24px; height: 24px; }
.jbottom-nav .tab .lbl { font: var(--w-medium) 11px/1 var(--font-sans); }
.jbottom-nav .tab:hover { color: var(--fg2); }
.jbottom-nav .tab:active { background: var(--state-hover-surface); }
.jbottom-nav .tab.is-active, .jbottom-nav .tab[aria-current="page"] { color: var(--brand); }
.jbottom-nav .tab .badge-host { position: relative; }
.jbottom-nav .tab .badge-host > .jbadge { position: absolute; top: -4px; right: -8px; }

/* =========================================================================
   MOBILE LIST ROW  —  .jmrow  (≥48px tap, leading/trailing, chevron, swipe)
   ========================================================================= */
.jmrow {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: var(--touch-comfortable); padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--outline);
  text-align: left; text-decoration: none; color: inherit; position: relative; overflow: hidden;
}
a.jmrow:active, button.jmrow:active { background: var(--state-hover-surface); }
.jmrow .lead { flex: none; display: inline-flex; color: var(--fg2); }
.jmrow .lead svg { width: var(--icon-md); height: var(--icon-md); }
.jmrow .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jmrow .primary { font: var(--w-medium) var(--fs-body)/1.3 var(--font-sans); color: var(--fg1); }
.jmrow .secondary { font-size: var(--fs-body-sm); color: var(--fg2); margin-top: 1px; }
.jmrow .trail { flex: none; margin-left: auto; color: var(--fg2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; }
.jmrow .chev { color: var(--fg3); display: inline-flex; } .jmrow .chev svg { width: var(--icon-sm); height: var(--icon-sm); }
/* swipe-revealed action (visual; behavior via JS) */
.jmrow-swipe { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.jmrow-swipe .act { display: grid; place-items: center; width: 72px; color: #fff; background: var(--error); font-size: var(--fs-body-sm); border: 0; cursor: pointer; }
.jmrow-swipe .act.neutral { background: var(--stone-600); }

/* =========================================================================
   SEGMENTED PAGE CONTROL DOTS  —  .jdots  (carousel/onboarding position)
   ========================================================================= */
.jdots { display: inline-flex; gap: 6px; align-items: center; }
.jdots > .dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--border-strong); transition: background var(--transition-base), width var(--transition-base); }
.jdots > .dot.is-active { background: var(--brand); width: 18px; }