@media screen and (max-width:900px){
  .device-desktop{ display:none !important; }
  .device-mobile{ display:block !important; }

  /* back image */
  #backImage{  }
    #backImage .logoArea{ min-width:unset; }
    #backImage .logoArea:after{ font-size:3.2vw; margin-top:15px; }

  /* element */
  #elements{  }
    #elements > div{  }
    #elements > div:after{ position:fixed; font-size:5vw; font-size:20px; }

  /* specific */
  #keyring{ width:43%; left:31%; top:-5%; max-width:170px; }
    #keyring img.keyring.open{ display:block; }
    #keyring img.keyring.close{ display:none; }

  #diary{ width:42%; left:5%; bottom:30%; max-width:200px; }
    #diary .diary_text{ font-size:8vw; font-size:32px; }
  /* on */
  body.diaryOn #note{ left:20%; transform:translate(-50%, -50%) rotate(-2.7deg); width:170%;
    transition:top 300ms, left 300ms linear 900ms, width 300ms linear 900ms;
  }

  #mail{ width:55%; top:15%; right:0%; max-width:240px; }

  #camera{ left:80%; width:60%; bottom:18%; max-width:260px; }
  /* on */
  body.cameraOn #camera{
    width:95%; max-width:unset;
    transform:translate(-50%,50%) rotate(0deg) !important;
  }
    #camera .closeBtn{ top:-15% !important; right:5% !important; }

  #note{  }
    #note .closeBtn{ top:-10% !important; right:5% !important; }

  #mailing{ width:100%; padding:40px 20px; pointer-events:all; }
    #mailing #messageForm{ width:100%; padding-top:135%; margin:0 auto 80px; }
      #mailing #messageForm > img.envelope{  }
      #mailing #messageForm > img.photo{ width:65%; top:10%; left:-4%; }
      #mailing #messageForm > .postcard{ left:54%; width:60%; top:33%; transform:translateX(-50%) rotate(8deg); }
    #mailing .messageArea{ grid-template-columns:repeat(2, 1fr); }
      #mailing .messageArea > div{ padding:24px; }
        #mailing .messageArea > div p{ font-size:1.2rem; }

  #room{ overflow-x:scroll; overflow-y:hidden; pointer-events:none; background:none !important; background-color:#000 !important; }
  #room::-webkit-scrollbar{ display:none; }
  #room:before{ content:''; display:block; width:100vw; height:56.25vw; min-height:100dvh; min-width:177.78dvh;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
  }
    #room > .closeBtn{ position:fixed; }
    #room > .elements{ width:100vw; height:56.25vw; min-height:100dvh; min-width:177.78dvh;
      transform:none; top:0; left:0;
    }
      #room > .elements > span{  }
        #room > .elements > span img{ animation:elemHover infinite 800ms steps(1); }
        @keyframes elemHover{
          0%{ transform:rotate(1deg); }
          50%{ transform:rotate(0deg); }
          100%{ transform:rotate(1deg); }
        }
    #room > .pages{  }
      #room > .pages > div{ position:fixed; }
      #room > .pages .intro{ width:80%; text-align:center; }
        #room > .pages .intro img.frame{ display:none; }
        #room > .pages .intro img.profile{ position:unset; transform:none; width:20%; }
        #room > .pages .intro .closeBtn{ position:unset; transform:none; }
        #room > .pages .intro p{ position:unset; transform:none; width:100%; margin:20px 0; font-size:1.2rem; }
      #room > .pages > .phone{ width:72%; }
        #room > .pages > .phone > .closeBtn{ left:unset; right:0; top:-5%; }
        #room > .pages > .phone img.text{ right:unset; left:-10%; width:35%; }
      #room > .pages > :is(.diary,.specific):has(.inner){
        max-width:unset;
        width:100%; height:100%; max-width:unset !important;
        overflow-x:scroll;
      }
        #room > .pages > :is(.diary,.specific):has(.inner) > .inner{ position:relative; display:block; width:unset; height:100%; text-align:center;
          width:100vw;
          height:60.267vw;
          min-height:100dvh;
          min-width:165.929dvh;
          transform:scale(0.85);
        }
          #room > .pages > :is(.diary,.specific):has(.inner) > .inner .closeBtn,
          #room > .pages > :is(.diary,.specific):has(.inner) > .closeBtn{ top:3%; left:unset; right:3%; }
    #room > .member-list{ position:fixed; flex-direction:row; top:unset; bottom:2%; left:50%; right:unset; transform:translateX(-50%); }
      #room > .member-list > li{ width:48px; height:60px; }
        #room > .member-list > li img{  }
  /* room on */
  body.roomOn #note{ transform:translate(-50%,-50%) rotate(0) scale(5); transition:1500ms; transition-delay:1500ms; }
  body.roomOn.withDelay #room > .elements:after{
    content: '스크롤해서 방을 구경해 보세요!';
    display: block;
    position: fixed;
    z-index: 20;
    padding: 10px 12px;
    border-radius: 4px;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.75);
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6));
    backdrop-filter: blur(3px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    line-height: 1;
    white-space: nowrap;
    animation: blink 2000ms forwards 10 ease-in-out;
  }
  @keyframes blink{
    0%{ opacity:0; }
    50%{ opacity:1; }
    100%{ opacity:0; }
  }
  /* members */
  body.roomOn[data-member="chaei"] #room:before{ background-image:url('/img/room/chaei/background.webp'); }
    /* body.roomOn[data-member="chaei"] #room > .elements > span{  }
    body.roomOn[data-member="chaei"] #room > .elements > span.phone{ left:77%; top:80%; width:9%; }
    body.roomOn[data-member="chaei"] #room > .elements > span.diary{ left:59%; top:78%; width:13%; }
    body.roomOn[data-member="chaei"] #room > .elements > span.specific{ width:13%; left:68%; top:33%; } */

  body.roomOn[data-member="ayne"] #room:before{ background-image:url('/img/room/ayne/background.webp'); }
    /* body.roomOn[data-member="ayne"] #room > .elements > span{  }
    body.roomOn[data-member="ayne"] #room > .elements > span.phone{ left:69%; top:86%; width:11%; }
    body.roomOn[data-member="ayne"] #room > .elements > span.diary{ left:56%; top:83%; width:13%; }
    body.roomOn[data-member="ayne"] #room > .elements > span.specific{ width:14%; left:77%; top:33%; } */
    body.roomOn[data-member="ayne"] #room > .pages > .specific{ max-width:100%; }

  body.roomOn[data-member="jihyun"] #room:before{ background-image:url('/img/room/jihyun/background.webp'); }
    /* body.roomOn[data-member="jihyun"] #room > .elements > span{  }
    body.roomOn[data-member="jihyun"] #room > .elements > span.phone{ left:60%; top:87%; width:10%; }
    body.roomOn[data-member="jihyun"] #room > .elements > span.diary{ left:72%; top:83%; width:20%; }
    body.roomOn[data-member="jihyun"] #room > .elements > span.specific{ width:16%; left:49%; top:25%; } */
    body.roomOn[data-member="jihyun"] #room > .pages > .specific{ max-width:90%; }

  body.roomOn[data-member="liri"] #room:before{ background-image:url('/img/room/liri/background.webp'); }
    /* body.roomOn[data-member="liri"] #room > .elements > span{  }
    body.roomOn[data-member="liri"] #room > .elements > span.phone{ left:92%; top:57%; width:7%; }
    body.roomOn[data-member="liri"] #room > .elements > span.diary{ left:74%; top:54%; width:13%; }
    body.roomOn[data-member="liri"] #room > .elements > span.specific{ width:7%; left:113%; top:23%; } */
    body.roomOn[data-member="liri"] #room > .pages > .specific{ max-width:90%; }

  body.roomOn[data-member="liuyin"] #room:before{ background-image:url('/img/room/liuyin/background.webp'); }
    /* body.roomOn[data-member="liuyin"] #room > .elements > span{  }
    body.roomOn[data-member="liuyin"] #room > .elements > span.phone{ left:88%; top:84%; width:12%; }
    body.roomOn[data-member="liuyin"] #room > .elements > span.diary{ left:50%; top:77%; width:19%; }
    body.roomOn[data-member="liuyin"] #room > .elements > span.specific{ width:39%; left:50%; top:14%; } */
    body.roomOn[data-member="liuyin"] #room > .pages > .specific{ max-width:100%; }

  /* footer */
  #footer{ bottom:4%; }
    #footer .link-list{ gap:16px; padding:6px 32px; }
      #footer .link-list li a{ width:22px; }

  /* animation */
  /* keyring */
  @keyframes keyringUp {
    0%{ top:-5%; }
    30%{ top:0%; }
    100%{ top:-41%; }
  }
  @keyframes diaryUp {
    0%{ bottom:30%; }
    30%{ bottom:40%; }
    100%{ bottom:-57%; }
  }
  @keyframes mailUp {
    0%{ top:15%; }
    30%{ top:22%; }
    100%{ top:-43%; }
  }
  @keyframes cameraUp {
    0%{ bottom:18%; transform:translate(-50%,50%) rotate(15deg); }
    30%{ bottom:32%; transform:translate(-50%,50%) rotate(15deg); }
    100%{ bottom:-40%; transform:translate(-50%,50%) rotate(15deg); }
  }
  @keyframes logoUp{
    30%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(1.7); opacity:0; }
  }
  @keyframes footerUp {
    30%{ bottom:5%; transform:translateX(-50%); }
    100%{ bottom:-10%; transform:translateX(-50%); }
  }

  /* common */
  .closeBtn:not(.noImage){ width:32px; padding-top:32px; }
}