/* SEIREN Desktop Phase 1 | macOS-inspired foundation, no widgets or app windows yet. */
/* The portal is fluid: only other SEIREN services keep a fixed canvas. */
#app-shell {
  background:#070c19!important;
  background-image:
    radial-gradient(ellipse 990px 650px at 78% 18%,rgba(96,112,178,.26),transparent 77%),
    radial-gradient(ellipse 780px 480px at 20% 84%,rgba(67,86,153,.21),transparent 77%),
    linear-gradient(123deg,#080d1c,#0c1630 48%,#070d1d 81%,#050b16)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  overflow:hidden!important;
}
#app-shell > .home-background{display:none!important;opacity:0!important}
#app-shell .desktop-wallpaper-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#app-shell .desktop-wallpaper-art::before{
  content:"";position:absolute;top:-390px;left:570px;
  width:1850px;height:1060px;transform:rotate(-16deg);border-radius:50%;
  border-top:2px solid rgba(196,198,246,.24);
  box-shadow:0 -30px 90px rgba(105,130,211,.13),inset 0 25px 70px rgba(140,121,208,.07);
  background:radial-gradient(ellipse at 50% 56%,rgba(128,138,190,.06),transparent 67%);
}
#app-shell .desktop-wallpaper-art::after{
  content:"";position:absolute;bottom:-480px;left:-175px;
  width:1630px;height:880px;transform:rotate(10deg);border-radius:50%;
  border-top:2px solid rgba(151,197,238,.17);
  box-shadow:0 -25px 110px rgba(84,125,219,.08);
}
#app-shell .home-shell {
  position:absolute!important;inset:0 auto auto 0!important;top:0!important;left:0!important;
  width:100%!important;height:100%!important;min-width:0!important;
  min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;display:block!important;
  box-sizing:border-box!important;background:transparent!important;isolation:isolate!important;
}
#app-shell .home-shell::before,#app-shell .home-shell::after{display:none!important}
#app-shell .home-header{
  position:absolute!important;left:0!important;top:0!important;z-index:10!important;
  width:100%!important;height:clamp(76px,12.4dvh,134px)!important;
  min-height:0!important;padding:0 clamp(18px,4vw,74px)!important;margin:0!important;box-sizing:border-box!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  border:0!important;background:linear-gradient(180deg,rgba(2,7,20,.32),transparent)!important;
}
#app-shell .home-header .home-logo{
  display:block!important;width:clamp(145px,14vw,255px)!important;
  max-width:255px!important;flex:0 1 auto!important;height:auto!important;
  margin:0!important;padding:0!important;transform:none!important;opacity:1!important;
}
#app-shell .home-header .home-logo:hover{opacity:.82!important;transform:none!important}
#app-shell .home-header .home-logo:focus-visible{outline:2px solid #b9dfff!important;outline-offset:5px!important}
#app-shell .home-header .home-logo-image{
  display:block!important;width:100%!important;max-width:255px!important;
  height:auto!important;max-height:112px!important;
  filter:drop-shadow(0 4px 9px rgba(0,5,22,.25))!important;
}
#app-shell #home-top{
  position:absolute!important;top:0!important;left:0!important;z-index:4!important;
  width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:visible!important;
}
/* Legacy live-data containers are preserved for the later user-configurable widget phase. */
#app-shell #home-top .summary-panel.home-summary-v2{display:none!important;visibility:hidden!important}
#app-shell #home-top .service-grid{
  position:absolute!important;top:auto!important;bottom:clamp(16px,2.5dvh,28px)!important;
  left:50%!important;right:auto!important;z-index:5!important;
  display:flex!important;flex-direction:row!important;
  justify-content:center!important;align-items:flex-end!important;
  width:max-content!important;min-width:0!important;max-width:none!important;
  --dock-icon-size:clamp(46px,min(5.3vw,8.5dvh),54px);
  --dock-item-width:calc(var(--dock-icon-size) + 10px);
  --dock-item-height:calc(var(--dock-icon-size) + 10px);
  height:auto!important;min-height:0!important;
  gap:8px!important;padding:8px 12px 9px!important;margin:0!important;
  box-sizing:border-box!important;overflow:visible!important;
  border:1px solid rgba(205,226,255,.30)!important;border-radius:30px!important;
  background:linear-gradient(155deg,rgba(107,118,164,.29),rgba(40,53,90,.56) 49%,rgba(19,30,59,.55))!important;
  box-shadow:0 23px 54px rgba(0,4,17,.47),inset 0 1px 0 rgba(246,250,255,.18),inset 0 -1px 0 rgba(187,207,249,.06)!important;
  backdrop-filter:blur(30px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(130%)!important;
  transform:translateX(-50%)!important;
}
#app-shell #home-top .service-grid::before,#app-shell #home-top .service-grid::after{content:none!important;display:none!important}
#app-shell #home-top .service-grid .service-card,
#app-shell #home-top .service-grid .service-card[aria-disabled="true"]{
  --dock-glow:rgba(165,193,250,.22);--dock-plate:rgba(101,137,190,.20);
  position:relative!important;display:flex!important;
  flex:0 0 var(--dock-item-width)!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:0!important;
  width:var(--dock-item-width)!important;min-width:var(--dock-item-width)!important;max-width:var(--dock-item-width)!important;
  height:var(--dock-item-height)!important;min-height:var(--dock-item-height)!important;max-height:var(--dock-item-height)!important;
  padding:4px 4px 2px!important;margin:0!important;
  border:0!important;border-radius:18px!important;
  background:transparent!important;background-color:transparent!important;background-image:none!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  overflow:visible!important;filter:none!important;cursor:pointer!important;
  transform:none!important;transform-origin:center bottom!important;
  transition:filter .20s ease!important;
}
#app-shell #home-top .service-grid .service-card:nth-of-type(1){--dock-glow:rgba(134,183,249,.28);--dock-plate:rgba(110,148,225,.24)}
#app-shell #home-top .service-grid .service-card:nth-of-type(2){--dock-glow:rgba(225,174,154,.24);--dock-plate:rgba(198,140,140,.19)}
#app-shell #home-top .service-grid .service-card:nth-of-type(3){--dock-glow:rgba(218,158,203,.25);--dock-plate:rgba(170,128,218,.21)}
#app-shell #home-top .service-grid .service-card:nth-of-type(4){--dock-glow:rgba(125,167,228,.28);--dock-plate:rgba(96,136,219,.23)}
#app-shell #home-top .service-grid .service-card:nth-of-type(5){--dock-glow:rgba(103,198,210,.24);--dock-plate:rgba(94,169,185,.23)}
#app-shell #home-top .service-grid .service-card:nth-of-type(6){--dock-glow:rgba(178,155,229,.25);--dock-plate:rgba(136,127,195,.22)}
#app-shell #home-top .service-grid .service-card:nth-of-type(7){--dock-glow:rgba(223,194,143,.23);--dock-plate:rgba(181,155,108,.18)}
#app-shell #home-top .service-grid .service-card:nth-of-type(8){--dock-glow:rgba(173,159,232,.26);--dock-plate:rgba(145,130,205,.22)}
#app-shell #home-top .service-grid .service-card::before,
#app-shell #home-top .service-grid .service-card::after{content:none!important;display:none!important}
#app-shell #home-top .service-grid .service-card .home-service-icon{
  position:relative!important;display:block!important;opacity:1!important;visibility:visible!important;
  flex:0 0 var(--dock-icon-size)!important;align-self:center!important;justify-self:center!important;
  grid-column:auto!important;grid-row:auto!important;
  width:var(--dock-icon-size)!important;height:var(--dock-icon-size)!important;
  min-width:var(--dock-icon-size)!important;min-height:var(--dock-icon-size)!important;
  max-width:var(--dock-icon-size)!important;max-height:var(--dock-icon-size)!important;
  box-sizing:border-box!important;padding:10px!important;margin:0!important;
  border:1px solid rgba(237,243,255,.16)!important;border-radius:18px!important;
  background:linear-gradient(155deg,rgba(176,188,232,.19),var(--dock-plate) 60%,rgba(32,49,88,.35))!important;
  box-shadow:inset 0 1px 0 rgba(245,249,255,.18),0 4px 13px var(--dock-glow),0 5px 13px rgba(0,7,20,.21)!important;
  filter:none!important;transform:none!important;overflow:visible!important;
  transition:transform .20s ease,box-shadow .20s ease!important;
}
#app-shell #home-top .service-grid .service-card .service-copy{
  position:relative!important;z-index:1!important;display:flex!important;flex:0 0 22px!important;
  grid-column:auto!important;grid-row:auto!important;
  flex-direction:row!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;min-height:22px!important;height:22px!important;
  padding:0!important;margin:0!important;text-align:center!important;
}
#app-shell #home-top .service-grid .service-card .service-name{
  display:block!important;color:#ecf0fc!important;
  font:600 13px/20px -apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif!important;
  letter-spacing:-.02em!important;text-shadow:0 1px 8px rgba(0,6,20,.65)!important;white-space:nowrap!important;
}
#app-shell #home-top .service-grid .service-card .service-subtitle,
#app-shell #home-top .service-grid .service-card .service-meta-hidden{display:none!important}
/* Subtle macOS-like feedback stays completely inside the glass Dock. */
#app-shell #home-top .service-grid .service-card:hover{
  transform:none!important;filter:brightness(1.055)!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
}
#app-shell #home-top .service-grid .service-card:hover .home-service-icon{
  transform:scale(1.045)!important;
  box-shadow:inset 0 1px 0 rgba(245,249,255,.20),0 5px 16px var(--dock-glow),0 5px 13px rgba(0,7,20,.21)!important;
}
/* Neighboring apps no longer jump or expand when an icon is hovered. */
#app-shell #home-top .service-grid .service-card:has(+ .service-card:hover),
#app-shell #home-top .service-grid .service-card:hover + .service-card{
  transform:none!important;
}
#app-shell #home-top .service-grid .service-card:focus-visible{
  outline:2px solid #b9d8ff!important;outline-offset:2px!important;
  transform:none!important;
}
#app-shell #home-top .service-grid .service-card:focus-visible .home-service-icon{
  transform:scale(1.045)!important;
}
@media(prefers-reduced-motion:reduce){
  #app-shell #home-top .service-grid .service-card,
  #app-shell #home-top .service-grid .service-card .home-service-icon{transition:none!important}
  #app-shell #home-top .service-grid .service-card:hover .home-service-icon,
  #app-shell #home-top .service-grid .service-card:focus-visible .home-service-icon{transform:none!important}
}