/* PLAT-0318 macOS-inspired service shell */
html:root{
  --daeng-window-max:1440px;
  --daeng-window-gutter:clamp(24px,4vw,48px);
  --daeng-window-radius:24px;
  --daeng-window-bg:rgba(248,250,251,.86);
  --daeng-window-line:rgba(255,255,255,.86);
  --daeng-window-shadow:0 32px 90px rgba(42,57,66,.22),0 3px 14px rgba(42,57,66,.12);
  --daeng-window-inset-block-start:0px;
  --daeng-window-inset-block-end:0px;
  --daeng-window-inset-block-total:0px;
  min-width:320px;
  min-height:100%;
  overflow-x:clip;
  background:
    radial-gradient(circle at 15% 4%,rgba(142,201,189,.58),transparent 29%),
    radial-gradient(circle at 88% 15%,rgba(157,181,234,.48),transparent 30%),
    linear-gradient(145deg,#dfe9e5 0%,#edf1f5 47%,#e7ebf3 100%);
  background-attachment:fixed;
}

html:root body{
  --daeng-window-border-block-total:2px;
  --daeng-window-content-block-size:calc(100dvh - var(--daeng-window-inset-block-total) - var(--daeng-window-border-block-total));
  box-sizing:border-box;
  color:var(--ink,#171a1f);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI","Noto Sans KR",sans-serif;
}

html:root body > :where(
  .phone,
  .admin-shell,
  .baduk-app,
  .calendar-app,
  .daengmarble-surface,
  .game-room,
  .messenger-app,
  .game-shell,
  .omok-app,
  .points-layout,
  .realty-app,
  .settings-shell,
  .splendor-surface,
  .treasure-app
){
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-width:0;
  margin-inline:0;
  box-shadow:none;
}

html:root body .dtn-bar{
  border-bottom:1px solid rgba(35,45,52,.09);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px rgba(255,255,255,.8);
}

html:root body :where(.dtn-portal,.dtn-agent,.dtn-icon){
  border-radius:12px;
}

html:root body .dtn-emoji-icon{
  display:grid;
  place-items:center;
  font-size:17px;
  line-height:1;
}

html:root body .dtn-bar.dtn-shrink .dtn-emoji-icon{font-size:14px}

@media(min-width:721px){
  html:root body{
    --daeng-window-inset-block-start:28px;
    --daeng-window-inset-block-end:28px;
    --daeng-window-inset-block-total:56px;
    display:block;
    width:min(var(--daeng-window-max),calc(100% - 2 * var(--daeng-window-gutter)));
    max-width:var(--daeng-window-max);
    min-height:calc(100vh - 56px);
    margin:28px auto;
    padding:0;
    border:1px solid var(--daeng-window-line);
    border-radius:var(--daeng-window-radius);
    background:var(--daeng-window-bg);
    box-shadow:var(--daeng-window-shadow);
    overflow-x:clip;
  }

  html:root body > :where(
    .phone,
    .admin-shell,
    .baduk-app,
    .calendar-app,
    .daengmarble-surface,
    .game-room,
    .messenger-app,
    .game-shell,
    .omok-app,
    .points-layout,
    .realty-app,
    .settings-shell,
    .splendor-surface,
    .treasure-app
  ){
    min-height:var(--daeng-window-content-block-size);
    border-radius:0;
  }

  html:root body > .phone > :where(#viewLogin,#viewSignup){
    width:min(100%,520px);
    margin-inline:auto;
  }
}

@media(max-width:720px){
  html:root body{
    --daeng-window-inset-block-start:8px;
    --daeng-window-inset-block-end:8px;
    --daeng-window-inset-block-total:16px;
    display:block;
    width:calc(100% - 16px);
    max-width:none;
    min-height:calc(100dvh - 16px);
    margin:8px;
    padding:0;
    border:1px solid var(--daeng-window-line);
    border-radius:18px;
    background:var(--daeng-window-bg);
    box-shadow:0 10px 30px rgba(42,57,66,.14),0 2px 8px rgba(42,57,66,.08);
    overflow-x:clip;
  }

  html:root body > :where(
    .phone,
    .admin-shell,
    .baduk-app,
    .calendar-app,
    .daengmarble-surface,
    .game-room,
    .messenger-app,
    .game-shell,
    .omok-app,
    .points-layout,
    .realty-app,
    .settings-shell,
    .splendor-surface,
    .treasure-app
  ){
    min-height:var(--daeng-window-content-block-size);
    border-radius:17px;
  }

  html:root body .dtn-bar{top:8px}
}

@media(min-width:400px) and (max-width:420px){
  html:root body{
    --daeng-window-inset-block-start:10px;
    --daeng-window-inset-block-end:10px;
    --daeng-window-inset-block-total:20px;
    width:calc(100% - 20px);
    min-height:calc(100dvh - 20px);
    margin:10px;
  }

  html:root body .dtn-bar{top:10px}
}

@media(min-width:421px) and (max-width:720px){
  html:root body{
    --daeng-window-inset-block-start:12px;
    --daeng-window-inset-block-end:12px;
    --daeng-window-inset-block-total:24px;
    width:calc(100% - 24px);
    min-height:calc(100dvh - 24px);
    margin:12px;
  }

  html:root body .dtn-bar{top:12px}
}

@media(prefers-reduced-motion:reduce){
  html:root body *,html:root body *::before,html:root body *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}