/* SIREN iPhone UI system · shared shell, controls and safe areas. */
/* SIREN mobile-native PWA shell. Kept separate from existing desktop and
   iframe service layouts. Only standalone narrow viewports opt in. */
html[data-siren-mobile="true"][data-siren-layout="fixed"]{
  --siren-mobile-dock-h:64px;
  --siren-mobile-bottom:env(safe-area-inset-bottom,0px);
  --siren-mobile-text:#1D1D1F;
  color-scheme:light;
  -webkit-text-size-adjust:100%;
  /* PC siren-fixed.css sets html+body overflow:hidden and height:100%.
     Explicitly restore the DOCUMENT scroller on phones.  A scrollable body
     nested inside an overflow-hidden html is not reliably swipe-scrollable
     in iOS standalone Safari. */
  height:auto!important;min-height:100%!important;
  overflow-x:clip!important;overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  background:var(--siren-ios-canvas)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] body{
  position:relative!important;
  height:auto!important;min-height:100dvh!important;
  /* Overflow-x:clip does not manufacture a second body scrolling box. */
  overflow-x:clip!important;overflow-y:visible!important;
  touch-action:auto!important;
  background:var(--siren-ios-canvas)!important;color:var(--siren-ios-text)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #viewport{
  position:relative!important;inset:auto!important;
  width:100%!important;height:auto!important;min-height:100dvh!important;
  overflow:visible!important;overscroll-behavior:auto!important;
  touch-action:auto!important;
  background:var(--siren-ios-canvas)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell{
  position:relative!important;left:auto!important;top:auto!important;
  display:block!important;width:100%!important;min-width:0!important;
  height:auto!important;min-height:100dvh!important;max-width:100%!important;
  zoom:1!important;transform:none!important;overflow:visible!important;
  background:var(--siren-ios-canvas)!important;color:var(--siren-ios-text)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell>.sidebar{
  display:none!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .right-shell{
  display:flex!important;flex-direction:column!important;
  grid-column:auto!important;grid-template-rows:none!important;
  width:100%!important;min-width:0!important;height:auto!important;min-height:100dvh!important;
  overflow:visible!important;background:var(--siren-ios-canvas)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar{
  position:relative!important;top:auto!important;
  z-index:10!important;display:flex!important;flex-wrap:wrap!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:65px!important;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px!important;
  margin:0!important;gap:9px!important;
  border-bottom:1px solid #E7E7EB!important;
  background:rgba(255,255,255,.98)!important;
  align-items:center!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar-left{
  display:flex!important;flex:1 1 auto!important;width:auto!important;
  min-width:0!important;align-items:center!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar h1{
  font-size:22px!important;line-height:1.25!important;font-weight:720!important;
  color:var(--siren-ios-text)!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar-right{
  display:flex!important;flex:0 1 auto!important;min-width:0!important;
  align-items:center!important;justify-content:flex-end!important;
  flex-wrap:wrap!important;gap:8px!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar .clock,
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar .home-button{
  display:none!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar .icon-button{
  width:40px!important;height:40px!important;min-width:40px!important;
  border-radius:12px!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .main-viewport{
  position:relative!important;display:block!important;flex:1 1 auto!important;
  width:100%!important;min-width:0!important;height:auto!important;
  min-height:0!important;max-height:none!important;overflow:visible!important;
  touch-action:auto!important;
  padding:16px 14px calc(105px + env(safe-area-inset-bottom,0px))!important;
  background:var(--siren-ios-canvas)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .content,
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell #page-content{
  width:100%!important;min-width:0!important;height:auto!important;
  min-height:0!important;max-height:none!important;overflow:visible!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .panel,
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .dashboard-card,
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .settings-card{
  width:100%!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;box-sizing:border-box!important;
  border:1px solid #ECECF0!important;
  border-radius:16px!important;
  background:var(--siren-ios-surface)!important;box-shadow:0 2px 8px rgba(25,29,38,.035)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] button,
html[data-siren-mobile="true"][data-siren-layout="fixed"] select,
html[data-siren-mobile="true"][data-siren-layout="fixed"] input,
html[data-siren-mobile="true"][data-siren-layout="fixed"] textarea{
  font-size:max(16px,1em);
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] button:focus-visible,
html[data-siren-mobile="true"][data-siren-layout="fixed"] a:focus-visible{
  outline:2px solid #007AFF!important;outline-offset:3px!important;
}
/* Floating Dock lives outside fixed service canvases. */
.siren-mobile-dock{display:none}


/* Shared iPhone design tokens and reusable mobile-only primitives.
   App dashboards can consume these without inventing service-specific chrome. */
html[data-siren-mobile="true"]{
  --siren-ios-canvas:#f5f5f7;
  --siren-ios-surface:#ffffff;
  --siren-ios-grouped:#f2f2f7;
  --siren-ios-divider:rgba(60,60,67,.14);
  --siren-ios-text:#1d1d1f;
  --siren-ios-muted:#81818b;
  --siren-ios-blue:#007aff;
  --siren-ios-blue-soft:#e9f3ff;
  --siren-ios-radius:17px;
  --siren-ios-radius-control:12px;
  --siren-ios-shadow:0 2px 12px rgba(20,28,42,.045);
  --siren-ios-gutter:14px;
  --siren-ios-header-height:66px;
  --siren-ios-dock-height:64px;
  /* iPhone uses a light glass Dock, distinct from the macOS desktop sidebar.
     Keep the variable names as aliases for existing mobile menu components. */
  --siren-ios-dock-sidebar-bg:#F7F9FC;
  --siren-ios-dock-sidebar-text:#3C424D;
  --siren-ios-dock-sidebar-selected:#007AFF;
  --siren-ios-dock-sidebar-selection-bg:rgba(0,122,255,.12);
  --siren-ios-safe-top:env(safe-area-inset-top,0px);
  --siren-ios-safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
/* The iOS status safe area and header must remain opaque while scrolling. */
html[data-siren-mobile="true"][data-siren-layout="fixed"]{
  background-color:#fff!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] body::before{
  content:"";position:fixed;inset:0 0 auto;
  height:var(--siren-ios-safe-top);background:#fff;
  z-index:20;pointer-events:none;
}
/* iOS 27 standalone PWA scroll-edge effect is rendered by the OS, not
   a CSS backdrop-filter. Unlike body::before, a real painted fixed element
   at y=0 can ask WebKit to composite an opaque status region.
   Keep it only 11px high: no header, financial row or control is covered. */
html[data-siren-mobile="true"][data-siren-layout="fixed"] body > .siren-ios-status-edge{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  display:block!important;width:100%!important;height:11px!important;
  z-index:1200!important;pointer-events:none!important;
  background:#fff!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar{
  background:#fff!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:none!important;box-shadow:none!important;
  border-bottom:1px solid var(--siren-ios-divider)!important;
  min-height:var(--siren-ios-header-height)!important;
  padding:calc(10px + var(--siren-ios-safe-top)) 16px 10px!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar-left{
  min-width:0!important;align-items:center!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar-left #pageTitle{
  display:none!important;
}
.siren-mobile-header-title{display:none}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .siren-mobile-header-title{
  display:flex!important;flex-direction:column;gap:3px;min-width:0;
  align-items:flex-start;justify-content:center;
}
.siren-mobile-header-title small{
  font-size:11px;line-height:1.2;font-weight:670;letter-spacing:.012em;
  color:var(--siren-ios-blue);
}
.siren-mobile-header-title strong{
  display:block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--siren-ios-text);font-size:22px;line-height:1.18;
  font-weight:740;letter-spacing:-.045em;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell :is(.panel,.dashboard-card,.settings-card){
  border-radius:var(--siren-ios-radius)!important;
  border-color:var(--siren-ios-divider)!important;
  box-shadow:var(--siren-ios-shadow)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .main-viewport{
  background:var(--siren-ios-canvas)!important;
  padding-inline:var(--siren-ios-gutter)!important;
  padding-bottom:calc(var(--siren-ios-dock-height) + 29px + var(--siren-ios-safe-bottom))!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell :is(button,input,select,textarea){
  -webkit-tap-highlight-color:transparent;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell .topbar .icon-button{
  min-width:44px!important;width:44px!important;height:44px!important;border-radius:var(--siren-ios-radius-control)!important;
}
html[data-siren-mobile="true"][data-siren-layout="fixed"] #app-shell :is(button,a,[role="button"]):focus-visible,
html[data-siren-mobile="true"] .siren-mobile-dock :is(a,button):focus-visible{
  outline:2px solid var(--siren-ios-blue)!important;outline-offset:3px!important;
}
html[data-siren-mobile="true"] .siren-ios-card{
  border:1px solid var(--siren-ios-divider);border-radius:var(--siren-ios-radius);
  padding:16px;background:var(--siren-ios-surface);box-shadow:var(--siren-ios-shadow);
}
html[data-siren-mobile="true"] .siren-ios-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:7px;
  border:1px solid var(--siren-ios-divider);border-radius:var(--siren-ios-radius-control);
  padding:10px 15px;background:var(--siren-ios-surface);color:var(--siren-ios-text);
  font-size:15px;font-weight:650;line-height:1.2;text-decoration:none;touch-action:manipulation;
}
html[data-siren-mobile="true"] .siren-ios-button--primary{
  background:var(--siren-ios-blue);color:#fff;border-color:var(--siren-ios-blue);
}
html[data-siren-mobile="true"] .siren-ios-field{
  width:100%;min-height:44px;border:1px solid var(--siren-ios-divider);
  border-radius:var(--siren-ios-radius-control);background:var(--siren-ios-surface);
  padding:10px 12px;color:var(--siren-ios-text);font-size:16px;
}
html[data-siren-mobile="true"] .siren-ios-section-title{
  margin:0;color:var(--siren-ios-text);font-size:18px;font-weight:730;letter-spacing:-.03em;
}

/* Floating iPhone Dock: horizontal page rail plus fixed Home. */
html[data-siren-mobile="true"] .siren-mobile-dock{
  position:fixed;z-index:900;left:50%;right:auto;
  bottom:calc(10px + var(--siren-ios-safe-bottom));
  transform:translateX(-50%);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,1fr);
  width:min(380px,calc(100vw - 32px));
  height:var(--siren-ios-dock-height);
  padding:8px 10px;gap:4px;box-sizing:border-box;
  border:1px solid rgba(103,123,153,.27);border-radius:25px;
  /* Actual see-through glass: low-opacity paint and restrained blur.
     The old .78 white layer + 18px blur hid almost all content beneath. */
  background:var(--siren-ios-dock-sidebar-bg);
  background:linear-gradient(145deg,rgba(255,255,255,.38) 0%,
    rgba(244,249,255,.22) 52%,rgba(255,255,255,.30) 100%);
  -webkit-backdrop-filter:blur(9px) saturate(150%) contrast(107%);
  backdrop-filter:blur(9px) saturate(150%) contrast(107%);
  box-shadow:0 10px 26px rgba(35,48,72,.16),0 2px 7px rgba(35,48,72,.08),
    inset 0 1px 0 rgba(255,255,255,.80);
}
/* Specular edge makes the floating glass legible even on the nearly-white
   canvas, without painting another opaque layer over the backdrop. */
html[data-siren-mobile="true"] .siren-mobile-dock::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.23),transparent 43%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(96,116,146,.10);
}
/* Four page slots form the swipe rail; Home stays in the fixed fifth slot. */
html[data-siren-mobile="true"] .siren-mobile-dock-scroll{
  position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 12px) / 4);gap:4px;
  min-width:0;height:44px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  overscroll-behavior-x:contain;touch-action:pan-x;
  -webkit-tap-highlight-color:transparent;
}
html[data-siren-mobile="true"] .siren-mobile-dock-scroll::-webkit-scrollbar{display:none}
html[data-siren-mobile="true"] .siren-mobile-dock-scroll>a{scroll-snap-align:start}
html[data-siren-mobile="true"] .siren-mobile-dock>.siren-mobile-dock-home-link{
  position:relative;z-index:1;
  border-left:1px solid rgba(103,123,153,.12);
}
html[data-siren-mobile="true"] .siren-mobile-dock>a,
html[data-siren-mobile="true"] .siren-mobile-dock-scroll>a{
  position:relative;display:flex;flex-direction:row;align-items:center;
  justify-content:center;gap:0;min-width:0;min-height:44px;height:44px;
  margin:0;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--siren-ios-dock-sidebar-text);text-decoration:none;
  font-size:10px;line-height:1.18;font-weight:620;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
html[data-siren-mobile="true"] .siren-mobile-dock-icon{
  display:grid;place-items:center;flex:0 0 44px;
  width:44px;height:44px;overflow:hidden;border-radius:12px;
  box-shadow:none;
}
html[data-siren-mobile="true"] .siren-mobile-dock-page{
  background:rgba(255,255,255,.08);
  border:1px solid transparent;box-sizing:border-box;
  color:var(--siren-ios-dock-sidebar-text);
}
html[data-siren-mobile="true"] .siren-mobile-dock-page svg{
  display:block;width:25px;height:25px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
html[data-siren-mobile="true"] .siren-mobile-dock-page svg .gear-hole{
  fill:var(--siren-ios-dock-sidebar-bg);stroke:none;
}
html[data-siren-mobile="true"] .siren-mobile-dock-home{
  color:var(--siren-ios-dock-sidebar-text);background:rgba(255,255,255,.08);
}
html[data-siren-mobile="true"] .siren-mobile-dock-more{
  color:var(--siren-ios-dock-sidebar-text);background:rgba(255,255,255,.08);
  border:1px solid transparent;box-sizing:border-box;
}
html[data-siren-mobile="true"] .siren-mobile-dock-home svg,
html[data-siren-mobile="true"] .siren-mobile-dock-more svg{
  width:25px;height:25px;stroke-width:1.8;
}
html[data-siren-mobile="true"] .siren-mobile-dock-home svg{
  fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;
}
/* PC-like icon-only sidebar Dock. All links/buttons already carry Korean
   aria-labels, so hiding captions does not remove accessible names. */
html[data-siren-mobile="true"] .siren-mobile-dock-label{
  display:none!important;
}
html[data-siren-mobile="true"] .siren-mobile-dock :is(a,button)[aria-current="page"] .siren-mobile-dock-icon,
html[data-siren-mobile="true"] .siren-mobile-dock button[aria-expanded="true"] .siren-mobile-dock-icon{
  outline:1px solid rgba(0,122,255,.18);
  outline-offset:0;background:var(--siren-ios-dock-sidebar-selection-bg);
  color:var(--siren-ios-dock-sidebar-selected);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 3px rgba(42,68,116,.09);
}
html[data-siren-mobile="true"] .siren-mobile-dock :is(a,button)[aria-current="page"]::after,
html[data-siren-mobile="true"] .siren-mobile-dock button[aria-expanded="true"]::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--siren-ios-dock-sidebar-selected);
}
.siren-mobile-dock :is(a,button):active{opacity:.72}
@media(prefers-reduced-motion:reduce){
  html[data-siren-mobile="true"] .siren-mobile-dock *{
    transition:none!important;animation:none!important;scroll-behavior:auto!important;
  }
}

@media(prefers-reduced-transparency:reduce){
  html[data-siren-mobile="true"] .siren-mobile-dock{
    /* Respect accessibility; this intentionally becomes opaque when the
       iPhone's Reduce Transparency setting is enabled. */
    background:#F7F9FC!important;background-image:none!important;
    border-color:rgba(126,143,170,.30)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
}

/* Short iOS document transitions. Same-origin Home <-> service navigation is
   a REAL document load; WebKit's view-transition preserves the outgoing
   frame instead of briefly flashing the app shell. Only mobile viewports
   participate; desktop windows and financial data are unchanged. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){
    animation:110ms ease-in both siren-ios-page-out;
  }
  ::view-transition-new(root){
    animation:160ms ease-out both siren-ios-page-in;
  }
}
@keyframes siren-ios-page-out{
  from{opacity:1}
  to{opacity:.68}
}
@keyframes siren-ios-page-in{
  from{opacity:.72}
  to{opacity:1}
}